/* ============================================================================
   Vegtopia — transcribed from Figma "Daily Hero 6 / Arkkhe" (Aura ALT06).
   The Figma file defines no variables, so this token block is derived from the
   raw hexes in the design context. Every value below comes from the file.
   ============================================================================ */

:root {
  /* Colour ---------------------------------------------------------------- */
  --teal:        #009ca6;   /* hero ground */
  --teal-deep:   #007f88;   /* derived: gradient foot, not in the file */
  --price:       #05abb5;
  --cream:       #fefff0;   /* display type */
  --gold:        #ffd689;   /* the one accent — "Not", active nav pill */
  --gold-soft:   rgba(255, 214, 137, 0.56);
  --ink:         #000;
  --grey:        #5f5f5f;   /* card description */
  --white:       #fff;

  --tint-mint:   rgba(145, 255, 242, 0.40);
  --tint-pink:   rgba(255, 145, 240, 0.40);
  --tint-lemon:  rgba(255, 255, 145, 0.40);
  --hairline:    rgba(255, 255, 255, 0.20);

  /* Type ------------------------------------------------------------------ */
  /* ⚠️ The file specifies "Thunderhouse Pro" for the display — a paid licence
     we do not hold. Anton is the closest free condensed poster face; it has
     the proportions but not the letterpress speckle. See README. */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body:    "Prompt", system-ui, sans-serif;
  --font-brand:   "Quicksand", system-ui, sans-serif;

  /* Space — 8pt scale ------------------------------------------------------ */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;

  /* Radii ------------------------------------------------------------------ */
  --r-card: 28px;
  --r-shot: 24px;
  --r-pill: 999px;

  /* Motion — one curve, two bands ------------------------------------------ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ui: .35s;
  --dur-in: 1.1s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: var(--s2) var(--s3);
  border-radius: 0 0 var(--s2) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ── hero shell ─────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--s3) clamp(16px, 1.9vw, 27px) var(--s3);
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(0,156,166,0) 55%, rgba(0,127,136,.55) 100%),
    url("assets/img/hero-bg.webp") 56% top / cover no-repeat,
    var(--teal);
}

/* ── nav ────────────────────────────────────────────────────────────────── */

.nav {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
}

.brand { display: flex; align-items: center; gap: var(--s2); }
.brand__mark {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--white);
  border-radius: 11.3px 5px 11.3px 11.3px;
}
.brand__mark img { width: 15px; height: 15px; }
.brand__word {
  font-family: var(--font-brand); font-weight: 700;
  font-size: 19.8px; letter-spacing: -1.58px; color: var(--white);
}

.pills {
  display: flex; align-items: center;
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 4px;
}
.pill {
  display: grid; place-items: center;
  padding: 20px; border-radius: var(--r-pill);
  font-size: 14px; color: var(--ink); white-space: nowrap;
  transition: background var(--dur-ui) var(--ease);
}
.pill:hover { background: rgba(0, 0, 0, .06); }
.pill.is-active { background: var(--gold-soft); font-weight: 600; }
.pill--icon { padding: 20px 20px; height: 30px; }

.nav__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }

.cart {
  position: relative;
  width: 58px; height: 58px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--white);
  transition: transform var(--dur-ui) var(--ease);
}
.cart:hover { transform: translateY(-2px); }
.cart__dot {
  position: absolute; top: 4px; right: 4px;
  width: 12.6px; height: 12.6px; border-radius: 50%;
  background: #ff4d4d; border: 2px solid var(--white);
}

.account {
  display: flex; align-items: center; gap: var(--s1);
  height: 58px; padding-right: 14px;
  background: var(--white); border-radius: var(--r-pill);
}
.account__face {
  width: 58px; height: 58px; border-radius: 50%;
  border: 3px solid var(--white); object-fit: cover;
}

/* ── stage ──────────────────────────────────────────────────────────────── */

.stage {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  align-items: end;
  gap: var(--s6);
  padding-top: clamp(24px, 6vh, 72px);
}

.copy { position: relative; padding-bottom: var(--s2); align-self: stretch;
         display: flex; flex-direction: column; justify-content: flex-end; }

/* ── display type ───────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-left: 24px;
}
.display__row { display: flex; align-items: baseline; gap: .14em; }
.display__row--two { margin-left: clamp(44px, 16vw, 230px); }
.display__word {
  font-size: clamp(52px, 12.7vw, 182px);
  color: var(--cream);
  display: inline-block;
  transform: scaleX(.74);          /* Anton -> Thunderhouse Pro width ratio */
  transform-origin: left bottom;
  margin-right: -.24em;            /* reclaim the space the squeeze leaves */
}
.display__word--gold { color: var(--gold); }
.display__word--big { font-size: clamp(70px, 17.2vw, 247px); }

/* ── seal ───────────────────────────────────────────────────────────────── */

.seal {
  position: absolute;
  left: 0; top: 25%;
  width: clamp(140px, 17.8vw, 256px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  pointer-events: none;
}
.seal > * { grid-area: 1 / 1; }
.seal__star--outer { width: 100%; transform: rotate(5.42deg); }
.seal__dot {
  position: absolute; width: 2.05%; aspect-ratio: 1;
  left: 49%; top: 20.8%;                       /* file: 125.61 / 53.31 of 256.48 */
  transform-origin: 50% 140%;
}
.seal__dot--b { top: 77.2%; transform-origin: 50% -40%; }
.seal__star--inner { width: 92%; }
.seal__type { width: 100%; height: 100%; }
.seal__type text {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; fill: var(--cream); text-transform: uppercase;
}
.seal__leaf { width: 26%; }

/* Motion transcribed from the Animation page, Component 1 (2 variants):
   scalloped ring 5.42deg -> 110.11deg · dots orbit -90deg · leaf -30deg. */
@media (prefers-reduced-motion: no-preference) {
  .seal__star--outer { animation: ringTurn 9s var(--ease) infinite alternate; }
  .seal__dot         { animation: dotOrbit 9s var(--ease) infinite alternate; }
  .seal__leaf        { animation: leafTilt 9s var(--ease) infinite alternate; }
  .seal__type        { animation: spin 40s linear infinite; }
}
@keyframes ringTurn { from { transform: rotate(5.42deg); } to { transform: rotate(110.11deg); } }
@keyframes dotOrbit { from { transform: rotate(0deg);    } to { transform: rotate(-90deg);   } }
@keyframes leafTilt { from { transform: rotate(0deg);    } to { transform: rotate(-30deg);   } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── lede + actions ─────────────────────────────────────────────────────── */

.lede {
  max-width: 460px; margin-left: 146px;
  font-size: 18px; line-height: 1.4; color: var(--white);
}
.lede b { font-weight: 700; }

.actions { display: flex; align-items: center; margin: var(--s4) 0 0 146px; }
.btn {
  height: 69.8px; padding: 0 var(--s4);
  background: var(--ink); color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 20px; letter-spacing: -.4px;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.btn:active { transform: scale(.97); }
.btn--round {
  width: 69.8px; padding: 0; margin-left: -14px;
  background: var(--white); display: grid; place-items: center;
}

/* ── product rail ───────────────────────────────────────────────────────── */

.rail { position: relative; padding-bottom: var(--s2); }

.rail__nav {
  position: absolute; top: -58px; right: 0;
  display: flex; gap: 9px;
  z-index: 4;
}
.rail__btn {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--white); opacity: .4;
  display: grid; place-items: center;
  transition: opacity var(--dur-ui) var(--ease);
}
.rail__btn:hover { opacity: 1; }
.rail__btn--next img { transform: rotate(180deg); }

.cards {
  list-style: none;
  display: flex; align-items: flex-end; gap: var(--s1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s1);
  scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 201px;
  scroll-snap-align: start;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-card);
  padding: 4px 4px var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: transform var(--dur-ui) var(--ease);
}
.card:hover { transform: translateY(-4px); }
.card--sm { flex-basis: 201px; }
.card--xs { flex-basis: 166px; border-radius: 23px; padding: 3.3px 3.3px 19.8px; gap: 19.8px; }

.card__shot {
  position: relative;
  height: 119px; border-radius: var(--r-shot);
}
.card--xs .card__shot { height: 98px; border-radius: 19.8px; }
.card__shot--mint  { background: var(--tint-mint); }
.card__shot--pink  { background: var(--tint-pink); }
.card__shot--lemon { background: var(--tint-lemon); }
.card__shot > img {
  position: absolute;
  left: 50%; bottom: 0;
  width: 103%; height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.card__add {
  position: absolute; right: var(--s1); bottom: var(--s1);
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--white); display: grid; place-items: center;
}

.card__text { padding: 0 12px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.card__name { font-size: 18px; font-weight: 600; letter-spacing: -.18px; }
.card--xs .card__name { font-size: 14.9px; }
.card__desc { font-size: 14px; color: var(--grey); letter-spacing: -.14px; }
.card__price {
  font-size: 18px; font-weight: 600; text-align: center;
  color: var(--price); letter-spacing: -.18px;
}

/* ── social rail + scroller ─────────────────────────────────────────────── */

.social {
  position: absolute; right: clamp(16px, 1.9vw, 27px); top: 18.8%;  /* file: y=152 of 810 */
  list-style: none;
  display: flex; flex-direction: column; gap: var(--s4);
  z-index: 3;
}
.social a {
  width: 47px; height: 47px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform var(--dur-ui) var(--ease);
}
.social a:hover { transform: translateY(-2px); }
.social li:first-child a {
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
.social li:first-child img { width: 15px; height: 15px; }
.social li + li a { overflow: visible; }
.social li + li img {
  width: 98px; height: 98px; max-width: none;
  margin: -10.4px 0 0 -10.4px;   /* ring sits at 10.4..57.6 in the 98px canvas */
  pointer-events: none;
}

.scroller {
  position: absolute; left: 0; bottom: var(--s3);
  width: 69.8px; height: 69.8px; border-radius: var(--r-pill);
  border: 2px solid var(--hairline);
  display: grid; place-items: center;
  transition: background var(--dur-ui) var(--ease);
}
.scroller:hover { background: rgba(255, 255, 255, .12); }
.scroller img { width: 32px; height: 32px; transform: rotate(180deg); }

/* ── reveal ─────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-in) var(--ease) var(--d, 0s),
              transform var(--dur-in) var(--ease) var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── responsive — the Figma file is one width; this part is ours ────────── */

@media (max-width: 1180px) {
  .stage { grid-template-columns: 1fr; align-items: start; gap: var(--s4); }
  .social { position: static; flex-direction: row; margin: var(--s3) 0 0 24px; }
  .scroller { display: none; }
  .rail__nav { top: -52px; }
}

@media (max-width: 1180px) {
  /* Grid children must be allowed to shrink or the card rail forces the page wide. */
  .rail, .copy { min-width: 0; }
}

@media (max-width: 860px) {
  .nav { grid-template-columns: auto 1fr; row-gap: var(--s2); }
  .pills { order: 3; grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { padding: 14px 18px; }
  .display, .lede, .actions, .social { margin-left: 0; }
  .display__row--two { margin-left: 0; }
  .hero { padding-inline: var(--s2); }
  .lede { max-width: 100%; }

  /* The file has no mobile layout — this part is ours. The seal stops being an
     overlay and becomes an inline mark, so it cannot land on the paragraph. */
  .seal {
    position: static;
    width: 132px;
    margin: var(--s3) 0 var(--s2);
  }
  .copy { justify-content: flex-start; }
  .stage { padding-top: var(--s3); }
  .cards { padding-inline: 2px; }
  .rail__nav { position: static; justify-content: flex-end; margin-bottom: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================================
   INTERACTION LAYER — the Figma file is a static frame, so all of this is ours.
   ============================================================================ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Parallax — the script only ever sets --px/--py; with reduced motion, or on a
   touch device, they stay unset and this resolves to 0. */
.hero { background-position:
  0 0,
  calc(56% + var(--px, 0px)) calc(0px + var(--py, 0px)),
  0 0; }

/* Search ------------------------------------------------------------------- */
.searchbox {
  grid-column: 2; justify-self: center;
  margin-top: var(--s1);
  background: var(--white); border-radius: var(--r-pill);
  padding: 6px 8px 6px 22px; width: min(420px, 90vw);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.searchbox[hidden] { display: none; }
.searchbox input {
  width: 100%; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; color: var(--ink); padding: 10px 0;
}
.searchbox input::placeholder { color: #9aa0a6; }

/* Cart count --------------------------------------------------------------- */
.cart__dot {
  position: absolute; top: 2px; right: 2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: #ff4d4d; border: 2px solid var(--white);
  color: var(--white); font-size: 11px; font-weight: 600;
  line-height: 16px; text-align: center;
}
.cart__dot[hidden] { display: none; }

@keyframes bump { 0%,100% { transform: none; } 40% { transform: scale(1.14); } }
.cart.is-bumped { animation: bump .42s var(--ease); }

/* Carousel ----------------------------------------------------------------- */
.cards--cycling { transition: transform .42s var(--ease); }
.cards--instant  { transition: none; }
.cards { cursor: grab; }
.cards:active { cursor: grabbing; }
.cards.was-dragged .card { pointer-events: none; }

/* A dragged rail should not fight the browser's own snap. */
@media (pointer: fine) { .cards { scroll-snap-type: none; } }

/* Buttons that now actually do something deserve a press state. */
.card__add { transition: transform var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease); }
.card__add:hover { background: var(--gold); }
.card__add:active { transform: scale(.9); }
.rail__btn:not(:disabled):active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .cart.is-bumped { animation: none; }
}

/* ============================================================================
   THE FALLING STACK
   The Figma hero is a video layer the MCP cannot export, so the sandwich is
   sliced into six bands that drop in bottom-first and assemble.
   ============================================================================ */

.hero { background:
  linear-gradient(180deg, rgba(0,156,166,0) 55%, rgba(0,127,136,.55) 100%),
  url("assets/img/room.webp") center top / cover no-repeat,
  var(--teal); }

.stack {
  position: absolute;
  top: 2%;
  right: clamp(16px, 9vw, 150px);
  width: clamp(190px, 26vw, 400px);
  aspect-ratio: 760 / 1219;
  z-index: 1;
  pointer-events: none;
  transform: translate(var(--px, 0px), var(--py, 0px));
  filter: drop-shadow(0 22px 30px rgba(0, 60, 66, .30));
}
@media (max-width: 1180px) { .stack { opacity: .35; right: -4%; } }
@media (max-width: 860px)  { .stack { display: none; } }
.stack__layer {
  position: absolute;
  left: 0; width: 100%; height: auto;
  top: calc(var(--i) * (100% / 6));   /* six equal bands */
  margin-top: -0.5px;                 /* close sub-pixel gaps between bands */
}

/* Bottom band lands first, so the sandwich builds upward. */
@media (prefers-reduced-motion: no-preference) {
  .stack__layer {
    opacity: 0;
    animation: drop .9s cubic-bezier(.22, 1.4, .36, 1) forwards;
    animation-delay: calc((5 - var(--i)) * .11s + .15s);
  }
  .stack.is-settled .stack__layer {
    animation: float 6s var(--ease) infinite alternate;
    animation-delay: calc(var(--i) * .12s);
    opacity: 1;
  }
}

@keyframes drop {
  0%   { opacity: 0; transform: translateY(-118vh) rotate(-3deg); }
  62%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes float {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}

/* Cards settle in the same language: drop, overshoot, land. */
@media (prefers-reduced-motion: no-preference) {
  .card { opacity: 0; }
  .card.is-in {
    opacity: 1;
    animation: cardDrop .8s cubic-bezier(.22, 1.3, .36, 1) both;
  }
  .card.is-in .card__shot > img {
    animation: shotDrop .9s cubic-bezier(.22, 1.4, .36, 1) .12s both;
  }
}
@keyframes cardDrop {
  from { transform: translateY(46px) scale(.94); }
  to   { transform: none; }
}
@keyframes shotDrop {
  0%   { transform: translateX(-50%) translateY(-190px); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* The reveal transition must not fight the drop animation. */
.card[data-reveal] { transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .stack__layer, .card, .card.is-in, .card.is-in .card__shot > img {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .card.is-in .card__shot > img { transform: translateX(-50%) !important; }
}

/* ============================================================================
   ENTRANCE — transcribed from the Animation page's component variants.
   Component 3 (nav):   pill 74px -> 511px · logo from -320 · cart -220 · avatar -320
   Component 2 (cards): art +175px · text +90px · price +130px, all sliding up
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* --- nav pill expands from a small capsule --- */
  .pills {
    overflow: hidden;
    width: 74px;
    animation: navOpen .95s cubic-bezier(.22, 1, .28, 1) .25s forwards;
  }
  .pills > * {
    opacity: 0;
    animation: navItem .5s var(--ease) forwards;
    animation-delay: calc(.55s + var(--n, 0) * .055s);
  }

  /* --- the fixed furniture drops in, per the variant offsets --- */
  .brand    { animation: dropFrom320 .9s cubic-bezier(.22, 1.1, .3, 1) .1s both; }
  .account  { animation: dropFrom320 .9s cubic-bezier(.22, 1.1, .3, 1) .22s both; }
  .cart     { animation: dropFrom220 .9s cubic-bezier(.22, 1.1, .3, 1) .16s both; }

  /* --- card contents slide UP into place (variant B sits them lower) --- */
  .card.is-in .card__shot > img { animation: artUp   .95s var(--ease) .1s both; }
  .card.is-in .card__text       { animation: textUp  .8s  var(--ease) .22s both; }
  .card.is-in .card__price      { animation: priceUp .8s  var(--ease) .3s both; }
}

@keyframes navOpen  { to { width: var(--navw, 511px); } }
@keyframes navItem  { from { opacity: 0; transform: translateY(6px); }
                      to   { opacity: 1; transform: none; } }
@keyframes dropFrom320 { from { opacity: 0; transform: translateY(-320px); }
                         to   { opacity: 1; transform: none; } }
@keyframes dropFrom220 { from { opacity: 0; transform: translateY(-220px); }
                         to   { opacity: 1; transform: none; } }

/* Figma variant B displaces card content downward; it animates back up. */
@keyframes artUp   { from { opacity: 0; transform: translateX(-50%) translateY(175px); }
                     to   { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes textUp  { from { opacity: 0; transform: translateY(90px); }
                     to   { opacity: 1; transform: none; } }
@keyframes priceUp { from { opacity: 0; transform: translateY(130px); }
                     to   { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pills { width: auto; animation: none; }
  .pills > *, .brand, .account, .cart,
  .card.is-in .card__shot > img, .card.is-in .card__text, .card.is-in .card__price {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .card.is-in .card__shot > img { transform: translateX(-50%) !important; }
}