/* Hero = plain background photo (no motion). The generator appears only, and statically, in the About section. */
.cinematic-main{position:relative;overflow-x:clip;--section-space:40px;--heading-size:25px}
.hero-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.generator-hero{position:relative;display:block;height:clamp(420px,calc(100vh - 140px),900px);height:clamp(420px,calc(100svh - 140px),900px);min-height:0;background:#b9d5ed;overflow:hidden}
.generator-hero::after{display:none}
.generator-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
@media(max-width:600px){.generator-hero{height:clamp(380px,62vh,560px);height:clamp(380px,62svh,560px)}.generator-hero .hero-bg{object-position:60% 0%}}

/* Hero video: sits on top of the photo (which stays as poster/LCP) and fades in once it is really playing. */
.hero-video{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .8s ease;pointer-events:none;contain:strict}
.hero-video.is-playing{opacity:1}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
@media(max-width:600px){.hero-video video{object-position:60% 0%}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* About: static generator with its shadow (stage canvas is 2:1). */
.generator-stage{position:relative;aspect-ratio:2;pointer-events:none}
.generator-image{position:relative;z-index:3;display:block;width:100%;height:auto;aspect-ratio:2;user-select:none}
.generator-shadow{position:absolute;z-index:2;width:112%;max-width:none;left:-7%;top:-12%;height:auto;transform-origin:50% 85%;user-select:none}
.about-generator-slot{width:92%;margin:0 auto 70px;aspect-ratio:2;position:relative}
.about-generator-slot .generator-static-fallback{position:relative;width:100%}
@media(max-width:1000px){.about-generator-slot{width:94%;margin-bottom:45px}}
@media(max-width:600px){.about-generator-slot{width:100%;margin-block:0 35px}}

/* Front-page rhythm: section spacing 40px desktop / 30px mobile, section headings 25px / 20px. */
.cinematic-main .section{padding-block:var(--section-space)}
.cinematic-main .contact-section{padding-block:var(--section-space)}
.cinematic-main .projects-showcase{padding-top:var(--section-space)}
.cinematic-main h2,.cinematic-main .projects-heading h2{font-size:var(--heading-size);line-height:1.7}
@media(max-width:600px){.cinematic-main{--section-space:30px;--heading-size:20px}}

/* ===== Curtain: the sections after the hero slide up over the fixed hero ===== */
/* Active only when curtain.js adds .curtain-on (no JS / reduced motion = normal page). */
.curtain-on .curtain-hero{position:sticky;top:var(--curtain-top,0);isolation:isolate}
.curtain-on .curtain-hero::after{content:"";position:absolute;inset:0;z-index:5;background:#000;opacity:calc(var(--cover,0)*.45);pointer-events:none}
.curtain-on .curtain-rest{position:relative;z-index:2;background:#fff;box-shadow:0 -22px 45px rgba(0,0,0,.18)}