/* ============================================================
   animations.css — Keyframes, scroll reveal, reduced-motion
   (Il progresso scroll --p della mappa è guidato da
    js/map-itinerary.js, così rotta, mezzo, porti e caption
    restano in sync su ogni browser.)
   ============================================================ */

@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

@keyframes port-ping {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(3.4); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* —— Entrata hero (stagger, solo CSS) ——————————————————————— */
.hero [data-stagger] {
  opacity: 0;
  transform: translateY(20px);
  animation: rise-in 0.8s var(--ease-out) forwards;
  animation-delay: calc(0.1s + var(--s, 0) * 0.1s);
}

/* —— Scroll reveal (toggle da js/reveal.js) ————————————————— */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal].in { opacity: 1; transform: none; }

/* —— Reduced motion: niente moto, contenuti subito visibili ——— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero [data-stagger],
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}