/* ============================================================================ intro.css — Intro animata "Chill Out" (preloader bespoke) ---------------------------------------------------------------------------- Pannello antracite a tutto schermo con logo bianco centrato. La coreografia (logo che si materializza in dissolvenza glow → barra di caricamento con fill rosso brand → wipe clip-path d'uscita) è in assets/js/intro-choreo.js; il ciclo di vita (una-volta-per-sessione, scroll-lock, reduced-motion, failsafe, handoff) è in assets/js/intro.js. Caricato nel così il pannello copre TUTTO già al primo paint (niente flash della hero sotto). ============================================================================ */ #site-intro { position: fixed; inset: 0; z-index: 100000; /* sopra header e tutto il resto */ overflow: hidden; } /* Pannello scuro che poi viene "tagliato via" (clip-path) */ .intro__panel { position: absolute; inset: 0; background: var(--color-secondary, #262624); display: grid; place-items: center; will-change: clip-path; } /* Stage: impila verticalmente logo + barra di caricamento, centrati */ .intro__stage { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 5vw, 44px); } /* Logo bianco centrato: si materializza in dissolvenza glow (GSAP) */ .intro__logo { position: relative; width: clamp(170px, 34vw, 300px); aspect-ratio: 228 / 225; will-change: transform, opacity, filter; } .intro__logo-img { position: absolute; inset: 0; width: 100%; height: auto; display: block; background: transparent; /* neutralizza img{background:bg-alt} dello scaffold (niente riquadro crema) */ } /* Barra di caricamento: track semitrasparente + fill rosso brand (GSAP scaleX) */ .intro__load { position: relative; width: clamp(150px, 40vw, 260px); height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); /* track semitrasparente */ overflow: hidden; opacity: 0; /* acceso da GSAP */ } .intro__load-bar { position: absolute; inset: 0; border-radius: inherit; background: var(--color-primary, #ED2E35); /* avanzamento rosso brand */ box-shadow: 0 0 12px rgba(237, 46, 53, 0.7); transform: scaleX(0); /* riempimento gestito da GSAP */ transform-origin: left center; will-change: transform; } /* Filo rosso che cavalca il bordo del wipe (rende visibile la transizione anche dark-on-dark, dato che sotto la hero è anch'essa scura) */ .intro__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--color-primary, #ED2E35); box-shadow: 0 0 18px rgba(237, 46, 53, 0.75); opacity: 0; transform: translateX(-50%); pointer-events: none; } /* Scroll bloccato mentre l'intro è a schermo (classe messa da intro.js sul root) */ html.intro-lock, html.intro-lock body { overflow: hidden; } /* Stati di smontaggio (li mette il guscio intro.js dopo il done()) */ #site-intro.is-done { opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } #site-intro.is-instant { opacity: 0; transition: none; } /* Failsafe SENZA JS: se intro.js non gira proprio (JS disattivato), il pannello sparisce comunque dopo qualche secondo. Col JS attivo (html.js-intro) comanda lo script e questa animazione è disattivata. */ #site-intro { animation: introFailsafe 0.6s ease 3.5s forwards; } html.js-intro #site-intro { animation: none; } @keyframes introFailsafe { to { opacity: 0; visibility: hidden; } } /* Reduced-motion: niente animazioni (intro.js comunque salta del tutto l'intro) */ @media (prefers-reduced-motion: reduce) { #site-intro { animation: none; } }