@keyframes marquee-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-b {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
/* The 2.5deg tilt is baked into every stop, or the animation's own transform
   would overwrite the static rotate set on .phone-frame. */
@keyframes phone-float {
  0%, 100% { transform: rotate(2.5deg) translateY(0); }
  50% { transform: rotate(2.5deg) translateY(-10px); }
}

/* Scroll reveals — only applied once JS confirms support, so content
   is never hidden for non-JS visitors. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__row, .status__dot, .phone-frame--tilt { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}