/* ============================================================================
   NAEDRYS — Background Image Effects Library
   Effets applicables sur toutes les sections avec image de fond
   Version : 2026-03-21 — Kairos

   ── USAGE ───────────────────────────────────────────────────────────────────

   1. Charger ce fichier :
      <link rel="stylesheet" href="lib/naedrys-backgrounds.css">
      <script src="lib/naedrys-backgrounds.js" defer></script>

   2. Poser l'image via variable CSS sur la section :
      <section class="section bg-section" style="--bg-image: url('assets/images/photo.jpg')">

   3. Empiler les effets voulus :
      <section class="section bg-section  bg-overlay-dark  bg-anim-breathe  bg-fx-bw">

   ── CATALOGUE COMPLET ───────────────────────────────────────────────────────

   OVERLAYS (calques semi-transparents)
   ├── bg-overlay-dark       Noir 55% — standard
   ├── bg-overlay-darker     Noir 78% — texte très lisible
   ├── bg-overlay-light      Blanc 30% — pour images sombres
   ├── bg-overlay-gold       Teinte or dorée
   ├── bg-overlay-teal       Teinte teal
   ├── bg-overlay-urgence    Teinte rouge/urgence
   ├── bg-overlay-vignette   Bords sombres, centre clair
   ├── bg-overlay-bottom     Fondu vers le bas (noir)
   ├── bg-overlay-top        Fondu vers le haut (noir)
   ├── bg-overlay-radial     Sombre aux bords, transparent au centre
   └── bg-overlay-grain      Film grain texturé

   FILTRES IMAGE (appliqués à l'image elle-même)
   ├── bg-fx-blur            Flou léger (3px)
   ├── bg-fx-blur-heavy      Flou fort (12px) — pour mise en avant du texte
   ├── bg-fx-bw              Noir et blanc
   ├── bg-fx-bw-gold         N&B + teinte or (combine avec bg-overlay-gold)
   ├── bg-fx-dim             Assombri (brightness 60%)
   ├── bg-fx-cold            Refroidissement (hue-rotate bleu)
   └── bg-fx-warm            Réchauffement (hue-rotate chaud)

   ANIMATIONS (mouvement de l'image)
   ├── bg-anim-breathe       Respiration lente — scale 1↔1.06 (10s)
   ├── bg-anim-drift         Dérive horizontale lente (25s)
   ├── bg-anim-drift-slow    Dérive très lente (45s)
   ├── bg-anim-zoom-in       Zoom entrant progressif (20s, once)
   ├── bg-anim-pulse-gold    Halo or pulsant sur l'image
   └── bg-anim-scan          Ligne de scan qui traverse (JS requis)

   SCAN / EFFETS SPÉCIAUX (nécessitent naedrys-backgrounds.js)
   ├── bg-fx-scan-lines      Lignes horizontales type écran CRT
   ├── bg-fx-scanbeam        Rayon lumineux qui traverse de haut en bas
   └── bg-parallax           Parallaxe au scroll (JS)

   ── EXEMPLES ────────────────────────────────────────────────────────────────

   // Simple, texte lisible
   <section class="section bg-section bg-overlay-dark"
            style="--bg-image: url('assets/images/golfe.jpg')">

   // Atmosphérique noir et blanc + vignette
   <section class="section bg-section bg-fx-bw bg-overlay-vignette bg-anim-breathe"
            style="--bg-image: url('assets/images/bureau.jpg')">

   // Impact fort + fondu bas
   <section class="section bg-section bg-overlay-darker bg-overlay-bottom"
            style="--bg-image: url('assets/images/hero.jpg')">

   // Halo teal animé + grain
   <section class="section bg-section bg-overlay-dark bg-overlay-teal bg-overlay-grain bg-anim-breathe"
            style="--bg-image: url('assets/images/mer.jpg')">

   // Flou fort pour mettre le contenu en avant
   <section class="section bg-section bg-fx-blur-heavy bg-overlay-dark"
            style="--bg-image: url('assets/images/texture.jpg')">

   ============================================================================ */


/* ============================================================================
   BASE — Structure fondamentale
   ============================================================================ */

.bg-section {
  position: relative;
  overflow: hidden;
}

/* L'image de fond — couche 1 (la plus basse) */
.bg-section::before {
  content: '';
  position: absolute;
  inset: -5%; /* légèrement plus grand pour les animations qui bougent */
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
  transition: filter 0.8s ease;
}

/* Overlay — couche 2 (au-dessus de l'image) */
.bg-section::after {
  z-index: 1;
}

/* Tout le contenu reste au-dessus des deux couches */
.bg-section > *:not(.bg-layer) {
  position: relative;
  z-index: 2;
}


/* ============================================================================
   OVERLAYS — Calques colorés
   ============================================================================ */

/* Overlay de base — structure commune */
.bg-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* — Dark (standard) */
.bg-overlay-dark::after {
  background: rgba(3, 3, 3, 0.55);
}

/* — Darker (texte très lisible) */
.bg-overlay-darker::after {
  background: rgba(3, 3, 3, 0.78);
}

/* — Light (pour images sombres) */
.bg-overlay-light::after {
  background: rgba(255, 255, 255, 0.28);
}

/* — Gold */
.bg-overlay-gold::after {
  background: rgba(196, 151, 59, 0.22);
}

/* — Teal */
.bg-overlay-teal::after {
  background: rgba(90, 200, 175, 0.18);
}

/* — Urgence */
.bg-overlay-urgence::after {
  background: rgba(180, 75, 42, 0.25);
}

/* — Vignette (bords sombres, centre clair) */
.bg-overlay-vignette::after {
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 0%,
    rgba(3, 3, 3, 0.35) 60%,
    rgba(3, 3, 3, 0.80) 100%
  );
}

/* — Fondu bas */
.bg-overlay-bottom::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(3, 3, 3, 0.70) 75%,
    rgba(3, 3, 3, 0.95) 100%
  );
}

/* — Fondu haut */
.bg-overlay-top::after {
  background: linear-gradient(
    to top,
    transparent 0%,
    transparent 40%,
    rgba(3, 3, 3, 0.70) 75%,
    rgba(3, 3, 3, 0.95) 100%
  );
}

/* — Radial (sombre aux bords) */
.bg-overlay-radial::after {
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(3, 3, 3, 0.10) 0%,
    rgba(3, 3, 3, 0.50) 70%,
    rgba(3, 3, 3, 0.85) 100%
  );
}

/* — Grain (film grain sur l'overlay) */
.bg-overlay-grain::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  background-size: 180px;
  mix-blend-mode: overlay;
}

/* ── Combiner dark + grain (cas fréquent) ─────────────────────────────────── */
/* Quand on combine bg-overlay-dark ET bg-overlay-grain, le ::after est partagé.
   Pour superposer, utiliser le data-overlay multi-couche via JS ou la div manuelle :
   <div class="bg-layer bg-overlay-grain"></div>  */

.bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* entre l'image (0) et le contenu (2) */
}

.bg-layer.bg-overlay-dark    { background: rgba(3,3,3,.55); }
.bg-layer.bg-overlay-darker  { background: rgba(3,3,3,.78); }
.bg-layer.bg-overlay-gold    { background: rgba(196,151,59,.22); }
.bg-layer.bg-overlay-teal    { background: rgba(90,200,175,.18); }
.bg-layer.bg-overlay-urgence { background: rgba(180,75,42,.25); }
.bg-layer.bg-overlay-bottom  { background: linear-gradient(to bottom, transparent 40%, rgba(3,3,3,.95) 100%); }
.bg-layer.bg-overlay-vignette { background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent, rgba(3,3,3,.8) 100%); }
.bg-layer.bg-overlay-grain   { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.06; background-size:180px; mix-blend-mode:overlay; z-index: 2; }


/* ============================================================================
   FILTRES IMAGE — appliqués sur .bg-section::before
   ============================================================================ */

/* — Flou léger */
.bg-fx-blur::before {
  filter: blur(3px);
}

/* — Flou fort (met le texte vraiment en avant) */
.bg-fx-blur-heavy::before {
  filter: blur(12px);
}

/* — Noir et blanc */
.bg-fx-bw::before {
  filter: grayscale(100%);
}

/* — N&B + teinte or (à combiner avec bg-overlay-gold) */
.bg-fx-bw-gold::before {
  filter: grayscale(100%) sepia(30%);
}

/* — Assombri */
.bg-fx-dim::before {
  filter: brightness(0.55);
}

/* — Refroidissement bleuté */
.bg-fx-cold::before {
  filter: hue-rotate(200deg) saturate(0.7);
}

/* — Réchauffement doré */
.bg-fx-warm::before {
  filter: hue-rotate(-20deg) saturate(1.2) brightness(0.9);
}

/* — Scan lines (CRT) — pseudo overlay sans JS */
.bg-fx-scan-lines::before {
  background-image:
    var(--bg-image, none),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(0, 0, 0, 0.08) 3px,
      rgba(0, 0, 0, 0.08) 4px
    );
  background-size: cover, 100% 4px;
}


/* ============================================================================
   ANIMATIONS — mouvement de l'image
   ============================================================================ */

/* — Respiration lente (zoom in/out) */
.bg-anim-breathe::before {
  animation: bgBreathe 10s ease-in-out infinite;
}

@keyframes bgBreathe {
  0%,  100% { transform: scale(1.00); }
  50%        { transform: scale(1.06); }
}

/* — Dérive horizontale */
.bg-anim-drift::before {
  animation: bgDrift 25s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  0%   { transform: translateX(-2%) scale(1.04); }
  100% { transform: translateX(2%)  scale(1.04); }
}

/* — Dérive très lente */
.bg-anim-drift-slow::before {
  animation: bgDrift 45s ease-in-out infinite alternate;
}

/* — Zoom entrant progressif (s'arrête — pour les sections hero) */
.bg-anim-zoom-in::before {
  animation: bgZoomIn 20s ease-out forwards;
}

@keyframes bgZoomIn {
  0%   { transform: scale(1.10); }
  100% { transform: scale(1.00); }
}

/* — Pulse or (halo doré pulsant) */
.bg-anim-pulse-gold::after {
  background:
    radial-gradient(
      ellipse 60% 50% at 50% 50%,
      rgba(196, 151, 59, 0.12) 0%,
      transparent 70%
    );
  animation: bgPulseGold 4s ease-in-out infinite;
}

@keyframes bgPulseGold {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%       { opacity: 1.0; transform: scale(1.05); }
}

/* — Rayon scan (JS requis pour la version complète, version CSS simplifiée) */
.bg-anim-scan::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(90, 200, 175, 0.06) 48%,
    rgba(90, 200, 175, 0.12) 50%,
    rgba(90, 200, 175, 0.06) 52%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: bgScanBeam 4s linear infinite;
}

@keyframes bgScanBeam {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 200%;  }
}


/* ============================================================================
   PARALLAX CSS SCROLL-DRIVEN — animation-timeline: view()
   Compositor thread — zéro JS — 60fps natif
   Support : Chrome 115+, Edge 115+, Safari 26+
   Fallback : image fixe (dégradé progressif acceptable)

   USAGE :
   <section class="section bg-section bg-overlay-dark bg-parallax-medium"
            style="--bg-image: url('photo.jpg')">

   CATALOGUE :
   ├── bg-parallax-slow    Dérive douce ±30px
   ├── bg-parallax-medium  Dérive standard ±70px  ← recommandé
   ├── bg-parallax-fast    Dérive prononcée ±130px
   ├── bg-parallax-zoom    Zoom out au scroll
   └── bg-parallax-drift   Dérive diagonale
   ============================================================================ */

/* Marge pour que l'image déborde et ait de la place pour se déplacer */
.bg-parallax-slow::before   { inset: -8%;  }
.bg-parallax-medium::before { inset: -12%; }
.bg-parallax-fast::before   { inset: -18%; }
.bg-parallax-zoom::before   { inset: -8%;  }
.bg-parallax-drift::before  { inset: -12%; }

/* — Lent ±30px */
@keyframes bgParallaxSlow {
  from { transform: translateY(30px);   }
  to   { transform: translateY(-30px);  }
}
.bg-parallax-slow::before {
  animation: bgParallaxSlow linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

/* — Moyen ±70px */
@keyframes bgParallaxMedium {
  from { transform: translateY(70px);   }
  to   { transform: translateY(-70px);  }
}
.bg-parallax-medium::before {
  animation: bgParallaxMedium linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

/* — Fort ±130px */
@keyframes bgParallaxFast {
  from { transform: translateY(130px);  }
  to   { transform: translateY(-130px); }
}
.bg-parallax-fast::before {
  animation: bgParallaxFast linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

/* — Zoom dézoom au scroll */
@keyframes bgParallaxZoom {
  from { transform: scale(1.12) translateY(20px);  }
  to   { transform: scale(1.00) translateY(-20px); }
}
.bg-parallax-zoom::before {
  animation: bgParallaxZoom linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

/* — Dérive diagonale */
@keyframes bgParallaxDrift2 {
  from { transform: translate(-25px,  30px); }
  to   { transform: translate( 25px, -30px); }
}
.bg-parallax-drift::before {
  animation: bgParallaxDrift2 linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

/* Fallback JS — ancienne classe conservée pour compatibilité */
.bg-parallax::before { will-change: transform; }


/* ============================================================================
   COMBINAISONS PRÊTES À L'EMPLOI
   Classes composites pour les cas les plus fréquents
   ============================================================================ */

/* Hero sombre standard */
.bg-preset-hero {
  --overlay-dark: rgba(3,3,3,0.60);
}
.bg-preset-hero::before { animation: bgBreathe 12s ease-in-out infinite; }
.bg-preset-hero::after  { background: linear-gradient(to bottom, rgba(3,3,3,.4) 0%, rgba(3,3,3,.75) 100%); }

/* Section témoignage — ambiance, texte très lisible */
.bg-preset-testimony::before { filter: grayscale(60%) brightness(0.5); }
.bg-preset-testimony::after  { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(3,3,3,.3), rgba(3,3,3,.85) 100%); }

/* Section impact — dramatique */
.bg-preset-impact::before { filter: brightness(0.45) saturate(0.8); animation: bgBreathe 8s ease-in-out infinite; }
.bg-preset-impact::after  { background: rgba(3,3,3,0.50); }

/* Section nature/local — chaleureuse */
.bg-preset-local::before { filter: hue-rotate(-10deg) saturate(1.1) brightness(0.75); }
.bg-preset-local::after  { background: linear-gradient(135deg, rgba(196,151,59,.15), rgba(3,3,3,.55)); }


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  /* Désactiver les animations lourdes sur mobile */
  .bg-anim-breathe::before,
  .bg-anim-drift::before,
  .bg-anim-drift-slow::before {
    animation: none;
  }

  /* Flou réduit sur mobile (perf) */
  .bg-fx-blur-heavy::before {
    filter: blur(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-anim-breathe::before,
  .bg-anim-drift::before,
  .bg-anim-drift-slow::before,
  .bg-anim-zoom-in::before,
  .bg-anim-scan::after,
  .bg-anim-pulse-gold::after,
  .bg-parallax-slow::before,
  .bg-parallax-medium::before,
  .bg-parallax-fast::before,
  .bg-parallax-zoom::before,
  .bg-parallax-drift::before {
    animation: none;
  }
}