/* ==========================================================================
   Cayo Studio — Effets cinématographiques pour le hero
   100% CSS/SVG : bokeh doré, grain de film, halo pulsant
   ========================================================================== */

/* --- Refonte du fond du hero pour accueillir les couches d'effets --- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201, 169, 97, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 30% 70%, rgba(201, 169, 97, 0.04) 0%, transparent 50%),
    var(--color-bg);
}

/* La grille architecturale subtile reste, on la conserve via ::before */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Vignette dégradée vers le bas (transition vers la section suivante) */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(10, 10, 10, 0.4) 80%, var(--color-bg) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(10, 10, 10, 0.5) 100%);
  z-index: 4;
  pointer-events: none;
}

/* --- Couche bokeh : cercles dorés flous qui flottent --- */
.hero-bokeh {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.bokeh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}

/* Variantes de couleur or champagne */
.bokeh-orb.gold {
  background: radial-gradient(circle, rgba(220, 190, 120, 0.85) 0%, rgba(201, 169, 97, 0.4) 40%, transparent 70%);
}
.bokeh-orb.warm {
  background: radial-gradient(circle, rgba(255, 220, 160, 0.7) 0%, rgba(201, 169, 97, 0.3) 40%, transparent 70%);
}
.bokeh-orb.subtle {
  background: radial-gradient(circle, rgba(201, 169, 97, 0.5) 0%, rgba(201, 169, 97, 0.15) 50%, transparent 75%);
}

/* Tailles et positions individuelles */
.bokeh-orb.b1 { width: 320px; height: 320px; top: 10%; left: 8%;  animation: drift1 22s ease-in-out infinite; }
.bokeh-orb.b2 { width: 220px; height: 220px; top: 55%; left: 75%; animation: drift2 28s ease-in-out infinite; }
.bokeh-orb.b3 { width: 180px; height: 180px; top: 70%; left: 15%; animation: drift3 24s ease-in-out infinite; }
.bokeh-orb.b4 { width: 280px; height: 280px; top: 25%; left: 60%; animation: drift4 30s ease-in-out infinite; }
.bokeh-orb.b5 { width: 140px; height: 140px; top: 80%; left: 50%; animation: drift5 26s ease-in-out infinite; }
.bokeh-orb.b6 { width: 200px; height: 200px; top: 5%;  left: 80%; animation: drift1 32s ease-in-out infinite reverse; }

/* Animations de dérive (très lentes, organiques) */
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, 40px) scale(1.1); }
  66%      { transform: translate(-30px, 80px) scale(0.95); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-80px, -50px) scale(1.15); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(50px, -60px) scale(0.9); }
  80%      { transform: translate(-40px, 30px) scale(1.1); }
}
@keyframes drift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, 60px) scale(1.05); }
}
@keyframes drift5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(40px, -30px) scale(1.2); }
  75%      { transform: translate(-50px, 20px) scale(0.85); }
}

/* --- Halo qui pulse derrière le contenu --- */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.18) 0%, rgba(201, 169, 97, 0.08) 30%, transparent 65%);
  filter: blur(60px);
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

/* --- Diaporama hero : photos d'événements en fondu enchaîné ---
   Couche placée au-dessus du bokeh (z-index: 2) pour couvrir l'arrière-plan
   quand des photos sont disponibles. Si aucune photo ne charge,
   les couches cinématographiques (bokeh, halo, grain) restent visibles. */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 1.6s ease-in-out,
    transform 7s ease-out;
  will-change: opacity, transform;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Voile sombre au-dessus du diaporama pour garantir la lisibilité du texte.
   Pseudo-élément interne au slideshow : il n'apparaît que si une image est présente. */
.hero-slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.55) 0%,
      rgba(10, 10, 10, 0.40) 40%,
      rgba(10, 10, 10, 0.90) 100%
    ),
    radial-gradient(
      ellipse at center 40%,
      rgba(10, 10, 10, 0.20) 20%,
      rgba(10, 10, 10, 0.65) 100%
    );
  pointer-events: none;
  z-index: 10;
}

/* Sur mobile, on assombrit un peu plus pour compenser les écrans plus petits */
@media (max-width: 768px) {
  .hero-slideshow::after {
    background:
      linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.65) 0%,
        rgba(10, 10, 10, 0.50) 40%,
        rgba(10, 10, 10, 0.95) 100%
      ),
      radial-gradient(
        ellipse at center 40%,
        rgba(10, 10, 10, 0.30) 20%,
        rgba(10, 10, 10, 0.75) 100%
      );
  }
}

/* --- Couche de grain de film (SVG noise) --- */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
  background-size: 200px 200px;
  animation: grainShift 0.8s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-5%, 5%); }
  40%  { transform: translate(7%, -3%); }
  60%  { transform: translate(-3%, -7%); }
  80%  { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

/* --- Scan line cinéma (très subtile, optionnel) --- */
.hero-scanlines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.04) 3px,
    rgba(0, 0, 0, 0.04) 4px
  );
  opacity: 0.5;
}

/* --- Le contenu doit toujours être au-dessus --- */
.hero-content {
  position: relative;
  z-index: 5;
}
.scroll-indicator {
  z-index: 5;
}

/* --- Accessibilité : couper toutes les animations si demandé --- */
@media (prefers-reduced-motion: reduce) {
  .bokeh-orb,
  .hero-glow,
  .hero-grain {
    animation: none !important;
  }
  .hero-grain {
    opacity: 0.08;
  }
}

/* --- Performance mobile : réduire les couches lourdes sur petit écran --- */
@media (max-width: 768px) {
  .bokeh-orb {
    filter: blur(30px);
  }
  .bokeh-orb.b6 {
    display: none;
  }
  .hero-glow {
    width: 500px;
    height: 500px;
  }
  .hero-grain {
    opacity: 0.12;
  }
}