/* L'effetto scenico (S08 tappa 2, Pietro: «un gioiello, effetto WOW, scifi»), pensato per il chiaro:
   superfici di vetro smerigliato bianco, linee sottilissime, il verde come luminescenza, profondità con
   ombre morbide. Ingresso delle scene in sequenza (motion.js mette .motion su <html> e .is-in sulla
   scena), numeri che contano, barre che si disegnano, il titolo parola per parola, la barra di
   avanzamento, l'anello che si chiude intorno al numero chiave. Solo transform e opacity; con
   prefers-reduced-motion tutto è fermo e visibile. Colori solo dai token --brand-*, testo a 16 px. */
@property --ring {
  syntax: '<angle>';
  inherits: false;
  initial-value: 360deg;
}

/* La barra di avanzamento della pagina: sottile, verde, legata allo scroll (senza JavaScript). */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 40;
  background: var(--brand-mark);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  animation: progress linear both;
  animation-timeline: scroll(root block);
}
@keyframes progress {
  to {
    transform: scaleX(1);
  }
}

/* Le scene entrano a scroll: la scheda sale, poi i suoi elementi uno dopo l'altro ogni 120 ms. */
.motion .panel {
  animation: none;
}
.motion .panel:not(.is-in),
.motion .panel:not(.is-in) > * {
  opacity: 0;
}
.motion .panel.is-in {
  animation: scene-in 0.72s var(--ease-rivela) both;
}
.motion .panel.is-in > * {
  animation: rise 0.72s var(--ease-rivela) calc(var(--k, 0) * 120ms) both;
}
@keyframes scene-in {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.985);
  }
}
/* Le barre si disegnano dal loro punto di partenza. */
.motion .panel.is-in :is(.meter-fill, .temp-bar > span, .div-bar .fill) {
  transform-origin: 0 50%;
  animation: bar-grow 0.9s var(--ease-rivela) 0.24s both;
}
.motion .panel.is-in .dir-down .div-bar .fill {
  transform-origin: 100% 50%;
}
@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}

/* La firma: un anello sottile che si chiude intorno al numero chiave quando la scena entra. */
.key-figure {
  justify-items: start;
}
.key-figure strong {
  position: relative;
  display: inline-block;
}
.key-figure strong::after {
  content: '';
  position: absolute;
  inset: -0.16em -0.34em;
  border: 2px solid var(--brand-accent);
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
  mask: conic-gradient(from -90deg, black var(--ring), transparent 0);
}
.motion .panel.is-in .key-figure strong::after {
  animation: ring-close 1.4s var(--ease-rivela) 0.3s both;
}
@keyframes ring-close {
  from {
    --ring: 0deg;
  }
}

/* Il titolo del giorno entra parola per parola. */
.hud h1 .w {
  display: inline-block;
}
.motion .hud h1 .w {
  animation: word-in 0.72s var(--ease-rivela) calc(0.2s + var(--w, 0) * 90ms) both;
}
@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(0.4em);
  }
}

/* I numeri su schede di vetro smerigliato che galleggiano appena e seguono il puntatore. */
:root:not([data-brand-theme='dark']) .hud-number {
  background: color-mix(in srgb, var(--brand-paper) 66%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px);
}
.motion .hud-number {
  animation:
    hud-in 0.6s ease-out both,
    float 7s ease-in-out 0.8s infinite alternate;
}
.motion .hud-number:nth-child(even) {
  animation-delay: 0s, 2.2s;
}
@keyframes hud-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes float {
  to {
    transform: translateY(-4px);
  }
}
/* Nel chiaro la griglia della mappa diventa un pavimento in prospettiva che scorre piano, e una luce la
   attraversa (sotto i punti). */
:root:not([data-brand-theme='dark']) .hero {
  --grid: color-mix(in srgb, var(--brand-text) 7%, transparent);
}
:root:not([data-brand-theme='dark']) .map-stage::before {
  inset: 38% -40% -20%;
  transform-origin: 50% 0;
  transform: perspective(700px) rotateX(58deg);
  mask-image: linear-gradient(transparent, black 40%);
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-brand-theme='dark']) .map-stage::before {
    animation: floor-drift 40s linear infinite;
  }
}
@keyframes floor-drift {
  from {
    transform: perspective(700px) rotateX(58deg) translateY(0);
  }
  to {
    transform: perspective(700px) rotateX(58deg) translateY(56px);
  }
}
.map-stage .pt-layer {
  z-index: 2;
}
.motion .map-stage::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--brand-mark) 12%, transparent),
    transparent
  );
  animation: scan 14s linear infinite;
}
@keyframes scan {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(400%);
  }
}

/* Il telefono: niente luce che scorre, niente parallasse (motion.js). */
@media (max-width: 760px) {
  .motion .map-stage::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    animation: none;
    display: none;
  }
}