/**
 * Caverne Ambiance — grain / orbes / particules / blob
 * Spec Chrono•Lab : radial-gradient + blur, grain SVG steps(4), overlay.
 * Pas de parallaxe scroll sur les backgrounds.
 */

@keyframes cv-amb-drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(30px, -25px) rotate(8deg); }
}

@keyframes cv-amb-drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-25px, 30px) rotate(-6deg); }
}

@keyframes cv-amb-zoom-slow {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.18) translate(-2%, 2%); }
}

@keyframes cv-amb-zoom-slow-2 {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.25) translate(2%, -3%); }
}

@keyframes cv-amb-zoom-huge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

@keyframes cv-amb-grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1%, -2%); }
  30% { transform: translate(2%, 1%); }
  50% { transform: translate(-2%, 2%); }
  70% { transform: translate(1%, -1%); }
  90% { transform: translate(-1%, 2%); }
}

@keyframes cv-amb-particle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.5; }
  50% { transform: translateY(-40px) translateX(14px); opacity: 1; }
}

@keyframes cv-amb-blob {
  0%, 100% {
    border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%;
    transform: translate(12px, -18px) rotate(4deg);
  }
  66% {
    border-radius: 48% 52% 62% 38% / 55% 38% 62% 45%;
    transform: translate(-10px, 10px) rotate(-3deg);
  }
}

.cv-amb {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cv-amb > *:not([class*="cv-amb__"]) {
  position: relative;
  z-index: 1;
}

.cv-amb__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.045;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cv-amb-grain 1s steps(4) infinite;
}

.cv-amb__grain--dense {
  opacity: 0.07;
}

.cv-amb__orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
  background: radial-gradient(circle at 35% 30%, #c9a8ff 0%, #8b5cf6 40%, transparent 72%);
  opacity: 0.4;
}

.cv-amb__orb--a {
  top: -320px;
  right: -280px;
  width: min(480px, 70vw);
  height: min(480px, 70vw);
  animation: cv-amb-drift-a 16s ease-in-out infinite, cv-amb-zoom-slow 12s ease-in-out infinite;
}

.cv-amb__orb--b {
  bottom: -200px;
  left: -160px;
  width: min(500px, 72vw);
  height: min(500px, 72vw);
  filter: blur(30px);
  opacity: 0.5;
  background: radial-gradient(circle at 60% 40%, #3a2a5c 0%, #201638 55%, transparent 80%);
  animation: cv-amb-drift-b 20s ease-in-out infinite, cv-amb-zoom-slow-2 15s ease-in-out infinite;
}

.cv-amb__orb--zoom {
  top: 10%;
  right: -10%;
  width: min(600px, 80vw);
  height: min(600px, 80vw);
  filter: blur(40px);
  opacity: 1;
  background: radial-gradient(circle at 40% 40%, rgba(196, 94, 255, 0.25) 0%, transparent 70%);
  animation: cv-amb-zoom-huge 14s ease-in-out infinite;
}

.cv-amb__orb--huge {
  inset: -12%;
  width: auto;
  height: auto;
  filter: blur(50px);
  opacity: 1;
  background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.38) 0%, rgba(139, 92, 246, 0.1) 42%, transparent 70%);
  animation: cv-amb-zoom-huge 10s ease-in-out infinite;
}

.cv-amb__orb--teal {
  top: 20%;
  left: -8%;
  width: min(420px, 60vw);
  height: min(420px, 60vw);
  opacity: 0.35;
  background: radial-gradient(circle at 40% 40%, rgba(45, 212, 191, 0.35) 0%, rgba(13, 148, 136, 0.12) 45%, transparent 72%);
  animation: cv-amb-drift-a 18s ease-in-out infinite;
}

.cv-amb__orb--rose {
  bottom: 10%;
  right: -5%;
  width: min(360px, 50vw);
  height: min(360px, 50vw);
  opacity: 0.32;
  background: radial-gradient(circle at 50% 40%, rgba(244, 114, 182, 0.35) 0%, transparent 70%);
  animation: cv-amb-drift-b 17s ease-in-out infinite;
}

.cv-amb__orb--soft {
  width: min(280px, 40vw);
  height: min(280px, 40vw);
  opacity: 0.22;
  filter: blur(55px);
  animation: cv-amb-drift-a 22s ease-in-out infinite;
}

.cv-amb__orb--recruit {
  top: -18%;
  right: -6%;
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  opacity: 0.38;
  background: radial-gradient(circle at 40% 35%, rgba(167, 139, 250, 0.4) 0%, rgba(109, 40, 217, 0.15) 50%, transparent 72%);
  animation: cv-amb-drift-a 16s ease-in-out infinite, cv-amb-zoom-slow 14s ease-in-out infinite;
}

.cv-amb__particle {
  position: absolute;
  z-index: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: #c9a8ff;
  box-shadow: 0 0 12px 4px rgba(199, 168, 255, 0.6);
  animation: cv-amb-particle 6s ease-in-out infinite;
}

.cv-amb__particle--rose {
  width: 5px;
  height: 5px;
  background: #f472b6;
  box-shadow: 0 0 10px 3px rgba(244, 114, 182, 0.5);
  animation-duration: 8s;
  animation-delay: 1.2s;
}

.cv-amb__particle--teal {
  width: 4px;
  height: 4px;
  background: #4fd1c5;
  box-shadow: 0 0 10px 3px rgba(79, 209, 197, 0.5);
  animation-duration: 7s;
  animation-delay: 0.6s;
}

.cv-amb__particle--a { top: 18%; left: 12%; }
.cv-amb__particle--b { top: 65%; right: 18%; }
.cv-amb__particle--c { top: 42%; left: 78%; }
.cv-amb__particle--d { bottom: 22%; left: 28%; }

.cv-amb__blob {
  position: absolute;
  z-index: 0;
  width: min(340px, 48vw);
  height: min(340px, 48vw);
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.55;
  background: linear-gradient(145deg, rgba(167, 139, 250, 0.55), rgba(244, 114, 182, 0.4), rgba(109, 40, 217, 0.35));
  animation: cv-amb-blob 14s ease-in-out infinite;
}

.cv-amb__blob--br {
  right: -8%;
  bottom: -12%;
}

.cv-amb__blob--tl {
  top: -10%;
  left: -6%;
  animation-delay: -4s;
}

/* ——— Variantes de section ——— */

.cv-amb--hero-01 {
  background: #0a0810;
}

.cv-amb--hero-02 {
  background: #070610;
}

.cv-amb--hero-03 {
  background: #050409;
}

.cv-amb--hero-04 {
  background: #050409;
}

.cv-amb--diagonal {
  padding: clamp(5rem, 12vw, 11rem) clamp(1.25rem, 5vw, 4rem);
  background: linear-gradient(135deg, #100c1e, #050409);
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
}

.cv-amb--diagonal .cv-amb__grain,
.cv-amb--diagonal .cv-amb__orb,
.cv-amb--diagonal .cv-amb__particle {
  display: none;
}

.cv-amb--flat {
  background: #f0eef7;
  color: #120f1c;
}

.cv-amb--flat .cv-amb__grain,
.cv-amb--flat .cv-amb__orb,
.cv-amb--flat .cv-amb__particle,
.cv-amb--flat .cv-amb__blob {
  display: none !important;
}

.cv-amb--soft {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .cv-amb__grain,
  .cv-amb__orb,
  .cv-amb__particle,
  .cv-amb__blob {
    animation: none !important;
  }
}