/* October 2026: restrained split-screen and image movement. */
.opening-still,.editing-still,.selection-still,.emotion-still{position:relative;overflow:hidden;background:#090a09;margin-inline:auto}
.opening-still{max-width:1060px;margin-top:28px}
.opening-still img{width:100%;height:auto;max-height:450px;object-fit:contain}
.editing-still{max-width:1100px;margin-top:30px}
.editing-still img{width:100%;height:auto;max-height:460px;object-fit:contain}
.selection-still{max-width:1120px;margin:8px auto 38px}
.selection-still>a{display:block;overflow:hidden}
.selection-still img{width:100%;height:auto;max-height:520px;object-fit:contain}
.selection-still figcaption,.film-break figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:11px;padding:12px 0}
.home-top{padding-top:42px}.selected-section{padding-top:40px}
.emotion-still{max-width:880px;margin-bottom:40px}
.emotion-still img{width:100%;height:auto;max-height:390px;object-fit:contain}
.moving-still img,.film-break img{will-change:transform;transform:translate3d(var(--photo-shift,0px),0,0) scale(1.035)}
.motion-ready .moving-still,.motion-ready .film-break{opacity:0;translate:0 18px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.motion-ready .moving-still.is-visible,.motion-ready .film-break.is-visible{opacity:1;translate:0 0}
.project-panel{overflow:hidden;min-width:0}
.project-item[open]>.project-panel .work-image{animation:split-image .46s cubic-bezier(.2,.7,.2,1) both}
.project-item[open]>.project-panel .work-info{animation:split-info .48s cubic-bezier(.2,.7,.2,1) both}
@keyframes split-image{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes split-info{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
html[dir=rtl] .project-item[open]>.project-panel .work-image{animation-name:split-info}
html[dir=rtl] .project-item[open]>.project-panel .work-info{animation-name:split-image}
.trailer-project .project-line{grid-template-columns:64px minmax(120px,1.5fr) minmax(95px,1fr) 48px minmax(110px,1.1fr) 154px 22px}
.trailer-project .toggle{font-size:22px;color:var(--muted);text-align:center}
.trailer-project[open]>.project-line .toggle{font-size:0}
.trailer-project[open]>.project-line .toggle:after{content:'−';font-size:22px}
.row-watch,.watch{display:flex;align-items:center;gap:9px;font-size:12px;border:1px solid var(--line);padding:10px 12px;line-height:1.4}
.row-watch:hover,.watch:hover{background:#e9e6de;color:#101110;text-decoration:none}
.play-icon{font-size:12px;flex-shrink:0}
.trailer-project .project-expanded{grid-template-columns:minmax(170px,25%) minmax(0,1fr)}
.trailer-project .project-top h4{font-family:var(--serif);font-size:clamp(24px,3vw,38px);color:var(--text);margin:10px 0 22px;line-height:1.25;overflow-wrap:anywhere}
.video-stage{display:flex;position:relative;aspect-ratio:16/9;max-width:760px;align-items:center;justify-content:center;gap:12px;overflow:hidden;border:1px solid var(--line);background:#090a09;margin:0 0 26px;color:#fff}
.video-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.67;transition:opacity .3s}
.video-stage:hover img{opacity:.45}.video-stage:hover{text-decoration:none}
.video-stage>span{position:relative;z-index:1;font-size:14px}
.video-stage .play-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid #ffffffa0;background:#0005}
.project-facts{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);font-size:14px;color:var(--muted)}
.project-facts p{margin:0}.project-facts p span{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text);margin-bottom:3px}
.full-poster figcaption{font-size:10px;color:var(--muted);padding-top:10px}
.trailer-project .synopsis{font-size:15px;line-height:1.8;margin-top:24px}
.versions{display:flex;flex-wrap:wrap;gap:10px 20px;margin:24px 0}
.versions h5{width:100%;margin:0 0 2px;color:var(--muted);font-size:11px;font-weight:400}
.versions a,.references a{font-size:13px;border-bottom:1px solid var(--line);padding:4px 0}
.references{display:flex;flex-wrap:wrap;gap:12px 20px;margin:20px 0}
.cast{margin:20px 0;font-size:13px;color:var(--muted)}.cast summary{cursor:pointer}
.genre-group>h3{font-family:var(--serif);font-size:22px;margin:34px 0 16px;display:flex;gap:20px;align-items:baseline}
.genre-group>h3 span{font:10px Arial,sans-serif;color:var(--muted)}
.trailer-category .archive{padding-bottom:10px}
.film-break{max-width:980px;margin:65px auto 15px;overflow:hidden}
.film-break img{width:100%;height:clamp(190px,30vw,390px);object-fit:cover;object-position:center}
.trailer-spotlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;padding:40px 0 10px}
.trailer-spotlights article{min-width:0}.trailer-spotlights img{width:100%;height:260px;object-fit:contain;background:#090a09}
.trailer-spotlights .eyebrow{margin:16px 0 8px}.trailer-spotlights h2{font-size:26px;margin-bottom:8px}
.trailer-spotlights p{font-size:13px;color:var(--muted)}.trailer-spotlights .watch{display:inline-flex}
.trailer-collective{padding:60px 0;max-width:740px}.trailer-collective p{color:var(--muted)}
.trailer-filters label:last-child select{width:100%}
@media(max-width:1100px){.trailer-project .project-line{grid-template-columns:54px minmax(100px,1.4fr) minmax(75px,1fr) 44px minmax(80px,1fr) 128px 18px;gap:12px}}
@media(max-width:700px){
.opening-still{margin-top:16px}.opening-still img{max-height:250px}.editing-still{margin-top:20px}.editing-still img{max-height:270px}
.home-top{padding-top:28px}.selection-still{margin-bottom:25px}.selection-still img{max-height:310px}
.emotion-still img{max-height:260px}.practice{padding:45px 0}.moving-still img,.film-break img{transform:translate3d(var(--photo-shift,0px),0,0) scale(1.02)}
.trailer-project .project-line{grid-template-columns:48px minmax(0,1fr) 42px 18px;gap:10px}
.trailer-project .row-watch{grid-column:2/4;grid-row:2;justify-self:start;padding:8px 10px;margin-top:-4px;font-size:11px}
.trailer-project .toggle{grid-column:4;grid-row:1}.trailer-project .project-expanded{grid-template-columns:minmax(0,1fr)}
.trailer-project .full-poster{max-width:260px}.trailer-project .full-poster img{max-height:350px}
.trailer-project .project-top h4{font-size:25px}.video-stage>span{font-size:12px}.video-stage .play-icon{width:42px;height:42px}
.trailer-spotlights{gap:20px}.trailer-spotlights img{height:180px}.trailer-spotlights h2{font-size:20px}
.film-break{margin-top:40px}.film-break img{height:230px}.trailer-filters label{width:100%}
}
@media(max-width:380px){.trailer-spotlights{grid-template-columns:minmax(0,1fr)}.trailer-spotlights img{height:210px}}
@media(prefers-reduced-motion:reduce){
.moving-still img,.film-break img{will-change:auto;transform:none!important}
.motion-ready .moving-still,.motion-ready .film-break{opacity:1;translate:none;transition:none}
.project-item[open]>.project-panel .work-image,.project-item[open]>.project-panel .work-info{animation:none}
}
/* V2 — full-frame images, superimposed titles, visible scroll motion. */
.cinematic-banner,.film-break{width:var(--viewport-width,100vw);max-width:none;margin-inline:calc((100% - var(--viewport-width,100vw))/2);position:relative;overflow:hidden;margin-top:0}
.cinematic-banner{height:clamp(340px,48vw,640px);margin-bottom:0;background:#080908}
.cinematic-banner>img,.film-break>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center;transform:translate3d(0,var(--photo-y,0px),0) scale(var(--photo-scale,1.18));will-change:transform}
.cinematic-banner:after,.film-break:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000008 20%,#00000025 40%,#000000d0 100%)}
.image-overlay{position:absolute;z-index:2;inset:auto 0 0;padding:clamp(25px,5vw,72px) max(6vw,calc((100vw - 1350px)/2));margin:0;max-width:none;color:#f5f2eb}
.image-overlay.home-top{display:block;align-items:initial}
.image-overlay.home-top h1{font-size:clamp(36px,7.4vw,100px);line-height:1.02;margin:10px 0 18px;letter-spacing:-.035em;max-width:800px}
.image-overlay.home-top>div{max-width:550px;padding:0}
.image-overlay.home-top p,.image-overlay .lead,.image-overlay.practice p{color:#e0ddd5;font-size:16px}
.image-overlay .eyebrow{color:#d7d4cc;font-size:10px;margin-bottom:10px}
.image-overlay.home-top>div p{margin-bottom:12px}.image-overlay a{color:#f5f2eb}
.opening-still{height:clamp(440px,72vh,760px)}
.selection-still{height:clamp(310px,43vw,580px);margin-bottom:32px}
.selection-still figcaption.section-title{padding:35px 6%;margin:0;align-items:flex-end;display:flex;justify-content:space-between}
.selection-still figcaption h2{font-size:clamp(30px,5vw,65px);color:#f5f2eb;margin:0}
.selected-section{padding-top:0}.emotion-still{height:clamp(340px,43vw,570px)}
.image-overlay.practice{padding:40px 6%}.image-overlay.practice h2{font-size:clamp(32px,5.4vw,70px);margin-bottom:18px}
.image-overlay.practice p{max-width:590px}.practice-links{padding:35px 0 0}
.editing-still{height:clamp(350px,45vw,580px);margin-bottom:25px}
.editing-still .page-heading{padding:0;max-width:740px}.editing-still h1{font-size:clamp(38px,7vw,86px);margin-bottom:20px}
.film-break{height:clamp(280px,38vw,460px);margin-top:55px;margin-bottom:25px}
.film-break figcaption{position:absolute;z-index:2;bottom:0;inset-inline:0;padding:25px 6%;color:#eee;display:flex;justify-content:space-between}
.project-item[open]>.project-panel .work-image{animation:split-image .75s cubic-bezier(.16,1,.3,1) both}
.project-item[open]>.project-panel .work-info{animation:split-info .85s cubic-bezier(.16,1,.3,1) both}
@keyframes split-image{from{opacity:0;transform:translateX(-65px)}to{opacity:1;transform:translateX(0)}}
@keyframes split-info{from{opacity:0;transform:translateX(65px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:700px){
.opening-still{height:620px;height:min(80svh,680px);min-height:480px}
.image-overlay.home-top h1{font-size:clamp(34px,9.5vw,62px);max-width:100%;overflow-wrap:normal}
.image-overlay{padding:30px 6%}.image-overlay.home-top>div{max-width:100%}
.image-overlay.home-top p,.image-overlay.practice p,.editing-still .lead{font-size:14px;line-height:1.6}
.selection-still{height:350px}.selection-still figcaption.section-title{padding:27px 6%;gap:16px;align-items:flex-start;flex-direction:column}
.selection-still figcaption h2{font-size:34px}.emotion-still{height:390px}.image-overlay.practice{padding:30px 6%}
.editing-still{height:400px}.editing-still .page-heading h1{font-size:43px}
.film-break{height:280px}.film-break figcaption{font-size:10px;gap:12px}
.project-item[open]>.project-panel .work-image{animation-name:mobile-image}
.project-item[open]>.project-panel .work-info{animation-name:mobile-info}
}
@keyframes mobile-image{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:translateY(0)}}
@keyframes mobile-info{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.cinematic-banner>img,.film-break>img{transform:scale(1.16)!important;will-change:auto}.project-item[open]>.project-panel .work-image,.project-item[open]>.project-panel .work-info{animation:none!important}}

/* Every main image gets scroll-depth movement; poster text remains intact. */
.parallax-frame{display:block;position:relative;width:100%;min-width:0;transform:translate3d(0,var(--photo-y,0px),0);will-change:transform}
.parallax-frame>img{display:block;width:100%;image-rendering:auto}
.parallax-thumb{height:100%}.parallax-thumb>img{height:100%;object-fit:cover}
.parallax-video{position:absolute;inset:0;height:100%}.parallax-video>img{height:100%;object-fit:cover}
.cinematic-banner:before,.film-break:before,.parallax-frame:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="180" height="180"%3E%3Cfilter id="g"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".92" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Cpath fill="%23fff" filter="url(%23g)" d="M0 0h180v180H0z"/%3E%3C/svg%3E');background-repeat:repeat;opacity:.065;mix-blend-mode:soft-light}
.cinematic-banner:before,.film-break:before{z-index:2}
.image-overlay,.film-break figcaption{z-index:3}
.project-thumb{overflow:hidden}.work-image,.full-poster{padding-block:12px}
@media(prefers-reduced-motion:reduce){.parallax-frame{transform:none!important;will-change:auto}}

img[src$="alkhallat-mars-jkl.png"]{filter:saturate(.9)}

/* Real anchored background: text scrolls independently in front of the image. */
.cinematic-banner,.film-break{background-attachment:fixed;background-position:center center;background-size:cover;background-repeat:no-repeat}
.cinematic-banner>img,.film-break>img{opacity:0;transform:none;will-change:auto}
@media(max-width:899px){
.cinematic-banner,.film-break{background-image:none!important;background-attachment:scroll}
.cinematic-banner>img,.film-break>img{opacity:1;top:50%;height:max(100svh,calc(100% + 320px));max-height:none;transform:translate3d(0,calc(-50% + var(--photo-y,0px)),0)!important;object-fit:cover;will-change:transform}
}
@media(prefers-reduced-motion:reduce){.cinematic-banner,.film-break{background-attachment:scroll}.cinematic-banner>img,.film-break>img{opacity:0;transform:none!important}.cinematic-banner,.film-break{background-image:inherit}}

@media(max-width:899px) and (prefers-reduced-motion:reduce){.cinematic-banner>img,.film-break>img{opacity:1;top:0;height:100%;transform:none!important}}