/* ============================================================
   Effets visuels — fond animé WebGL (AnimatedGradient) et
   révélation de texte par balayage (DiaTextReveal).

   Règles respectées (ui-ux-pro-max) :
   · un seul effet animé de fond par vue ;
   · le contenu reste sur des surfaces opaques → contrastes intacts ;
   · prefers-reduced-motion : image figée, rien n'est masqué.
   ============================================================ */

/* ---------- Fond animé plein écran ---------- */

.app-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Repli visible tant que le shader n'a pas peint sa première image. */
  background: var(--bg);
}

.gradient-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Grain fin : casse le banding des dégradés très doux.
   `overlay` préserve la luminosité de la base — sans ce mode, la
   texture (sombre) noircit un fond clair de plus de 40 points. */
.gradient-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
  background-repeat: repeat;
  background-size: 200px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMCCgkGBAVJOAVJAAAASklEQVQ4y2NgGAWjYBSMglEwCgY/YGRgZBQUYmJiZGQEkYwMjIyMgoKCjIyMIJKBgRFIMjIyAklGRkYGRkFBYEcwMDIyMjAOUQAA1I4HwVwZAkYAAAAASUVORK5CYII=");
}

/* Le fond animé remplace la couleur unie du body. */
body.has-animated-background {
  background: transparent;
}

/* ---------- DiaTextReveal ----------
   Le dégradé est peint sur les glyphes ; sa position est animée par
   l'API Web Animations (voir effects.js). La classe n'est posée que
   pendant l'animation, puis retirée : le titre retrouve la couleur
   du thème, dont le contraste est vérifié. */

.text-reveal {
  background-image: var(--reveal-gradient);
  background-size: 300% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Filet de sécurité : jamais de texte transparent laissé en place. */
  .text-reveal {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }
}

/* ---------- Impression ---------- */
@media print {
  .app-background {
    display: none;
  }
}