/* ============================================================
   Story of US - motion vocabulary
   Rules:
   - Hidden initial states ONLY behind html.js-enabled.
   - Animate transform + opacity only.
   - House easing: var(--ease-out). No bounce, no linear.
   - The file ENDS with the reduced-motion kill switch. Extend it
     whenever new motion is added.
   ============================================================ */

/* --- Scroll reveals --- */

html.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

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

html.js-enabled [data-reveal="fade"] {
  transform: none;
}

html.js-enabled [data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

html.js-enabled [data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* --- Line-level text reveal (SplitText targets) --- */

html.js-enabled [data-lines-reveal] {
  visibility: hidden; /* released by JS the moment lines are split */
}

.line-mask {
  overflow: hidden;
  display: block;
}

/* --- Drawn rule (red line that stitches in) --- */

.draw-rule {
  height: 2px;
  background: var(--red);
  transform-origin: left center;
}

html.js-enabled .draw-rule {
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
}

html.js-enabled .is-visible .draw-rule,
html.js-enabled .draw-rule.is-visible {
  transform: scaleX(1);
}

/* --- Image clip reveal (portraits, plates) --- */

html.js-enabled [data-clip-reveal] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 900ms var(--ease-out);
}

html.js-enabled [data-clip-reveal].is-visible {
  clip-path: inset(0 0 0 0);
}

/* --- Floating dots (CTA closing scene: the ONE allowed infinite loop) --- */

@keyframes dot-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
}

.drift-dot {
  animation: dot-drift 7s ease-in-out infinite;
}

/* --- Page transition curtain --- */

.page-curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  background: var(--ink);
  display: none;
  transform: translateY(100%);
  will-change: transform;
}

.page-curtain-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 1rem;
}

.page-curtain-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

/* --- Map dot pulse (story markers) --- */

@keyframes dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 68, 58, 0.35);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(200, 68, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(200, 68, 58, 0);
  }
}

/* ============================================================
   REDUCED MOTION KILL SWITCH - everything static and visible.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.js-enabled [data-reveal],
  html.js-enabled [data-stagger] > *,
  html.js-enabled .draw-rule,
  html.js-enabled [data-clip-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  html.js-enabled [data-lines-reveal] {
    visibility: visible;
  }

  .drift-dot {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}