/* What the home page and the ads page (/join) share: the waitlist form, the call-to-action
   button, the phone showing a planned week, and the sticky "Join the waitlist" button. */

.wl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 560px;
}
.wl .wl-fields {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
}
/* The postcode, folded away until the email has begun: no height, out of the tab order.
   Opening animates its row from nothing to its full height; the space above it is inside the
   fold (.wl-more-pad), so a closed form has no gap where it would be. */
.wl .wl-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
.wl.wl-open .wl-more {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.3s ease,
    visibility 0s;
}
.wl .wl-more-inner {
  min-height: 0;
  overflow: hidden;
}
.wl .wl-more-pad {
  padding-top: 10px;
}
.wl .wl-email,
.wl .wl-postcode {
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .wl .wl-more,
  .wl.wl-open .wl-more {
    transition: none;
  }
}
.wl input {
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 28px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
}
.wl button {
  flex: 1 1 100%;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 28px;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.wl button:disabled {
  opacity: 0.7;
  cursor: default;
}
.wl .wl-status {
  flex: 1 1 100%;
  margin: 0;
  min-height: 22px;
  font-size: 16px;
  font-weight: 700;
}
.wl .wl-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.wl .wl-note a {
  color: inherit;
}
.wl .wl-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wl .wl-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* On a photo or the ink colour. */
.wl.on-dark input {
  border: 2px solid #ffffff;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.wl.on-dark input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}
.wl.on-dark button {
  background: #f6f0df;
  color: #3d2bd4;
}
.wl.on-dark .wl-note {
  color: rgba(255, 255, 255, 0.9);
}
/* On paper. */
.wl.on-light input {
  border: 2px solid #3d2bd4;
  background: #fffdf6;
  color: #1e1838;
}
.wl.on-light input::placeholder {
  color: #4b4560;
}
.wl.on-light button {
  background: #3d2bd4;
  color: #ffffff;
}
.wl.on-light .wl-note,
.wl.on-light .wl-status {
  color: #4b4560;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 28px;
  background: #3d2bd4;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 4px 4px 0 #1e1838;
}
.cta:hover {
  color: #ffffff;
  background: #2a1c9e;
}
.cta.light {
  background: #f6f0df;
  color: #3d2bd4;
  box-shadow: none;
}
.cta.light:hover {
  color: #3d2bd4;
  background: #ffffff;
}

/* Shown whenever no waitlist form is on screen, so joining is always one tap away. */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 10;
  transform: translate(-50%, 120px);
  transition: transform 0.25s ease;
  box-shadow: 0 8px 24px rgba(30, 24, 56, 0.28);
}
.sticky-cta.show {
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* A phone showing a planned week, as the app draws it. */
.phone {
  width: 300px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 22px 16px 20px;
  border: 10px solid #1e1838;
  border-radius: 44px;
  background: #f6f0df;
  color: #1e1838;
  font-family: "DM Sans", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 8px 8px 0 rgba(30, 24, 56, 0.25);
}
.phone .ph-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #4b4560;
}
.phone .ph-stamp {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  color: #e0457f;
  border: 2.5px solid #e0457f;
  border-radius: 6px;
  padding: 1px 8px;
  transform: rotate(-8deg);
}
.phone .ph-title {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #3d2bd4;
}
.phone .ph-hero {
  border-radius: 16px;
  background: #3d2bd4;
  color: #ffffff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone .ph-hero b {
  font-size: 10px;
  letter-spacing: 1.2px;
}
.phone .ph-save {
  font-family: "Gochi Hand", cursive;
  font-size: 40px;
  line-height: 44px;
  color: #f6b8cd;
}
.phone .ph-hero span:last-child {
  font-size: 11px;
  line-height: 15px;
}
.phone .ph-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 2px solid #3d2bd4;
  border-radius: 14px;
  background: #fffdf6;
  box-shadow: 3px 3px 0 #3d2bd4;
}
.phone .ph-art {
  flex: none;
  width: 58px;
  height: 46px;
  border-radius: 10px;
  background: #ede6ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone .ph-card span {
  display: block;
}
.phone .ph-meta {
  font-size: 10px;
  font-weight: 700;
  color: #4b4560;
}
.phone .ph-dish {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 16px;
}
.phone .ph-why {
  font-family: "Gochi Hand", cursive;
  font-size: 14px;
  color: #3d2bd4;
}
.phone .ph-button {
  margin-top: 2px;
  min-height: 40px;
  border-radius: 20px;
  background: #3d2bd4;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-caption {
  margin: 10px 0 0;
  max-width: 300px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.dl {
  fill: #fffdf6;
  stroke: #3d2bd4;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dn {
  fill: none;
  stroke: #3d2bd4;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds {
  fill: #3d2bd4;
}

@media (max-width: 640px) {
  .nav-anchor {
    display: none;
  }
}

/* Movement (assets/motion.js). Each rule under html.js only applies once motion.js is running,
   so with JavaScript off, or with "reduce motion" on, nothing is ever hidden. */

/* Reveal on scroll: a short rise and fade, one after another inside a row (--rv-i). */
html.js .rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--rv-i, 0) * 90ms);
}
html.js .rv.in {
  opacity: 1;
  transform: none;
}

/* The phone builds its week once it's on screen: the heading, then the three dinners land one
   by one, then the list button, then the saving slides in (motion.js counts it up), and the
   SORTED stamp comes down last. */
html.js .phone .ph-top,
html.js .phone .ph-title,
html.js .phone .ph-hero,
html.js .phone .ph-card,
html.js .phone .ph-button {
  opacity: 0;
}
html.js .phone .ph-stamp {
  opacity: 0;
  transform: rotate(-8deg) scale(2.4);
}
html.js .phone.ph-go .ph-top,
html.js .phone.ph-go .ph-title,
html.js .phone.ph-go .ph-hero,
html.js .phone.ph-go .ph-card,
html.js .phone.ph-go .ph-button {
  animation: ph-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
html.js .phone.ph-go .ph-top {
  animation-delay: 0.05s;
}
html.js .phone.ph-go .ph-title {
  animation-delay: 0.15s;
}
html.js .phone.ph-go .ph-card:nth-of-type(1) {
  animation-delay: 0.3s;
}
html.js .phone.ph-go .ph-card:nth-of-type(2) {
  animation-delay: 0.45s;
}
html.js .phone.ph-go .ph-card:nth-of-type(3) {
  animation-delay: 0.6s;
}
html.js .phone.ph-go .ph-button {
  animation-delay: 0.8s;
}
html.js .phone.ph-go .ph-hero {
  animation-delay: 0.95s;
}
html.js .phone.ph-go .ph-stamp {
  animation: ph-stamp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s forwards;
}
@keyframes ph-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ph-stamp {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(2.4);
  }
  to {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}

/* The home page hero's recipe card draws itself, then the "on special" tag lands on it.
   The paths carry pathLength="1" so one dash length fits them all. */
html.js .draw .hw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s ease-out forwards;
}
html.js .draw .hw:nth-child(2) {
  animation-delay: 0.15s;
}
html.js .draw .hw:nth-child(3) {
  animation-delay: 0.3s;
}
html.js .draw .hw:nth-child(4) {
  animation-delay: 0.4s;
}
html.js .draw .hw:nth-child(5) {
  animation-delay: 0.5s;
}
html.js .draw .hw:nth-child(6) {
  animation-delay: 0.8s;
}
html.js .draw .tag {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: tag-land 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes tag-land {
  from {
    opacity: 0;
    transform: scale(1.8) rotate(6deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The produce photos drift a little slower than the page (--py from motion.js). */
html.js .photo > img,
html.js .hero > img {
  will-change: transform;
}

/* Buttons and links: a lift on hover, a press on tap. */
.cta,
.wl button {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
.cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1e1838;
}
.cta:active,
.wl button:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #1e1838;
  transition-duration: 0.06s;
}
.cta.light:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 24, 56, 0.25);
}
.cta.light:active {
  transform: none;
  box-shadow: none;
}
.sticky-cta:hover {
  transform: translate(-50%, -2px);
}
.sticky-cta:active {
  transform: translate(-50%, 1px);
}
.wl button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 24, 56, 0.25);
}
.wl input {
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}
.wl.on-dark input:focus {
  background: rgba(255, 255, 255, 0.2);
}
.wl.on-light input:focus {
  background: #ffffff;
}
.nav-anchor {
  position: relative;
}
.nav-anchor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-anchor:hover::after,
.nav-anchor:focus-visible::after {
  transform: scaleX(1);
}
details > p {
  animation: faq-open 0.3s ease;
}
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Joining: the form gives a small nod and a tick draws beside the message (waitlist.js adds
   wl-done; typing again takes it off). */
.wl.wl-done {
  animation: wl-nod 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wl.wl-done .wl-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.wl.wl-done .wl-status::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5 10.5 15.5 16.5 9'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5 10.5 15.5 16.5 9'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  animation: wl-tick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes wl-nod {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes wl-tick {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .wl button,
  .wl input,
  .nav-anchor::after {
    transition: none;
  }
  .cta:hover,
  .cta:active,
  .wl button:hover:not(:disabled),
  .wl button:active:not(:disabled) {
    transform: none;
  }
  .sticky-cta:hover,
  .sticky-cta:active {
    transform: translate(-50%, 0);
  }
  details > p,
  .wl.wl-done,
  .wl.wl-done .wl-status::before {
    animation: none;
  }
}