/* Subtle section depth; shared controller honors view, motion and OS preferences. */
.food-parallax-frame{aspect-ratio:4/5;border:1px solid #151515;overflow:hidden}
.food-rail .food-parallax-frame>img{display:block;width:100%;height:100%;aspect-ratio:auto;border:0;object-fit:cover}
html[data-view=playful] body:not(.motion-paused) .food-parallax-frame>img{transform:translateY(var(--parallax-y,0px)) scale(1.18)}
.japan-photo{overflow:hidden}
html[data-view=playful] body:not(.motion-paused) .japan-photo>img{translate:0 var(--parallax-y,0px)}
.quote-break{isolation:isolate;overflow:hidden}
.quote-break:before{content:"";position:absolute;inset:-45px -5%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 28%,rgba(255,250,241,.17),transparent 54%),radial-gradient(ellipse at 85% 72%,rgba(21,21,21,.08),transparent 50%);transform:translateY(var(--parallax-y,0px))}
html[data-view=classic] .quote-break:before,.motion-paused .quote-break:before{transform:none}
@media(prefers-reduced-motion:reduce){.food-parallax-frame>img,.quote-break:before{transform:none!important}.japan-photo>img{translate:none!important}}

/* Layered overlap without changing document flow or transforming text. */
.quote-depth-group{position:relative;isolation:isolate}
.quote-depth-group>.everything{position:relative;z-index:1;background:var(--paper)}
html[data-view=playful] body:not(.motion-paused) .quote-depth-group>.quote-break{position:sticky;top:0;z-index:0}
.quote-depth-group>.quote-break:focus-within{z-index:2!important}
.japan-copy{position:relative;z-index:1;background:var(--ink)}
html[data-view=playful] body:not(.motion-paused) .japan-photo{position:sticky;top:0;align-self:start}
@media(prefers-reduced-motion:reduce){.quote-depth-group>.quote-break,.japan-photo{position:relative!important;top:auto!important}}

/* Hero extension: preserve slide opacity transitions, controls and timing. */
.hero-depth-group{position:relative;isolation:isolate}
.hero-depth-group>.ticker,.hero-depth-group>.intro{position:relative;z-index:2}
.hero-depth-group>.intro{background:var(--paper)}
html[data-view=playful] body:not(.motion-paused) .hero-depth-group>.hero{position:sticky;top:var(--hero-pin-top,0px);z-index:0}
.hero-depth-group>.hero:focus-within{position:relative!important;top:auto!important}
html[data-view=playful] body:not(.motion-paused) .hero-slide>img{transform:translateY(var(--parallax-y,0px)) scale(1.10)}
html[data-view=playful] body:not(.motion-paused) .hero-slide-product>img{transform:translateY(var(--parallax-y,0px))}
@media(prefers-reduced-motion:reduce){.hero-depth-group>.hero{position:relative!important;top:auto!important}.hero-slide>img{transform:none!important}}

/* Desktop correction: the entire black section participates, not just the bowl. */
@media(min-width:761px){
 .japan-depth-group{position:relative;isolation:isolate}
 .japan-depth-group>#recipes{position:relative;z-index:1;background:var(--paper)}
 html[data-view=playful] body:not(.motion-paused) .japan-depth-group>#japan{position:sticky;top:var(--roots-pin-top,0px);z-index:0}
 .japan-depth-group>#japan .japan-photo{position:relative!important;top:auto!important}
 .japan-depth-group>#japan .japan-photo>img{translate:none!important}
 .japan-depth-group>#japan:focus-within{position:relative!important;top:auto!important}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce){.japan-depth-group>#japan{position:relative!important;top:auto!important}}