/* Cinematic chapters: scroll-driven storytelling. motion.js writes progress-based styles; these rules set the stage and the static fallback. */
:root{--hh:90px;--spring:cubic-bezier(.34,1.56,.64,1);--glide:cubic-bezier(.16,1,.3,1)}

/* Logo */
.wordmark img{display:block;height:50px;width:auto;margin-left:-8px}
.footer-mark img{height:140px;margin-left:-10px}
@media(max-width:850px){.wordmark img{height:42px}}
@media(max-width:550px){.wordmark img{height:36px;margin-left:-6px}.footer-mark img{height:112px}}

/* Chapter 1: arrival */
.hero-line.split{animation:none}
.hero-line .word{display:inline-block;white-space:nowrap}
.hero-line .ch{display:inline-block;animation:letter-bloom .9s var(--spring) both;animation-delay:calc(var(--i) * 32ms + var(--line-delay,0ms))}
.hero-line:nth-child(2){--line-delay:260ms}
.hero .eyebrow{animation:soft-in .8s .1s both}
.hero-copy .intro{animation:soft-in 1s .9s both}
.hero-copy .button{animation:soft-in 1s 1.05s both}
.hero-stage{animation:none}
.product-float{animation:shell-drop 1.5s .35s var(--spring) both,float 7s ease-in-out infinite}
.hero-shadow{position:absolute;left:22%;right:22%;bottom:8%;height:9%;border-radius:50%;background:radial-gradient(closest-side,#3b254b40,transparent);z-index:1;animation:shadow-settle 1.5s .35s var(--glide) both}
.hero-stage .petal{animation:petal-in 1.6s var(--glide) both,drift 10s ease-in-out infinite}
.p1{animation-delay:1s,2.6s!important}.p2{animation-delay:1.2s,0s!important}.p3{animation-delay:1.4s,-2s!important}
.round-note,.hero-stage>.handnote{animation:soft-pop .9s 1.6s var(--spring) both}
.hero-stage>.handnote{animation-delay:1.8s}
.orbit-one{animation:orbit-draw 1.6s .2s var(--glide) both,orbit-breathe 9s 1.8s ease-in-out infinite}
.orbit-two{animation:orbit-draw 1.6s .35s var(--glide) both,orbit-breathe 12s 1.9s ease-in-out infinite reverse}
@keyframes letter-bloom{from{opacity:0;transform:translateY(.55em) rotate(-14deg) scale(.4);filter:blur(6px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}
@keyframes soft-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes soft-pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes shell-drop{from{opacity:0;translate:0 -90px;rotate:-16deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes shadow-settle{from{opacity:0;scale:.35}to{opacity:1;scale:1}}
@keyframes petal-in{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes orbit-draw{from{opacity:0;scale:.82}to{opacity:1;scale:1}}

/* Chapter 2: the pour */
.pour{height:340vh;background:var(--green);color:var(--cream);position:relative}
.pour-pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));overflow:hidden;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:4vw;padding:0 6vw}
.pour-stage{position:relative;height:100%;display:grid;place-items:center}
.pour-glow{position:absolute;inset:12% 5%;border-radius:50%;background:radial-gradient(closest-side,#d8c9ed38,transparent);opacity:var(--glow,0)}
.pour-tray{position:relative;width:min(100%,62vh * 1.5);aspect-ratio:900/601;transform-origin:50% 60%}
.pour-tray>*{position:absolute;inset:0;width:100%;height:100%}
.pour-ghost{filter:brightness(0) invert(1);opacity:.16}
.pour-resin,.pour-shine{-webkit-mask:url(assets/previews/pink-botanical-tray-cutout.webp) center/100% 100% no-repeat;mask:url(assets/previews/pink-botanical-tray-cutout.webp) center/100% 100% no-repeat}
.pour-resin{background:linear-gradient(140deg,#fff9 0%,#f3e9f7cc 35%,#d8c9edb3 70%,#fffc 100%);clip-path:circle(0% at 0% 0%)}
.pour-real{clip-path:circle(0% at 0% 0%)}
.pour-shine{background:linear-gradient(105deg,transparent 38%,#ffffff22 44%,#ffffffb0 49%,#ffffff40 52%,transparent 60%) no-repeat;background-size:250% 100%;background-position:130% 0;opacity:0}
.pour-petals{pointer-events:none;overflow:visible}
.pour-petals svg{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);overflow:visible;will-change:transform,opacity}
.pour-copy{position:relative;align-self:center;min-height:400px}
.pour-lines{list-style:none;margin:0;padding:0;position:relative;height:3.3em;font-family:'DM Serif Display',Georgia,serif;font-size:clamp(40px,4.6vw,72px);letter-spacing:-2px;line-height:1.05}
.pour-lines li{position:absolute;inset:0 0 auto;will-change:transform,opacity}
.pour-lines li:not(:first-child){opacity:0}
.pour-lines span{color:var(--lilac)}
.pour-lines em{color:var(--lilac)}
.pour-finale{position:absolute;left:0;right:0;top:42px}
.pour-tagline{font-size:clamp(40px,4.4vw,68px);letter-spacing:-2px}
.pour-tagline em{color:var(--lilac);display:block}
.pour-tagline .w{display:inline-block;opacity:0;will-change:transform,opacity}
.pour-finale p{max-width:360px;font-size:15px;line-height:1.9;color:#f7f3e8bf;margin:26px 0;opacity:0}
.pour-finale .text-link{opacity:0;display:inline-block}
.pour-steps{position:absolute;left:6vw;right:6vw;bottom:28px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;text-transform:uppercase}
.pour-steps span{opacity:.35;transition:opacity .4s}
.pour-steps span.on{opacity:1}
.pour-steps i{position:absolute;left:0;right:0;top:-12px;height:1px;background:#f7f3e833}
.pour-steps i:after{content:'';position:absolute;inset:0;background:var(--lilac);transform:scaleX(var(--pour,0));transform-origin:left}

/* Chapter 3: the collection unfolds */
.gallery[data-featured=true] .product-card{animation:none;transform-origin:50% 50%;will-change:transform}

/* Chapter 4: maker story */
.story .w{transition:none;opacity:var(--o,1)}
.story-art img{will-change:transform}
.story{overflow-x:clip}

/* Chapter 5: the vine */
.process{position:relative}
.vine{display:block;width:100%;height:60px;margin:45px 0 -40px;overflow:visible}
.vine path{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--vine,1))}
.steps{margin-top:20px}
.steps article{border-top:0;position:relative;padding-top:58px}
.steps .bud{position:absolute;top:0;left:-6px;width:46px;height:46px;transform:scale(var(--b,1)) rotate(calc((1 - var(--b,1)) * -120deg));opacity:var(--b,1)}
.steps article>:not(.bud){opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 18px))}

/* Calm, static fallback: the finished picture with nothing pinned */
.motion-off .pour{height:auto}
.motion-off .pour-pin{position:relative;top:0;height:auto;min-height:calc(100svh - var(--hh));padding:80px 6vw}
.motion-off .pour-lines{display:none}
.motion-off .pour-finale{position:static}
.motion-off .pour-steps{display:none}

@media(max-width:850px){
 :root{--hh:80px}
 .pour{height:280vh}
 .pour-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:0;padding:22px 6vw 0}
 .pour-stage{height:auto;padding:4vh 0 2vh}
 .pour-tray{width:min(100%,520px)}
 .pour-copy{min-height:340px}
 .pour-lines{font-size:clamp(34px,8.5vw,52px);height:2.4em}
 .pour-finale{top:34px;position:absolute}
 .pour-tagline{font-size:clamp(34px,8.5vw,52px)}
 .pour-finale p{font-size:14px;margin:16px 0}
 .pour-steps{bottom:18px;font-size:9px;letter-spacing:1px}
 .motion-off .pour-pin{padding:50px 6vw}
}
@media(max-width:550px){
 :root{--hh:88px}
 .pour-copy .eyebrow{margin-bottom:14px}
 .pour-lines{height:2.2em}
 .pour-finale p{font-size:13px;line-height:1.7}
 .vine{display:none}
 .steps{position:relative;padding-left:56px;margin-top:40px}
 .steps:before{content:'';position:absolute;left:22px;top:20px;bottom:20px;width:2px;background:var(--green);transform:scaleY(var(--vine,1));transform-origin:top;border-radius:2px}
 .steps article{padding-top:0}
 .steps .bud{left:-56px;top:-8px}
}