/* ============================================================================ motion.css — ANIMAZIONI CSS (Ken Burns, micro-interazioni) + STATI BASE ---------------------------------------------------------------------------- - Le animazioni di reveal vere (P1–P4) le fa motion.js con GSAP. - Qui stanno: lo stato-base nascosto dei reveal (attivo solo con JS, via .reveal-init su ), il Ken Burns dell'hero (P5) e la freccia scroll. - Senza JS NON c'è .reveal-init → tutto resta visibile (progressive enhancement). - Con prefers-reduced-motion tutto è immediatamente visibile e senza loop. ============================================================================ */ /* ---- Stato base dei reveal (solo con JS attivo) ------------------------- */ .reveal-init [data-reveal], .reveal-init [data-reveal-item] { opacity: 0; transform: translateY(28px); } .reveal-init [data-hero-claim], .reveal-init [data-hero-actions], .reveal-init [data-hero-scroll] { opacity: 0; } .reveal-init [data-hero-title] { opacity: 0; } /* Foto cinematografiche (P7) e testo split (P3): pre-hide via opacità. Poi motion.js gestisce la tendina clip-path (P7) e il reveal parola-per-parola via SplitText (P3, fade + risalita morbida — niente blur). */ .reveal-init [data-reveal-image], .reveal-init [data-split] { opacity: 0; } /* ---- Ken Burns hero (P5) — continuo, resta anche senza JS --------------- Zoom più marcato e più rapido: in una finestra di ~5s (durata di una slide dello slideshow) deve essere ben percepibile. */ @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.15); } } .hero__img { animation: kenburns 12s ease-in-out alternate infinite; } /* ---- Freccia scroll (bounce continuo, CSS) ----------------------------- */ @keyframes scroll-bounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(4px, 4px); } } .hero__scroll-arrow { animation: scroll-bounce 1.8s var(--ease-out) infinite; } /* ---- prefers-reduced-motion: tutto visibile, niente loop --------------- */ @media (prefers-reduced-motion: reduce) { .reveal-init [data-reveal], .reveal-init [data-reveal-item], .reveal-init [data-hero-claim], .reveal-init [data-hero-actions], .reveal-init [data-hero-scroll], .reveal-init [data-hero-title] { opacity: 1; transform: none; will-change: auto; } .hero__img, .hero__scroll-arrow { animation: none; } } /* ====================================================================== INTRO SHELL — overlay per le intro animate bespoke (vedi intro.js). Tutto qui è inerte se #site-intro non è nel DOM: lo scaffold di default NON monta nessuna intro. Sono solo le parti invarianti del guscio. ====================================================================== */ #site-intro { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--color-bg-dark, #1C1B1A); /* l'autore può sovrascriverlo inline */ /* Failsafe SENZA JS: l'overlay si auto-dismette dopo qualche secondo, così non si resta mai con uno schermo nero permanente. */ animation: intro-failsafe 0s linear 6s forwards; } @keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* Con JS attivo è la logica a gestire il timing: spegni il failsafe CSS. */ html.js-intro #site-intro { animation: none; } /* Scroll bloccato mentre l'intro è in scena. */ html.intro-lock, html.intro-lock body { overflow: hidden; height: 100%; } /* Teardown gestito da JS (fade-out, poi rimozione dal DOM). */ #site-intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s var(--ease-out, ease), visibility 0s linear .6s; } #site-intro.is-instant { transition: none; } /* Reduced-motion: nessuna intro, mai. */ @media (prefers-reduced-motion: reduce) { #site-intro { display: none !important; animation: none !important; } }