/** * ElaraTeq — Home v2 (scroll motion) * * Primitive condivise (reveal, parole mascherate, parallax, magnetici, * barra di avanzamento) in motion.css, caricato su tutte le pagine. * * Caricato solo sulla home, dopo app.css. * Regola d'oro: ogni stato iniziale "nascosto" vive sotto html.hx-motion, * classe che il aggiunge solo con prefers-reduced-motion: no-preference. * Senza JS o con reduced-motion la pagina è statica e completa. * * Variabili pilotate dallo scroll (scritte da motion.js/home.js): * --hp avanzamento dell'uscita dell'hero 0 → 1 * --mp avanzamento del manifesto 0 → 1 * --pp avanzamento della linea del metodo 0 → 1 * --zp apertura della tavola storyboard 0 → 1 * --py spostamento parallax in px * --svp avanzamento nella lista dei servizi 0 → 1 * --ipy spostamento immagine dentro la card progetto */ /* ============================================ HERO ============================================ */ .hx-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); } .hx-hero__media { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 30%; transform: translate3d(0, calc(var(--hp, 0) * 16%), 0) scale(calc(1 + var(--hp, 0) * 0.14)); will-change: transform; } /* Il fondo si chiude verso la pagina e si scurisce uscendo */ .hx-hero__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(12, 13, 20, 0.35) 0%, transparent 30%, transparent 55%, rgba(12, 13, 20, 0.92) 100%), rgba(12, 13, 20, calc(var(--hp, 0) * 0.75)); } .hx-hero__content { position: relative; z-index: 5; padding-top: 7rem; padding-bottom: 6rem; transform: translate3d(0, calc(var(--hp, 0) * -14vh), 0); opacity: calc(1 - var(--hp, 0) * 1.5); will-change: transform, opacity; } /* Scheda "a colpo d'occhio" */ .hx-facts { padding: 1.5rem 1.6rem; border-radius: 10px; } .hx-facts__head { display: flex; align-items: center; gap: 0.6rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--frost); } .hx-facts__dot { width: 7px; height: 7px; border-radius: 50%; background: #6EE7B7; box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.6); animation: hx-pulse 2.4s ease-out infinite; } @keyframes hx-pulse { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(110, 231, 183, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); } } .hx-facts__list { margin: 1.25rem 0 0; } .hx-facts__list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid rgba(179, 201, 232, 0.12); font-size: 0.875rem; } .hx-facts__list dt { color: var(--quiet); } .hx-facts__list dd { margin: 0; color: #fff; text-align: right; font-weight: 500; } /* Indicatore di scroll */ .hx-cue { position: absolute; left: 50%; bottom: 1.75rem; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--quiet); opacity: calc(1 - var(--hp, 0) * 4); transition: color 0.3s ease; } .hx-cue:hover { color: #fff; } .hx-cue__line { position: relative; width: 1px; height: 48px; overflow: hidden; background: rgba(179, 201, 232, 0.18); } .hx-cue__line::after { content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: linear-gradient(180deg, transparent, var(--frost)); animation: hx-cue 2s var(--hx-ease-io) infinite; } @keyframes hx-cue { to { top: 100%; } } .hx-motion .hx-hero__in { opacity: 0; transform: translate3d(0, 22px, 0); animation: hx-fade-up 1s var(--hx-ease) both; animation-delay: var(--d, 0s); } @keyframes hx-fade-up { to { opacity: 1; transform: translate3d(0, 0, 0); } } /* ============================================ HERO 3D Con il motion attivo la sezione è alta 190vh: lo stage resta agganciato per 90vh di scroll, il tratto in cui la camera entra nel portale (hero3d.js). Senza motion o senza WebGL2 (.hx-hero--static) torna un normale hero alto uno schermo, con il key visual statico. ============================================ */ .hx-hero--3d { display: block; min-height: 0; overflow: clip; /* overflow:hidden romperebbe lo sticky dello stage */ border-bottom: 0; } .hx-hero--3d .hx-hero__stage { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hx-motion .hx-hero--3d:not(.hx-hero--static) { height: 190vh; } .hx-motion .hx-hero--3d:not(.hx-hero--static) .hx-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; } /* la camera la muove lo shader: niente affondo CSS del media */ .hx-hero--3d .hx-hero__media { transform: none; } .hx-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; opacity: 0; transition: opacity 1.4s ease; } .hx-hero--3d.is-3d-ready .hx-hero__canvas { opacity: 1; } /* Pausa/riprendi: compare solo quando la scena 3D è attiva */ .hx-hero__pause { position: absolute; right: var(--page-gutter); bottom: 1.5rem; z-index: 6; display: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: rgba(12, 13, 20, 0.55); color: var(--frost); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .hx-hero__pause:hover { color: #fff; border-color: rgba(179, 201, 232, 0.5); } .hx-hero__pause:focus-visible { outline: 2px solid var(--frost); outline-offset: 3px; } .hx-hero__pause svg { width: 16px; height: 16px; } .hx-hero--3d.is-3d-ready .hx-hero__pause { display: grid; } .hx-hero__play-icon { display: none; } .is-3d-paused .hx-hero__pause-icon { display: none; } .is-3d-paused .hx-hero__play-icon { display: block; } /* Si scurisce solo alla fine del tragitto, per passare al manifesto: prima il portale deve restare luminoso. */ .hx-hero--3d .hx-hero__shade { background: linear-gradient(90deg, rgba(12, 13, 20, 0.55) 0%, rgba(12, 13, 20, 0.15) 45%, transparent 70%), linear-gradient(180deg, rgba(12, 13, 20, 0.3) 0%, transparent 25%, transparent 70%, rgba(12, 13, 20, 0.85) 100%), rgba(12, 13, 20, calc(var(--h3end, 0) * 0.92)); } .hx-hero--3d .hx-hero__content { transform: translate3d(0, calc(var(--hp, 0) * -18vh), 0); opacity: calc(1 - var(--hp, 0) * 2.2); } /* Su schermi stretti il testo cade proprio sopra il portale: velo più scuro dietro al blocco di testo e ombra morbida sulle lettere. */ @media (max-width: 1023px) { .hx-hero--3d .hx-hero__shade { background: radial-gradient(120% 60% at 30% 55%, rgba(12, 13, 20, 0.72), rgba(12, 13, 20, 0.25) 70%), linear-gradient(180deg, rgba(12, 13, 20, 0.3) 0%, transparent 25%, transparent 70%, rgba(12, 13, 20, 0.85) 100%), rgba(12, 13, 20, calc(var(--h3end, 0) * 0.92)); } } .hx-hero--3d .hx-hero__content h1, .hx-hero--3d .hx-hero__content p { text-shadow: 0 2px 24px rgba(12, 13, 20, 0.85); } /* la scheda sta sopra la gamba destra del neon: fondo più pieno per leggerla */ .hx-hero--3d .hx-facts { background: rgba(12, 13, 20, 0.62); } /* le scanline della cover non devono coprire i 190vh interi */ .hx-hero--3d::before, .hx-hero--3d::after { display: none; } /* ============================================ MARQUEE ============================================ */ .hx-marquee { position: relative; padding: 2.25rem 0; overflow: hidden; border-block: 1px solid var(--line-soft); background: rgba(12, 13, 20, 0.55); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .hx-marquee__row + .hx-marquee__row { margin-top: 0.9rem; } .hx-marquee__track { display: flex; width: max-content; will-change: transform; } .hx-marquee__group { display: flex; flex-shrink: 0; margin: 0; padding: 0; list-style: none; } .hx-marquee__group li { display: flex; align-items: center; white-space: nowrap; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; color: rgba(244, 244, 247, 0.9); } .hx-marquee__row:nth-child(2) li { color: transparent; -webkit-text-stroke: 1px rgba(179, 201, 232, 0.4); } .hx-marquee__sep { margin: 0 1.6rem; font-size: 0.45em; color: var(--gold); -webkit-text-stroke: 0; } /* Senza JS: scorrimento CSS lento, così la fascia non sembra rotta */ .hx-marquee__track { animation: hx-marquee 60s linear infinite; } .hx-marquee__row[data-hx-marquee="-1"] .hx-marquee__track { animation-direction: reverse; } .hx-js .hx-marquee__track { animation: none; } @keyframes hx-marquee { to { transform: translate3d(-50%, 0, 0); } } /* ============================================ MANIFESTO (agganciato a schermo) ============================================ */ .hx-manifesto { position: relative; padding: 7rem 0; } .hx-manifesto__text { max-width: 22em; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 4.4rem); line-height: 1.14; letter-spacing: -0.015em; color: #fff; } /* La sezione resta agganciata a schermo mentre la frase si accende parola per parola; base al 22% così il testo si legge già prima di accendersi. */ .hx-motion .hx-manifesto { height: 170vh; padding: 0; } @media (min-width: 1024px) { .hx-motion .hx-manifesto { height: 210vh; } } .hx-motion .hx-manifesto__pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 6rem 0 4rem; } .hx-motion .hx-manifesto__word { color: rgba(244, 244, 247, 0.22); transition: color 0.4s ease; } .hx-motion .hx-manifesto__word.is-lit { color: #fff; } .hx-motion .hx-manifesto__word.is-lit.is-tail { color: var(--frost); } .hx-stats { margin: 4.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); } @media (min-width: 1024px) { .hx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .hx-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.5rem; padding: 1.5rem 1.25rem 0 0; } .hx-stat dt { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); } .hx-stat dd { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .hx-stat small { font-size: 0.42em; margin: 0 0.25em; color: var(--gold); letter-spacing: 0.06em; } /* ============================================ TESTATE DI SEZIONE + REVEAL GENERICO ============================================ */ .hx-head { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 1024px) { .hx-head { flex-direction: row; align-items: flex-end; } } /* ============================================ SIGNATURE ============================================ */ .hx-signature__grid { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .hx-signature__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } /* sfalsa la card centrale: il parallax la fa "galleggiare" fra le altre */ .hx-signature__slot:nth-child(2) { margin-top: 4rem; } } .hx-sig { --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 12px; background: linear-gradient(160deg, rgba(244, 244, 247, 0.06), rgba(179, 201, 232, 0.02)); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .hx-sig::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 3; background: var(--accent, var(--frost)); transform-origin: 0 50%; transform: scaleX(0.18); transition: transform 0.7s var(--hx-ease); } .hx-sig:hover::before { transform: scaleX(1); } .hx-sig:hover { border-color: color-mix(in srgb, var(--accent, var(--frost)) 40%, transparent); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); } /* luce che segue il puntatore */ [data-hx-spot] { position: relative; } [data-hx-spot]::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent, var(--frost)) 18%, transparent), transparent 60%); transition: opacity 0.4s ease; } [data-hx-spot]:hover::after { opacity: 1; } .hx-sig__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; } .hx-sig__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(12, 13, 20, 0.9)); } .hx-sig__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transform: scale(1.04); transition: transform 1.2s var(--hx-ease), filter 0.6s ease; } .hx-sig:hover .hx-sig__media img { transform: scale(1.1); filter: saturate(1.05); } .hx-sig__body { position: relative; z-index: 1; padding: 0 1.6rem 1.6rem; margin-top: -2.2rem; } .hx-sig__go { display: flex; align-items: center; justify-content: space-between; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--quiet); } .hx-sig__go svg { width: 18px; height: 18px; color: var(--accent, var(--frost)); transition: transform 0.5s var(--hx-ease); } .hx-sig:hover .hx-sig__go svg { transform: translateX(6px); } /* ============================================ SERVIZI — aside agganciato + lista ============================================ */ .hx-svc__grid { display: grid; gap: 2.5rem; } /* Signature, servizi e metodo si susseguono: niente doppio padding fra loro */ .hx-signature { padding-bottom: 2rem; } .hx-svc { padding-top: 0; padding-bottom: 1rem; } .hx-svc__frame, .hx-svc__bar { display: none; } .hx-svc__list { margin: 0; padding: 0; list-style: none; } .hx-svc__item { position: relative; padding: 2.5rem 0; border-top: 1px solid var(--line-soft); } .hx-svc__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 1.5rem; opacity: 0.85; } .hx-svc__num { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--accent, var(--frost)); } .hx-svc__title { margin-top: 0.6rem; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.01em; color: #fff; } .hx-svc__tagline { margin-top: 0.75rem; max-width: 38rem; font-family: 'Lora', serif; font-size: 1.05rem; line-height: 1.6; color: #C3C7D4; } .hx-svc__features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .hx-svc__features li { padding: 0.4rem 0.75rem; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(244, 244, 247, 0.03); font-size: 0.8rem; color: #C3C7D4; } .hx-svc__cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.5rem; font-size: 0.9rem; font-weight: 500; color: var(--frost); transition: gap 0.3s ease, color 0.3s ease; } .hx-svc__cta:hover { gap: 0.8rem; color: #fff; } .hx-svc__cta svg { width: 15px; height: 15px; } @media (min-width: 1024px) { .hx-svc__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; } /* Lo sticky va sull'elemento della griglia: il suo contenitore è la griglia intera (alta quanto la lista), quindi ha spazio per restare agganciato. Su un figlio interno non si aggancerebbe mai. */ .hx-svc__aside { position: sticky; top: 0; align-self: start; } .hx-svc__sticky { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 6rem 0 3rem; } .hx-svc__frame { display: block; position: relative; margin-top: 2.5rem; aspect-ratio: 16 / 11; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); } .hx-svc__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.8s ease, transform 1.4s var(--hx-ease); } .hx-svc__frame img.is-active { opacity: 0.9; transform: scale(1); } .hx-svc__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12, 13, 20, 0.85)); pointer-events: none; } .hx-svc__count { position: absolute; left: 1.25rem; bottom: 1rem; z-index: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--quiet); } .hx-svc__count > span { font-size: 1.6rem; color: #fff; font-variant-numeric: tabular-nums; } .hx-svc__bar { display: block; position: relative; height: 2px; margin-top: 1.25rem; background: var(--line-soft); overflow: hidden; } .hx-svc__bar > span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--svp, 0)); background: linear-gradient(90deg, var(--frost), var(--violet), var(--gold)); } .hx-svc__list { padding: 2vh 0 0; } .hx-svc__item { padding: 3.5rem 0; } /* l'immagine grande vive nell'aside: nella lista non serve */ .hx-svc__thumb { display: none; } /* Il servizio in evidenza è pieno, gli altri restano leggibili ma in secondo piano. Nessun contenuto parte da opacity 0. */ .hx-motion .hx-svc__item { opacity: 0.38; transition: opacity 0.6s ease; } .hx-motion .hx-svc__item::before { content: ''; position: absolute; left: -1.75rem; top: 3.5rem; bottom: 3.5rem; width: 2px; background: var(--accent, var(--frost)); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.7s var(--hx-ease); } .hx-motion .hx-svc__item.is-active { opacity: 1; } .hx-motion .hx-svc__item.is-active::before { transform: scaleY(1); } } /* ============================================ METODO ============================================ */ .hx-process__track { position: relative; } .hx-process__steps { display: grid; gap: 2.5rem; margin: 0; padding: 0 0 0 3.25rem; list-style: none; } .hx-process__line { position: absolute; left: 1.2rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--line-soft); } .hx-process__line > span { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--pp, 1)); background: linear-gradient(180deg, var(--frost), var(--violet), var(--gold)); } @media (min-width: 1024px) { .hx-process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 4rem 0 0; } .hx-process__line { left: 0; right: 0; top: 1.2rem; bottom: auto; width: auto; height: 1px; } .hx-process__line > span { transform-origin: 0 50%; transform: scaleX(var(--pp, 1)); } } .hx-process__step { position: relative; } .hx-process__node { position: absolute; left: -3.25rem; top: -0.1rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); border-radius: 50%; background: var(--night); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--quiet); transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease; } @media (min-width: 1024px) { .hx-process__node { left: 0; top: -4rem; } } .hx-process__step h3 { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.5rem; color: #fff; } .hx-process__step p { margin-top: 0.6rem; font-family: 'Lora', serif; font-size: 0.95rem; line-height: 1.7; color: #9CA3AF; } .hx-process__step.is-on .hx-process__node, html:not(.hx-motion) .hx-process__node { color: var(--night); border-color: var(--frost); background: var(--frost); box-shadow: 0 0 0 6px rgba(179, 201, 232, 0.12), 0 0 24px rgba(179, 201, 232, 0.4); } .hx-motion .hx-process__step h3, .hx-motion .hx-process__step p { opacity: 0.25; transform: translate3d(0, 12px, 0); transition: opacity 0.8s var(--hx-ease), transform 0.8s var(--hx-ease); } .hx-motion .hx-process__step.is-on h3, .hx-motion .hx-process__step.is-on p { opacity: 1; transform: none; } .hx-motion .hx-process__step.is-on p { transition-delay: 0.08s; } /* ============================================ STORYBOARD — da cornice a piena larghezza ============================================ */ .hx-story__clip { overflow: hidden; border-radius: 4px; } .hx-story__frame img { border-radius: 0; } .hx-motion .hx-story__clip { transform: scale(calc(0.84 + var(--zp, 1) * 0.16)); border-radius: calc((1 - var(--zp, 1)) * 28px + 4px); will-change: transform; } .hx-motion .hx-story__clip img { transform: scale(calc(1.18 - var(--zp, 1) * 0.18)); will-change: transform; } /* ============================================ PROGETTI ============================================ */ .hx-project { border-radius: 12px; } .hx-project__media { aspect-ratio: 16 / 10; overflow: hidden; } .hx-project__media img { width: 100%; height: 118%; object-fit: cover; transform: translate3d(0, var(--ipy, -8%), 0); transition: filter 0.6s ease; filter: saturate(0.9); } .hx-project:hover .hx-project__media img { filter: saturate(1.1); } .hx-motion .hx-project[data-hx-reveal] .hx-project__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--hx-ease); transition-delay: calc(var(--ri, 0) * 0.12s + 0.1s); } .hx-motion .hx-project[data-hx-reveal].is-in .hx-project__media { clip-path: inset(0 0 0 0); } /* ============================================ CTA ============================================ */ .hx-cta__panel { --accent: var(--violet); position: relative; overflow: hidden; isolation: isolate; max-width: 72rem; margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem); text-align: center; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, rgba(244, 244, 247, 0.07), rgba(179, 201, 232, 0.02)); } .hx-cta__panel > .eyebrow { display: inline-flex; } .hx-cta__orb { position: absolute; left: 50%; top: 30%; z-index: -1; width: min(70vw, 760px); aspect-ratio: 1; margin-left: calc(min(70vw, 760px) / -2); border-radius: 50%; background: radial-gradient(closest-side, rgba(107, 91, 214, 0.35), transparent), radial-gradient(closest-side at 70% 60%, rgba(201, 180, 129, 0.18), transparent); filter: blur(20px); pointer-events: none; animation: hx-orb 14s ease-in-out infinite alternate; } @keyframes hx-orb { to { scale: 1.15; rotate: 40deg; } } .hx-cta__title { margin: 1.5rem auto 0; max-width: 15em; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 1.02; letter-spacing: -0.02em; color: #fff; } /* il pannello stesso non deve anche traslare: ci pensano titolo e contenuti */ .hx-motion .hx-cta__panel[data-hx-reveal] { transform: scale(0.96); } .hx-motion .hx-cta__panel[data-hx-reveal].is-in { transform: none; } /* ============================================ REDUCED MOTION — tutto fermo e visibile ============================================ */ @media (prefers-reduced-motion: reduce) { .hx-hero, .hx-hero__media, .hx-hero__content { clip-path: none; transform: none; opacity: 1; } .hx-cue__line::after, .hx-facts__dot, .hx-cta__orb, .hx-marquee__track { animation: none; } .hx-marquee__row { overflow-x: auto; } }