/* ========================================================================== intro.css — Kinetic logo-assembly preloader (index.html) -------------------------------------------------------------------------- The STUCO badge is rebuilt as independent SVG layers (disc, five letters, VIS wordmark, two dashes). intro.js constructs the letter layers at play time (measured against the loaded font so spacing is exact), then GSAP flies each layer in from a different screen edge and settles them into the final lockup. The assembled badge then flies into the nav logo slot as the homepage rises — one continuous scene. The overlay is display:none unless .intro-pending was set by the synchronous gate script in — so repeat visits never flash it, and first visits never flash the homepage early (this sheet is render-blocking). ========================================================================== */ .intro { position: fixed; inset: 0; z-index: 999; /* Warm rose field: white letters stay visible mid-flight (they'd vanish on pure white), and the maroon disc lands with real presence. */ background: var(--brand-tint, #f7e9ec); display: none; align-items: center; justify-content: center; } html.intro-pending .intro { display: flex; } /* While the intro plays, prevent scrolling the page underneath. */ html.intro-pending { overflow: hidden; } /* Assembly stage — a responsive square the badge builds inside. */ .intro__stage { width: clamp(230px, 46vw, 400px); will-change: transform, opacity; } .intro__stage svg { display: block; width: 100%; height: auto; overflow: visible; /* layers start far outside the viewBox */ } /* Each independently animated layer */ .intro-piece { will-change: transform; }