/* ============================================================
   METALFLEX — livello "ULTRA" · animazioni cinematiche di alta qualità
   Caricato DOPO styles.css / redesign.css / journey.css e dopo lo <style>
   di pagina. Regole:
   - solo transform / opacity / clip-path / filter (GPU), mai layout;
   - prefers-reduced-motion: tutto il motion decorativo è spento;
   - niente contenuto nascosto senza JS: le classi html.u-on / .u-split /
     .u-img le mette ultra.js, quindi senza JS la pagina è statica e leggibile.
   ============================================================ */
@property --u-beam { syntax:'<angle>'; inherits:false; initial-value:0deg; }

:root{
  --u-ease: cubic-bezier(.16,1,.3,1);
  --u-ease-io: cubic-bezier(.77,0,.175,1);
  --u-glow: rgba(90,143,214,.9);
  --u-glow-soft: rgba(90,143,214,.35);
}

/* ============================================================
   1. INTRO CINEMATICA (solo home, prima visita della sessione)
   La classe html.u-intro la mette uno script inline in <head>.
   Apertura e chiusura sono in CSS puro: se ultra.js non parte, l'intro
   si apre lo stesso da sola.
   ============================================================ */
.mf-intro{ display:none; }
html.u-intro .mf-intro{ display:block; position:fixed; inset:0; z-index:9500; pointer-events:none; animation:uIntroEnd 0s linear 2.45s forwards; }
html.u-intro.u-intro-done .mf-intro{ display:none; }
.mf-intro__p{ position:absolute; left:0; right:0; height:50.6%; background:var(--ink); will-change:transform; }
.mf-intro__p::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:54px 54px; }
.mf-intro__p--t{ top:0; animation:uIntroOpenT .8s var(--u-ease-io) 1.55s both; }
.mf-intro__p--b{ bottom:0; animation:uIntroOpenB .8s var(--u-ease-io) 1.55s both; }
.mf-intro__line{ position:absolute; left:0; top:50%; height:2px; width:100%; transform:translateY(-50%) scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, transparent 0%, var(--u-glow) 18%, #fff 50%, var(--u-glow) 82%, transparent 100%);
  box-shadow:0 0 18px 2px rgba(90,143,214,.7), 0 0 60px 8px rgba(45,93,168,.35);
  animation:uIntroLine 1.15s var(--u-ease-io) .2s both, uIntroFade .3s ease 1.5s forwards; }
.mf-intro__mark{ position:absolute; left:50%; top:50%; width:74px; aspect-ratio:79/64; transform:translate(-50%,-50%);
  background:url(logo-mark-white.png) center/contain no-repeat; opacity:0;
  animation:uIntroMark .9s var(--u-ease) .35s both, uIntroFade .3s ease 1.5s forwards; }
.mf-intro__count{ position:absolute; right:clamp(20px,4vw,56px); bottom:clamp(18px,3.5vh,40px); font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-400); animation:uIntroFade .3s ease 1.5s forwards; }
.mf-intro__count b{ display:inline-block; min-width:3ch; text-align:right; color:#fff; font-weight:500; font-variant-numeric:tabular-nums; }
.mf-intro__tag{ position:absolute; left:clamp(20px,4vw,56px); bottom:clamp(18px,3.5vh,40px); font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-400); animation:uIntroFade .3s ease 1.5s forwards; }
@keyframes uIntroLine{ from{ transform:translateY(-50%) scaleX(0); } to{ transform:translateY(-50%) scaleX(1); } }
@keyframes uIntroMark{ from{ opacity:0; transform:translate(-50%,-50%) scale(.6); filter:blur(8px); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } }
@keyframes uIntroFade{ to{ opacity:0; } }
@keyframes uIntroOpenT{ to{ transform:translateY(-101%); } }
@keyframes uIntroOpenB{ to{ transform:translateY(101%); } }
@keyframes uIntroEnd{ to{ visibility:hidden; } }
/* durante l'intro l'hero aspetta che la tendina si apra */
html.u-intro .anim-hero > *:nth-child(1){ animation-delay:1.7s; }
html.u-intro .anim-hero > *:nth-child(2){ animation-delay:1.8s; }
html.u-intro .anim-hero > *:nth-child(3){ animation-delay:1.92s; }
html.u-intro .anim-hero > *:nth-child(4){ animation-delay:2.04s; }
html.u-intro .anim-hero > *:nth-child(5){ animation-delay:2.16s; }
html.u-intro .anim-hero > *:nth-child(6){ animation-delay:2.26s; }
html.u-intro .anim-hero .eyebrow::before{ animation-delay:1.9s; }
html.u-intro .hero-scan{ animation-delay:2.7s; }
html.u-intro .hero-sweep{ animation-delay:4.5s; }
html.u-intro .hero-scrollhint{ animation-delay:3.1s; }
html.u-intro .hero-hud{ animation-delay:2.6s; }
html.u-intro .hero-layer--base img{ animation-delay:1.3s; }

/* ============================================================
   2. HERO "FOTO VIVA" (home, .heroA--ultra)
   Livelli dentro .heroA__media (dal basso): foto base (Ken Burns) →
   livello di profondità sfocato ai bordi (parallasse diverso) → scintille
   canvas → linea di scansione laser → sweep di luce → grana → velo → HUD.
   ============================================================ */
.heroA--ultra.heroA--wide .heroA__media{ transform:translate3d(var(--u-px,0px), var(--u-py,0px), 0); will-change:transform; animation:none; isolation:isolate; background:#070a10; }
.heroA--ultra .hero-layer{ position:absolute; inset:0; display:block; }
.heroA--ultra.heroA--wide .heroA__media picture.hero-layer--base{ inset:-3.5%; }
.heroA--ultra.heroA--wide .heroA__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% center; border-radius:0; }
.heroA--ultra .hero-layer--base img{ transform-origin:62% 55%; }
.heroA--ultra .hero-layer--depth{ z-index:1; pointer-events:none; inset:-5%; object-fit:cover; object-position:55% center;
  filter:blur(7px) brightness(.88) saturate(1.1);
  transform:translate3d(calc(var(--u-px,0px) * -.7), calc(var(--u-py,0px) * -.7), 0) scale(1.04);
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 58% 52%, transparent 38%, #000 90%);
  mask-image:radial-gradient(ellipse 60% 58% at 58% 52%, transparent 38%, #000 90%);
  opacity:.9; will-change:transform; }
.hero-sparks{ position:absolute; inset:0; z-index:2; pointer-events:none; width:100%; height:100%; display:block; }
.hero-scan{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.hero-scan::after{ content:""; position:absolute; top:0; bottom:0; left:-100%; width:100%;
  background:linear-gradient(90deg, transparent 0%, transparent calc(100% - 180px), rgba(90,143,214,.22) calc(100% - 3px), #fff 100%);
  box-shadow:14px 0 24px 0 rgba(120,170,255,.55);
  opacity:0; transform:translateX(0); }
.hero-sweep{ position:absolute; inset:-25%; z-index:4; pointer-events:none; mix-blend-mode:screen; opacity:.9;
  background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.10) 49%, rgba(200,222,255,.16) 51%, transparent 58%);
  transform:translateX(-70%); }
.hero-grain{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px; }
.heroA--ultra.heroA--wide .heroA__veil{ z-index:6; }
.hero-hud{ position:absolute; inset:18px; z-index:7; pointer-events:none; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(196,210,232,.82); opacity:0; animation:uFadeIn .8s ease 1.1s both; }
.hero-hud i{ position:absolute; width:16px; height:16px; border:0 solid rgba(170,196,240,.75); }
.hero-hud i:nth-child(1){ left:0; top:0; border-left-width:1px; border-top-width:1px; }
.hero-hud i:nth-child(2){ right:0; top:0; border-right-width:1px; border-top-width:1px; }
.hero-hud i:nth-child(3){ left:0; bottom:0; border-left-width:1px; border-bottom-width:1px; }
.hero-hud i:nth-child(4){ right:0; bottom:0; border-right-width:1px; border-bottom-width:1px; }
.hero-hud__tag{ position:absolute; left:26px; bottom:4px; display:flex; align-items:center; gap:9px; }
.hero-hud__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:#5a8fd6; box-shadow:0 0 10px 2px rgba(90,143,214,.8); animation:uBlink 1.6s ease-in-out infinite; }
.hero-hud__xy{ position:absolute; right:26px; bottom:4px; font-variant-numeric:tabular-nums; }
.hero-hud__xy b{ font-weight:500; color:#fff; }
.hero-hud__top{ position:absolute; right:26px; top:2px; }
@keyframes uBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes uFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:no-preference){
  .heroA--ultra .hero-layer--base img{ animation:uKen 18s var(--u-ease) both; }
  .hero-scan::after{ animation:uScan 9s linear 1.2s infinite; }
  .hero-sweep{ animation:uSweep 12s var(--u-ease-io) 3.2s infinite; }
}
@keyframes uKen{ from{ transform:scale(1.14) translateX(1.8%); } to{ transform:scale(1.04) translateX(0); } }
@keyframes uScan{ 0%{ transform:translateX(0); opacity:0; } 3%{ opacity:1; } 30%{ transform:translateX(200%); opacity:1; } 32%{ opacity:0; } 100%{ transform:translateX(200%); opacity:0; } }
@keyframes uSweep{ 0%{ transform:translateX(-70%); } 38%{ transform:translateX(70%); } 100%{ transform:translateX(70%); } }
@media (max-width:820px), (hover:none){
  .heroA--ultra .hero-layer--depth, .hero-hud{ display:none; }
  .heroA--ultra.heroA--wide .heroA__media{ transform:none; }
}

/* indicatore di scorrimento in basso a sinistra */
.hero-scrollhint{ position:absolute; left:max(20px, calc((100vw - var(--maxw)) / 2 + var(--gut, 0px))); bottom:22px; z-index:3; display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-400); opacity:0; animation:uFadeIn .8s ease 1.6s both; pointer-events:none; }
.hero-scrollhint__line{ width:48px; height:1px; background:var(--steel-700); position:relative; overflow:hidden; }
.hero-scrollhint__line::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-100%); }
@media (prefers-reduced-motion:no-preference){ .hero-scrollhint__line::after{ animation:uHint 1.9s var(--u-ease-io) infinite; } }
@keyframes uHint{ 0%{ transform:translateX(-100%); } 55%{ transform:translateX(0); } 100%{ transform:translateX(100%); } }
@media (max-width:820px){ .hero-scrollhint{ display:none; } }

/* la parola in <em> ("verniciatura") si VERNICIA di blu da sinistra a destra */
.heroA--ultra .display em{ color:var(--accent); -webkit-text-fill-color:transparent; background:linear-gradient(90deg, var(--accent) 0 50%, #fff 50% 100%); background-size:200% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; }
html.u-hero-go .heroA--ultra .display em{ background-position:0 0; transition:background-position 1.1s var(--u-ease-io) 1s; }
html.u-intro.u-hero-go .heroA--ultra .display em{ transition-delay:1.25s; }
@media (prefers-reduced-motion:reduce){ .heroA--ultra .display em{ background-position:0 0; } }

/* riga sopra le statistiche che si disegna */
.heroA--ultra .hero-stats{ position:relative; padding-top:clamp(18px,2vw,24px); }
.heroA--ultra .hero-stats::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient(90deg, var(--accent), rgba(45,93,168,0)); transform:scaleX(0); transform-origin:left; }
@media (prefers-reduced-motion:no-preference){ html.u-hero-go .heroA--ultra .hero-stats::before{ transform:scaleX(1); transition:transform 1.2s var(--u-ease) .9s; } }
@media (prefers-reduced-motion:reduce){ .heroA--ultra .hero-stats::before{ transform:none; } }

/* uscita dell'hero guidata dallo scroll (copy sale e svanisce, foto scende) */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:821px){
    .heroA--ultra .heroA__copy{ animation:uHeroCopyOut linear both; animation-timeline:scroll(root); animation-range:0 80vh; }
    .heroA--ultra .hero-layer--base{ animation:uHeroMediaOut linear both; animation-timeline:scroll(root); animation-range:0 100vh; }
  }
}
@keyframes uHeroCopyOut{ to{ transform:translateY(-10vh); opacity:0; } }
@keyframes uHeroMediaOut{ to{ transform:translateY(16vh) scale(1.06); } }

/* ============================================================
   3. TITOLI: parole che salgono una alla volta (data-split → .u-split)
   ============================================================ */
.u-split{ perspective:700px; }
.u-split .w{ display:inline-block; }
@media (prefers-reduced-motion:no-preference){
  .u-split .w{ transform-origin:50% 100%; transition:transform .9s var(--u-ease), opacity .55s ease, filter .6s ease; transition-delay:calc(var(--i, 0) * 48ms); will-change:transform; }
  .u-split:not(.u-in) .w{ opacity:0; transform:translateY(.55em) rotateX(-42deg); filter:blur(3px); }
  .u-split.u-in .w{ opacity:1; transform:none; filter:none; }
  html.u-intro .heroA--ultra .u-split .w{ transition-delay:calc(1.6s + var(--i, 0) * 55ms); }
  .heroA--ultra .u-split .w{ transition-delay:calc(.15s + var(--i, 0) * 55ms); }
}
/* il wrapper cinetico della base non deve sommare la propria salita */
.u-split > .kx__line, .u-split .kx__line{ transform:none !important; transition:none !important; }

/* ============================================================
   4. IMMAGINI: rivelazione a tendina metallica (JS aggiunge .u-img/.u-in)
   ============================================================ */
html.u-on .u-img{ position:relative; overflow:hidden; }
@media (prefers-reduced-motion:no-preference){
  html.u-on .u-img::after{ content:""; position:absolute; inset:0; z-index:3; background:var(--ink); transform-origin:right; transform:scaleX(1); transition:transform 1s var(--u-ease-io); pointer-events:none; }
  html.u-on .u-img::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:3px; z-index:4; background:#fff; box-shadow:0 0 16px 3px rgba(120,170,255,.8); opacity:0; pointer-events:none; }
  html.u-on .u-img.u-in::after{ transform:scaleX(0); }
  html.u-on .u-img.u-in::before{ animation:uImgEdge 1s var(--u-ease-io) both; }
  html.u-on .u-img > img{ transition:transform 1.3s var(--u-ease); }
  html.u-on .u-img:not(.u-in) > img{ transform:scale(1.18); }
}
@keyframes uImgEdge{ 0%{ opacity:1; transform:translateX(0); } 90%{ opacity:1; } 100%{ opacity:0; transform:translateX(calc(100cqw + 0px)); } }
html.u-on .u-img{ container-type:inline-size; }
/* la banda officina: la foto deriva in parallasse mentre scorri */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    html.u-on .fullband__img{ animation:uBandParallax linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  }
}
@keyframes uBandParallax{ from{ transform:scale(1.18) translateY(-6%); } to{ transform:scale(1.18) translateY(6%); } }

/* ============================================================
   5. HEADER che si nasconde scorrendo in giù e riappare in su
   ============================================================ */
html.u-on .site-header{ transition:transform .5s var(--u-ease), box-shadow .3s ease, background .3s ease; will-change:transform; }
html.u-on .site-header.u-hide{ transform:translateY(-100%); box-shadow:none; }

/* ============================================================
   6. CURSORE CAD (solo mouse fine): punto + anello con tacche
   ============================================================ */
html.u-cursor, html.u-cursor body, html.u-cursor a, html.u-cursor button, html.u-cursor .btn, html.u-cursor [role="button"]{ cursor:none; }
html.u-cursor iframe, html.u-cursor input, html.u-cursor textarea, html.u-cursor select{ cursor:auto; }
.u-cur{ position:fixed; left:0; top:0; z-index:9800; pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .25s ease; }
.u-cur.is-on{ opacity:1; }
.u-cur.is-hidden{ opacity:0; }
.u-cur__ringwrap{ position:absolute; left:0; top:0; will-change:transform; }
.u-cur__dot{ position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff; will-change:transform; }
.u-cur__ring{ position:absolute; left:0; top:0; width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(255,255,255,.85); border-radius:50%; transition:transform .3s var(--u-ease), border-color .25s ease, opacity .25s ease; }
.u-cur__ring::before, .u-cur__ring::after{ content:""; position:absolute; left:50%; top:50%; background:#fff; opacity:0; transition:opacity .25s ease, transform .3s var(--u-ease); }
.u-cur__ring::before{ width:1px; height:10px; margin:-5px 0 0 -.5px; transform:scaleY(.4); box-shadow:0 -19px 0 #fff, 0 19px 0 #fff; }
.u-cur__ring::after{ width:10px; height:1px; margin:-.5px 0 0 -5px; transform:scaleX(.4); box-shadow:-19px 0 0 #fff, 19px 0 0 #fff; }
.u-cur.is-link .u-cur__ring{ transform:scale(1.55); border-color:rgba(255,255,255,.35); }
.u-cur.is-link .u-cur__ring::before, .u-cur.is-link .u-cur__ring::after{ opacity:1; transform:none; }
.u-cur.is-down .u-cur__ring{ transform:scale(.75); }
.u-cur.is-link.is-down .u-cur__ring{ transform:scale(1.25); }
.u-cur.is-text .u-cur__ring{ transform:scale(.55); border-color:rgba(255,255,255,.3); }

/* ============================================================
   7. SCHEDE: numerale fantasma, riflesso (glare) che segue il mouse, tilt
   ============================================================ */
html.u-on .why{ counter-reset:why; }
html.u-on .why > div{ position:relative; overflow:hidden; counter-increment:why; }
html.u-on .why > div::after{ content:"0" counter(why); position:absolute; right:12px; top:-14px; font-family:var(--f-display); font-weight:800; font-size:clamp(4.2rem,7.5vw,7rem); line-height:1; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(45,93,168,.22); pointer-events:none; transition:transform .7s var(--u-ease), -webkit-text-stroke-color .4s ease; z-index:0; }
html.u-on .why > div:hover::after{ transform:translate(-8px,-8px) scale(1.08); -webkit-text-stroke-color:rgba(45,93,168,.55); }
html.u-on .why > div > *{ position:relative; z-index:1; }
.u-glare{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s ease; background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 45%); }
.u-has-glare{ position:relative; }
.u-has-glare:hover .u-glare{ opacity:1; }
.sx-card .u-glare{ mix-blend-mode:screen; background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%), rgba(140,180,240,.22), transparent 45%); }
html.u-on .sx-card{ transition:transform .35s var(--u-ease), box-shadow .35s ease, border-color .25s ease; transform-style:preserve-3d; will-change:transform; }
html.u-on .sx-card.u-tilt{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px); box-shadow:0 30px 60px -30px rgba(10,14,22,.55); }

/* ============================================================
   8. BANDA CTA: raggio luminoso che percorre il bordo
   ============================================================ */
html.u-on .ctaband{ position:relative; }
.u-beam{ position:absolute; inset:0; pointer-events:none; z-index:2; padding:1px; border-radius:inherit; opacity:.95;
  background:conic-gradient(from var(--u-beam), transparent 0 60%, rgba(90,143,214,0) 60%, var(--u-glow) 78%, #fff 82%, var(--u-glow) 86%, transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
@media (prefers-reduced-motion:no-preference){ .u-beam{ animation:uBeam 7s linear infinite; } }
@keyframes uBeam{ to{ --u-beam:360deg; } }

/* ============================================================
   9. FOOTER: marchio gigante in contorno che si riempie allo scroll
   ============================================================ */
.u-giant{ position:relative; z-index:1; font-family:var(--f-display); font-weight:800; font-size:clamp(3.6rem,14.2vw,15rem); line-height:.85; letter-spacing:-.05em; text-align:center; white-space:nowrap; overflow:hidden; user-select:none; pointer-events:none; margin:0 auto clamp(28px,5vw,64px); max-width:100%;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.22);
  background:linear-gradient(90deg, rgba(90,143,214,.28) 0%, rgba(255,255,255,.14) 50%, transparent 50% 100%); background-size:200% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .u-giant{ animation:uGiantFill linear both; animation-timeline:view(); animation-range:entry 5% entry 100%; }
  }
}
@keyframes uGiantFill{ to{ background-position:0 0; } }

/* ============================================================
   10. HERO delle pagine interne: scansione singola + griglia
   ============================================================ */
.u-scanline{ position:absolute; left:0; right:0; top:-2px; height:2px; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, var(--u-glow) 30%, #fff 50%, var(--u-glow) 70%, transparent); box-shadow:0 0 18px 3px rgba(90,143,214,.55); }
@media (prefers-reduced-motion:no-preference){ .u-scanline{ animation:uPageScan 1.6s var(--u-ease-io) .35s both; } }
@keyframes uPageScan{ 0%{ transform:translateY(0); opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ transform:translateY(var(--u-h, 60vh)); opacity:0; } }
html.u-on .page-hero, html.u-on .vhero{ overflow:hidden; }

/* ============================================================
   11. MARQUEE guidato dal JS (velocità legata allo scroll)
   ============================================================ */
html.u-on .marquee__track{ animation:none !important; will-change:transform; }

/* ============================================================
   12. MICRO: link del footer e menu con sottolineatura che si disegna
   ============================================================ */
html.u-on .foot-col a, html.u-on .navi > a, html.u-on .nav__links > a{ position:relative; }
html.u-on .foot-col a::after, html.u-on .navi > a::after, html.u-on .nav__links > a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--u-ease); }
html.u-on .foot-col a:hover::after, html.u-on .navi > a:hover::after, html.u-on .nav__links > a:hover::after{ transform:scaleX(1); transform-origin:left; }
html.u-on .foot-col a.brand::after, html.u-on .foot-col .brand::after{ content:none; }

/* Riduzione movimento: tutto ciò che è decorativo resta fermo */
@media (prefers-reduced-motion:reduce){
  .hero-scan, .hero-sweep, .hero-sparks, .hero-scrollhint, .mf-intro, .u-beam{ display:none !important; }
  .heroA--ultra.heroA--wide .heroA__media, .heroA--ultra .hero-layer--depth{ transform:none !important; }
  html.u-on .site-header.u-hide{ transform:none; }
}