/* TITRE GRADIENT */
.gradient-title {
  background: linear-gradient(to right, #06b6d4, #8b5cf6, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CARDS HOVER */
.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* BACKGROUND PLASMA */
.background-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: rgb(240 244 248);
  transition: background 0.3s;
}
.dark .background-canvas {
  background: rgb(21 37 44 / 1);
}
.plasma {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,150,255,0.1), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(150,100,255,0.08), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0,200,150,0.06), transparent 60%);
  filter: blur(60px);
  animation: plasmaMove 12s infinite alternate ease-in-out;
}
.dark .plasma {
  background:
    radial-gradient(circle at 20% 30%, rgba(0,200,255,0.2), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(90,70,255,0.15), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0,255,200,0.12), transparent 60%);
}
@keyframes plasmaMove {
  0% { transform: translate(-40px,-40px) scale(1.1); }
  100% { transform: translate(40px,40px) scale(1.2); }
}
/* Étincelles */
.spark {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(0,200,255,0.8);
  border-radius: 50%;
  filter: blur(1px);
  animation: sparkle 2s infinite alternate;
}
body:not(.dark) .spark {
  background: rgba(0,0,0,0.4);
}
@keyframes sparkle {
  0% { transform: translate(0,0) scale(0.5); opacity:0.2; }
  50% { transform: translate(0,-5px) scale(1); opacity:1; }
  100% { transform: translate(0,5px) scale(0.5); opacity:0.2; }
}




/* --- VIDEO INTRO SOFT --- */
#soft-intro-video {
  position: fixed;
  inset: 0;
  z-index: 0;               /* 🔥 Derrière tout le contenu */
  pointer-events: none;
  overflow: hidden;

  opacity: 0.25;            /* 🔥 Très transparent */
  animation: softIntroFade 1s ease-out forwards;
}

#soft-intro-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.08);    /* 🔥 Zoom discret */
  animation: softIntroZoom 1s ease-out forwards;
}

@keyframes softIntroFade {
  0%   { opacity: 0.35; }
  100% { opacity: 0; }      /* 🔥 Disparait complètement */
}

@keyframes softIntroZoom {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1.00); }
}