/* ════════════════════════════════════════════════════════════════ CINEMATIC LAYER v3 — bold, always-on effects ---------------------------------------------------------------- Everything visible is CSS-driven so it plays even when the OS/browser requests reduced motion (browsers don't auto-disable CSS animation, and this site is a deliberately flashy gaming brand). The hero auto-animates with pure CSS (no JS needed); scroll reveals are toggled by a tiny observer in cinematic.js; Motion powers the scroll progress beam. A 7s failsafe reveals all content if JS dies. Gated on . ═══════════════════════════════════════════════════════════════════ */ :root { --cin-ease: cubic-bezier(0.16, 1, 0.30, 1); } /* Kill the old "boost trail" streaks (also removed from script.js). */ .cin .trail { display: none !important; } /* ── Top scroll-progress beam ────────────────────────────────────── */ #cin-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #00aaff, #7cc8ff 55%, #0066ff); box-shadow: 0 0 14px rgba(0, 170, 255, 0.8); z-index: 200; pointer-events: none; } /* ════════════════════════════════════════════════════════════════ HERO — auto-animating cinematic entrance (no JS required) ═══════════════════════════════════════════════════════════════════ */ /* 3D hero centerpiece canvas (Three.js) — above the aurora, below text */ #hero3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; } /* When the 3D centerpiece is live, lift the hero text to the top so the emblem-on-peak owns the centre. Desktop only (3D is desktop-only); the class is added by hero3d.js only after the scene actually renders, so a WebGL failure keeps the normal centered hero. */ @media (min-width: 760px) { .hero.has-3d { align-items: stretch; justify-content: flex-start; } .hero.has-3d .hero-inner { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 90vh; margin-top: 6vh; } .hero.has-3d .hero-badges { display: none; } /* declutter — like the reference */ .hero.has-3d .tagline { margin-bottom: 0; } .hero.has-3d .hero-btns { margin-top: auto; margin-bottom: 6vh; } /* sit near the bottom */ } /* Drifting aurora glow behind the hero content */ .hero-aurora { position: absolute; left: -10%; right: -10%; top: -15%; height: 95%; z-index: 0; pointer-events: none; filter: blur(34px); opacity: 0.85; background: radial-gradient(42% 60% at 28% 42%, rgba(0, 120, 255, 0.20), transparent 70%), radial-gradient(40% 55% at 72% 56%, rgba(124, 58, 237, 0.16), transparent 70%), radial-gradient(45% 40% at 52% 30%, rgba(0, 200, 255, 0.12), transparent 70%); animation: cinAurora 16s ease-in-out infinite; } @keyframes cinAurora { 0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); opacity: 0.7; } 50% { transform: translate3d(3%, 2%, 0) scale(1.12); opacity: 0.95; } } @media (prefers-reduced-motion: reduce) { /* aurora still drifts but calmer */ .hero-aurora { animation-duration: 26s; } } /* Each hero block flies up + sharpens, staggered, right on load. */ .cin .hero-inner > [data-cin-hero] { opacity: 0; animation: cinHeroIn 0.9s var(--cin-ease) both; } .cin .hero-inner > [data-cin-hero]:nth-child(1) { animation-delay: 0.10s; } .cin .hero-inner > [data-cin-hero]:nth-child(2) { animation-delay: 0.19s; } .cin .hero-inner > [data-cin-hero]:nth-child(3) { animation-delay: 0.28s; } .cin .hero-inner > [data-cin-hero]:nth-child(4) { animation-delay: 0.37s; } .cin .hero-inner > [data-cin-hero]:nth-child(5) { animation-delay: 0.46s; } .cin .hero-inner > [data-cin-hero]:nth-child(6) { animation-delay: 0.55s; } .cin .hero-inner > [data-cin-hero]:nth-child(7) { animation-delay: 0.64s; } @keyframes cinHeroIn { 0% { opacity: 0; transform: translateY(42px) scale(0.96); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: blur(0); } } /* The wordmark is a transparent PNG, but it was rendering with a blue BOX around it rather than a glow hugging the letters. Cause: nested filters. cinHeroIn animates filter:blur() on .logo-media, and animation-fill-mode:both leaves filter:blur(0) on it forever. A filtered ancestor rasterises its subtree, so the child img's drop-shadow gets cast from that layer's RECTANGLE instead of the letters' alpha. Most obvious on iOS Safari. Fix: give the logo a blur-free intro. Same fade and rise as everything else, no filter left behind, so the drop-shadow follows the letters. */ .cin .hero-inner > [data-cin-hero].logo-media { animation-name: cinHeroInNoBlur; } @keyframes cinHeroInNoBlur { 0% { opacity: 0; transform: translateY(42px) scale(0.96); } 100% { opacity: 1; transform: none; } } /* Logo: power-on burst, then hand off to the continuous shimmer/flicker. Selector is more specific than the generic hero rule above so it wins, and overrides style.css's titleIn entrance + reduced-motion variant. */ .cin .hero-inner > [data-cin-hero].logo { animation: cinLogoIn 1s var(--cin-ease) 0.19s both, logo-sweep 5s linear 1.2s infinite, logo-flicker 4.5s ease-in-out 1.2s infinite; } @keyframes cinLogoIn { 0% { opacity: 0; transform: translateY(42px) scale(0.88); filter: drop-shadow(0 0 0 rgba(0,170,255,0)); } 55% { opacity: 1; transform: translateY(-5px) scale(1.05); filter: drop-shadow(0 0 30px rgba(140, 205, 255, 0.95)); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 12px rgba(0, 150, 255, 0.5)); } } /* Scroll cue fades in last */ .cin .scroll-down { opacity: 0; animation: cinFadeIn 0.8s ease 0.9s both; } /* Primary CTA — breathing glow + travelling shine */ .cin .btn-hero { position: relative; overflow: hidden; animation: cinCtaBreath 2.8s ease-in-out infinite; } @keyframes cinCtaBreath { 0%, 100% { box-shadow: 0 0 28px rgba(0, 170, 255, 0.4); } 50% { box-shadow: 0 0 52px rgba(0, 170, 255, 0.75); } } .cin .btn-hero::after { content: ''; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; transform: skewX(-20deg); background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.5), transparent); animation: cinCtaShine 3.6s ease-in-out 1.4s infinite; } @keyframes cinCtaShine { 0% { left: -65%; } 28% { left: 150%; } 100% { left: 150%; } } /* ════════════════════════════════════════════════════════════════ SCROLL REVEALS — bold slide + scale, toggled by .cin-in (observer) ═══════════════════════════════════════════════════════════════════ */ .cin .reveal { opacity: 0; transform: translateY(48px) scale(0.97); transition: opacity 0.8s var(--cin-ease), transform 0.8s var(--cin-ease); will-change: transform, opacity; } .cin .reveal.cin-in { opacity: 1; transform: none; } .cin .order-builder, .cin .coaching-card { transform: translateY(60px) scale(0.95); } .cin .reviews-carousel { transform: translateY(30px) scale(0.97); } .cin #orderFormWrap .reveal { opacity: 1; transform: none; transition: none; } /* ════════════════════════════════════════════════════════════════ AMBIENT POLISH — title shimmer + richer card hovers ═══════════════════════════════════════════════════════════════════ */ /* Section headings shimmer like the logo (cohesive premium feel). */ .cin h2 { background: linear-gradient(100deg, #ffffff 0%, #cfeaff 38%, #00aaff 50%, #cfeaff 62%, #ffffff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: cinTitleShimmer 7s linear infinite; } @keyframes cinTitleShimmer { to { background-position: 220% 50%; } } /* Punchier card hovers */ .cin .step, .cin .why-card, .cin .review-card, .cin .faq-item, .cin .shop-card { transition: border-color 0.25s, transform 0.25s var(--cin-ease), box-shadow 0.25s; } .cin .step:hover, .cin .why-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 26px rgba(0, 170, 255, 0.18); } @keyframes cinFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Failsafe reveal (JS dead) ───────────────────────────────────── */ .cin-failed .reveal, .cin-failed .hero-inner > [data-cin-hero], .cin-failed .scroll-down, .cin-failed .logo { opacity: 1 !important; transform: none !important; animation: none !important; }