/* Promote only the nearby scene, and stop decorative loops offscreen. */
.cup-tilt,.wrap-tilt,.ritual-word,.ritual-photo,.marquee-track{will-change:auto}
.hero.motion-in-view .cup-tilt,.hero.motion-in-view .wrap-tilt,
.ritual.motion-in-view .ritual-word,.ritual.motion-in-view .ritual-photo,
.marquee.motion-in-view .marquee-track{will-change:transform}
.motion-managed .hero:not(.motion-in-view) .drink-cup,
.motion-managed .hero:not(.motion-in-view) .kebab-wrap-art,
.motion-managed .hero:not(.motion-in-view) .orbit-two,
.motion-managed .hero:not(.motion-in-view) .spark-one,
.motion-managed .hero:not(.motion-in-view) .scroll-hint>span,
.motion-managed .marquee:not(.motion-in-view) .marquee-track,
.motion-managed .section-heading:not(.motion-in-view) .asterisk,
.motion-managed .final-cta:not(.motion-in-view) .final-star,
.motion-hidden *{animation-play-state:paused!important}

/* A native sticky track survives small phone viewports and browser chrome.
   Keep its size tied to the stable viewport, leaving room for the pass CTA. */
@media(max-width:600px) and (min-height:500px){
  .ritual{height:calc(165svh - 75px);min-height:0}
  .ritual-stage{position:sticky;top:0;height:calc(100svh - 75px - env(safe-area-inset-bottom,0px));min-height:0;max-height:none}
  .ritual-layout{flex:1}
}

@media(max-width:600px) and (min-height:500px) and (max-height:720px){
  .ritual-stage{padding-top:20px;padding-bottom:15px}
  .ritual-layout{padding-top:14px}
  .ritual-type{font-size:min(24vw,13svh);padding-top:4px;padding-bottom:5px}
  .ritual-photo{top:22px;width:54%}
  .ritual-copy{margin-top:12px;margin-bottom:6px}
  .ritual-copy h2{font-size:20px;line-height:1.5;margin-bottom:8px}
  .ritual-copy>p{font-size:10px;line-height:1.9}
  .ritual-copy .text-link{margin-top:4px;padding-top:6px}
  .round-stamp{width:64px;height:64px;font-size:14px;top:7px}
  .ritual-progress{padding-top:8px}
}

/* Landscape / enlarged text uses a flowing scene with a continuous timeline. */
@media(max-height:499px){
  .ritual{height:auto;min-height:0}
  .ritual-stage{position:relative;height:auto;min-height:0;max-height:none;overflow:visible;padding-bottom:30px}
  .ritual-layout{flex:none}
}

@media(pointer:coarse),(max-width:600px){
  /* The illustrations already contain their shading. Extra live SVG filters
     and a turbulence texture cost raster work during touch scrolling. */
  .drink-cup,.kebab-wrap-art{filter:none}
  .hero:before,.ritual:before{background-image:none}
  .menu-item:hover .menu-image img{transform:none}
}

.motion-paused .ritual-stage{position:relative;height:auto;min-height:0;max-height:none;padding-bottom:28px}
.motion-paused .ritual-layout{flex:initial}
.motion-paused .ritual-progress i{transform:none!important}
@media(prefers-reduced-motion:reduce){
  .ritual{height:auto;min-height:0}
  .ritual-stage{position:relative;height:auto;min-height:0;max-height:none;padding-bottom:28px}
  .ritual-layout{flex:initial}
  .ritual-progress i{transform:none!important}
}