Split Screen Reveal

Create a split screen reveal entrance. On first load, the page is hidden behind two dark panels that part like curtains: the left panel slides fully left (translateX(-100%)), the right panel slides fully right, both over 700ms with cubic-bezier(0.22, 1, 0.36, 1), starting ~350ms after mount. As they part, the hero content underneath fades and scales in (opacity 0 / scale 0.96 to full, 400ms, starting ~550ms). Optional flourish: a 2px vertical accent line at the exact seam that collapses (scaleY to 0) just as the panels start moving, like the curtain cord being pulled. Implementation: both panels absolutely positioned (top 0, bottom 0, one at left: 0 and one at right: 0), each 50.5% wide so they overlap 1% at the seam and no gap ever shows. Animate transform only, and remove the panels from the DOM (or set display: none) after the animation so they never block interaction. Run once per session (sessionStorage flag). Under prefers-reduced-motion, skip the panels entirely. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.