/* ============================================================
   Motion + ambient layer styles
   Adds: cursor halo, ambient field, scroll rail, highlights,
   subtle hover lifts, animated dividers
   ============================================================ */

/* Ambient field: full-viewport canvas behind everything */
.ambient-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mix-blend-mode: normal;
}

/* Body sits above ambient */
body > div#root { position: relative; z-index: 1; }

/* Cursor halo */
.cursor-halo {
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  margin: -12px 0 0 -12px;
  background: radial-gradient(circle, var(--acc-glow) 0%, transparent 70%);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
  mix-blend-mode: plus-lighter;
  opacity: 0.7;
}
.cursor-halo.focus {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  opacity: 0.9;
}

/* Scroll rail */
.scroll-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50vh;
  background: var(--hair-soft);
  z-index: 50;
  pointer-events: none;
  opacity: 0.5;
}
.scroll-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--acc);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.08s linear;
  width: 1.5px;
  margin-left: -0.25px;
  box-shadow: 0 0 8px var(--acc-glow);
}
.scroll-rail-tick {
  position: absolute;
  left: -2.5px;
  width: 6px; height: 1px;
  background: var(--ink-4);
  transition: background 0.3s var(--ease-out);
}
@media (max-width: 900px) { .scroll-rail { display: none; } }

/* Highlight: animated underline that paints on view */
.hl {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--acc);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
  transition-delay: 0.1s;
  opacity: 0.7;
}
.hl.in::after { transform: scaleX(1); }
.hl.warn::after { background: var(--warn); }
.hl.good::after { background: var(--good); }
.hl.code {
  font-family: var(--f-mono);
  font-size: 0.92em;
  padding: 1px 6px 1px 6px;
  background: oklch(from var(--acc) calc(l + 0.32) c h / 0.12);
  border: 1px solid oklch(from var(--acc) l c h / 0.22);
  color: var(--acc);
  transform: translateY(-1px);
  display: inline-block;
  border-radius: 2px;
  white-space: nowrap;
}
.hl.code::after { display: none; }

/* Live ticker text effect */
.live-tick {
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
}

/* Sticker: scroll-driven figure rise */
.figure-tile {
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.figure-tile:hover {
  transform: translateY(-3px);
  border-color: var(--acc) !important;
  background: oklch(from var(--bg-rise) calc(l + 0.01) c h);
}

/* Card hover lift */
.card {
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px oklch(0 0 0 / 0.4);
}

/* Animated section divider - paints across when entering */
.section {
  position: relative;
}
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--acc) 0%, transparent 80%);
  transition: width 1.4s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.section.section-lit::before {
  width: 100%;
}

/* Scrolling text shimmer for headlines containing .hl */
@keyframes hl-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* Number tile counter - accent flash when value lands */
@keyframes val-flash {
  0% { color: var(--acc); }
  100% { color: inherit; }
}
.figure-tile.lit .val { animation: val-flash 0.8s var(--ease-out) forwards; }

/* Btn micro-interaction: arrow nudge */
.btn span:last-child {
  transition: transform 0.3s var(--ease-out);
  display: inline-block;
}
.btn:hover span:last-child { transform: translateX(4px); }

/* Pipeline / hop nodes glow pulse when active */
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--acc-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* Nav: faint underline scan */
.nav a {
  position: relative;
}
.nav a::before {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* Parallax wrapper */
.parallax {
  will-change: transform;
}

/* Section heads - number scrolls in mono */
.section-head .num span:first-child {
  display: inline-block;
  transition: letter-spacing 0.6s var(--ease-out);
}
.section-head:hover .num span:first-child {
  letter-spacing: 0.3em;
}

/* Subtle vignette over body for depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, var(--bg) 100%);
  opacity: 0.45;
  z-index: 0;
}

/* Reduce motion - respect the OS-level accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  .ambient-field, .cursor-halo, .scroll-rail { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none !important; transform: none !important; }
  .reveal, .reveal-in { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}