/* ============================================================================ Hero Curtain Scroll — front-end styles. Structure mirrors the JS module layout: 1. Container + immersive lock 2. Stages (preload splash, reveal surface, image layers) 3. Media (video/iframe intro layer, per-mode, fallback image) 4. Curtain reveal (mask gradient while the curtain parts) 5. Loader + interaction capture 6. Hints 7. Debug label 8. Dismissed state ============================================================================ */ /* ============================================================================ 1. Container The immersive ``/`` scroll-lock that used to live here is now `.be-platform-scroll-lock-doc` from the wp-be-platform UI primitives stylesheet (be-platform-ui). The JS toggles that class on document and body during the intro overlay. ============================================================================ */ .hcs-hero-curtain { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: #fff; background-color: #fff; --hcs-curtain-progress: 0; --hcs-curtain-gap: 0%; } /* ============================================================================ 2. Stages (preload splash + reveal surface + image layers) ============================================================================ */ .hcs-preload-splash { position: fixed; inset: 0; z-index: 999993; background: var(--hcs-intro-bg, #fff); opacity: 1; transition: opacity 250ms linear; } .hcs-reveal-surface { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: #fff; background-color: #fff; } .hcs-hero-curtain.hcs-intro-overlay-active .hcs-reveal-surface { position: fixed; inset: 0; z-index: 999992; } .hcs-hero-curtain.hcs-intro-overlay-active .hcs-stage-image-1, .hcs-hero-curtain.hcs-intro-overlay-active .hcs-stage-image-2 { position: absolute; } .hcs-stage { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; will-change: opacity, transform; } .hcs-stage-image-1 { position: fixed; left: 0; right: 0; top: auto; bottom: 5vh; height: 45vh; background-size: auto 45vh; background-position: center bottom; background-repeat: no-repeat; will-change: transform, opacity; z-index: 2; opacity: 1; } .hcs-stage-image-2 { position: fixed; left: 0; right: 0; top: 50%; margin-top: -35vh; height: 70vh; background-size: auto 70vh; background-position: center center; background-repeat: no-repeat; will-change: transform, opacity; z-index: 1; opacity: 0; transition: opacity 1000ms linear; } .hcs-hero-curtain.hcs-mobile-portrait-mode .hcs-stage-image-1 { left: var(--hcs-image1-pad-x, 0px); right: var(--hcs-image1-pad-x, 0px); background-size: 100% auto; background-position: center bottom; } .hcs-hero-curtain.hcs-mobile-portrait-mode .hcs-stage-image-2 { left: var(--hcs-image2-pad-x, 0px); right: var(--hcs-image2-pad-x, 0px); background-size: 100% auto; } .hcs-hero-curtain.hcs-mobile-portrait-mode.hcs-image2-mobile-center .hcs-stage-image-2 { top: 50%; bottom: auto; margin-top: -35vh; background-position: center center; } .hcs-hero-curtain.hcs-mobile-portrait-mode.hcs-image2-mobile-bottom .hcs-stage-image-2 { top: auto; bottom: var(--hcs-image2-mobile-bottom, 0px); margin-top: 0; background-position: center bottom; } .hcs-hero-curtain.hcs-curtain-complete .hcs-stage-image-2, .hcs-hero-curtain.hcs-intro-dismissed .hcs-stage-image-2 { opacity: 1; } /* ============================================================================ 3. Media (intro video + fallback image) ============================================================================ */ .hcs-stage-video { z-index: 3; overflow: hidden; opacity: 1; } .hcs-hero-curtain.hcs-intro-overlay-active .hcs-stage-video { position: fixed; inset: 0; z-index: 999994; opacity: 1; background: var(--hcs-intro-bg, #fff); transition: background-color 250ms linear; } .hcs-intro-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity 250ms linear; } /* * Safari-specific pre-JS guard. * * Without this, Safari paints a