/* ==========================================================================
   motion.css — entrance, transition, and reduced-motion guardrails.
   Brief: no decorative mouse-parallax; reduced-motion freezes all of this.
   ========================================================================== */

/* Entrance: sections rise into place on first paint */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-in) var(--ease-out),
              transform var(--t-in) var(--ease-spring);
  will-change: opacity, transform;
}

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

/* Spring entrance for cards (slight overshoot) */
.reveal-spring {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity var(--t-in) var(--ease-out),
              transform 600ms var(--ease-spring);
}

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

/* Stagger child reveal — apply .reveal-stagger to a parent */
.reveal-stagger > .reveal,
.reveal-stagger > .reveal-spring {
  transition-delay: 0ms;
}

.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 400ms; }

/* Marquee — bottom hero strap */
.marquee {
  display: flex;
  gap: var(--sp-7);
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}

.marquee__item {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-lo);
  white-space: nowrap;
}

.marquee__item::after {
  content: "·";
  margin-left: var(--sp-7);
  opacity: 0.4;
}

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

/* Mesh-gradient background blobs (bg.js injects the actual nodes) */
.mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-0);
}

.mesh__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.mesh__blob--1 {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  top: -10%;
  left: -10%;
}

.mesh__blob--2 {
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 60%);
  top: 30%;
  right: -15%;
}

.mesh__blob--3 {
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  bottom: -10%;
  left: 30%;
  opacity: 0.25;
}

@keyframes mesh-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(8vw, 4vh, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mesh-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-6vw, 5vh, 0) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mesh-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vw, -3vh, 0) scale(0.95); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.mesh__blob--1 { animation: mesh-drift-1 30s ease-in-out infinite; }
.mesh__blob--2 { animation: mesh-drift-2 36s ease-in-out infinite; }
.mesh__blob--3 { animation: mesh-drift-3 42s ease-in-out infinite; }

/* --- Reduced motion: freeze everything that moves --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-spring {
    opacity: 1;
    transform: none;
  }

  .mesh__blob {
    animation: none !important;
  }

  .marquee {
    animation: none !important;
    transform: none !important;
  }
}