/* Home. Shape from the Yolé reference: one full-bleed film hero with two
   words flanking the real pack, then airy bands with wave edges, white
   product cards, a big photo, a statement, a second film, proof, contact.
   Patterns: ux-patterns landing-page-skeleton, perfect-card, card-hover-anatomy,
   form-field-states. Motion per the animate skill: entrances ease out, the
   pack sways on an ease, nothing scrubbed. */

/* ----------------------------------------------------------------- hero --- */
.hero-stage{position:relative;min-height:min(88svh,820px);display:grid;align-items:end;background:linear-gradient(135deg,#7d1fd6,#5a0ea8);color:var(--cream);overflow:hidden;isolation:isolate}
.swirl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.25);transform-origin:50% 25%;z-index:0;filter:saturate(1.2) contrast(1.05);opacity:0;transition:opacity 1.2s var(--ease-out)}
.hero-film.is-on{opacity:1}
.film-grade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(90,14,168,.55),rgba(125,31,214,.25) 45%,rgba(90,14,168,.7));mix-blend-mode:multiply;pointer-events:none}
.film-grade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(40,0,70,.35))}
.drips{position:absolute;left:0;right:0;top:0;width:100%;height:clamp(140px,22vh,320px);z-index:1;pointer-events:none}
.js:not(.reduced) .drip{transform-origin:50% 0;animation:drip-grow 9s var(--ease-in-out) infinite alternate}
.js:not(.reduced) .d2{animation-duration:12s;animation-delay:-4s}
@keyframes drip-grow{from{transform:scaleY(.82)}to{transform:scaleY(1.06)}}
.js:not(.reduced) .drop{animation:drop-fall 5.5s ease-in infinite}
.js:not(.reduced) .p2{animation-delay:1.8s;animation-duration:6.5s}.js:not(.reduced) .p3{animation-delay:3.6s;animation-duration:7s}
@keyframes drop-fall{0%,55%{transform:translateY(0);opacity:1}100%{transform:translateY(420px);opacity:0}}
.stage-floor{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.18) 40%,rgba(255,255,255,.32));pointer-events:none}
.stage-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto auto;align-items:end;column-gap:clamp(8px,1.5vw,24px);padding-block:clamp(72px,10vh,110px) clamp(40px,7vh,72px)}
.stage-word{font-family:var(--font-display);font-size:clamp(44px,5vw,92px);min-width:0;line-height:.9;text-transform:uppercase;letter-spacing:.02em;color:var(--cream);text-shadow:0 8px 30px rgba(40,0,70,.35);margin:0;align-self:end;padding-bottom:clamp(70px,12vw,190px)}
.stage-word-l{grid-column:1;grid-row:1;justify-self:end;text-align:right}
.stage-word-r{grid-column:3;grid-row:1;justify-self:start}
.stage-packs{grid-column:2;grid-row:1;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;width:clamp(320px,50vw,740px)}
.side-pack{width:38%;margin-bottom:2%;filter:drop-shadow(0 16px 14px rgba(53,4,87,.22));position:relative;z-index:1}
.side-pack-l{margin-right:-9%}.side-pack-r{margin-left:-9%}
.film-pack{position:relative;z-index:2;width:52%;aspect-ratio:1;display:grid;place-items:center;cursor:grab}
.film-pack:active{cursor:grabbing}
.pack-canvas{position:absolute;inset:-14%;width:128%;height:128%;touch-action:pan-y}
.pack-poster{grid-area:1/1;width:100%;filter:drop-shadow(0 22px 18px rgba(53,4,87,.3))}
.webgl .pack-poster{visibility:hidden}
html:not(.webgl) .pack-canvas{display:none}
.stage-fruit{position:absolute;bottom:-4%;width:22%;z-index:3;pointer-events:none;}
.stage-fruit-l{left:-10%}.stage-fruit-r{right:-12%;width:26%}
.stage-line{grid-column:1/-1;grid-row:2;justify-self:center;text-align:center;font-size:clamp(17px,1.5vw,21px);max-width:46ch;margin-top:clamp(20px,3vh,36px);color:var(--cream)}
.stage-ctas{grid-column:1/-1;grid-row:3;justify-self:center;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.stage-ctas .pill{padding:14px 26px;font-size:16px}
.stage-ctas .pill-cta{background:var(--sun);color:var(--acai);border-color:var(--sun)}
.stage-ctas .pill-outline{color:var(--cream);border-color:rgba(255,255,255,.6)}
.stage-ctas .pill-outline:hover{background:rgba(255,255,255,.15)}
@media (max-width:900px){
  .hero-stage{align-items:start}
  .stage-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;padding-top:84px;row-gap:4px}
  .stage-word{padding-bottom:0;align-self:auto}
  .stage-word-l,.stage-word-r{grid-column:1;justify-self:center;text-align:center;font-size:clamp(52px,16vw,88px)}
  .stage-word-l{grid-row:1}.stage-packs{grid-column:1;grid-row:2;width:min(88vw,420px);justify-self:center;margin-block:8px}.stage-word-r{grid-row:3}
  .stage-line{grid-row:4;font-size:16px}.stage-ctas{grid-row:5}
  .stage-ctas .pill{width:100%;max-width:340px}
}

/* ------------------------------------------------------------- sections --- */
.sec-head{display:grid;gap:10px;max-width:760px;margin-bottom:var(--space-4)}
.sec-head h2{font-size:var(--display-section);color:var(--acai)}
.sec-head-row{display:flex;justify-content:space-between;align-items:end;gap:var(--space-3);max-width:none;flex-wrap:wrap}
.lede{font-size:19px;max-width:var(--measure)}
.fine{font-size:var(--text-small);color:var(--muted);max-width:var(--measure)}
.ctas{display:flex;flex-wrap:wrap;gap:10px}

/* range: lilac band, white cards in a rail */
.range{background:var(--lilac);padding-block:var(--space-5) var(--space-5);position:relative;z-index:2}
.rail-wrap{position:relative}
.rail{list-style:none;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:8px 20px}
.rail::-webkit-scrollbar{display:none}
.rail li{scroll-snap-align:start}
.pcard{display:grid;justify-items:center;gap:6px;padding:26px 18px 22px;border-radius:var(--radius-card);background:var(--paper);box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);height:100%;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.pcard img{width:78%;margin-bottom:8px;transition:transform .35s var(--ease-out)}
.pcard-name{font-family:var(--font-display);font-size:var(--display-card);color:var(--acai);text-align:center;line-height:1.05}
.pcard-kind{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
@media (hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}.pcard:hover img{transform:scale(1.06)}}
.rail-arrow{position:absolute;top:40%;z-index:3;width:48px;height:48px;border-radius:50%;border:0;background:var(--paper);box-shadow:var(--shadow-card);font-size:28px;line-height:1;cursor:pointer;color:var(--acai);display:grid;place-items:center}
.rail-prev{left:calc(var(--gutter) - 24px)}.rail-next{right:calc(var(--gutter) - 24px)}
@media (max-width:900px){.rail-arrow{display:none}.rail{grid-auto-columns:minmax(200px,58vw)}}
.proof{list-style:none;margin:var(--space-4) auto 0;padding-inline:var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proof li{display:flex;align-items:center;gap:12px;font-weight:700;padding:14px 18px;border-radius:var(--radius-pill);background:var(--paper);box-shadow:var(--shadow-card)}
.proof img{width:40px;height:40px}
@media (max-width:760px){.proof{grid-template-columns:1fr 1fr}.proof li{font-size:14px;padding:12px 14px}}

/* formats: four packs big, each on its own colour */
.formats{background:var(--paper);padding-block:var(--space-5) var(--space-6)}
.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fcard{display:grid;justify-items:start;gap:4px;padding:28px 22px 24px;border-radius:var(--radius-card);text-decoration:none;color:var(--cream);min-height:420px;position:relative;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);box-shadow:var(--shadow-card)}
.fcard img{width:82%;justify-self:center;margin-bottom:auto;transition:transform .4s var(--ease-out)}
.fcard-name{font-family:var(--font-display);font-size:var(--display-card);margin-top:16px}
.fcard-note{font-size:14px;opacity:.9}
.fcard-acai{background:var(--acai)}.fcard-sun{background:var(--sun);color:var(--acai)}.fcard-dragon{background:var(--dragon)}.fcard-coconut{background:var(--coconut);color:var(--acai)}
@media (hover:hover) and (pointer:fine){.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}.fcard:hover img{transform:scale(1.05) rotate(-2deg)}}
@media (max-width:900px){.format-grid{grid-template-columns:1fr 1fr}.fcard{min-height:320px}}
@media (max-width:520px){.format-grid{grid-template-columns:1fr}}

/* nature: the claims beside a pack, lilac */
.nature{background:var(--lilac);padding-block:var(--space-5) var(--space-6);position:relative;z-index:2}
.nature-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-5);align-items:center}
.nature-copy{display:grid;gap:18px}
.nature-copy h2{font-size:var(--display-section);max-width:16ch;color:var(--acai)}
.claims{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.claims li{display:grid;gap:6px;padding:18px;border-radius:var(--radius-tile);background:var(--paper);box-shadow:var(--shadow-card)}
.claims b{font-size:17px;color:var(--acai)}.claims span{font-size:14px;color:var(--muted)}
.nature-art{position:relative;display:grid;place-items:center}
.nature-art img:first-child{width:86%}
.nature-fruit{position:absolute;width:46%;left:-6%;bottom:-4%}
@media (max-width:900px){.nature-grid{grid-template-columns:1fr}.nature-art{order:-1}}
@media (max-width:520px){.claims{grid-template-columns:1fr}}

/* statement: cream band, big words, one highlight, four moments */
.statement{background:var(--cream);padding-block:var(--space-5) var(--space-6);position:relative;z-index:2}
.statement-text{font-family:var(--font-display);font-size:clamp(36px,5.6vw,84px);line-height:.96;text-transform:uppercase;color:var(--acai);max-width:12ch;margin-bottom:var(--space-3)}
.statement-text mark{background:linear-gradient(transparent 55%,var(--sun) 55%);color:inherit;padding:0 .08em}
.moments{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:var(--space-4)}
.moment{display:grid;justify-items:start;gap:4px;padding:22px;border-radius:var(--radius-card);background:var(--paper);box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.moment img{width:56%;justify-self:center;margin-bottom:10px}
.moment b{font-family:var(--font-display);font-size:var(--display-card);color:var(--acai)}
.moment span{font-size:15px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.moment:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}}
@media (max-width:900px){.moments{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.moments{grid-template-columns:1fr}}

/* cubes: sun band, pouch, cubes and the smoothie */
.cubes{background:linear-gradient(160deg,var(--sun),#ffb300);color:var(--acai);padding-block:var(--space-5) var(--space-6);position:relative;z-index:2}
.cubes-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:center}
.cubes-art{position:relative;min-height:380px}
.cubes-pouch{position:absolute;left:4%;bottom:0;width:56%;z-index:2}
.cubes-cubes{position:absolute;left:0;top:0;width:34%;z-index:1}
.cubes-glass{position:absolute;right:0;bottom:4%;width:42%;z-index:3}
.cubes-copy{display:grid;gap:14px}
.cubes-copy h2{font-size:var(--display-section);color:var(--acai);max-width:14ch}
.cubes-copy .lede{color:var(--ink)}
.cubes .pill-outline{border-color:var(--acai)}
@media (max-width:900px){.cubes-grid{grid-template-columns:1fr}.cubes-art{min-height:300px}}

/* standards: cream, logos on white tiles */
.standards{background:var(--mint);padding-block:var(--space-5) var(--space-6);position:relative;z-index:2}
.standards-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-5);align-items:center}
.standards-copy{display:grid;gap:14px;max-width:560px}
.standards-copy h2{font-size:var(--display-section);color:var(--acai)}
.standards-copy .pill{justify-self:start}
.cert-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cert-logos li{background:var(--paper);border-radius:var(--radius-tile);box-shadow:var(--shadow-card);display:grid;place-items:center;padding:14px;aspect-ratio:1}
.cert-logos img{width:64px;height:auto}
@media (max-width:860px){.standards-grid{grid-template-columns:1fr}}

/* contact: lilac */
.contact{background:var(--peach);padding-block:var(--space-6)}
.contact-row{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-5);align-items:start}
.contact-copy{display:grid;gap:14px}
.contact-copy h2{font-size:var(--display-section);color:var(--acai)}
.contact-links a{color:var(--acai);font-weight:700;text-underline-offset:4px}
@media (max-width:860px){.contact-row{grid-template-columns:1fr}}

/* real people: five portrait clips, their own, play in view */
.people{background:var(--lilac);padding-block:var(--space-5) var(--space-5)}
.reels{list-style:none;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.reel{display:block;position:relative;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:9/16;background:var(--lilac);box-shadow:var(--shadow-card);text-decoration:none;color:var(--cream);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.reel video{width:100%;height:100%;object-fit:cover}
.reel span{position:absolute;left:14px;right:14px;bottom:14px;font-weight:700;font-size:15px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.reel::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(22,7,34,.75));pointer-events:none}
@media (hover:hover) and (pointer:fine){.reel:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}}
@media (max-width:900px){.reels{grid-auto-flow:column;grid-auto-columns:46vw;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}.reels li{scroll-snap-align:start}}

/* trade: purple band, the big formats */
.trade{background:linear-gradient(135deg,var(--grape) 0%,var(--berry) 100%);color:var(--cream);padding-block:var(--space-6)}
.trade-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-5);align-items:center}
.trade-copy{display:grid;gap:14px;max-width:600px}
.trade-copy h2{font-size:var(--display-page);color:var(--cream)}
.trade-copy .lede{opacity:.92}
.trade-art{position:relative;display:grid;place-items:center;min-height:320px}
.trade-art img:first-child{width:78%;position:relative;z-index:2}
.trade-art-2{position:absolute;right:0;bottom:0;width:46%;z-index:1;opacity:.95}
@media (max-width:900px){.trade-grid{grid-template-columns:1fr}.trade-art{order:-1;min-height:240px}}

/* life: the hero arrives (packs rise in one after another, words slide in
   from their sides), grids stagger as they reveal. Entrances ease out, once. */
.js:not(.reduced) .stage-word-l>span,.js:not(.reduced) .stage-word-r>span{display:inline-block;animation:word-in .9s var(--ease-out) both}
.js:not(.reduced) .stage-word-r>span{animation-name:word-in-r}
@keyframes word-in{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes word-in-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.js:not(.reduced) .side-pack,.js:not(.reduced) .film-pack,.js:not(.reduced) .stage-fruit{animation:pack-in .9s var(--ease-out) both}
.js:not(.reduced) .film-pack{animation-delay:.1s}.js:not(.reduced) .side-pack-l{animation-delay:.25s}.js:not(.reduced) .side-pack-r{animation-delay:.35s}.js:not(.reduced) .stage-fruit{animation-delay:.5s}
@keyframes pack-in{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
.js:not(.reduced) .stage-line,.js:not(.reduced) .stage-ctas{animation:pack-in .8s var(--ease-out) both;animation-delay:.55s}
.js:not(.reduced) .stage-ctas{animation-delay:.65s}
/* the side packs lean away from the cursor a touch (set by home.js) */
.side-pack{transition:transform .6s var(--ease-out)}
.side-pack-l{transform:translate(calc(var(--mx,0) * -10px),calc(var(--my,0) * -6px))}
.side-pack-r{transform:translate(calc(var(--mx,0) * 10px),calc(var(--my,0) * -6px))}
/* grids stagger: children of a revealed grid rise in sequence */
.js .format-grid>*,.js .moments>*,.js .claims>*,.js .reels>*,.js .cert-logos>*,.js .proof>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .is-in>*,.js [data-reveal].is-in .format-grid>*{opacity:1;transform:none}
.js .format-grid.is-in>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .format-grid>*,.js .moments>*,.js .claims>*,.js .reels>*,.js .cert-logos>*,.js .proof>*{opacity:1;transform:none;transition:none}}