/* ═══════════════════════════════════════════════════════════════════════════ NEXUS MARQUEE · marquee.css — frosted-glass AI-disclosure ticker Companion to the Project Nexus Preloader Engine. Never overwrites master-loader.js / preloader.css — pure additive layer. Placement: injected INSIDE #nexus-preloader by marquee.js (between the photograph and .nxp-screen), or fixed to when used standalone. ═══════════════════════════════════════════════════════════════════════════ */ .nxp-marquee-container { position: fixed; left: 0; right: 0; bottom: 18vh; /* ~15–20% above the bottom edge */ z-index: 2147482999; /* standalone: above page, below .nxp (2147483000) */ overflow: hidden; pointer-events: none; background: rgba(11, 15, 22, 0.45); border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 18px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08); opacity: 1; transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.85s cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.85s; contain: layout paint; } /* inside the Nexus overlay: .nxp has contain:strict, so this fixed element already spans the overlay; child stacking puts it above the photo + veil and behind .nxp-screen (z-index: 2) */ #nexus-preloader .nxp-marquee-container, .nxp-marquee-container.nxp-marquee-inside { z-index: 1; } /* synced dismissal — mirrors master-loader's finish() timing exactly */ .nxp-marquee-container.nxp-marquee-out { opacity: 0; backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); visibility: hidden; } /* ── premium Poppins typography ── */ .nxp-marquee-track { display: inline-flex; align-items: center; white-space: nowrap; width: max-content; padding: clamp(10px, 1.6vh, 22px) 0; font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 200; font-size: clamp(3.5rem, 7vw, 9rem); line-height: 1.08; letter-spacing: 0.045em; color: #FFFFFF; text-shadow: 0 0 25px rgba(255, 255, 255, 0.65), 0 0 2px rgba(255, 255, 255, 0.9); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; will-change: transform; transform: translate3d(0, 0, 0); animation: nxp-marquee-run var(--nxp-marquee-speed, 46s) linear infinite; } @supports (font-weight: 300) { @media (max-width: 760px) { .nxp-marquee-track { font-weight: 300; } } /* thin weights hold up better slightly bolder on small DPIs */ } .nxp-marquee-item { display: inline-block; } .nxp-marquee-sep { display: inline-block; margin: 0 clamp(22px, 3vw, 56px); transform: translateY(-0.06em); opacity: 0.85; text-shadow: 0 0 18px rgba(255, 255, 255, 0.8); } /* seamless loop: the track holds two identical sequences; sliding exactly −50% lands on an identical frame — zero gaps, zero jumps */ @keyframes nxp-marquee-run { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } @media (max-height: 560px) { .nxp-marquee-container { bottom: 12vh; } } @media (prefers-reduced-motion: reduce) { .nxp-marquee-track { animation: none; } .nxp-marquee-container { transition: opacity 0.2s linear, visibility 0.2s; } }