/* ============================================================
   FX LAYER — lightweight, crisp, progressive-enhancement.
   Only compositor-friendly effects; nothing that repaints on every
   scroll frame (no fixed blend layers, no scroll-hijack, no masks).
   ============================================================ */

/* ── cross-document view transitions (app-like page changes) ── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: gtc-vt-out .2s ease both; }
  ::view-transition-new(root) { animation: gtc-vt-in .3s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes gtc-vt-out { to { opacity: 0; } }
  @keyframes gtc-vt-in { from { opacity: 0; transform: translateY(8px); } }
}

/* ── circuit-map draw-on-scroll (circuit pages only) ── */
/* JS-driven: fx.js sets --len, adds .fx-draw, then .drawn per-path on
   intersection. Plain CSS transition = works in every modern browser
   (not just Chrome's animation-timeline). */
.fx-draw .circuit-map svg path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.5s cubic-bezier(.4, 0, .2, 1);
}
.fx-draw .circuit-map svg path.drawn { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .fx-draw .circuit-map svg path { stroke-dashoffset: 0; transition: none; }
}

/* hero parallax drift is driven by fx.js (inline transform/opacity on scroll)
   so it works cross-browser; no CSS scroll-timeline needed. */

/* ── speed marquee (broadcast strip) ── */
.marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); padding: 15px 0; }
.marquee__row { display: flex; align-items: center; width: max-content; will-change: transform; animation: gtc-marq 45s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 30px; padding-right: 30px;
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(16px, 2vw, 26px); letter-spacing: 0.03em; color: var(--gray-300); white-space: nowrap;
}
.marquee__item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; }
.marquee__item.is-home { color: var(--lime); }
.marquee__item.is-home::after { background: var(--lime); }
@keyframes gtc-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; } }