/* Token condivisi dei siti Movis (Technologies, Sport, App, Gestionale). Sport Passport ha una sua identità e non li usa. */
:root {
  /* Marchio: il blu dell'icona dell'app, con i due colori che lo accompagnano nelle animazioni */
  --mv-blue: #4f7cff;
  --mv-blue-strong: #3358d6;
  --mv-blue-soft: #86a6ff;
  --mv-violet: #8f7bff;
  --mv-teal: #35d0c2;

  /* Movimento: ease-out per ciò che entra, durate in quattro passi (150–700 ms) */
  --mv-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mv-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Per i passaggi del mouse: la curva delle entrate (--mv-ease) concentra il movimento nei primi 100 ms e sugli hover sembra uno scatto */
  --mv-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Colore dei puntini a riposo, uguale su tutti i siti: scuro su fondo chiaro, chiaro su fondo scuro */
  --mv-dot: rgba(8, 11, 20, 0.2);
  --mv-dur-1: 150ms;
  --mv-dur-2: 250ms;
  --mv-dur-3: 400ms;
  --mv-dur-4: 700ms;

  /* Elevazione: tre livelli, mai più di uno per superficie */
  --mv-shadow-1: 0 1px 2px rgb(8 16 40 / 0.06), 0 6px 16px rgb(8 16 40 / 0.06);
  --mv-shadow-2: 0 12px 32px rgb(8 16 40 / 0.14);
  --mv-shadow-3: 0 28px 64px rgb(8 16 40 / 0.26);
}

/* Focus visibile e coerente su tutti i siti */
:focus-visible { outline: 2px solid var(--mv-blue); outline-offset: 3px; }
.btn:active { transform: translateY(1px) scale(0.985); }
/* Selezione del testo, uguale su tutti i siti.
   Testo corrente: sfondo blu traslucido e colore del testo invariato, così resta leggibile su qualsiasi fondo
   (anche sopra il blu del badge). Titoli con interlinea stretta: gli sfondi di righe vicine si sovrapporrebbero,
   quindi la selezione cambia solo il colore e sottolinea. */
:root { --mv-sel-bg: rgba(79, 124, 255, 0.28); --mv-sel-ink: #3358d6; }
@media (prefers-color-scheme: dark) { :root { --mv-sel-bg: rgba(134, 166, 255, 0.4); --mv-sel-ink: #9db6ff; } }
.on-ink, .price-card.popular, .final-cta .wrap { --mv-sel-bg: rgba(134, 166, 255, 0.4); --mv-sel-ink: #9db6ff; }
@media (prefers-color-scheme: dark) { .price-card.popular, .final-cta .wrap { --mv-sel-bg: rgba(79, 124, 255, 0.28); --mv-sel-ink: #3358d6; } }
::selection { background: var(--mv-sel-bg); }
h1::selection, h1 *::selection, h2::selection, h2 *::selection, h3::selection, h3 *::selection,
.title::selection, .title *::selection, .stat b::selection, .stat b *::selection, .n-item b::selection,
.price-card .amount::selection, .statement p::selection, .statement p *::selection {
  background: transparent; color: var(--mv-sel-ink);
  text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.1em;
}

/* Effetti: campo di puntini e bagliore sulle card (vedi fx.js). */

.dots-host { isolation: isolate; }
.dots-host.dots-rel { position: relative; }
.dots-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  color: var(--mv-dot);
  -webkit-mask-image: var(--dots-mask, none); mask-image: var(--dots-mask, none);
}
.dots-host { --dots-mask: radial-gradient(115% 125% at 62% 45%, #000 28%, transparent 100%); }

/* Con il canvas attivo le griglie statiche di ripiego spariscono. */
.hero.has-dots::before { content: none; }
.has-dots > .hero-grid { background-image: none; -webkit-mask-image: none; mask-image: none; }
.final-cta .wrap.has-dots { background-image: none; }
.final-cta .dots-canvas { color: rgba(128, 128, 128, 0.3); }
.on-ink { --mv-dot: rgba(243, 246, 252, 0.2); }
@media (prefers-color-scheme: dark) { :root { --mv-dot: rgba(243, 246, 252, 0.2); } }

/* Bagliore sulle card. --spot-a è registrata per poterla animare in dissolvenza. */
@property --spot-a { syntax: "<number>"; inherits: false; initial-value: 0; }
.spot {
  background-image: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgb(var(--spot-rgb, 120 150 255) / calc(var(--spot-a) * 0.14)), transparent 70%);
  background-repeat: no-repeat;
  transition: --spot-a 0.45s ease, border-color 0.25s ease, transform 0.6s var(--mv-ease-soft);
}

@media (prefers-reduced-motion: reduce) {
  .spot { transition: none; }
}

/* Lettere accentate nei titoli in maiuscolo: con l'interlinea stretta (0,92–0,96) l'accento di À, È, Ù sale fino alla riga sopra.
   I titoli che contengono accenti portano la classe .acc e hanno un'interlinea che lascia spazio. */
:is(h1, h2, h3, .title, p).acc.acc { line-height: 1.1; }

/* Chi c'è dietro: la persona che risponde, con la sua foto */
.person { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.person-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--line); background: var(--card); }
.person-text .label { display: block; margin-bottom: 1rem; }
.person-text h2 { margin: 0 0 1rem; }
.person-text p { margin: 0 0 1rem; max-width: 34rem; }
.person-text .cta-row { margin-top: 1.6rem; }
.person--inline { grid-template-columns: 6rem minmax(0, 1fr); gap: 1.2rem; margin-top: 2.4rem; max-width: 30rem; }
.person--inline .person-photo { width: 6rem; height: 6rem; border-radius: 50%; }
.statement .person--inline p { margin: 0; max-width: none; font-size: 1.1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; opacity: 1; }
@media (max-width: 760px) { .person { grid-template-columns: 1fr; } .person-photo { max-width: 16rem; } .person--inline { grid-template-columns: 5rem minmax(0, 1fr); } .person--inline .person-photo { width: 5rem; height: 5rem; } }