/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-out-expo),
    transform 900ms var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pulse on the live dot */
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  60%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Hero glow drift */
@keyframes heroDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-2vw, 1vw, 0); }
}

/* Mock card subtle float */
@keyframes cardFloat {
  0%   { transform: rotateY(-3deg) rotateX(2deg) translateY(0); }
  100% { transform: rotateY(-1deg) rotateX(1deg) translateY(-6px); }
}

/* Waveform */
@keyframes wave {
  0%, 100% { height: 22%; }
  50%      { height: 92%; }
}

/* Bar fill (control room) */
@keyframes fillBar {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0%); }
}

/* Counter — handled in JS, this just hints transitions */
[data-counter] {
  transition: color 200ms ease;
  font-variant-numeric: tabular-nums;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mock-card, .mock-card-secondary,
  .hero-glow, .mock-dot-live, .mock-pulse,
  .mock-waveform span, .cr-bar > span, .cr-now::before {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── Mobile responsive (≤639px) ─────────────────────────────────────── */
@media (max-width: 639px) {
  /* Disable reveal translate so content isn't hidden off-screen on small devices */
  .reveal {
    transform: translateY(14px);
  }
}