/* Animazioni ed effetti: tutto disattivato con prefers-reduced-motion.
   Il reveal allo scroll funziona solo se JS aggiunge la classe .fx su <html>:
   senza JavaScript tutto il contenuto resta visibile. */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *,
  .hero-bottom,
  .page-hero-content > * {
    animation: fx-rise .85s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .hero-copy > *:nth-child(1) {
    animation-delay: .05s;
  }

  .hero-copy > *:nth-child(2) {
    animation-delay: .16s;
  }

  .hero-copy > *:nth-child(3) {
    animation-delay: .28s;
  }

  .hero-copy > *:nth-child(4) {
    animation-delay: .4s;
  }

  .hero-copy > *:nth-child(5) {
    animation-delay: .52s;
  }

  .hero-bottom {
    animation-delay: .65s;
  }

  .page-hero-content > *:nth-child(1) {
    animation-delay: .05s;
  }

  .page-hero-content > *:nth-child(2) {
    animation-delay: .16s;
  }

  .page-hero-content > *:nth-child(3) {
    animation-delay: .28s;
  }

  .page-hero-content > *:nth-child(4) {
    animation-delay: .4s;
  }

  .page-hero-content > *:nth-child(5) {
    animation-delay: .5s;
  }

  html.fx [data-reveal],
  html.fx [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  }

  html.fx [data-reveal].is-visible,
  html.fx [data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: none;
  }

  html.fx [data-reveal-stagger].is-visible > *:nth-child(2) {
    transition-delay: .08s;
  }

  html.fx [data-reveal-stagger].is-visible > *:nth-child(3) {
    transition-delay: .16s;
  }

  html.fx [data-reveal-stagger].is-visible > *:nth-child(4) {
    transition-delay: .24s;
  }

  html.fx [data-reveal-stagger].is-visible > *:nth-child(n + 5) {
    transition-delay: .3s;
  }

  .marquee-track {
    animation: marquee-scroll 32s linear infinite;
  }

  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track {
    animation-play-state: paused;
  }

  .devices-phone {
    animation: fx-float 5.5s ease-in-out infinite;
  }

  html.fx .feature-duo.is-visible .gauge-arc {
    animation: gauge-sweep 1.6s cubic-bezier(.3, 0, .2, 1) .35s backwards;
  }

  html.fx .feature-duo.is-visible .gauge-needle {
    animation: needle-swing 1.6s cubic-bezier(.3, 0, .2, 1) .35s backwards;
  }
}

@keyframes fx-rise {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
}

@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

@keyframes fx-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes gauge-sweep {
  from {
    stroke-dashoffset: 260;
  }
}

@keyframes needle-swing {
  from {
    transform: rotate(-58deg);
  }
}