/* ==========================================================================
   SOUND ALCHEMISTS — Movimento delle pagine interne
   Reveal in entrata (reveal.js) e nastro scorrevole (marquee.js).
   Lo stato attivo del menu (.is-active) vive già in layout.css.
   ========================================================================== */

/* --- Reveal ----------------------------------------------------------------
   reveal.js mette su ogni bersaglio due attributi:
     data-rv-k   "wipe" | "line" | "up"   che movimento fa
     data-rv-s   "hide" | "show"          nascosto, oppure in arrivo
   e li toglie a movimento finito. Lo stato "hide" non ha transizione (deve
   scattare); "show" non cambia i valori dell'elemento, accende soltanto la
   transizione: l'elemento va verso com'è davvero nel resto del CSS. */

[data-rv-s="hide"] {
  opacity: 0;
  transition: none;
  will-change: opacity, transform;
}
[data-rv-s="hide"][data-rv-k="up"] {
  transform: translateY(28px);
}
[data-rv-s="hide"][data-rv-k="wipe"] {
  transform: translateY(.4em);
  clip-path: inset(0 0 100% 0);
}
[data-rv-s="hide"][data-rv-k="line"] {
  /* Il filetto non sfuma: si allunga. */
  opacity: 1;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

[data-rv-s="show"] {
  --rv-t: .9s;
  will-change: opacity, transform;
  transition:
    opacity var(--rv-t) var(--ease) var(--rv-d, 0ms),
    transform var(--rv-t) var(--ease) var(--rv-d, 0ms),
    clip-path var(--rv-t) var(--ease) var(--rv-d, 0ms);
}
[data-rv-s="show"][data-rv-k="wipe"] {
  --rv-t: 1.1s;
  /* Il margine negativo lascia fuori dal ritaglio le discendenti e i filetti
     delle lettere; "none" non si interpola con inset(), quindi serve un valore
     esplicito. */
  clip-path: inset(-10% 0 -25% 0);
}
[data-rv-s="show"][data-rv-k="line"] {
  --rv-t: 1.2s;
  transform-origin: 0 50%;
}

/* Con movimento ridotto reveal.js non nasconde nulla; questa regola copre il
   caso in cui l'impostazione cambi a pagina aperta. */
@media (prefers-reduced-motion: reduce) {
  [data-rv-s] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* --- Nastro (marquee) -------------------------------------------------------
   marquee.js costruisce dentro .marquee un binario con due metà identiche; il
   binario scorre di metà della sua larghezza e ricomincia senza stacchi. */

@keyframes sa-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-band {
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.marquee {
  padding: 22px 0;
  /* La maschera guarda solo l'opacità: qualunque colore pieno va bene, si usa
     una variabile per non scrivere un colore a mano. */
  -webkit-mask-image: linear-gradient(to right, transparent, var(--bg) 12%, var(--bg) 88%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--bg) 12%, var(--bg) 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  color: var(--sand);
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.1;
  white-space: nowrap;
  animation: sa-marquee 60s linear infinite;
}
/* Al passaggio del mouse il nastro si ferma, per poter leggere */
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__half { display: flex; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding-right: .45em;
}
.marquee__dot {
  flex: none;
  width: .16em;
  height: .16em;
  border-radius: 50%;
  background: var(--sand-dark);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}