/* =====================================================================
   MG CURRENT — "the current bus"
   The signature "energy flowing through the site" motif: ONE fixed
   conductive line in the right margin carrying a single luminous spark
   that travels DOWN the page as you scroll — power moving through the
   whole site, the same green energy as Jouli's orb (orb breathes, the
   bus flows). Compositor-only (transform/opacity on gradients), driven
   by the scroll-progress value the site already computes (--mgc, set in
   v2-motion.js) — NO new loop. Decorative + aria-hidden + no per-frame
   paint. Rests (frozen) under reduced-motion. Do NOT confuse with the
   removed mg-current.css.
   ===================================================================== */

#mg-current {
  position: fixed;
  top: 0;
  right: clamp(16px, 3.2vw, 52px);
  width: 2px;
  height: 100vh;
  height: 100dvh;
  z-index: 5;                 /* under nav(100)/Jouli(800)/modals, above content */
  pointer-events: none;
  contain: strict;            /* isolate from the rest of the page's layout/paint */
}

/* The rail — a static glowing "wire". Fades out top + bottom so it never
   reads as a stray scrollbar or hard border. Never animated. */
.mg-current-rail {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(128, 217, 89, 0) 5%,
    rgba(128, 217, 89, .28) 18%,
    rgba(128, 217, 89, .28) 82%,
    rgba(128, 217, 89, 0) 95%,
    transparent 100%);
  box-shadow: 0 0 9px rgba(128, 217, 89, .28);
}

/* The spark — ONE travelling current pulse: a white-hot core in a green
   halo so it pops against BOTH the green hero aurora and the dark sections.
   Slides down the rail purely via translate3d (compositor). --mgc is
   0 (page top) → 1 (page bottom). */
.mg-current-spark {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 140px;
  margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(255, 255, 255, .95) 0%,
    rgba(190, 250, 150, .85) 16%,
    rgba(128, 217, 89, .5) 42%,
    rgba(128, 217, 89, 0) 74%);
  opacity: 1;
  transform: translate3d(0, calc(var(--mgc, 0) * (100vh - 140px)), 0);
  transform: translate3d(0, calc(var(--mgc, 0) * (100dvh - 140px)), 0);
  will-change: transform;     /* the ONLY will-change in this layer */
}

/* The spark's INNER glow breathes — one element, opacity-only (compositor),
   so the current feels alive even at rest (a sibling to Jouli's breathing
   orb). Travel still happens only on scroll; this is just life-in-place. */
.mg-current-spark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: mgcBreathe 3.6s ease-in-out infinite;
}
@keyframes mgcBreathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- Light theme — ink-green, recedes without disappearing ---- */
[data-theme="light"] .mg-current-rail {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(47, 107, 20, 0) 5%,
    rgba(47, 107, 20, .16) 18%,
    rgba(47, 107, 20, .16) 82%,
    rgba(47, 107, 20, 0) 95%,
    transparent 100%);
  box-shadow: 0 0 5px rgba(47, 107, 20, .12);
}
[data-theme="light"] .mg-current-spark {
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(47, 107, 20, .6) 0%,
    rgba(47, 107, 20, .32) 36%,
    rgba(47, 107, 20, 0) 72%);
  opacity: .75;
}

/* ---- Mobile — narrower + calmer ---- */
@media (max-width: 600px) {
  #mg-current { right: 10px; }
  .mg-current-spark {
    width: 12px;
    height: 100px;
    margin-left: -6px;
    transform: translate3d(0, calc(var(--mgc, 0) * (100dvh - 100px)), 0);
  }
}

/* ---- Reduced motion — the current rests mid-rail, no scroll coupling ---- */
@media (prefers-reduced-motion: reduce) {
  .mg-current-spark {
    transform: translate3d(0, calc(.5 * (100dvh - 140px)), 0) !important;
    will-change: auto;
    opacity: .85;
  }
  .mg-current-spark::after { animation: none; opacity: .7; }
}

/* ---- The right rail now FLOWS with continuous downward energy ----
   Repeating energy segments stream down the wire (on top of the
   scroll-driven spark + breathe), so the right margin always reads as
   live current. Mask fades the ends. Reduced-motion → still. */
.mg-current-rail { overflow: hidden; }
.mg-current-rail::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0, transparent 40px, rgba(190,250,150,.5) 54px, transparent 68px);
  animation: mgcRailFlow 2.4s linear infinite;
  -webkit-mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
@keyframes mgcRailFlow { from { background-position: 0 0; } to { background-position: 0 68px; } }
[data-theme="light"] .mg-current-rail::after {
  background: repeating-linear-gradient(180deg,
    transparent 0, transparent 40px, rgba(47,107,20,.4) 54px, transparent 68px);
}
@media (prefers-reduced-motion: reduce) { .mg-current-rail::after { animation: none; opacity: .5; } }

/* ---- Right-margin current "bus" retired ----
   It read as a stray green line near the nav rather than flowing energy.
   Hidden here (the JS still injects #mg-current; this just hides it) so it's
   trivially reversible if we want a softer ambient version later. */
#mg-current { display: none !important; }