/* Presentation layer, scoped away from central, receipt and business controllers. */
@keyframes wtw-impact{0%{opacity:.6;transform:translate(-14px,8px) rotate(-2deg) scale(.96)}65%{opacity:1;transform:translate(2px,-1px) rotate(.3deg) scale(1.012)}100%{opacity:1;transform:none}}
@keyframes wtw-arrive{from{opacity:.7;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wtw-drift{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes wtw-flash{0%{opacity:0;transform:translateX(-32px) scaleX(.7)}35%{opacity:.55}100%{opacity:0;transform:translateX(30px) scaleX(1.1)}}
@keyframes wtw-energy{0%,100%{opacity:.1;translate:0 0}50%{opacity:.23;translate:0 -4px}}
.motion-art{position:absolute;pointer-events:none;user-select:none;z-index:0}
.hero-copy,.hero-food{z-index:1}
.motion-on .hero h1{animation:wtw-impact .58s cubic-bezier(.22,.8,.3,1) both}
.motion-on .hero-copy>.eyebrow,.motion-on .hero-copy>p:not(.eyebrow),.motion-on .hero-small{animation:wtw-arrive .5s ease-out both}
.motion-on .hero-copy>p:not(.eyebrow){animation-delay:.09s}.motion-on .hero-small{animation-delay:.16s}
/* CTA stays visible and clickable from the first frame. */
.hero-copy>.button{position:relative;z-index:2}
.motion-on .hero-food>img{animation:wtw-arrive .65s ease-out both,wtw-drift 7s 1s ease-in-out infinite}
.motion-on .hero-background{transform:translate(var(--motion-x,0px),var(--motion-y,0px)) scale(1.025);transition:transform .35s ease-out}
.motion-speed{inset:5% -5%;background:repeating-linear-gradient(-18deg,transparent 0 58px,#ffda0030 59px 60px,transparent 61px 102px);mask-image:linear-gradient(90deg,transparent 28%,#000);opacity:0}
.motion-on .motion-speed{animation:wtw-flash .8s .05s ease-out both}
.motion-spark{right:6%;top:9%;width:44px;height:44px;background:var(--yellow);clip-path:polygon(46% 0,57% 38%,100% 47%,60% 57%,49% 100%,40% 61%,0 50%,38% 40%);opacity:.32;transform:rotate(12deg)}
.motion-on .motion-spark{animation:wtw-energy 8s ease-in-out infinite}
.motion-reveal{transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.7,.25,1);transition-delay:var(--motion-delay,0ms)}
.motion-on .motion-reveal:not(.motion-in){opacity:1;transform:translateY(26px)}
/* Keyboard navigation reveals a target immediately, even before its scroll reveal. */
.motion-on .motion-reveal:focus-within{opacity:1;transform:none;transition:none}
.universe{position:relative;isolation:isolate;overflow:hidden}
.motion-on .universe>img.motion-reveal:not(.motion-in){transform:translateX(-38px)}
.universe>.section-pad,.universe>img{position:relative;z-index:1}
.universe>.motion-energy{z-index:2;top:0;left:0;width:100%;height:clamp(160px,28vw,390px);background:radial-gradient(ellipse at 5% 95%,#ffda0038,transparent 42%),repeating-linear-gradient(-22deg,transparent 0 70px,#ffda0020 71px 73px,transparent 74px 150px);mask-image:linear-gradient(0deg,#000,transparent 85%);opacity:.3}
.motion-on .universe:has(.motion-in)>.motion-energy{animation:wtw-energy 9s ease-in-out infinite}
.section-heading{position:relative}.section-heading::after{content:'';position:absolute;right:0;bottom:-14px;width:82px;height:7px;background:var(--yellow);transform:skewX(-28deg);opacity:.55;pointer-events:none}
.how-heading{position:relative}.how-heading::after{content:'';position:absolute;right:12%;top:0;width:70px;height:70px;background:radial-gradient(#ffda00 1px,transparent 1px) 0 0/7px 7px;opacity:.12;pointer-events:none;z-index:-1}
.button,.add-button,.filters button,.nav-pill,.family-grid>a{transition:translate .18s ease-out,background-color .18s,border-color .18s}
.button:active:not(:disabled),.add-button:active:not(:disabled),.filters button:active:not(:disabled){translate:0 1px}
@media(hover:hover) and (pointer:fine){
 .family-grid>a:hover{translate:0 -4px;border-color:#ffda0090}
 .family-grid img{transition:transform .4s ease-out}.family-grid>a:hover img{transform:scale(1.02)}
 .product:hover{border-color:#ffda0080}.product-photo img{transition:transform .4s ease-out}.product:hover .product-photo img{transform:scale(1.035)}
 .button:hover:not(:disabled),.add-button:hover:not(:disabled){translate:0 -2px}
 .nav-pill:hover{border-color:var(--yellow)}
}
@media(hover:none){.product:hover img{transform:none}.family-grid>a:active{border-color:var(--yellow)}}
@media(max-width:650px){
 .motion-on .motion-reveal:not(.motion-in){transform:translateY(18px)}
 .motion-reveal{transition-duration:.4s;transition-delay:0ms!important}
 .motion-on .universe>img.motion-reveal:not(.motion-in){transform:translateX(-24px)}
 .motion-on .hero-background{transform:none}
 .motion-spark{width:26px;height:26px;right:8%;top:6%}
 .motion-speed{background:repeating-linear-gradient(-18deg,transparent 0 78px,#ffda0020 79px 80px,transparent 81px 130px)}
 .motion-on .hero-food>img{animation:wtw-arrive .55s ease-out both,wtw-drift 6s 1s ease-in-out infinite}
 .motion-on .motion-spark{animation:wtw-energy 7s ease-in-out infinite}
}
.motion-lean .motion-reveal{transition-duration:.25s;transition-delay:0ms!important}
.motion-lean .hero-background{transform:none!important}.motion-lean .motion-art{display:none}
.motion-lean.motion-on .hero-food>img{animation:wtw-arrive .35s ease-out both}
.motion-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
html:not(.motion-user-opt-in){scroll-behavior:auto}
html:not(.motion-user-opt-in) .motion-art{display:none}
html:not(.motion-user-opt-in) .hero h1,html:not(.motion-user-opt-in) .hero-copy>p,html:not(.motion-user-opt-in) .hero-small,html:not(.motion-user-opt-in) .hero-food>img,html:not(.motion-user-opt-in) .hero-background,html:not(.motion-user-opt-in) .motion-reveal,html:not(.motion-user-opt-in) .universe>img{animation:none!important;transform:none!important;translate:none!important;opacity:1!important;transition:none!important}
html:not(.motion-user-opt-in) .button,html:not(.motion-user-opt-in) .add-button,html:not(.motion-user-opt-in) .filters button,html:not(.motion-user-opt-in) .nav-pill,html:not(.motion-user-opt-in) .family-grid>a,html:not(.motion-user-opt-in) .family-grid img,html:not(.motion-user-opt-in) .product-photo img{transition:none!important;translate:none!important}
html:not(.motion-user-opt-in) .product:hover img,html:not(.motion-user-opt-in) .family-grid>a:hover img{transform:none}
}

/* Small ambient character movement uses its existing official image. */
.motion-on:not(.motion-lean) .universe>img.motion-in{animation:wtw-drift 8s 1s ease-in-out infinite}
.motion-on .hero-copy>h1{animation-duration:.8s}
@media(prefers-reduced-motion:reduce){html:not(.motion-user-opt-in).motion-on:not(.motion-lean) .universe>img.motion-in{animation:none!important}}
/* Explicit visitor opt-in overrides only this layer, while the system default stays reduced. */
html.motion-user-opt-in .motion-reveal{transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.7,.25,1)!important;transition-delay:var(--motion-delay,0ms)!important}
@media(max-width:650px){html.motion-user-opt-in .motion-reveal{transition-duration:.4s!important;transition-delay:0ms!important}}
/* The scroll is the mobile pointer: progress reverses when scrolling back. */
.motion-scroll-on :is(.scroll-hero-title,.scroll-hero-food,.scroll-hero-bg,.scroll-lili,.scroll-energy,.scroll-title,.scroll-food,.scroll-step){translate:var(--scroll-x,0px) var(--scroll-y,0px);scale:var(--scroll-scale,1);transition: none}
.motion-scroll-on .scroll-food{transform-origin:center center}
.motion-scroll-on .scroll-lili{animation:none!important;transform-origin:center}
.motion-scroll-on .hero-food>img{animation:wtw-arrive .55s ease-out both}
.motion-scroll-on .scroll-hero-bg{transform:translate(var(--motion-x,0px),var(--motion-y,0px));transition:transform .25s ease-out}
.motion-scroll-on .motion-energy{animation:none!important;opacity:.36}
.motion-scroll-on .section-heading::after{width:clamp(80px,17vw,160px);height:8px;opacity:.8}
@media(prefers-reduced-motion:reduce){html:not(.motion-user-opt-in) :is(.scroll-hero-title,.scroll-hero-food,.scroll-hero-bg,.scroll-lili,.scroll-energy,.scroll-title,.scroll-food,.scroll-step){translate:none!important;scale:none!important}}
/* Motion preference lives in the footer, never over the content. */
.motion-choice{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;background:none;border:0;border-bottom:1px solid #ffda0040;color:var(--muted);font-size:11px;text-align:left;cursor:pointer}
.motion-choice:hover{color:var(--yellow)}
.motion-choice:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}