/* motion.css — single job: keyframes, animated states, reduced-motion fallback. */

/* ---------- Hero grid paper ---------- */
.hero__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 31, 68, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 31, 68, 0.06) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 20%, transparent 78%);
}

.hero__wash {
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(19, 48, 111, 0.07), transparent);
  animation: wash-breathe 9s ease-in-out infinite;
}

@keyframes wash-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ---------- Page-load sequence ---------- */
.rise {
  opacity: 0;
  transform: translateY(18px);
  animation: rise-in 800ms var(--ease-out) forwards;
}

.rise-1 { animation-delay: 60ms; }
.rise-2 { animation-delay: 170ms; }
.rise-3 { animation-delay: 280ms; }
.rise-4 { animation-delay: 390ms; }

@keyframes rise-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__aside {
  animation: aside-in 1s var(--ease-out) both 320ms;
}

@keyframes aside-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Scroll reveal (driven by scroll-reveal.js) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}

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

[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

/* ---------- Marquee ---------- */
.marquee__track {
  animation: marquee-run 42s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

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

/* ---------- Dispatch beacon ---------- */
.status__beacon {
  animation: beacon-pulse 2.2s ease-in-out infinite;
}

@keyframes beacon-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(23, 160, 106, 0.5);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(23, 160, 106, 0);
  }
}

/* ---------- Logo settle ---------- */
.hero__mark img {
  filter: drop-shadow(0 20px 34px rgba(14, 31, 68, 0.22));
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .rise,
  .hero__aside,
  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
  }
}