/* Cinematic depth layer. Every effect here is decorative; content, controls and reading order are untouched.
   Stage framing is read by cinema.js from --stage-fit (fill | contain | cover), --stage-x, --stage-h
   and --stage-feather (left right top bottom, as fractions of the painting). */
.chapter-portrait.stage-figure{--stage-fit:fill}
/* Hero lettering: Latin sits wide across her hairline; Ruqaa runs tall, so Arabic sits smaller and higher. */
.chapter-hero .stage-figure{--word-y:.2;--word-size:.34;--word-depth:.47}
html[lang="ar"] .chapter-hero .stage-figure{--word-y:.15;--word-size:.27}
.cinema .chapter-portrait.stage-figure .chapter-film{opacity:0!important;pointer-events:none}
.cinema .chapter-portrait.depth-plain .chapter-film{opacity:1!important}
/* The red-lady painting keeps its own proportions wherever it is framed. */
.chapter-portrait--crimson.stage-figure{aspect-ratio:1122/1402}
.portrait-depth{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease;z-index:1}
.chapter-portrait.depth-ready .portrait-depth{opacity:1}
.chapter-portrait.depth-ready picture{visibility:hidden}
.chapter-portrait.stage-figure .portrait-pause{z-index:4}
/* In RTL the logical end inset lands on left while the Arabic rule also pins right, stretching the control. */
html[lang="ar"] .chapter-portrait.stage-figure .portrait-pause{left:auto;right:14px}

.air{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

.hero-sprig,.hero-portal,.hero-rim{display:none}
.act-sprig{position:absolute;z-index:0;pointer-events:none;height:auto;filter:brightness(.42) saturate(.55) blur(6px);opacity:.9;will-change:transform}
.act-sprig--l{left:-7vw;top:38%;width:clamp(200px,22vw,380px)}
.act-sprig--r{right:-8vw;top:-8%;width:clamp(180px,18vw,320px);scale:-1 1}
.fg-sprig{position:absolute;z-index:3;pointer-events:none;height:auto;filter:blur(4px);opacity:.92;will-change:transform}
.fg-sprig--soft{filter:blur(9px);opacity:.75}
.fg-sprig--flip{scale:-1 1}
.sec{position:relative}

/* A stage figure drops its print frame and lets the painting dissolve into the page. The hero is a
   stage at every width; the chapter portraits become stages only where they can hold half the screen. */
.cinema .chapter-hero .stage-figure{max-width:none;aspect-ratio:auto;box-shadow:none;background:transparent;margin:0}
.cinema .chapter-hero .stage-figure::after{display:none}
.cinema .chapter-hero .stage-figure picture,.cinema .chapter-hero .stage-figure picture img,.cinema .chapter-hero .stage-figure .chapter-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cinema .chapter-hero .stage-figure picture img,.cinema .chapter-hero .stage-figure.depth-plain .chapter-film{-webkit-mask-image:radial-gradient(ellipse 36% 48% at var(--mask-x,50%) 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 36% 48% at var(--mask-x,50%) 50%,#000 62%,transparent 100%)}

@media(min-width:900px) and (min-height:650px){
 .cinema .chapter-hero{min-height:300svh;border-bottom:0}
 .cinema .chapter-hero::before{inset:0 0 auto;height:100svh;opacity:.3;transform:translate3d(0,calc(var(--hero,0) * 200svh),0) scale(calc(1 + var(--hero,0) * .35));transform-origin:50% 45%}
 .cinema .chapter-hero__grid{overflow:visible}
 .cinema .chapter-hero .chapter-copy{position:relative;z-index:3}
 .cinema .hero-composition{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100svh;max-width:none;padding:0;margin:0;z-index:2;justify-self:auto}
 .cinema .hero-composition::before{display:none}
 .cinema .chapter-hero .stage-figure{position:absolute;inset:0;width:100%;height:100%;--stage-fit:contain;--stage-x:.66;--stage-h:1;--stage-top:82px;--stage-feather:.16 .16 .07 .09;--mask-x:66%}
 .cinema .chapter-hero .stage-figure picture img,.cinema .chapter-hero .stage-figure .chapter-film{object-position:66% 50%}
 .cinema .chapter-hero .stage-figure .portrait-pause{bottom:30px;inset-inline-end:22vw;transition:opacity .4s}
 html[lang="ar"].cinema .chapter-hero .stage-figure .portrait-pause{right:18vw}
 .hero-night .chapter-hero .portrait-pause{opacity:0;pointer-events:none}
 /* Arabic copy is right-aligned towards the painting, so the stage shifts right and the copy keeps clear. */
 html[lang="ar"].cinema .chapter-hero .stage-figure{--stage-x:.7;--mask-x:70%}
 html[lang="ar"].cinema .chapter-hero .stage-figure picture img,html[lang="ar"].cinema .chapter-hero .stage-figure .chapter-film{object-position:70% 50%}
 html[lang="ar"].cinema .chapter-hero .chapter-copy{padding-inline-start:clamp(80px,10vw,170px)}
 .hero-sprig{display:block;position:absolute;z-index:4;pointer-events:none;height:auto;will-change:transform,filter}
 /* Anchored to the fold so only the flower heads peek, whatever the window height. */
 .hero-sprig--l{left:calc(50% - 50vw - 4vw);width:clamp(260px,24vw,400px);top:calc(100svh - 72px)}
 .hero-sprig--r{right:calc(50% - 50vw - 4vw);width:clamp(220px,20vw,340px);top:calc(100svh - 58px);scale:-1 1}

 /* Chapter scenes: the painting holds half the screen while the copy scrolls past. */
 /* overflow:hidden makes each section a scroll container and silently disables sticky; clip does not. */
 .cinema #ritual,.cinema #about{padding-block:0;overflow:clip}
 .cinema #ritual>.wrap,.cinema #about>.wrap{max-width:none;width:100%;padding-inline:0;margin:0}
 .cinema .ritual-chapter{grid-template-columns:50vw minmax(0,1fr);gap:0;max-width:none;align-items:start;min-height:175svh;margin:0}
 .cinema .ritual-chapter .chapter-copy{padding:40svh 9vw 34svh 5vw;border-bottom:0;max-width:760px}
 .cinema .about__grid{grid-template-columns:minmax(0,1fr) 50vw;gap:0;align-items:start;min-height:185svh}
 .cinema .about__grid .chapter-copy{padding:30svh 5vw 30svh 9vw;max-width:none}
 .cinema #ritual .stage-figure,.cinema #about .stage-figure{aspect-ratio:auto;box-shadow:none;background:transparent;margin:0}
 .cinema #ritual .stage-figure::after,.cinema #about .stage-figure::after{display:none}
 .cinema #ritual .stage-figure picture,.cinema #ritual .stage-figure picture img,.cinema #ritual .stage-figure .chapter-film,.cinema #about .stage-figure picture,.cinema #about .stage-figure picture img,.cinema #about .stage-figure .chapter-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
 .cinema #ritual .stage-figure,.cinema #about .stage-figure{position:sticky;top:0;height:100svh;width:100%;max-width:none;justify-self:stretch;--stage-fit:contain;--stage-x:.5;--stage-h:.92;--stage-top:82px;--stage-feather:.14 .14 .09 .09}
}
@media(max-width:899px),(max-height:649px){
 /* On a phone her head fills the frame, so the Arabic word rises above it and only her face passes in front. */
 html[lang="ar"].cinema .chapter-hero .stage-figure{--word-y:.105;--word-size:.19;--word-depth:.62}
 .cinema .hero-composition{order:-1;position:relative;width:calc(100% + 2 * var(--gut,20px));margin-inline:calc(-1 * var(--gut,20px));max-width:none;height:min(82svh,760px);padding:0}
 .cinema .hero-composition::before{display:none}
 .cinema .chapter-hero .stage-figure{position:absolute;inset:0;width:100%;height:100%;--stage-fit:cover;--stage-x:.6;--stage-feather:0 0 0 .2;--mask-x:60%}
 .cinema .chapter-hero .stage-figure picture img{object-fit:cover;object-position:60% 30%;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
}
@media(max-width:899px){
 .fg-sprig{width:38vw!important}
 .act-sprig--l{width:34vw;left:-12vw;top:30%}
 .act-sprig--r{width:30vw;right:-12vw;top:-4%}
}
@media(prefers-reduced-motion:reduce){
 .air,.hero-sprig,.hero-portal,.hero-rim{display:none!important}
 .cinema .chapter-hero{min-height:0}
 .cinema .chapter-hero::before{transform:none!important}
 /* A stage that was already running when the preference changed hands back to its still painting. */
 .portrait-depth{display:none!important}
 .chapter-portrait.depth-ready picture{visibility:visible}
 .fg-sprig{translate:none!important}
}