/* ============================================================ Moderno tech — effetti speciali & animazioni extra Potenzia il markup già presente (.blob, .card, .kicker, testo gradiente, .cta-band, .btn) senza cambiarne la struttura. Ispirato alla versione "Impatto visivo". ============================================================ */ /* Componenti RGB degli accenti, usate negli aloni/velature qui sotto. Una pagina con palette diversa (es. iphone.html, verde "km zero") sovrascrive solo queste due variabili e tutti gli effetti si adeguano. */ /* ---------- Niente area scrollabile extra dopo il piè di pagina ---------- Gli elementi decorativi (griglia di sfondo, blob sfocati, barra di avanzamento) sono fuori flusso, ma su iOS un elemento a tutta viewport con maschere/animazioni può generare spazio vuoto scorrevole in fondo. Qui lo impediamo alla radice: - overflow-x:clip taglia ciò che sporge di lato senza rompere position:sticky; - contain:paint impedisce ai blob (sfocati e animati) di dipingere fuori dal riquadro; - overscroll-behavior evita che lo scorrimento prosegua oltre la fine della pagina. */ html{overflow-x:clip} body{overflow-x:clip;overscroll-behavior-y:contain} .blobs{contain:paint} .fx-grid,.fx-progress{contain:strict} /* ---------- Anti-flash logo: nascondi la scritta originaria finché il CMS applica il logo ---------- La classe .cms-logohide viene messa su da uno script inline nel solo se in cache locale esiste un logo personalizzato; content.js la rimuove appena inserisce il logo. */ html.cms-logohide .logo,html.cms-logohide .foot-logo{visibility:hidden} /* ---------- Aurora: i blob ora respirano e derivano lentamente ---------- */ .blobs .blob{will-change:transform,opacity;animation:fxDrift1 26s ease-in-out infinite alternate} .blobs .blob:nth-child(2){animation:fxDrift2 32s ease-in-out infinite alternate} .blobs .blob:nth-child(3){animation:fxDrift3 38s ease-in-out infinite alternate} .blobs .blob:nth-child(4){animation:fxDrift1 30s ease-in-out infinite alternate} .blobs .blob:nth-child(5){animation:fxDrift2 42s ease-in-out infinite alternate} @keyframes fxDrift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7%,5%,0) scale(1.18)}} @keyframes fxDrift2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-6%,8%,0) scale(.92)}} @keyframes fxDrift3{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(5%,-7%,0) rotate(24deg) scale(1.14)}} /* ---------- Griglia tech animata sullo sfondo ---------- */ .fx-grid{position:fixed;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(var(--fx-teal-rgb,14,116,144),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--fx-teal-rgb,14,116,144),.06) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% 0%,#000 0%,transparent 72%); mask-image:radial-gradient(ellipse 85% 60% at 50% 0%,#000 0%,transparent 72%); animation:fxGrid 22s linear infinite} @keyframes fxGrid{to{background-position:52px 52px,52px 52px}} /* ---------- Barra di avanzamento scroll ---------- */ .fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:400; background:linear-gradient(90deg,var(--teal),var(--cyan),var(--indigo)); box-shadow:0 0 12px rgba(var(--fx-accent-rgb,6,182,212),.6);transition:width .1s linear} /* ---------- Testo gradiente in movimento ---------- */ .logo span,.foot-logo span,.stat .num,[style*="background-clip:text"]{ background-image:linear-gradient(120deg,var(--teal),var(--cyan),var(--indigo),var(--cyan),var(--teal))!important; background-size:230% auto!important; -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important; animation:fxFlow 9s linear infinite} @keyframes fxFlow{to{background-position:230% center}} /* ---------- Kicker: pallino "live" pulsante ---------- */ .kicker{position:relative} .kicker::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.55rem; vertical-align:middle;border-radius:50%;background:var(--cyan); box-shadow:0 0 0 0 rgba(var(--fx-accent-rgb,6,182,212),.55);animation:fxPing 2s ease-out infinite} @keyframes fxPing{0%{box-shadow:0 0 0 0 rgba(var(--fx-accent-rgb,6,182,212),.5)}70%{box-shadow:0 0 0 8px rgba(var(--fx-accent-rgb,6,182,212),0)}100%{box-shadow:0 0 0 0 rgba(var(--fx-accent-rgb,6,182,212),0)}} /* ---------- Card: riflesso superiore + spotlight che segue il mouse ---------- */ .card{position:relative} .card::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(var(--fx-accent-rgb,6,182,212),.55),transparent);opacity:0;transition:opacity .35s} .card:hover::before{opacity:1} .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; transition:opacity .4s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(var(--fx-accent-rgb,6,182,212),.16),transparent 60%)} .card:hover::after{opacity:1} .fx-tilt{transition:transform .18s ease,box-shadow .3s,border-color .3s;transform-style:preserve-3d;will-change:transform} /* ---------- Icon-dot: brilla e ruota leggermente all'hover ---------- */ .icon-dot{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1)} .icon-dot::after{content:"";position:absolute;top:-60%;left:-60%;width:60%;height:220%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg) translateX(-40%);transition:transform .7s ease} .card:hover .icon-dot{transform:translateY(-3px) rotate(-6deg) scale(1.06)} .card:hover .icon-dot::after{transform:skewX(-18deg) translateX(360%)} /* ---------- Anello luminoso animato sui badge ---------- */ .badge{position:relative} .badge::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1.5px solid currentColor;opacity:0;animation:fxRing 2.4s ease-out infinite} @keyframes fxRing{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1.3);opacity:0}} /* ---------- CTA band: bagliore conico rotante ---------- */ .cta-band{position:relative} .cta-band::after{content:"";position:absolute;inset:-45%;z-index:0;pointer-events:none; background:conic-gradient(from 0deg,transparent 58%,rgba(255,255,255,.22),rgba(var(--fx-accent-rgb,6,182,212),.28),transparent 88%); animation:fxSpin 14s linear infinite} .cta-band>*{position:relative;z-index:1} @keyframes fxSpin{to{transform:rotate(360deg)}} /* ---------- Marquee categorie clienti ---------- */ .fx-marquee{overflow:hidden;padding:1.6rem 0;position:relative;z-index:1; border-top:1px solid var(--line);border-bottom:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .fx-marquee .fx-mq-track{display:flex;align-items:center;gap:2.2rem;width:max-content;animation:fxMq 34s linear infinite;will-change:transform} .fx-marquee:hover .fx-mq-track{animation-play-state:paused} .fx-marquee span{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;color:#94a3b8;white-space:nowrap} .fx-marquee span.g{background:linear-gradient(120deg,var(--teal),var(--cyan),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent} .fx-marquee em{font-style:normal;color:var(--cyan);font-size:1.3rem} @keyframes fxMq{to{transform:translateX(-50%)}} /* ---------- Suggerimento scroll nell'hero ---------- */ .fx-scroll-hint{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2; width:26px;height:42px;border:2px solid rgba(var(--fx-teal-rgb,14,116,144),.35);border-radius:14px;pointer-events:none} .fx-scroll-hint::before{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:3px; background:var(--cyan);box-shadow:0 0 8px rgba(var(--fx-accent-rgb,6,182,212),.7);animation:fxWheel 1.8s ease-in-out infinite} @keyframes fxWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}} /* ---------- Reveal: piccole varianti di ingresso ---------- */ .reveal.fx-left{transform:translateX(-34px)} .reveal.fx-right{transform:translateX(34px)} .reveal.fx-zoom{transform:scale(.94)} .reveal.fx-left.in,.reveal.fx-right.in,.reveal.fx-zoom.in{transform:none} /* ---------- Bottoni: micro-magnetismo (gestito da JS) + glow pulsante sul primario ---------- */ .btn{will-change:transform} .btn-primary{position:relative} .btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; background:var(--grad);filter:blur(14px);opacity:.35;animation:fxGlow 3.4s ease-in-out infinite} @keyframes fxGlow{0%,100%{opacity:.28}50%{opacity:.6}} /* Il contenuto delle sezioni resta sopra la griglia di sfondo. NB: NON toccare .site-header (z-index 200) né .wa-float (fixed, z-index 300): abbassarli rompe il menu mobile e il pulsante WhatsApp. */ main,.site-footer{position:relative;z-index:1} /* ---------- Touch: nessun effetto :hover ---------- Su iPhone/Android, se un elemento cambia aspetto in :hover (specialmente con transform), il PRIMO tap viene consumato per applicare lo stato hover invece di attivare subito il link o il bottone: serve un secondo tap. Sui dispositivi senza mouse azzeriamo quindi gli effetti hover, così il primo tap apre sempre. (Su PC restano tutti gli effetti.) */ @media (hover:none){ .card:hover,.cat-card:hover,.prod:hover,.btn:hover,.btn-primary:hover,.btn-ghost:hover, .btn-wa:hover,.cat-chip:hover,.main-nav a:hover,.wa-float:hover,.detail-back:hover, .reco a:hover,.reco button:hover{transform:none!important} .cat-card:hover .cat-ph img,.prod:hover .ph img,.card:hover .icon-dot{transform:none!important} .card:hover::before,.card:hover::after{opacity:0!important} /* Su telefono si scorre e si tocca subito: se l'elemento sta ancora entrando (translateY 26px) il tocco cade su un bersaglio in movimento e può andare perso. Manteniamo solo la dissolvenza. */ .reveal{transform:none!important} } /* ---------- Rispetto delle preferenze di movimento ridotto ---------- */ @media (prefers-reduced-motion:reduce){ .blobs .blob,.fx-grid,.stat .num,.logo span,.foot-logo span,[style*="background-clip:text"], .kicker::before,.badge::after,.cta-band::after,.fx-marquee .fx-mq-track,.fx-scroll-hint::before, .btn-primary::before,.icon-dot,.icon-dot::after{animation:none!important} .fx-progress{display:none} .card::after{display:none} }