/* Storytelling home. One pack travels through the page on a fixed layer:
   hero (centre) -> the journey (tumbles through the words, the colour turns
   purple to pink, the claims pop in) -> lands on its own card in the range.
   The page scrolls normally; only the pack and the words are scrubbed. */

/* the traveller layer: above the page, under the header, never catches taps */
.traveller{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;display:none}
.js.webgl .traveller{display:block;visibility:hidden}
.js.webgl.tub-live .traveller{visibility:visible}
.js.webgl.landed .traveller{display:none}
/* while the traveller is live the hero poster hides; after landing the first range card's own picture carries on */
.js.webgl:not(.landed) .range .rail li:first-child .pcard img{visibility:hidden}

/* hero: same stage as the clean site, one pack, the cast either side */
.story-hero .stage-packs{width:clamp(300px,46vw,720px)}
.hero-bowl{width:100%;position:relative;z-index:2}
.hero-bowl img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(40,0,70,.35))}
.js:not(.reduced) .hero-bowl{animation:pack-in .9s var(--ease-out) both;animation-delay:.1s}
.story-hero .stage-fruit-l{left:-28%;bottom:0;width:36%}
.story-hero .stage-fruit-r{right:-30%;top:-10%;bottom:auto;width:40%}
.story-hero .stage-hint{grid-column:1/-1;grid-row:4;justify-self:center;margin-top:24px;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.story-hero .stage-hint i{width:28px;height:1px;background:currentColor;display:block;transform-origin:left;animation:hint 1.6s var(--ease-out) infinite}
@keyframes hint{0%{transform:scaleX(0);opacity:0}30%{opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (max-width:900px){.story-hero .stage-packs{width:min(74vw,360px)}.story-hero .stage-fruit-l{left:-18%}.story-hero .stage-fruit-r{right:-20%;width:34%}.story-hero .stage-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);margin:0}}

/* the journey: three screens. The bowl tips onto the floor, the açaí spools
   out into a pool, the bowl slides away, and the products rise out of the
   pool. Everything is scrubbed from one number. */
.journey{position:relative;height:calc(3 * 100svh);background:var(--tint,#7d1fd6);color:var(--cream)}
.journey-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.journey-word{position:absolute;left:0;right:0;margin:0;font-family:var(--font-display);font-size:clamp(64px,14vw,230px);line-height:.9;text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.18);white-space:nowrap;pointer-events:none}
.journey-word span{display:inline-block;transform:translateX(calc(var(--dir,1) * (1 - var(--in,0)) * 60vw));opacity:var(--in,0)}
.jw-1{--dir:-1;top:8%;padding-left:4vw}.jw-2{--dir:1;top:28%;text-align:right;padding-right:4vw;font-size:clamp(48px,9vw,140px)}
.floor{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.22) 50%,rgba(255,255,255,.34));pointer-events:none}
.pool{position:absolute;left:44%;bottom:4%;width:min(70vw,900px);height:auto;aspect-ratio:1000/300;transform:translateX(-50%) scale(var(--pool,0));transform-origin:50% 60%;opacity:min(1,calc(var(--pool,0) * 3));z-index:1;pointer-events:none;filter:drop-shadow(0 14px 20px rgba(40,0,70,.3))}
.pour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;transition:opacity .3s}
.pour path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pour-shadow{stroke:rgba(40,0,70,.35);stroke-width:46px;transform:translate(6px,8px)}
.pour-line{stroke:#4a0b6e;stroke-width:40px}
.pour-shine{stroke:rgba(255,255,255,.35);stroke-width:8px;transform:translate(-9px,-4px)}
.bowl{position:absolute;left:50%;top:50%;width:min(52vw,720px);transform:translate(calc(-50% + var(--bx,0px)),calc(-50% + var(--by,0px))) rotate(var(--tilt,0deg));transform-origin:30% 85%;opacity:var(--bowl,1);z-index:3;pointer-events:none}
.bowl img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(40,0,70,.35))}
.bowl .rim{position:absolute;left:31%;top:56%;width:1px;height:1px}
.journey-copy{position:absolute;left:0;right:0;top:10%;z-index:4;display:grid;gap:10px;opacity:var(--pick,0);transform:translateY(calc((1 - var(--pick,0)) * 24px));pointer-events:none}
.journey-title{font-size:var(--display-page);color:var(--cream);max-width:14ch;text-shadow:0 8px 30px rgba(40,0,70,.3)}
.journey-line{max-width:40ch;font-size:18px;opacity:.92}
.journey-copy .eyebrow{color:rgba(255,255,255,.8)}
/* the products rise out of the pool, each a beat behind the last */
.flavours{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;z-index:2}
.flavours li{position:absolute;bottom:14%;display:grid;justify-items:center;gap:2px;width:clamp(90px,12vw,190px);opacity:var(--r,0);transform:translateY(calc((1 - var(--r,0)) * 40vh)) scale(calc(.6 + var(--r,0) * .4));font-weight:700;font-size:14px;text-shadow:0 2px 10px rgba(40,0,70,.4)}
.flavours img{width:100%;filter:drop-shadow(0 16px 20px rgba(40,0,70,.3))}
.flavours li:nth-child(1){left:14%}.flavours li:nth-child(2){left:30%;bottom:10%}.flavours li:nth-child(3){right:30%;bottom:10%}.flavours li:nth-child(4){right:14%}
.journey-cast{position:absolute;width:clamp(100px,16vw,260px);pointer-events:none;opacity:var(--in,0);transform:translateY(calc((1 - var(--in,0)) * 40px)) rotate(calc(var(--dir,1) * -6deg))}
.jc-1{left:2%;top:40%;--dir:-1}.jc-2{right:-2%;top:4%;width:clamp(160px,24vw,400px);--dir:1}
@media (max-width:900px){
  .journey{height:calc(3 * 100svh)}
  .bowl{width:96vw}
  .pool{width:120vw}
  .journey-copy{top:9%}
  .journey-title{font-size:clamp(30px,8vw,44px)}
  .flavours li{width:24vw;bottom:22%}
  .flavours li:nth-child(1){left:2%}.flavours li:nth-child(2){left:26%;bottom:16%}.flavours li:nth-child(3){right:26%;bottom:16%}.flavours li:nth-child(4){right:2%}
  .pour-line{stroke-width:28px}.pour-shadow{stroke-width:32px}.pour-shine{stroke-width:6px}
  .jc-2{display:none}
}

/* reduced motion and no JS: the journey is a plain band */
html:not(.js) .journey,.reduced .journey{height:auto;background:var(--grape)}
html:not(.js) .journey-stage,.reduced .journey-stage{position:static;height:auto;padding-block:var(--space-6)}
html:not(.js) .journey-copy,.reduced .journey-copy{opacity:1;transform:none;position:static}
html:not(.js) .bowl,.reduced .bowl,html:not(.js) .pool,.reduced .pool,html:not(.js) .floor,.reduced .floor{display:none}
html:not(.js) .flavours li,.reduced .flavours li{opacity:1;transform:none;position:static;--r:1}
html:not(.js) .flavours,.reduced .flavours{position:static;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding-inline:var(--gutter)}
html:not(.js) .journey-word,.reduced .journey-word,html:not(.js) .journey-cast,.reduced .journey-cast,html:not(.js) .pour,.reduced .pour,.reduced .splash{display:none}

/* ----------------------------------------- the journey, photographed ---
   A real studio, the real campaign bowl, a real tipped bowl and a real spill.
   The spill is revealed outward from the bowl's mouth with a soft mask; the
   studio's colour turns from purple to pink with the copy. */
.journey-set{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:hue-rotate(calc(var(--pick,0) * 55deg)) saturate(calc(1 + var(--pick,0) * .15))}
.spill{position:absolute;left:50%;bottom:3%;width:min(84vw,1150px);height:auto;transform:translateX(-50%);z-index:1;pointer-events:none;opacity:min(1,calc(var(--spool,0) * 4));
  -webkit-mask-image:radial-gradient(ellipse 100% 140% at 18% 50%,#000 calc(var(--spool,0) * 100% - 8%),transparent calc(var(--spool,0) * 100% + 6%));
  mask-image:radial-gradient(ellipse 100% 140% at 18% 50%,#000 calc(var(--spool,0) * 100% - 8%),transparent calc(var(--spool,0) * 100% + 6%))}
.bowl{width:min(46vw,640px);aspect-ratio:1440/630;transform-origin:50% 90%}
.bowl img{position:absolute;inset:0;margin:auto}
.bowl .bowl-upright{width:100%;opacity:var(--up,1)}
.bowl .bowl-tipped{width:48%;left:auto;right:auto;opacity:var(--tipped,0);filter:drop-shadow(0 26px 20px rgba(40,0,70,.35))}
@media (max-width:900px){.spill{width:118vw}.bowl{width:92vw}}
html:not(.js) .spill,.reduced .spill{display:none}