/* ============================================================================
   fc-son-meteo.css — Voile atmosphérique page × météo — Fondazione Caravelli
   ----------------------------------------------------------------------------
   Compagnon de assets/js/fc-son-meteo.js. Entièrement défensif : sans le JS,
   les variables gardent leurs valeurs neutres et l'effet reste quasi
   imperceptible ; sans cette CSS, le JS ne casse rien.

   Principe : un voile fixe très discret (body::after) teinté par
   --fc-meteo-teinte, dont l'opacité suit --fc-meteo-lumiere, un grain
   subtil modulé par --fc-meteo-grain, et une dérive lente réglée par
   --fc-meteo-derive. Luxueux, jamais gadget : opacités basses, blend
   doux, aucun élément cliquable intercepté.

   prefers-reduced-motion : la dérive est neutralisée.
   ============================================================================ */

/* Valeurs neutres par défaut : pierre chaude, lumière douce, grain léger. */
:root {
  --fc-meteo-teinte: hsl(36 22% 62%);
  --fc-meteo-teinte-douce: hsl(36 14% 80%);
  --fc-meteo-lumiere: 0.9;
  --fc-meteo-grain: 0.22;
  --fc-meteo-derive: 48s;
}

/* --------------------------------------------------------------------------
   Voile lumineux principal.
   - mix-blend-mode: soft-light → teinte la page sans la voiler.
   - Opacité bornée : même une nuit profonde reste élégante.
   - pointer-events: none → aucune interaction interceptée.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147482998;              /* sous le voile de transition palette (2147483000) */
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--fc-meteo-teinte-douce) 0%,
      var(--fc-meteo-teinte) 46%,
      var(--fc-meteo-teinte) 100%);
  mix-blend-mode: soft-light;
  opacity: calc(0.10 + (1 - var(--fc-meteo-lumiere)) * 0.22);
  transition: opacity 1.6s ease, background 1.6s ease;
}

/* --------------------------------------------------------------------------
   Grain atmosphérique (body::before).
   Bruit dessiné en pur CSS (gradients radiaux denses), intensité pilotée
   par --fc-meteo-grain. La dérive lente utilise --fc-meteo-derive.
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: -12%;                       /* marge pour la dérive sans bord visible */
  z-index: 2147482999;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 27%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 71%, rgba(0, 0, 0, 0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 41% 88%, rgba(0, 0, 0, 0.4) 0 1px, transparent 1.5px);
  background-size: 173px 191px, 211px 167px, 149px 223px, 197px 181px; /* tailles premières : pas de moiré */
  mix-blend-mode: overlay;
  opacity: calc(var(--fc-meteo-grain) * 0.14);
  animation: fc-meteo-derive var(--fc-meteo-derive) linear infinite alternate;
  transition: opacity 1.6s ease;
}

/* Dérive très lente du grain — à peine perceptible, signe de vie. */
@keyframes fc-meteo-derive {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(2.4%, -1.8%, 0); }
}

/* Respect strict de prefers-reduced-motion : tout mouvement s'arrête. */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    transition: none;
  }
  body::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Harmonie avec le bouton « Ambiance » existant : aucune modification de
   style n'est imposée ; on laisse .fc-son-global intact. Cette feuille ne
   cible volontairement aucun composant existant au-delà des pseudo-éléments
   ci-dessus.
   -------------------------------------------------------------------------- */