/*
 * perf-guards.css — frontend.md Section 2.5.3
 *
 * Activated by the inline adaptive-loading shim in base.html, which sets
 * html[data-perf="low"] when navigator.connection.effectiveType is
 * slow-2g/2g/3g, saveData is true, or deviceMemory < 2.
 *
 * Under that flag we strip the most expensive visual effects so the page
 * stays usable on low-end Android / weak networks (GSMA Africa 2025:
 * 2G+3G = 52% of connections; Android Go floor = 2 GB RAM).
 *
 * Also honors prefers-reduced-transparency and reinforces the existing
 * prefers-reduced-motion rules.
 */

/* ----------------------------------------------------------------------
 * Low-perf flag: kill glass + decorative motion.
 * ---------------------------------------------------------------------- */

html[data-perf="low"] *,
html[data-perf="low"] *::before,
html[data-perf="low"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-perf="low"] {
  --glass-bg: var(--surface-3);
  --glass-bg-strong: var(--surface-3);
  --glass-blur: none;
}

html[data-perf="low"] .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html[data-perf="low"] *,
html[data-perf="low"] *::before,
html[data-perf="low"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html[data-perf="low"] video[autoplay] {
  display: none;
}

/* ----------------------------------------------------------------------
 * Honor prefers-reduced-transparency (Safari 17+, Chrome 118+).
 * If the user has asked for less transparency at the OS level, strip
 * blur unconditionally — not just under the low-perf flag.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ----------------------------------------------------------------------
 * Reinforce reduced-motion (already covered in base.html, but doubled
 * here so a page that forgets to copy the rule still degrades safely).
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}