/* =====================================================================
   LITE TIER — phones and tablets only
   ---------------------------------------------------------------------
   The inline boot script in every page adds `lite` to <html> when the
   main pointer is a finger (phones, tablets) or the screen is <= 900px.
   Desktop never gets this class, so nothing here changes the PC site.

   The rule of thumb on mobile GPUs:
     cheap  = animating transform / opacity of an HTML element
     costly = animating filter, background-position, top/left,
              stroke-dashoffset, or anything inside an <svg>
   Costly loops are either swapped for a transform/opacity version that
   looks the same, or frozen on a good-looking frame. Animated SVG
   scenes (maps, lighthouses, ECG lines) are run in short bursts by
   js/lite.js instead of forever.
   ===================================================================== */

/* ---------- SVG scenes: paused unless js/lite.js says "play" ---------- */
html.lite svg.lite-rest,
html.lite svg.lite-rest * {
  animation-play-state: paused !important;
}

/* ---------- header + theme switch ---------- */
html.lite .rgb {
  animation: none; /* brightness flicker repaints the pill every frame */
}
html.lite #th::before {
  animation: none; /* twinkling stars on the switch */
}

/* ---------- light theme sky ---------- */
html.lite[data-theme="light"] .sun {
  animation: none; /* brightness "breathing" = full repaint of a big disc */
}
html.lite[data-theme="light"] .sun::after {
  animation: none; /* rotating masked rays: keep them, just still */
}

/* ---------- loader ---------- */
html.lite #ld .ln {
  animation: none; /* the sweep reveal already draws the line */
}

/* ---------- home hero ---------- */
/* Logo: keep the reveal and the little glitch jump, drop the animated glow. */
html.lite body.live .hl img {
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--cy) 35%, transparent));
  animation:
    rv 1.6s 0.2s cubic-bezier(0.7, 0, 0.2, 1) forwards,
    lite-glitch 7s 3s infinite;
}
@keyframes lite-glitch {
  0%,
  94%,
  100% {
    translate: 0;
  }
  95% {
    translate: 4px 0;
  }
  97% {
    translate: -3px 0;
  }
}
/* Register button: same heartbeat, without the per-frame glow filter. */
html.lite .bt.pulse {
  animation: lite-pulse 1.8s ease-in-out infinite;
}
html.lite .pw {
  animation: none;
}
@keyframes lite-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

/* ---------- guests ---------- */
html.lite .gfl {
  animation: none; /* moving perspective floor grid */
}
html.lite .fcd.on .fc-fx {
  animation: none; /* card shine sweep (background-position) */
  background-position:
    0 0,
    40% 0;
}
/* "classified" cards: the scan band moves with transform instead of `top` */
html.lite .fcd.lk .fc-bod::after {
  top: -18%;
  animation: lite-lkscan 4.5s linear infinite;
}
@keyframes lite-lkscan {
  to {
    transform: translateY(711%);
  }
}

/* ---------- gallery ---------- */
html.lite .wip-t {
  animation: none; /* gradient text shimmer */
}

/* ---------- founder hologram (About + the Origin shrine) ---------- */
html.lite .sh-scan {
  mix-blend-mode: normal;
  opacity: 0.8;
  animation: lite-sh-sweep 4.2s linear infinite;
}
@keyframes lite-sh-sweep {
  0% {
    transform: translateY(-71%);
    opacity: 0;
  }
  12%,
  88% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(686%);
    opacity: 0;
  }
}

/* ---------- anything scrolled out of view (js/lite.js adds .lite-off) ---------- */
html.lite .lite-off,
html.lite .lite-off *,
html.lite .lite-off::before,
html.lite .lite-off::after,
html.lite .lite-off *::before,
html.lite .lite-off *::after {
  animation-play-state: paused !important;
}

/* ---------- one-shot transitions: same motion, no per-frame filters ---------- */

/* Home "at a glance" slideshow: the eight slices still fly in from alternate
   sides; the over-exposed flash is a white veil fading out instead of an
   animated brightness/contrast filter on eight large images. */
html.lite .gls.on i {
  animation-name: lite-gsi;
}
html.lite .gls i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
html.lite .gls.on i::after {
  animation: lite-gsi-flash 0.75s cubic-bezier(0.75, 0, 0.15, 1) backwards;
  animation-delay: calc(var(--k) * 42ms);
}
@keyframes lite-gsi {
  from {
    transform: translateX(calc(var(--d, 1) * var(--s) * 104%));
  }
}
@keyframes lite-gsi-flash {
  from {
    opacity: 0.75;
  }
  60% {
    opacity: 0.25;
  }
  to {
    opacity: 0;
  }
}
html.lite .glcap h3.k {
  animation-name: lite-rise; /* was a blur-in */
}
html.lite .glr .b1 {
  filter: none; /* glow on a line that redraws ~8x a second */
  stroke-width: 3;
}
html.lite svg.fg {
  will-change: auto; /* the floating glyphs stay still on phones */
}

/* Guests: portrait switch keeps its rise + glitch slices, minus the flash filter */
html.lite .gsg.gsw .gp {
  animation-name: lite-gin;
}
@keyframes lite-gin {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }
  30% {
    opacity: 1;
  }
}