/* ============================================================ SKYEFIRE — Premium Immersive Layer (Active-Theory grade) Loaded AFTER styles.css. Adds: preloader, hero energy-particle canvas, cyberpunk sidebar rails, magnetic affordances, GSAP reveal/split-text states, headline warp wrapper. Brand-native: #050816 base, phoenix spectrum (#FF007A / #8A2EFF / #00CFFF). ============================================================ */ /* ---------------------------------------------------------------- When the premium layer is active, GSAP owns .reveal. Keep the CSS transition that styles.css applies but let GSAP drive transforms. GSAP sets the initial hidden state via gsap.set(); we just make sure the legacy `.reveal.in` rule and the CSS transition don't fight GSAP. .sf-premium is added to by premium.js. ---------------------------------------------------------------- */ .sf-premium .reveal { transition: none; } /* GSAP-controlled reveals: neutralize the legacy opacity:0 so a failure to init never leaves content invisible — GSAP re-hides them. */ .sf-premium .reveal { opacity: 1; transform: none; } .sf-premium.sf-gsap-ready .reveal { /* GSAP now manages visibility */ } /* ================================================================ 1. PRELOADER (index only) ================================================================ */ #sf-preloader { position: fixed; inset: 0; z-index: 10000; background: #050816; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; /* clip-path used by GSAP for the wipe reveal */ will-change: transform, opacity, clip-path; } /* lock scroll while preloader is up */ html.sf-preloading, html.sf-preloading body { overflow: hidden; height: 100%; } #sf-preloader .sf-pre-mark { filter: drop-shadow(0 0 26px rgba(138, 46, 255, 0.55)) drop-shadow(0 0 50px rgba(0, 207, 255, 0.25)); opacity: 0; transform: translateY(8px) scale(0.96); } #sf-preloader .sf-pre-mark img { height: 64px; width: auto; display: block; } .sf-pre-counter { font-family: var(--font-head, 'Orbitron', sans-serif); font-weight: 700; font-size: clamp(2.6rem, 8vw, 4.4rem); letter-spacing: 0.04em; line-height: 1; background: linear-gradient(120deg, #00CFFF 0%, #8A2EFF 50%, #FF007A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #00CFFF; /* fallback */ filter: drop-shadow(0 0 18px rgba(0, 207, 255, 0.45)) drop-shadow(0 0 30px rgba(255, 0, 122, 0.25)); font-variant-numeric: tabular-nums; } .sf-pre-counter .sf-pre-pct { font-size: 0.42em; opacity: 0.8; margin-left: 0.15em; -webkit-text-fill-color: rgba(194, 203, 214, 0.85); } .sf-pre-track { position: relative; width: min(260px, 62vw); height: 2px; border-radius: 2px; background: rgba(194, 203, 214, 0.14); overflow: hidden; } .sf-pre-bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, #00CFFF, #8A2EFF, #FF007A); box-shadow: 0 0 14px rgba(138, 46, 255, 0.7); border-radius: 2px; } .sf-pre-eyebrow { font-family: var(--font-mono, 'Space Mono', monospace); font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-muted, #8a93a6); } /* ================================================================ 2. HERO ENERGY-PARTICLE CANVAS (index hero only) z=2 → above scrim (z1) + video (z0), below hero content (z3) ================================================================ */ .sf-hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; pointer-events: none; /* never cause overflow */ max-width: 100%; } /* ================================================================ 3. CYBERPUNK SIDEBAR RAILS (index hero, desktop >= 1100px only) ================================================================ */ .sf-rail { position: fixed; top: 0; bottom: 0; width: 64px; z-index: 60; /* above hero content, below header(100) + preloader(10000) */ display: none; /* shown only >=1100px via media query */ flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; pointer-events: none; /* only icons are interactive */ } .sf-rail--left { left: 0; } .sf-rail--right { right: 0; } /* the vertical hairline */ .sf-rail::before { content: ''; position: absolute; top: 14%; bottom: 14%; width: 1px; background: linear-gradient( to bottom, transparent, rgba(0, 207, 255, 0.0) 8%, rgba(0, 207, 255, 0.55) 50%, rgba(0, 207, 255, 0.0) 92%, transparent ); } .sf-rail--left::before { left: 30px; } .sf-rail--right::before { right: 30px; } .sf-rail--right::before { background: linear-gradient( to bottom, transparent, rgba(255, 0, 122, 0.0) 8%, rgba(255, 0, 122, 0.5) 50%, rgba(0, 207, 255, 0.45) 92%, transparent ); } .sf-rail-icon { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: rgba(0, 207, 255, 0.78); background: rgba(0, 207, 255, 0.04); border: 1px solid rgba(0, 207, 255, 0.18); pointer-events: auto; cursor: pointer; text-decoration: none; transition: color .25s ease, border-color .25s ease, box-shadow .3s ease, background .25s ease, transform .25s ease; } .sf-rail-icon svg { width: 20px; height: 20px; display: block; } .sf-rail-icon:hover, .sf-rail-icon:focus-visible { color: #fff; border-color: rgba(0, 207, 255, 0.7); background: rgba(0, 207, 255, 0.12); box-shadow: 0 0 18px rgba(0, 207, 255, 0.55), inset 0 0 12px rgba(0, 207, 255, 0.25); transform: scale(1.08); outline: none; } .sf-rail--right .sf-rail-icon { color: rgba(255, 0, 122, 0.8); background: rgba(255, 0, 122, 0.04); border-color: rgba(255, 0, 122, 0.2); } .sf-rail--right .sf-rail-icon:hover, .sf-rail--right .sf-rail-icon:focus-visible { color: #fff; border-color: rgba(255, 0, 122, 0.7); background: rgba(255, 0, 122, 0.12); box-shadow: 0 0 18px rgba(255, 0, 122, 0.55), inset 0 0 12px rgba(255, 0, 122, 0.25); } /* tooltip */ .sf-rail-icon[data-tip]::after { content: attr(data-tip); position: absolute; top: 50%; transform: translateY(-50%) scale(0.96); white-space: nowrap; font-family: var(--font-mono, 'Space Mono', monospace); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: rgba(5, 8, 22, 0.92); border: 1px solid rgba(194, 203, 214, 0.18); padding: 5px 9px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .sf-rail--left .sf-rail-icon[data-tip]::after { left: calc(100% + 12px); } .sf-rail--right .sf-rail-icon[data-tip]::after { right: calc(100% + 12px); } .sf-rail-icon:hover[data-tip]::after, .sf-rail-icon:focus-visible[data-tip]::after { opacity: 1; transform: translateY(-50%) scale(1); } @media (min-width: 1100px) { .sf-rail { display: flex; } } /* ================================================================ 4. SPLIT-TEXT (hero headline lines) + magnetic helpers ================================================================ */ .sf-split-line { display: block; overflow: hidden; /* mask for the y-reveal */ /* tiny vertical breathing room so glyph descenders/ascenders aren't clipped */ padding-block: 0.04em; } .sf-split-inner { display: block; will-change: transform, opacity; } /* The headline uses .gradient-text (background-clip:text on the parent). Once we split it into nested block spans, the gradient no longer clips to the inner text (the inner box has no background of its own) and the text renders transparent. Re-apply the phoenix gradient + text clip to each split inner so every line keeps the gradient fill. */ .gradient-text .sf-split-inner { background: var(--phoenix-gradient, linear-gradient(120deg, #FF007A 0%, #8A2EFF 50%, #00CFFF 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* magnetic targets — keep clickable; transform driven by GSAP quickTo */ .sf-magnetic { will-change: transform; } /* ================================================================ 5. HEADLINE WARP (lightweight, legibility-first) Subtle RGB split layer behind the headline that follows cursor. ================================================================ */ .sf-warp-wrap { position: relative; } /* ================================================================ REDUCED MOTION — fully static, no rails, no particles ================================================================ */ @media (prefers-reduced-motion: reduce) { #sf-preloader { transition: none !important; } .sf-hero-particles { display: none !important; } .sf-rail { display: none !important; } .sf-premium .reveal { opacity: 1 !important; transform: none !important; } .sf-split-inner { transform: none !important; opacity: 1 !important; } .sf-magnetic { transform: none !important; } } /* touch / coarse pointers: no rails, no hero particles, no magnetic offset */ @media (hover: none), (pointer: coarse) { .sf-rail { display: none !important; } .sf-hero-particles { display: none !important; } } /* hard guard: never allow the premium layer to introduce horizontal scroll */ html, body { overflow-x: hidden; }