/* ===================================================================== CALLRECOVER — HERO STAGE (commercial video) + SITE MOTION MODES The code-drawn SVG scene styles were retired 2026-07-07 when the produced commercial replaced them (John's call). This file now owns: stage chrome, the video element, and the site-wide motion modes. Motion modes (class set on by js/hero-anim.js): .motion-full — video stage, glow drift, staggered reveals .motion-simple — static thread, no drift, instant reveals The visitor's toggle always wins; OS reduced-motion and narrow viewports only pick the DEFAULT mode. ===================================================================== */ /* ---------------- stage chrome ---------------- */ .stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .stage-label { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-muted); text-transform: uppercase; } .motion-toggle { flex-shrink: 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--violet-light); background: var(--violet-tint-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: border-color var(--dur-hover) ease, background var(--dur-hover) ease; } .motion-toggle:hover { border-color: var(--violet); background: var(--violet-tint); } /* mode switching: exactly one of video/mock is visible */ .hero-anim { display: none; } .motion-full .hero-anim { display: block; } .motion-full .phone-mock, .motion-full .mock-caption { display: none; } /* launch state: video disabled until the remade commercial lands — the thread shows for everyone regardless of motion mode */ .hero-visual.no-video .hero-anim { display: none; } .motion-full .hero-visual.no-video .phone-mock { display: flex; } .motion-full .hero-visual.no-video .mock-caption { display: block; } .hero-anim { position: relative; background: #000; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } #hero-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; } /* overlay controls */ .replay-btn, .sound-btn { position: absolute; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-primary); background: rgba(13, 11, 31, 0.72); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; } .replay-btn { top: 12px; left: 12px; } .sound-btn { right: 12px; bottom: 12px; } .replay-btn:hover, .sound-btn:hover { border-color: var(--violet); } /* ---------------- hero glow drift (full mode only) ---------------- */ .motion-full .hero::before { animation: glow-a 16s ease-in-out infinite alternate; } .motion-full .hero::after { animation: glow-b 19s ease-in-out infinite alternate; } @keyframes glow-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.15); } } @keyframes glow-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(50px, -25px) scale(1.1); } } /* ---------------- reveals per mode ---------------- */ /* full mode: cards cascade */ .motion-full .steps .step-card:nth-child(2), .motion-full .why-grid .why-card:nth-child(2), .motion-full .calc-stats .stat-chip:nth-child(2) { transition-delay: 0.1s; } .motion-full .steps .step-card:nth-child(3), .motion-full .why-grid .why-card:nth-child(3), .motion-full .calc-stats .stat-chip:nth-child(3) { transition-delay: 0.2s; } .motion-full .steps .step-card:nth-child(4), .motion-full .why-grid .why-card:nth-child(4) { transition-delay: 0.3s; } /* simple mode: no reveal motion at all — content is just there */ .motion-simple .reveal { opacity: 1; transform: none; transition: none; }