/* ============================================================================ REBOX — Cinematic homepage (index.html only) Split-screen pinned scrollytelling: each panel pins as a two-column split — a portrait video pane on one side (alternating), a light content column with the green card on the other. The video scrubs to scroll; content reveals in stages. Desktop only pins/splits; mobile falls back to a video background with the card over it (portrait video suits a portrait phone screen). Self-contained .cine-* selectors, no !important (footer wins on specificity). ========================================================================== */ :root{ --cine-ink:#FAFAF7; --cine-ink-soft:rgba(250,250,247,.86); --cine-ink-mute:rgba(250,250,247,.60); --cine-gold:#d4c896; --cine-card:rgba(45,90,39,0.92); /* more opaque now — sits on a solid column */ --cine-line:rgba(255,255,255,.12); --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --cine-maxw:1200px; } .cine-panel, .cine-panel *{ box-sizing:border-box; } /* Global "MOBILE OVERHAUL" rule in style.css targets every bare
with `padding-left/right:16px!important` (meant for other page sections). Our .cine-panel elements ARE
s, so they inherited that 16px side padding — the visible white gutter down the left/right edge of every full-bleed video. A class selector (.cine-panel) is more specific than a bare element selector (section), so this wins over the !important rule without needing a broader/riskier reset — and it only ever matches this page, since home-cinema.css is only linked from index.html. */ @media (max-width:768px){ .cine-panel{ padding-left:0!important; padding-right:0!important; width:100%!important; max-width:100%!important; } } /* Three.js particle overlay retired in the split layout (it fought the solid content column's stacking + read poorly on the light background). */ #global-three-canvas{ display:none; } /* ── Panel + pin shell ─────────────────────────────────────────────────── Section has no fixed height (GSAP inserts the pin spacer). .cine-pin is the pinned viewport. Off-scrub (mobile / no-JS) it's a normal block. */ .cine-panel{ position:relative; } .cine-pin{ position:relative; min-height:100vh; overflow:hidden; } /* Desktop split grid: video 45% LEFT / content 55% RIGHT on every panel, with no alternation. A fixed reading rhythm — the eye finds the video and the text in the same place on every panel — reads as more deliberate than flipping sides, which made each panel feel like a separate page. */ .cine-scrub .cine-pin{ height:100vh; min-height:0; display:grid; grid-template-columns:45% 55%; } .cine-scrub .cine-video-col{ grid-column:1; } .cine-scrub .cine-content-col{ grid-column:2; } /* ── No diagonal seam: panels are flush ─────────────────────────────────── A previous iteration clipped a 72px diagonal off each pinned panel. It cannot work in a PINNED layout and was the dark green band between panels: consecutive panels never overlap — each section owns its own scroll range and its .cine-pin is position:fixed within it — so the wedge cut off the panel had nothing behind it but the section's own background, which read as a solid buffer bar rather than a seam. The usual negative-margin overlap fix is not available either: GSAP's pinSpacing inserts a spacer whose height is the scroll math, and pulling panels together with negative margins desyncs every trigger's start/end below it. Flush edges, no clip, no gap. */ .cine-panel{ margin:0; } .cine-video-col{ position:relative; height:100vh; overflow:hidden; background:#12240f; } .cine-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } /* Desktop scrub draws to this instead — canvas drawImage has zero seek latency, unlike video.currentTime, which is what actually removes stutter. Hidden until JS confirms the frame sequence has loaded (see home-cinema.js); the