/** * ElaraTeq — Motion (tutte le pagine pubbliche) * * Primitive di movimento condivise dalla home (home.css/home.js) e dalle * pagine interne (motion.js, che le applica da solo al markup esistente). * * Ogni stato iniziale "nascosto" vive sotto html.hx-motion, classe che il * aggiunge solo con prefers-reduced-motion: no-preference e che viene * tolta se lo script non parte: senza JS la pagina resta statica e completa. */ :root { --hx-ease: cubic-bezier(0.16, 1, 0.3, 1); --hx-ease-io: cubic-bezier(0.65, 0, 0.35, 1); } /* Con il motion attivo le sezioni vanno renderizzate sempre: content-visibility:auto (app.css) salta il rendering fuori schermo e, con scroll veloci o salti di ancora, l'IntersectionObserver non vede passare i blocchi, che resterebbero nascosti. Specificità (0,2,2) > (0,1,2) di app.css. overflow-x:clip rimpiazza il ritaglio che content-visibility faceva già (decorazioni -right-6 ecc.) senza creare un contenitore di scroll, quindi gli elementi sticky continuano a funzionare. */ .hx-motion main > section:not(:first-child) { content-visibility: visible; overflow-x: clip; } /* ============================================ BARRA DI AVANZAMENTO PAGINA ============================================ */ .hx-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80; pointer-events: none; } .hx-progress > span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--violet), var(--frost) 60%, var(--gold)); box-shadow: 0 0 12px rgba(179, 201, 232, 0.45); } /* ============================================ PAROLE MASCHERATE ============================================ */ .hx-w { display: inline-block; overflow: hidden; overflow: clip; overflow-clip-margin: 0.2em; vertical-align: top; padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em; } .hx-w > span { display: inline-block; } /* ============================================ REVEAL ============================================ */ .hx-motion [data-hx-reveal]:not(.hx-split) { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 0.9s var(--hx-ease), transform 1.1s var(--hx-ease); transition-delay: calc(var(--ri, 0) * 0.09s); } .hx-motion [data-hx-reveal].is-in:not(.hx-split) { opacity: 1; transform: none; } /* Finita l'entrata, l'elemento torna a usare le proprie transizioni (hover delle card, dei bottoni...). */ .hx-motion [data-hx-reveal].is-done:not(.hx-split) { transition: none; transition-delay: 0s; } .hx-motion .card[data-hx-reveal].is-done { transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .hx-motion .hx-split .hx-w > span { transform: translate3d(0, 110%, 0); transition: transform 1s var(--hx-ease); transition-delay: calc(var(--i, 0) * 0.06s); } .hx-motion .hx-split.is-in .hx-w > span { transform: none; } /* Immagini: entrano con una lieve messa a fuoco di scala. Niente clip-path sull'elemento osservato: un'immagine ritagliata a zero non "interseca" mai il viewport per l'IntersectionObserver e resterebbe nascosta. */ .hx-motion img[data-hx-reveal]:not(.hx-split) { transform: scale(1.06); transition: opacity 1s var(--hx-ease), transform 1.4s var(--hx-ease); transition-delay: calc(var(--ri, 0) * 0.09s); } /* ============================================ PARALLAX ============================================ */ .hx-motion [data-hx-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* ============================================ BOTTONI MAGNETICI ============================================ */ .hx-motion [data-hx-magnetic], .hx-motion [data-hx-magnetic]:hover { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0); transition: transform 0.5s var(--hx-ease), background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } /* ============================================ HERO DELLE PAGINE INTERNE Il primo blocco della pagina (motion.js aggiunge .hx-auto-hero): lo sfondo affonda, il contenuto sale e sfuma nel primo schermo di scroll. ============================================ */ .hx-motion .hx-auto-hero > .cyber-bg, .hx-motion .hx-auto-hero > .bg-cover { transform: translate3d(0, calc(var(--hp, 0) * 18%), 0) scale(calc(1.02 + var(--hp, 0) * 0.12)); will-change: transform; } .hx-motion .hx-auto-hero > .container { transform: translate3d(0, calc(var(--hp, 0) * -10vh), 0); opacity: calc(1 - var(--hp, 0) * 1.3); will-change: transform, opacity; } /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { .hx-auto-hero > .cyber-bg, .hx-auto-hero > .bg-cover, .hx-auto-hero > .container { transform: none; opacity: 1; } } @media print { .hx-motion [data-hx-reveal], .hx-motion .hx-split .hx-w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; } .hx-progress { display: none; } }