/* ========================================================================= AirAffitti — MOTION LAYER (airaffitti-motion.css) Microinterazioni + reveal premium. Solo transform/opacity (GPU, 60fps). NON tocca layout, palette, tipografia, struttura: solo movimento. Flash-safe: gli stati "nascosti" si attivano solo con html.aa-anim (aggiunta da uno script inline in => nessun FOUC). html.aa-ready = failsafe: se il motore JS non parte, mostra tutto. Tutto neutralizzato da prefers-reduced-motion. ========================================================================= */ :root{ --e-out: cubic-bezier(.16,1,.3,1); /* easeOut espressivo (entrate) */ --e-inout: cubic-bezier(.76,0,.24,1); /* easeInOut fluido (stati) */ --e-soft: cubic-bezier(.22,1,.36,1); /* morbido (hover/lift) */ } /* ============ 1. REVEAL — intestazioni di sezione, intro, hero interne ==== Le card (.reveal) sono già gestite; qui aggiungiamo i "gruppi testo". */ html.aa-anim .aa-home .head, html.aa-anim .aa-home .head--center, html.aa-anim .aa-home .page-hero .container, html.aa-anim .aa-home .m-reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); will-change:opacity,transform; } html.aa-anim .aa-home .head.in, html.aa-anim .aa-home .head--center.in, html.aa-anim .aa-home .page-hero .container.in, html.aa-anim .aa-home .m-reveal.in{ opacity:1; transform:none; } /* Reveal card già esistenti: entrata un filo più morbida (resta transition per non entrare in conflitto con l'hover). */ .aa-home .reveal{ transition:opacity .7s var(--e-out), transform .7s var(--e-out); } /* Failsafe: nessun contenuto resta invisibile se il JS non gira */ html.aa-ready .aa-home .head, html.aa-ready .aa-home .head--center, html.aa-ready .aa-home .page-hero .container, html.aa-ready .aa-home .m-reveal, html.aa-ready .aa-home .reveal{ opacity:1 !important; transform:none !important; } /* ============ 2. CARD — profondità: ombra dinamica + tilt 3D leggero ====== Il tilt (rotazione prospettica) è pilotato via JS con le variabili --rx/--ry/--tz; qui definiamo solo la base performante. */ .aa-home .bx, .aa-home .zn, .aa-home .post, .aa-home .rv, .aa-home .plan, .aa-home .bad__card{ transform-style:preserve-3d; } /* Base: solo transizione (nessun transform a riposo → il reveal fade+translate resta intatto) */ .aa-home .js-tilt{ transition:transform .5s var(--e-soft), box-shadow .5s var(--e-soft); will-change:transform; } /* Tilt + lift + ombra dinamica SOLO all'hover */ .aa-home .js-tilt.is-hover{ transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,-6px)); box-shadow:0 18px 44px rgba(20,24,30,.10); } /* Su sezioni scure: leggero accento beige controllato (max .18) */ .aa-home .bento-dk .js-tilt.is-hover{ box-shadow:0 8px 24px rgba(201,177,138,.18); } /* ============ 3. ICONE — microanimazione all'hover ======================= */ .aa-home .fl__ic, .aa-home .val-ic, .aa-home .fl__ic .elementor-icon, .aa-home .val-ic .elementor-icon{ transition:transform .45s var(--e-soft); } .aa-home .bx:hover .fl__ic, .aa-home .bx:hover .val-ic, .aa-home .values .bx:hover .val-ic, .aa-home .fl:hover .fl__ic{ transform:translateY(-2px) scale(1.06); } .aa-home .bx:hover .fl__ic svg, .aa-home .bx:hover .val-ic svg{ transition:transform .5s var(--e-soft); } /* ============ 4. FAQ (
) — apertura fluida ======================= */ .aa-home .faq details .bd{ will-change:opacity,transform; } .aa-home .faq details[open] .bd{ animation:mFaqIn .42s var(--e-out) both; } @keyframes mFaqIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} } .aa-home .faq summary::after{ transition:transform .35s var(--e-inout), color .2s ease; } /* ============ 5. PULSANTI — ripple elegante ============================== */ .aa-btn .elementor-button, .aa-home .cf__submit{ position:relative; overflow:hidden; } .aa-ripple{ position:absolute; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) scale(0); transform-origin:center; background:currentColor; opacity:.18; mix-blend-mode:overlay; animation:mRipple .6s var(--e-out) forwards; } @keyframes mRipple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } } /* ============ 6. HEADER — ombra quasi impercettibile quando "stuck" ====== */ .hd .hd__in::before{ transition:opacity .35s var(--e-inout), box-shadow .35s var(--e-inout); } .hd.is-stuck .hd__in::before{ box-shadow:0 10px 30px -14px rgba(20,24,29,.16); } /* ============ 7. BADGE recensioni (hero) — leggero shine ================= */ .hero-dk__badge .b-new{ position:relative; overflow:hidden; } .hero-dk__badge .b-new::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:translateX(-120%); animation:mShine 5.5s ease-in-out 1.5s infinite; } @keyframes mShine{ 0%,18%{transform:translateX(-120%)} 34%,100%{transform:translateX(120%)} } /* ============ 8. SCROLL INDICATOR — già animato: rendiamo il tratto vivo == */ .hero-scroll::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.55); transform:scaleY(0); transform-origin:top; animation:mScrollLine 2.3s var(--e-inout) infinite; } @keyframes mScrollLine{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 46%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* ============ 9. ACCESSIBILITÀ — prefers-reduced-motion ================== */ @media (prefers-reduced-motion: reduce){ html.aa-anim .aa-home .head, html.aa-anim .aa-home .head--center, html.aa-anim .aa-home .page-hero .container, html.aa-anim .aa-home .m-reveal, .aa-home .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .aa-home .js-tilt{ transform:none !important; } .aa-btn .elementor-button, .aa-home .cf__submit{ overflow:visible; } .aa-ripple, .hero-dk__badge .b-new::after, .hero-scroll::after, .aa-home .faq details[open] .bd{ animation:none !important; } } /* ============ 10. RESPONSIVE — il tilt/parallax è già disattivato via JS su touch/mobile (matchMedia). Nessuna regola CSS aggiuntiva necessaria. */