/*!
 * shader-bg.css — habillage du fond WebGL « Mesh drift » (voir fx/shader-bg.js).
 * Aucune dépendance, aucune variable globale : tout est porté par
 * l'attribut [data-shader-bg] et la classe .shader-bg__canvas.
 */

/* L'hôte. `isolation:isolate` enferme le canvas en z-index -1 dans cet élément :
   le contenu du site passe naturellement PAR-DESSUS, sans avoir à toucher
   au z-index des enfants. */
[data-shader-bg] {
  position: relative;
  isolation: isolate;
  background-color: #090909;
}

[data-shader-bg] > .shader-bg__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;          /* en fond, sous le contenu */
  pointer-events: none; /* ne capte jamais les clics */
  user-select: none;
  opacity: 0;
  transition: opacity .8s ease;
  /* Le canvas est déjà en pixels device : pas de lissage supplémentaire. */
  image-rendering: auto;
}

/* Le JS pose cette classe après le premier rendu : apparition en fondu,
   jamais de flash noir/blanc au chargement. */
[data-shader-bg].shader-bg--ready > .shader-bg__canvas {
  opacity: 1;
}

/* Repli sans WebGL (ou shader qui ne compile pas) : dégradé statique sombre.
   Même famille de gris que la palette du shader. */
[data-shader-bg].shader-bg--fallback {
  background-color: #040405;
  background-image:
    radial-gradient(105% 85% at 24% 20%, #141619 0%, rgba(32, 35, 41, 0) 62%),
    radial-gradient(85% 75% at 78% 70%, #0d0f11 0%, rgba(22, 25, 29, 0) 64%),
    radial-gradient(70% 60% at 62% 26%, #090a0c 0%, rgba(16, 18, 21, 0) 70%),
    radial-gradient(150% 130% at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(2, 2, 3, .9) 100%);
}

/* Mouvement réduit : le JS fige déjà l'image sur une seule frame ;
   ici on supprime aussi le fondu d'apparition. */
@media (prefers-reduced-motion: reduce) {
  [data-shader-bg] > .shader-bg__canvas {
    transition: none;
  }
}

/* Impression : jamais de canvas dans un PDF/papier. */
@media print {
  [data-shader-bg] > .shader-bg__canvas { display: none; }
}