/* ════════════════════════════════════════════════════════════════════
   MOTION — reveal patterns, marquee, splittext, count-up
   Driven by IntersectionObserver in motion.js
   prefers-reduced-motion respected throughout.
   ──────────────────────────────────────────────────────────────────── */

/* Reveal — fade + translateY */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-forge),
    transform var(--dur-reveal) var(--ease-forge);
  will-change: opacity, transform;
}
[data-reveal][data-delay] {
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* SplitText — word-by-word reveal */
.split-text {
  display: inline-block;
}
.split-text__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.split-text__inner {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  transition:
    transform var(--dur-reveal) var(--ease-forge),
    opacity 600ms ease;
  will-change: transform;
}
.split-text.is-revealed .split-text__inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Hero italic word fly-in (used in "every layer." in hero) */
@keyframes heroItalicIn {
  from { opacity: 0; transform: translate3d(0, 40%, 0) rotate(-2deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}
.hero-italic-in {
  display: inline-block;
  opacity: 0;
  animation: heroItalicIn 900ms var(--ease-forge) 780ms forwards;
}

/* Marquee — opposing direction rows */
@keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes marquee-right { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }

.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  padding: 14px 0;
}
.marquee__track {
  display: flex;
  gap: 72px;
  width: max-content;
  animation: marquee-left 60s linear infinite;
}
.marquee--reverse .marquee__track {
  animation: marquee-right 75s linear infinite;
}

/* Forge gallery card flag — animated dot indicator */
.dot-bar { display: inline-flex; gap: 6px; }
.dot-bar__dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--ink-5);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: all 380ms var(--ease-forge);
}
.dot-bar__dot.is-active {
  width: 32px;
  background: var(--navy);
}
.dot-bar--light .dot-bar__dot {
  height: 4px; width: 12px; border-radius: 999px;
}
.dot-bar--light .dot-bar__dot.is-active { width: 40px; }

/* Hover transforms / lift */
.hover-translate { transition: transform 500ms var(--ease-forge); }
.hover-translate:hover { transform: translateY(-4px); }

/* Photo zoom inside hover container */
.photo-zoom { transition: transform 800ms var(--ease-forge); }
*:hover > .photo-zoom { transform: scale(1.04); }

/* Count-up — values are populated by JS; keep tabular numerals */
[data-count-up] {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* Reduced motion: kill non-essential animation but keep state visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  [data-reveal] { opacity: 1; transform: none; }
  .split-text__inner { opacity: 1; transform: none; }
  .hero-italic-in { opacity: 1; animation: none; }
  .marquee__track { animation: none; transform: translateX(0); }
}