/* ------------------------------------------------------------------
   ambiance.css — les deux effets permanents (grille, grain) et le
   mouvement signature : la révélation flou-vers-net des titres.
   ------------------------------------------------------------------ */

/* 1. Grille de fond : fixe, derrière tout, jamais cliquable */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* La grille s'éteint vers le bas de l'écran : elle habite, elle ne quadrille pas */
  mask-image: radial-gradient(ellipse 100% 85% at 50% 0%, black 35%, transparent 100%);
}

.bg-grid-line {
  fill: none;
  stroke: rgb(var(--gold-rgb) / 0.18);
  stroke-width: 0.6;
}

.bg-grid-cell {
  fill: var(--gold);
  opacity: 0;
}

/* 2. Grain de film : bruit fractal en tuile de 180 px, à peine perceptible */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: 0.025;
  pointer-events: none;
}

/* 3. Révélation au défilement.
   Les titres passent du flou au net : c'est ce qui donne l'impression de cher.
   Les blocs, eux, montent simplement — flouter de grandes surfaces coûte trop. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(10px);
  transition:
    opacity 850ms var(--ease-out),
    transform 850ms var(--ease-out),
    filter 850ms var(--ease-out);
  will-change: opacity, transform, filter;
}

.js [data-reveal="block"] {
  transform: translateY(20px);
  filter: none;
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Décalage entre les éléments d'un même groupe */
.js [data-stagger] > :nth-child(2) { transition-delay: 120ms; }
.js [data-stagger] > :nth-child(3) { transition-delay: 240ms; }
.js [data-stagger] > :nth-child(4) { transition-delay: 360ms; }

/* Non négociable : aucun mouvement si le lecteur n'en veut pas */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal="block"] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}