/* Motion follows scrolling and flavour selection; content stays readable. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.header{position:sticky;top:0;z-index:20;height:88px;background:var(--purple);border-bottom:1px solid #ffffff20}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--yellow);z-index:30;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero{min-height:calc(100svh - 88px);align-items:center;padding-top:32px;padding-bottom:85px;isolation:isolate;overflow:clip}
.hero-copy{align-self:center}.hero h1>span{display:block}.hero h1 .period{display:inline}
.hero h1{font-size:clamp(60px,7.4vw,112px)}
.hero-art{perspective:1100px}.studio-pair{gap:22px}.studio-pair figure{border-radius:150px 150px 24px 24px}
.studio-pair a{display:block;position:relative}.studio-pair a:focus-visible{outline-offset:-6px;outline-color:var(--yellow)}
.photo-label{position:absolute;top:25px;left:22px;right:22px;display:flex;justify-content:space-between;color:white;font-size:18px;font-weight:500}.studio-vanilla .photo-label{color:var(--deep)}
.hero-mascots img{transform-origin:50% 85%}
.ribbon{position:relative;overflow:clip;padding:30px 4%;font-size:clamp(18px,2.4vw,36px)}
.ribbon span{flex-shrink:0}
.flavours{padding-top:105px;padding-bottom:110px}
.flavour-layout{overflow:visible;border:none;background:transparent;gap:5%;grid-template-columns:1.05fr 1fr}
.product-stage{position:sticky;top:120px;align-self:start;border-radius:140px 140px 30px 30px;overflow:visible;padding:80px 0 0;isolation:isolate;background:#f2f6f8}
.product-word{z-index:3;font-size:clamp(30px,3.5vw,54px)}
.product-visuals{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:0 0 30px 30px}
.product-visuals .flavour-photo{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
.product-visuals .natural-photo{opacity:1;transform:translateX(0) scale(1)}
.product-visuals .vanilla-photo{opacity:0;transform:translateX(3%) scale(.97)}
[data-flavour=vanilla] .product-visuals .natural-photo{opacity:0;transform:translateX(-3%) scale(.97)}
[data-flavour=vanilla] .product-visuals .vanilla-photo{opacity:1;transform:translateX(0) scale(1)}
.stage-friends{position:absolute;bottom:-30px;right:-16px;width:32%;aspect-ratio:1;z-index:4;pointer-events:none}
.stage-friends img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
.vanilla-friend{opacity:0;transform:rotate(8deg) scale(.95)}.natural-friend{opacity:1;transform:rotate(-6deg) scale(1)}
[data-flavour=vanilla] .vanilla-friend{opacity:1;transform:rotate(6deg) scale(1)}
[data-flavour=vanilla] .natural-friend{opacity:0;transform:rotate(-8deg) scale(.95)}
.product-info{padding:15px 0 0}.flavour-switch{width:100%;padding:5px;gap:0;isolation:isolate;position:relative;background:#f4eff9;border:none}
.flavour-switch::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:calc(50% - 5px);background:var(--purple);border-radius:30px;z-index:-1;transition:transform 250ms var(--ease-out)}
[data-flavour=vanilla] .flavour-switch::before{transform:translateX(100%)}
.flavour-switch button{width:50%;padding:13px 15px}.flavour-switch button[aria-pressed=true]{background:transparent}
.size-specs>div{background:#f4eff9}.size-specs b{font-size:48px}
.everyday{max-width:none;background:var(--yellow);padding:100px 6.5%;gap:9%;overflow:clip}.everyday h2{font-size:clamp(36px,5vw,76px)}
.lifestyle-photo{overflow:hidden;border-radius:160px 160px 25px 25px}.lifestyle-photo img{border-radius:0;height:650px}
.everyday .ideas p{border-color:#44216440}.everyday .ideas span{color:var(--deep)}
.buy{padding-top:110px;border:0}.contact{padding-top:95px;padding-bottom:95px}
.button,.buy-option{transition:transform 160ms var(--ease-out)}
.button:hover,.buy-option:hover{transform:none}
.keyboard-change .flavour-photo,.keyboard-change .stage-friends img,.keyboard-change .flavour-switch::before{transition:none}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:translateY(-3px)}.button:active{transform:scale(.97)}
 .buy-option:hover{transform:translateY(-4px)}
 .studio-pair a img{transition:transform 250ms var(--ease-out)}.studio-pair a:hover img{transform:scale(1.025)}
}
@media(min-width:851px) and (prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  .hero{view-timeline-name:--hero;view-timeline-axis:block}
  .studio-natural{animation:photo-drift-left linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  .studio-vanilla{animation:photo-drift-right linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  .hero-mascots img:first-child{animation:friend-wave-left linear both;animation-timeline:--hero;animation-range:exit 0% exit 80%}
  .hero-mascots img:last-child{animation:friend-wave-right linear both;animation-timeline:--hero;animation-range:exit 0% exit 80%}
  .lifestyle-photo img{animation:photo-closer linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
 }
}
@supports(animation-timeline:scroll()){
 .reading-progress{animation:reading linear both;animation-timeline:scroll(root)}
}
@keyframes reading{to{transform:scaleX(1)}}
@keyframes photo-drift-left{from{transform:translateY(20px) rotate(0)}to{transform:translateY(85px) rotate(-5deg)}}
@keyframes photo-drift-right{from{transform:translateY(65px) rotate(0)}to{transform:translateY(25px) rotate(5deg)}}
@keyframes friend-wave-left{to{transform:translateY(-25px) rotate(-10deg)}}
@keyframes friend-wave-right{to{transform:translateY(-15px) rotate(10deg)}}
@keyframes photo-closer{from{transform:scale(1)}to{transform:scale(1.07)}}
@media(max-width:1100px){.hero h1{font-size:clamp(55px,7vw,80px)}.flavour-layout{gap:4%}.product-info{padding:10px 0}.stage-friends{right:-5px}.lifestyle-photo img{height:560px}}
@media(max-width:850px){.header{height:80px}.hero{min-height:0}.hero h1{font-size:clamp(52px,7vw,65px)}.flavour-layout{grid-template-columns:1fr;gap:50px}.product-stage{position:relative;top:auto;width:100%;max-width:500px;justify-self:center}.product-info{padding:0}.product-visuals{aspect-ratio:1.15}.stage-friends{width:26%}.everyday{gap:5%}.lifestyle-photo img{height:510px}.size-specs small{display:inline}.flavours{padding-bottom:75px}}
@media(max-width:700px){.header{height:76px}.hero{padding-top:25px;padding-bottom:70px}.hero h1{font-size:clamp(56px,14vw,90px)}.studio-pair{gap:14px}.photo-label{left:16px;right:16px;top:22px;font-size:15px}.ribbon{padding:22px 12px;font-size:15px}.flavours{padding-top:65px}.product-stage{border-radius:100px 100px 24px 24px;padding-top:72px}.product-visuals{border-radius:0 0 24px 24px}.product-word{font-size:38px}.stage-friends{bottom:-25px}.everyday{padding:65px 6%;gap:35px}.lifestyle-photo{border-radius:100px 100px 20px 20px}.lifestyle-photo img{height:440px}.everyday h2{font-size:40px}.buy{padding-top:65px}.contact{padding:65px 6%}.size-specs small{display:block}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reading-progress{display:none}.hero-art *,.lifestyle-photo img{animation:none!important}.product-visuals .flavour-photo,.stage-friends img,.flavour-switch::before{transition:none}.button:hover,.buy-option:hover{transform:none}}