/* ═══════════════════════════════════════════════════════════════════ intro.css — ScaleForge AI cinematic cold-open 🎬 Netflix-style: logo + loading bar → bar fills → "ta-dum" zoom-through → overlay pulls toward you and dissolves into the landing page. Pure-CSS timeline (GPU transforms/opacity only). intro.js just handles scroll-lock, click-to-skip, reduced-motion, and node cleanup. This stylesheet is render-blocking in , so the overlay paints BEFORE the landing page — no flash of un-introed content. ═══════════════════════════════════════════════════════════════════ */ /* Lock scroll while the intro plays (added/removed by intro.js). */ html.pg-intro-active { overflow: hidden !important; } /* ── The overlay ──────────────────────────────────────────────────── */ #pg-intro { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #08080a; overflow: hidden; will-change: opacity, transform; transform: translateZ(0); /* own compositor layer → no repaint jank */ backface-visibility: hidden; /* Overlay holds full-screen, then pulls toward viewer + dissolves. easeOutCubic front-loads the fade, so the landing page emerges early and crossfades up underneath the dissolving overlay for a seamless hand-off. */ animation: pgOverlayReveal 0.80s cubic-bezier(0.33, 1, 0.68, 1) 3.15s forwards; } /* Soft accent bloom that blooms at the climax. */ #pg-intro .pg-glow { position: absolute; left: 50%; top: 50%; width: 65vmax; height: 65vmax; transform: translate(-50%, -50%) scale(0.6); border-radius: 50%; background: radial-gradient(circle, rgba(110,110,244,0.20), rgba(110,110,244,0) 60%); opacity: 0; pointer-events: none; z-index: 1; animation: pgGlow 1.0s ease-out 3.05s forwards; } #pg-intro .pg-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; } /* ── Wordmark (matches the site logo exactly) ─────────────────────── */ #pg-intro .pg-logo { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.9rem, 6.5vw, 3.1rem); line-height: 1; color: #f4f4f5; display: inline-flex; align-items: center; gap: 2px; opacity: 0; will-change: transform, opacity, filter; /* Phase 1: ease in. Phase 2 (3.10s): zoom-through + glow bloom + fade. The long gap between the two phases is the "hold" — the finished wordmark + filled bar sit on screen so the cold-open can actually be appreciated. */ animation: pgLogoIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards, pgLogoZoom 0.90s cubic-bezier(0.55, 0, 0.2, 1) 3.10s forwards; } #pg-intro .pg-logo .pg-dot { color: #6e6ef4; animation: pgDotPulse 1.6s ease-in-out infinite; } /* ── Loading bar ──────────────────────────────────────────────────── */ #pg-intro .pg-bar { position: relative; width: clamp(150px, 22vw, 230px); height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); overflow: hidden; opacity: 0; animation: pgBarIn 0.5s ease 0.45s forwards, pgBarOut 0.4s ease 3.00s forwards; } #pg-intro .pg-fill { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, #6e6ef4, #8f8ff7); box-shadow: 0 0 12px rgba(110, 110, 244, 0.65); transform-origin: left center; transform: scaleX(0); animation: pgFill 1.75s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards; } /* Shimmer sweep across the fill while loading. */ #pg-intro .pg-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transform: translateX(-120%); animation: pgShimmer 1.1s ease-in-out 0.7s 3 forwards; } /* ── Keyframes ────────────────────────────────────────────────────── */ @keyframes pgLogoIn { 0% { opacity: 0; transform: translateY(12px) scale(0.94); filter: blur(5px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes pgLogoZoom { 0% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 rgba(143,143,247,0)); } 42% { opacity: 1; transform: scale(1.16); filter: drop-shadow(0 0 26px rgba(143,143,247,0.55)); } 100% { opacity: 0; transform: scale(1.75); filter: drop-shadow(0 0 48px rgba(143,143,247,0)); } } @keyframes pgDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @keyframes pgBarIn { 0% { opacity: 0; transform: scaleX(0.6); } 100% { opacity: 1; transform: scaleX(1); } } @keyframes pgBarOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(3px); } } @keyframes pgFill { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes pgShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } @keyframes pgGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 40% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } } @keyframes pgOverlayReveal { 0% { opacity: 1; transform: scale(1); } 60% { opacity: 0; transform: scale(1.10); } /* page fully visible early… */ 100% { opacity: 0; transform: scale(1.14); } /* …then the empty layer finishes its drift */ } /* ── Click / key skip (set by intro.js) ───────────────────────────── */ #pg-intro.pg-skip, #pg-intro.pg-skip * { animation: none !important; } #pg-intro.pg-skip { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } /* ── Accessibility: no motion → no show ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { #pg-intro { display: none !important; } html.pg-intro-active { overflow: auto !important; } }