/* ==========================================================================
   PERFORMANCE MODES
   · body.lite      — automatic/manual low-cost mode
   · body.no-*      — individual switches driven by the ?perf overlay
   ========================================================================== */

/* ── lite mode ──────────────────────────────────────────────────────────
   Keeps the layout, colours and typography. Drops the things that cost
   per-frame GPU work: the particle canvas, blurs, drifting layers. ------ */

body.lite #fx-canvas,
body.lite .cursor-glow,
body.lite .bg-scanlines{ display:none !important; }

body.lite .bg-image{ animation:none !important; transform:scale(1.04) !important; }
body.lite .hero__glow{ animation:none !important; }
body.lite .hero__logo{ animation:none !important; }

body.lite *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* the header still needs to be readable once its blur is gone */
body.lite .masthead{ background:rgba(8,3,15,.96); }

/* the pointer-tracking sheen forces a repaint per mousemove */
body.lite .card::before{ display:none !important; }

/* keep hovers, drop the heavy transforms */
body.lite .portal:hover,
body.lite .social:hover,
body.lite .product:hover .product__shot img,
body.lite .bus-teaser:hover img{ transform:none !important; }

/* ── ?perf individual switches ─────────────────────────────────────────── */

body.no-canvas #fx-canvas{ display:none !important; }
body.no-bgdrift .bg-image{ animation:none !important; }
body.no-blur *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.no-blur .masthead{ background:rgba(8,3,15,.96); }
body.no-blend .hero__logo,
body.no-blend .brand__logo,
body.no-blend .footer__logo{ mix-blend-mode:normal !important; }
body.no-glow .hero__glow,
body.no-glow .cursor-glow{ display:none !important; }
body.no-anim *,
body.no-anim *::before,
body.no-anim *::after{ animation:none !important; }

/* ── footer toggle ─────────────────────────────────────────────────────── */

.lite-toggle{
  margin-top:.4rem;
  padding:.4rem .9rem;
  border-radius:999px;
  border:1px solid var(--line-soft);
  font-family:var(--ui);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.lite-toggle:hover{ color:var(--ink); border-color:var(--violet); }

/* ── diagnostic panel ──────────────────────────────────────────────────── */

.perf-panel{
  position:fixed;
  left:1rem; bottom:1rem;
  z-index:90;
  width:230px;
  padding:.9rem 1rem 1rem;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(8,3,15,.96);
  font-family:var(--ui);
  color:var(--ink-soft);
  box-shadow:0 14px 44px rgba(0,0,0,.7);
}
.perf-panel__fps{
  font-family:var(--display);
  font-size:2.1rem;
  line-height:1;
  color:var(--toxic);
}
.perf-panel__hint{
  margin:.3rem 0 .7rem;
  font-size:.66rem;
  line-height:1.4;
  color:var(--ink-faint);
}
.perf-panel__row{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.22rem 0;
  font-size:.74rem;
  cursor:pointer;
}
.perf-panel__row input{ accent-color:var(--violet); }
.perf-panel__stat{
  margin:.7rem 0 0;
  padding-top:.6rem;
  border-top:1px solid var(--line-soft);
  font-size:.62rem;
  line-height:1.5;
  color:var(--ink-faint);
}

@media (max-width:560px){
  .perf-panel{ left:.6rem; right:.6rem; width:auto; }
}