/* Phase 5 — Cinematic Page Transitions * Vocabulary: dissolve (default), letterbox, iris * All animations driven by transition-controller.js via GSAP. * Overlay is injected as first child of via wp_body_open. */ /* ── Base overlay ─────────────────────────────────────────────────────────── */ .page-transition-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; visibility: hidden; } .page-transition-overlay.is-active { pointer-events: all; visibility: visible; } /* ── Dissolve — full-page veil ───────────────────────────────────────────── */ .pt-dissolve { position: absolute; inset: 0; background: var(--bg-cinema, #0B0B0C); opacity: 0; visibility: hidden; will-change: opacity; } .pt-dissolve.is-active { visibility: visible; } /* ── Letterbox — top + bottom bars ──────────────────────────────────────── */ .pt-letterbox { position: absolute; inset: 0; pointer-events: none; visibility: hidden; } .pt-letterbox.is-active { visibility: visible; } .pt-letterbox__top, .pt-letterbox__bottom { position: absolute; left: 0; right: 0; height: 50vh; background: var(--bg-cinema, #0B0B0C); will-change: transform; } .pt-letterbox__top { top: 0; transform: translateY(-100%); } .pt-letterbox__bottom { bottom: 0; transform: translateY(100%); } /* ── Iris — SVG mask, classic iris wipe ──────────────────────────────────── */ .pt-iris { position: absolute; inset: 0; visibility: hidden; } .pt-iris.is-active { visibility: visible; } .pt-iris svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* ── FOUC prevention ─────────────────────────────────────────────────────── */ /* Inline script in adds js-entering-{type} to before first paint. * These rules ensure the overlay is opaque before JS animates it away. */ .js-entering-dissolve .page-transition-overlay, .js-entering-letterbox .page-transition-overlay, .js-entering-iris .page-transition-overlay { visibility: visible; pointer-events: all; } .js-entering-dissolve .pt-dissolve { visibility: visible; opacity: 1; } .js-entering-letterbox .pt-letterbox { visibility: visible; } .js-entering-letterbox .pt-letterbox__top { transform: translateY(0); } .js-entering-letterbox .pt-letterbox__bottom { transform: translateY(0); } /* Iris: r=0 on the SVG circle (default) means mask shows dark overlay fully. * No additional CSS needed — JS sets the initial circle state before animating. */ .js-entering-iris .pt-iris { visibility: visible; } /* ── Resting f. mark clears overlay during exit ──────────────────────────── */ /* During exit the transition overlay sits at z-index 99999. * .cinematic-hero__mark-resting in cinematic-hero.css must be >= 100000 * for the f. to persist visually during the dissolve/letterbox transition. * See cinematic-hero.css .cinematic-hero__mark-resting for the value. */