/* ============================================================================
   v3000 holographic shimmer — ADDITIVE layer. Does NOT change the outline:
   same masthead, gray nav, white bg, pale-blue zebra, ranked table. It only
   makes "the lines" shimmer with a brighter oil-slick holographic sweep:
     · the dark-red bars  (masthead, section headers, table-header rows)
     · the gold rules     (a shimmering gold line under the masthead + the pills)
     · the row gridlines  (every table row separator → iridescent, sweeping)
   Revert = delete this file + the one <link>. Respects reduced-motion.
   ========================================================================== */

:root{
  /* the oil-slick sweep that rides OVER the red (red shows through the gaps) */
  --holo-sheen: linear-gradient(100deg,
      rgba(255,255,255,0)   28%,
      rgba(255,255,255,.38) 41%,
      rgba(255,215,0,.60)   47%,
      rgba(120,230,255,.55) 53%,
      rgba(255,120,220,.50) 59%,
      rgba(255,255,255,0)   72%);
  /* the iridescent line used for gold rules + gridlines */
  --holo-line: linear-gradient(90deg,#ffd700,#fff6c0,#5ad7ff,#b08bff,#ff78dc,#ffd700);
}

/* ---- dark-red bars: sheen sweeps across, red stays red ------------------ */
.mast,
h2.sect,
table.chart th{
  background-image: var(--holo-sheen);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: holoSweep 4.2s linear infinite;
}

/* ---- shimmering gold rule under the masthead (additive accent line) ------ */
.mast{ position: relative; }
.mast::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background-image: var(--holo-line);
  background-size: 300% 100%;
  animation: holoLineX 3.4s linear infinite;
  z-index: 2;
}

/* ---- the Game / Universe CTA pills shimmer too --------------------------- */
.nav a.navfeat{
  background-image: var(--holo-sheen);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: holoSweep 4.2s linear infinite;
}

/* ---- row gridlines → STATIC holographic (painted once = cheap) ----------- */
/* the iridescent 2px line sits at the bottom of every cell. It does NOT
   animate per-cell (that was 22k paints/frame → 13fps). The shimmer/motion
   comes from ONE GPU light-sweep band below — so all the lines catch light
   together at a smooth 60fps regardless of row count. */
table.chart td{
  background-image: var(--holo-line);
  background-size: 300% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  border-bottom: 0;
}
table.chart td,
table.chart tr:nth-child(odd) td{  background-color:#ffffff !important; }
table.chart tr:nth-child(even) td{ background-color:#f4f4ff !important; }
table.chart tr:hover td{           background-color:#ffff99 !important; }

/* ---- the single GPU shimmer: one transform-animated light band that sweeps
   diagonally across the whole page, making every static line + the red bars
   catch the light as it passes. 1 element, compositor-only → 60fps. -------- */
body::after{
  content:""; position:fixed; inset:0 -40%; pointer-events:none; z-index:9998;
  background-image: linear-gradient(105deg,
      transparent 44%,
      rgba(255,255,255,.20) 48%,
      rgba(150,235,255,.30) 50%,
      rgba(255,170,240,.24) 52%,
      transparent 56%);
  mix-blend-mode: screen;
  will-change: transform;
  animation: holoBand 5.5s linear infinite;
}

@keyframes holoSweep{ 0%{ background-position:130% 0; } 100%{ background-position:-130% 0; } }
@keyframes holoLineX{ 0%{ background-position:0 100%; } 100%{ background-position:300% 100%; } }
@keyframes holoBand{  0%{ transform:translateX(-46%); } 100%{ transform:translateX(46%); } }

@media (prefers-reduced-motion: reduce){
  .mast, h2.sect, table.chart th, .nav a.navfeat, .mast::after, body::after{
    animation: none;
  }
}