/* ============================================================ Face Scan — premium motion layer (agency-grade craft) Preloader · custom cursor · magnetic · marquee · scroll progress · kinetic-typography masks. Dark-neon identity preserved. Everything here degrades to a normal page if JS/GSAP is absent. ============================================================ */ /* ---- Lenis smooth-scroll helpers ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---- Scroll progress (top neon line) ---- */ .scrollprogress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--neon-cyan, #22E4FF), var(--neon-violet, #8B5CFF)); box-shadow: 0 0 12px rgba(34, 228, 255, .6); z-index: 90; pointer-events: none; } /* ---- Preloader ---- */ .preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg, #05060A); } .preloader__inner { display: grid; place-items: center; gap: 22px; width: min(320px, 72vw); } .preloader__mark { display: flex; align-items: center; gap: 12px; } .preloader__ring { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(34,228,255,.25); border-top-color: #22E4FF; animation: preSpin .9s linear infinite; } @keyframes preSpin { to { transform: rotate(360deg); } } .preloader__word { font-weight: 700; font-size: 20px; letter-spacing: .01em; color: var(--text, #F5F7FF); font-family: var(--font-ui, "Inter", system-ui, sans-serif); } .preloader__bar { position: relative; width: 100%; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; } .preloader__fill { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, #22E4FF, #8B5CFF); box-shadow: 0 0 10px rgba(34,228,255,.6); } .preloader__pct { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: .18em; color: var(--text-muted, #5B6485); } /* Guaranteed hide even if the JS libs never load (failsafe class on ). */ .preloader-done .preloader { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; } /* ---- Custom cursor (pointer devices only) ---- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none; border-radius: 50%; will-change: transform; mix-blend-mode: screen; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #22E4FF; box-shadow: 0 0 8px rgba(34,228,255,.9); } .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(139,92,255,.7); transition: width .25s ease, height .25s ease, border-color .25s ease, background-color .25s ease; } .cursor-ring.is-hover { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(34,228,255,.9); background: rgba(34,228,255,.06); } html.has-cursor, html.has-cursor * { cursor: none !important; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } } /* ---- Neon marquee strip ---- */ .marquee { overflow: hidden; border-block: 1px solid var(--stroke, #232A4D); background: rgba(10,13,22,.5); padding: 22px 0; } .marquee__track { display: flex; gap: 0; width: max-content; will-change: transform; } .marquee__item { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font-family: var(--font-ui, "Inter", sans-serif); font-weight: 700; font-size: clamp(20px, 3vw, 34px); letter-spacing: .02em; color: var(--text, #F5F7FF); white-space: nowrap; } .marquee__item .dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #22E4FF, #8B5CFF); box-shadow: 0 0 10px rgba(34,228,255,.6); } .marquee__item .ghost { color: transparent; -webkit-text-stroke: 1px rgba(154,163,199,.45); } /* ---- Kinetic typography line masks ---- */ .split-lines .line { overflow: hidden; } .split-lines .line-inner { display: block; will-change: transform; } /* When GSAP drives the page, neutralize the old CSS reveal so it doesn't fight. No !important — GSAP's inline styles (on hero elements it animates) must still win. */ html.gsap-on .reveal { opacity: 1; transform: none; transition: none; } /* Reduced motion: kill the heavy stuff. */ @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } .scrollprogress, .cursor-dot, .cursor-ring { display: none !important; } }