/* ========================================================================= ANIMATIONS — Movimento e transizioni ------------------------------------------------------------------------- REGOLA DI ACCESSIBILITÀ: in fondo al file tutto viene disattivato per chi ha impostato "riduci movimento" nel sistema operativo (prefers-reduced-motion). ========================================================================= */ /* ---------- Keyframes ---------------------------------------------------- */ @keyframes comparsaSu { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes comparsaLato { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes zoomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @keyframes pulsazione { 0% { box-shadow: 0 0 0 0 var(--c-accento); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes rimbalzo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes scorrimento { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rotazione { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes raggi { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } } @keyframes tracciaLinea { to { stroke-dashoffset: 0; } } /* ---------- Rivelazione allo scroll -------------------------------------- */ /* RETE DI SICUREZZA: gli elementi partono nascosti SOLO se la classe .js-animazioni è stata messa sull' da assets/js/tema.js. Se il JavaScript è disattivato o va in errore, il contenuto resta comunque visibile: una pagina bianca è molto peggio di un'animazione che non parte. */ .js-animazioni [data-rivela] { opacity: 0; will-change: opacity, transform; } .js-animazioni [data-rivela="su"] { transform: translateY(32px); } .js-animazioni [data-rivela="lato"] { transform: translateX(-32px); } .js-animazioni [data-rivela="zoom"] { transform: scale(.94); } [data-rivela].is-visible { opacity: 1; transform: none; transition: opacity var(--tempo-lento) var(--curva), transform var(--tempo-lento) var(--curva); transition-delay: var(--ritardo, 0ms); } /* ---------- Micro interazioni -------------------------------------------- */ .hero__badge, .btn, .card, .progetto, .filtro { will-change: transform; } .carica-numero { font-variant-numeric: tabular-nums; } /* ---------- Barra di avanzamento lettura --------------------------------- */ .barra-progresso { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--c-accento), var(--c-accento-chiaro)); z-index: calc(var(--z-header) + 1); transition: width 80ms linear; } /* ========================================================================= ACCESSIBILITÀ — Rispetta "riduci movimento" ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } [data-rivela] { opacity: 1 !important; transform: none !important; } .barra-fiducia__pista { animation: none; } .hero__scroll span:last-child { animation: none; } .btn:hover, .card:hover, .progetto:hover, .fab:hover { transform: none; } }