/* ═══════════════════════════════════════════════════════════════════════════
   Yggdrasil CX v2 · Motion
   Apple-style restraint: reveals, magnetic CTAs, marquee, counters.
   Everything respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ Keyframes ═══════════════ */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}
@keyframes hex-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}
@keyframes caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes token-travel {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ═══════════════ Scroll reveal ═══════════════ */

.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Staggered children: applied via JS with --r-delay */
.reveal[style*="--r-delay"] {
  transition-delay: var(--r-delay);
}

.reveal-sub {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity calc(var(--dur-base) + 120ms) var(--ease-out),
    transform calc(var(--dur-base) + 120ms) var(--ease-out);
}
.in-view > .reveal-sub,
.in-view.reveal-sub { opacity: 1; transform: translate3d(0, 0, 0); }

/* Letter-rise for hero heading */
.letter-rise > span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.letter-rise.in-view > span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: calc(var(--idx, 0) * 28ms);
}

/* ═══════════════ Magnetic CTA ═══════════════ */

.magnetic {
  transition: transform var(--dur-base) var(--ease-out);
  will-change: transform;
}
.magnetic:hover {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
}

/* Button glow on hover */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 60px at var(--px, 50%) var(--py, 50%),
                              rgba(255,255,255,0.25), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }

/* ═══════════════ Marquee ═══════════════ */

.marquee-track {
  animation: marquee-slide 48s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ═══════════════ Hex lattice pulse ═══════════════ */

.hex-node {
  transition:
    fill var(--dur-base) var(--ease-out),
    stroke var(--dur-base) var(--ease-out),
    r var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.hex-node.alive {
  animation: hex-pulse 3.6s var(--ease-in-out) infinite;
}

/* ═══════════════ Router tokens ═══════════════ */

.rtoken {
  offset-path: var(--path);
  offset-rotate: 0deg;
  animation: token-travel 2.2s var(--ease-soft) forwards;
}

/* ═══════════════ Nav shrink ═══════════════ */

.site-header {
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}

/* ═══════════════ Deck transitions ═══════════════ */

.slide {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.slide.active  { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.slide.prev    { opacity: 0; transform: translate3d(-40px, 0, 0) scale(0.98); pointer-events: none; }
.slide.next    { opacity: 0; transform: translate3d(40px, 0, 0) scale(0.98); pointer-events: none; }

/* ═══════════════ Reduced motion ═══════════════ */

@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, .reveal-sub, .letter-rise > span { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .hex-node.alive { animation: none !important; }
}