/* ============================================================================ AITom — "WOW" layer condiviso (effetto premium + animazioni ricche) ---------------------------------------------------------------------------- Direzione: "Premium & raffinato" — resta fedele al brand pulito/onesto (accent blu, Poppins/Montserrat, tema chiaro) ma lo eleva con profondità sottile, gradienti raffinati, reveal allo scroll, orb ambientali e micro-interazioni curate. Principi: - Progressive enhancement: gli elementi [data-reveal] si nascondono SOLO quando il JS ha aggiunto . Senza JS (o se wow.js fallisce) il contenuto resta pienamente visibile → niente buchi per SEO, screen reader o utenti con JS disattivato. - Solo transform/opacity/filter → animazioni accelerate dalla GPU. - Tutto rispetta prefers-reduced-motion: reduce (accessibilità). - Usa i token CSS della pagina (--accent, --text, --hairline…) con fallback, così funziona identico su tutte le 11 pagine. ============================================================================ */ :root{ --wow-ease:cubic-bezier(.22,.61,.36,1); /* ease-out morbido, premium */ --wow-ease-out:cubic-bezier(.16,1,.3,1); /* ease-out più deciso */ --wow-reveal-dur:.72s; --wow-accent:var(--accent,#0369a1); --wow-accent-2:#0ea5e9; /* sky-500: chiusura gradiente on-brand */ --wow-accent-3:#06b6d4; /* cyan-500: tocco fresco */ } /* ---------------------------------------------------------------------------- 1) REVEAL ALLO SCROLL Stato iniziale applicato solo con html.wow-ready (vedi nota progressive enhancement sopra). .is-visible (aggiunta dall'IntersectionObserver) porta l'elemento allo stato finale. ---------------------------------------------------------------------------- */ html.wow-ready [data-reveal]{ opacity:0; transform:translate3d(0,26px,0); transition: opacity var(--wow-reveal-dur) var(--wow-ease), transform var(--wow-reveal-dur) var(--wow-ease), filter var(--wow-reveal-dur) var(--wow-ease); will-change:opacity,transform; } /* Varianti di direzione/effetto */ html.wow-ready [data-reveal="fade"]{ transform:none; } html.wow-ready [data-reveal="up"]{ transform:translate3d(0,26px,0); } html.wow-ready [data-reveal="down"]{ transform:translate3d(0,-26px,0); } html.wow-ready [data-reveal="left"]{ transform:translate3d(-30px,0,0); } html.wow-ready [data-reveal="right"]{ transform:translate3d(30px,0,0); } html.wow-ready [data-reveal="scale"]{ transform:scale(.94); } html.wow-ready [data-reveal="blur"]{ opacity:0; filter:blur(10px); transform:translate3d(0,18px,0); } html.wow-ready [data-reveal="zoom"]{ transform:scale(1.04); opacity:0; } html.wow-ready [data-reveal].is-visible{ opacity:1; transform:none; filter:none; } /* ---------------------------------------------------------------------------- 2) TESTO A GRADIENTE PREMIUM (titoli hero) On-brand: parte dall'accent blu della pagina verso sky/cyan. Animazione lenta di scorrimento del gradiente per un tocco "vivo" ma discreto. ---------------------------------------------------------------------------- */ .wow-gradient{ background:linear-gradient(110deg, var(--wow-accent) 0%, var(--wow-accent-2) 45%, var(--wow-accent-3) 70%, var(--wow-accent-2) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:wow-gradient-shift 8s ease-in-out infinite; /* leggero respiro tipografico per il testo grande in gradiente */ padding-right:.04em; } @keyframes wow-gradient-shift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } /* ---------------------------------------------------------------------------- 3) ORB AMBIENTALI (profondità soffusa dietro gli hero) Cerchi sfocati a bassissima opacità che fluttuano lentamente. Puramente decorativi: pointer-events:none, aria-hidden lato markup. ---------------------------------------------------------------------------- */ .wow-orbs{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .wow-orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; will-change:transform; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--wow-accent) 38%, transparent), transparent 70%); } /* fallback per browser senza color-mix */ @supports not (background: color-mix(in srgb, red, blue)){ .wow-orb{ background:radial-gradient(circle at 30% 30%, var(--accent-ring,rgba(2,132,199,.16)), transparent 70%); opacity:.8; } } .wow-orb--1{ width:420px; height:420px; top:-120px; left:-100px; animation:wow-float-a 17s ease-in-out infinite; } .wow-orb--2{ width:340px; height:340px; top:40px; right:-120px; opacity:.38; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--wow-accent-3) 40%, transparent), transparent 70%); animation:wow-float-b 21s ease-in-out infinite; } .wow-orb--3{ width:260px; height:260px; bottom:-100px; left:40%; opacity:.3; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--wow-accent-2) 36%, transparent), transparent 70%); animation:wow-float-a 25s ease-in-out infinite reverse; } @keyframes wow-float-a{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(26px,-32px,0) scale(1.08); } } @keyframes wow-float-b{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-30px,24px,0) scale(1.1); } } /* ---------------------------------------------------------------------------- 4) MICRO-INTERAZIONI — hover lift premium per card e tasselli ---------------------------------------------------------------------------- */ .wow-lift{ transition:transform .32s var(--wow-ease-out), box-shadow .32s var(--wow-ease-out), border-color .32s ease; will-change:transform; } .wow-lift:hover{ transform:translateY(-6px); box-shadow:0 1px 2px rgba(10,14,20,.05), 0 22px 48px -18px rgba(10,14,20,.22); } /* Bordo che si accende verso l'accent al passaggio (sottile) */ .wow-lift--accent:hover{ border-color:color-mix(in srgb, var(--wow-accent) 35%, var(--hairline-strong,rgba(10,14,20,.1))); } /* Bagliore radiale che segue il cursore (impostato da wow.js via --mx/--my) */ .wow-spotlight{ position:relative; isolation:isolate; } .wow-spotlight::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--wow-accent) 12%, transparent), transparent 60%); opacity:0; transition:opacity .35s ease; } .wow-spotlight:hover::before{ opacity:1; } /* Sottolineatura animata per i link (footer/nav) */ .wow-underline{ position:relative; } .wow-underline::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--wow-accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--wow-ease-out); } .wow-underline:hover::after{ transform:scaleX(1); } /* ---------------------------------------------------------------------------- 5) COUNT-UP — nessuno stile necessario, gestito da JS su [data-countup]. Evita "salto" di layout usando tabular-nums. ---------------------------------------------------------------------------- */ [data-countup]{ font-variant-numeric:tabular-nums; } /* ---------------------------------------------------------------------------- 6) ENTRATA AL CARICAMENTO (hero) — leggera, parte subito senza scroll. Applicata con classe .wow-enter + delay via --d. ---------------------------------------------------------------------------- */ html.wow-ready .wow-enter{ opacity:0; transform:translate3d(0,18px,0); animation:wow-enter-anim .8s var(--wow-ease) forwards; animation-delay:var(--d,0s); } @keyframes wow-enter-anim{ to{ opacity:1; transform:none; } } /* ---------------------------------------------------------------------------- 7) RISPETTO ACCESSIBILITÀ — prefers-reduced-motion Disattiva ogni movimento; mostra tutto allo stato finale. ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html.wow-ready [data-reveal], html.wow-ready .wow-enter{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; animation:none !important; } .wow-orb{ animation:none !important; } .wow-gradient{ animation:none !important; } .wow-lift{ transition:none !important; } .wow-lift:hover{ transform:none; } }