/* Emozioni Animations — hover micro-interactions */ /* ===== Collezione: zoom immagine card su hover ===== */ @media (hover: hover) and (pointer: fine) { #collezione .brx-grid > .brxe-div { overflow: hidden; } #collezione .brx-grid img { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } #collezione .brx-grid > .brxe-div:hover img { transform: scale(1.03); } /* ===== Prodotti: hover discreto sulle immagini della gallery ===== */ #brxe-fssjuj .brxe-image-gallery img { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } #brxe-fssjuj .brxe-image-gallery a:hover img, #brxe-fssjuj .brxe-image-gallery img:hover { transform: scale(1.02); } } /* ===== Anti-flash (FOUC): nascondi i reveal dal primo paint ===== Attivo SOLO con JS (.emo-js su ) e SOLO senza reduced-motion, così la pagina resta visibile senza JS o per chi disattiva le animazioni. Ogni selettore qui è poi rivelato dal ramo no-preference di animations.js. */ @media (prefers-reduced-motion: no-preference) { .emo-js #brxe-zsgfdl .brxe-heading, .emo-js #brxe-zsgfdl .brxe-text, .emo-js #brxe-zsgfdl .brxe-image, .emo-js #chi-siamo .brxe-image, .emo-js #chi-siamo .brxe-heading, .emo-js #chi-siamo .brxe-text, .emo-js #didattica .brxe-heading, .emo-js #didattica .brxe-text, .emo-js #didattica .brxe-image, .emo-js #brxe-njpgko .brxe-text, .emo-js #brxe-xsyaft .brxe-text, .emo-js #brxe-fssjuj .brxe-heading, .emo-js #brxe-fssjuj .tab-menu, .emo-js #brxe-fssjuj .brxe-image-gallery .bricks-layout-item, .emo-js #collezione .brxe-heading, .emo-js #collezione .brx-grid > * { opacity: 0; } } /* ===== Lenis smooth scroll (stili raccomandati) ===== */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ===== Pulsante "torna su" ===== */ .emo-to-top { position: fixed; right: clamp(16px, 4vw, 32px); bottom: clamp(16px, 4vw, 32px); z-index: 1000; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: #1b1b1b; color: #fff; cursor: pointer; opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease; } .emo-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .emo-to-top svg { width: 20px; height: 20px; display: block; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .emo-to-top:hover { background: #000; transform: translateY(-2px) scale(1); } } .emo-to-top:active { transform: translateY(0) scale(0.95); } @media (prefers-reduced-motion: reduce) { .emo-to-top { transform: none; transition: opacity 200ms ease, background-color 200ms ease; } .emo-to-top.is-visible, .emo-to-top:hover, .emo-to-top:active { transform: none; } } /* ===== Gallery: cursore "click" (mano) invece della lente di ingrandimento ===== */ .brxe-image-gallery.bricks-lightbox a { cursor: pointer; }