/* =========================================================
   perf.css — allègement du rendu (chargé en dernier)
   Cause du lag : sur Linux le navigateur tourne souvent sans
   accélération GPU ; flous (filter / backdrop-filter), fond en
   background-attachment: fixed, grain en mix-blend-mode et halos
   animés obligeaient à repeindre tout l'écran à chaque image.
   Même rendu visuel, techniques peu coûteuses.
   ========================================================= */

/* 1. Fond studio : les dégradés passent sur le calque fixe
      .studio-backdrop, peint une fois puis simplement composé
      (au lieu de background-attachment: fixed sur body).
      NB : html ayant son propre fond, celui de body masquait tous
      les calques en z-index:-1 — grain (mix-blend-mode), halos
      flous animés et grille étaient invisibles mais recalculés à
      chaque image. Ils sont retirés : rendu inchangé. */
body { background: transparent; }
body::before,
.studio-backdrop__glow,
.studio-backdrop__grid { display: none; }

.studio-backdrop {
  background:
    radial-gradient(900px 640px at 18% 8%, rgba(255, 255, 255, 0.34), transparent 62%),
    radial-gradient(760px 560px at 88% 22%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(820px 620px at 70% 78%, rgba(80, 78, 92, 0.22), transparent 62%),
    radial-gradient(700px 520px at 6% 70%, rgba(90, 88, 102, 0.18), transparent 60%),
    var(--bg);
  contain: strict;
  transform: translateZ(0);
}

/* Taches floues de l'accueil : le dégradé radial est déjà doux. */
.hero__blob { filter: none; }

/* 2. Verre dépoli : plus de backdrop-filter (recalculé à chaque
      image de défilement) ; fond un peu plus opaque à la place.
      Le flou reste uniquement sur l'overlay de la modale. */
:root {
  --glass: rgba(236, 235, 240, 0.52);
  --glass-strong: rgba(240, 239, 244, 0.72);
}
*, *::before, *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.modal__overlay {
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}
.nav { background: rgba(182, 180, 188, 0.94); }

/* 3. Éléments animés isolés sur leur propre calque */
.hero__decor { contain: paint; }
.stack__track { will-change: transform; }