/* ============================================================
   DILLO, landing. Stati iniziali del movimento.
   Le classi data-* sono agganciate da motion.js.
   Se il JS non parte, tutto resta visibile: nessun contenuto
   dipende dall'animazione per essere letto.
   ============================================================ */

/* stato di partenza applicato solo quando il JS è attivo */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

.js [data-split] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
}

/* pulsazione del microfono, ripresa dal prodotto */
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(228, 84, 30, 0.5); }
  70%  { box-shadow: 0 0 0 22px rgba(228, 84, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 84, 30, 0); }
}
.mic-pulse { animation: mic-pulse 2.4s ease-out infinite; }

/* onda audio del mock */
@keyframes wave {
  0%, 100% { transform: scaleY(0.28); }
  50%      { transform: scaleY(1); }
}
.wave-bar {
  transform-origin: center;
  animation: wave 1.05s ease-in-out infinite;
}

/* cursore di scorrimento nella hero */
@keyframes dot-drift {
  0%   { transform: translateY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}
.scroll-dot { animation: dot-drift 1.9s var(--ease-smooth) infinite; }

/* sollevamento delle schede al passaggio del mouse */
.tile {
  transition: transform var(--dur-mid) var(--ease-smooth),
              border-color var(--dur-mid) ease,
              box-shadow var(--dur-mid) ease;
}
.tile:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 18px 38px -20px rgba(22, 24, 29, 0.32);
}
.tile:hover .index-num { color: var(--accent); }

/* rispetto delle preferenze di sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-split] .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .mic-pulse,
  .wave-bar,
  .scroll-dot { animation: none; }
  .tile { transition: none; }
  .tile:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}