/* Shared keyframes. The march/pulse/pop/float/ripple idioms are the ones already
   used on teeptrak.com, so the booth screen moves like the website. */

/* Dashes travelling along a path — the "data is flowing" idiom. */
@keyframes march {
  to {
    stroke-dashoffset: -120;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.92;
  }
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes ripple {
  0% {
    transform: scale(0.35);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

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

@keyframes blink {
  0%,
  45% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0.25;
  }
}

@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(235, 53, 44, 0));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(235, 53, 44, 0.55));
  }
}

@keyframes sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Entrance helper: any element with .in animates on slide enter, staggered by --i. */
.slide[data-active="true"] .in {
  animation: rise 620ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.slide:not([data-active="true"]) .in {
  opacity: 0;
}