/* Motion derived from macroscope.com: calm fades, pill hover, one slow atmospheric drift.
   No bounce, spin, or flash. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
  transition-delay: var(--d, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.hero__spray {
  animation: spray-drift 16s var(--ease) infinite alternate;
}

.marquee__track {
  animation: marquee 36s linear infinite;
}

.btn,
.pillar,
.lane,
.pair__mock,
.console,
.shot,
.site-header__bar,
.nav-panel a {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.btn:hover {
  transform: translateY(-1px);
}

.pillar:hover,
.lane:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(25, 30, 45, 0.08);
}

.pair__mock:hover,
.shot:hover,
.console:hover {
  transform: translateY(-4px);
}

.modal__panel {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
}

.modal.is-open .modal__panel {
  opacity: 1;
  transform: none;
}

.modal__backdrop {
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

@keyframes spray-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-18px, 12px, 0); }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}