/* ================================
   FEU D’ARTIFICE – CSS ONLY
   Angle réaliste + explosion fiable
   ================================ */

.fireworks{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* Fusée */
.fw{
  position: absolute;
  left: 50%;
  bottom: -12vh;

  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;

  opacity: 0;

  animation: launch 4s cubic-bezier(.25,.8,.25,1) infinite;
  animation-delay: var(--delay);
}

/* Traînée */
.fw::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-180px;
  transform:translateX(-50%);

  width:2px;
  height:180px;

  background: linear-gradient(
    to top,
    transparent,
    rgba(255,255,255,.95),
    transparent
  );

  opacity:.9;
  animation: trailOff 4s linear infinite;
  animation-delay: var(--delay);
}

/* Explosion */
.fw::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;

  width:6px;
  height:6px;
  border-radius:50%;

  background:#ffffff; /* flash central */
  transform:translate(-50%,-50%) scale(0);
  opacity:0;

  animation: explode 4s ease-out infinite;
  animation-delay: var(--delay);

  /* particules */
  box-shadow:
    0 -48px #ff4d4d,
    34px -34px #ffd43b,
    48px 0 #4dabf7,
    34px 34px #69db7c,
    0 48px #ffa94d,
   -34px 34px #b197fc,
   -48px 0 #ff6bcb,
   -34px -34px #22b8cf,
    18px -44px #ffe066,
    44px -18px #a5d8ff,
    44px 18px #8ce99a,
    18px 44px #ffd8a8,
   -18px 44px #d0bfff,
   -44px 18px #fcc2d7,
   -44px -18px #99e9f2,
   -18px -44px #ffec99;
}

/* ================================
   PARAMÈTRES DES TIRS
   ================================ */

.fw1{ --dx:-18vw; --dy:78vh; --delay:0s;   }
.fw2{ --dx: 12vw; --dy:82vh; --delay:2.4s; }
.fw3{ --dx:-8vw;  --dy:74vh; --delay:4.8s; }

/* ================================
   ANIMATIONS
   ================================ */

/* 🚀 Trajectoire oblique réaliste */
@keyframes launch{
  0%{
    transform: translate(0,0);
    opacity:0;
    background:#fff;
  }

  6%{
    opacity:1;
  }

  /* montée */
  65%{
    transform: translate(var(--dx), calc(-1 * var(--dy)));
    opacity:1;
    background:#fff;
  }

  /* fusée s’éteint MAIS reste visible */
  66%{
    background: transparent;
    opacity:1;
  }

  /* on laisse le temps à l’explosion */
  88%{
    opacity:1;
  }

  /* reset */
  100%{
    transform: translate(0,0);
    opacity:0;
    background:#fff;
  }
}

/* Traînée s’éteint au sommet */
@keyframes trailOff{
  0%,65%{
    opacity:.9;
  }
  66%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

/* 💥 Explosion finale (FIABLE) */
@keyframes explode{
  0%,65%{
    transform: translate(-50%,-50%) scale(0);
    opacity:0;
  }

  68%{
    opacity:1;
  }

  74%{
    transform: translate(-50%,-50%) scale(1);
    opacity:1;
  }

  100%{
    transform: translate(-50%,-50%) scale(4.4);
    opacity:0;
  }
}

/* ================================
   ACCESSIBILITÉ
   ================================ */
@media (prefers-reduced-motion: reduce){
  .fw{ display:none; }
}
/* ================================
   FEU D’ARTIFICE – CSS ONLY
   Angle réaliste + explosion fiable
   ================================ */

.fireworks{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* Fusée */
.fw{
  position: absolute;
  left: 50%;
  bottom: -12vh;

  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;

  opacity: 0;

  animation: launch 4s cubic-bezier(.25,.8,.25,1) infinite;
  animation-delay: var(--delay);
}

/* Traînée */
.fw::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-180px;
  transform:translateX(-50%);

  width:2px;
  height:180px;

  background: linear-gradient(
    to top,
    transparent,
    rgba(8, 243, 39, 0.95),
    transparent
  );

  opacity:.9;
  animation: trailOff 4s linear infinite;
  animation-delay: var(--delay);
}

/* Explosion */
.fw::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;

  width:10px;
  height:10px;
  border-radius:50%;

  background:#e2960a; /* flash central */
  transform:translate(-50%,-50%) scale(0);
  opacity:0;

  animation: explode 1.4s ease-out infinite;
  animation-delay: var(--delay);

  /* particules */
  box-shadow:
    0 -48px #ff4d4d,
    34px -34px #ffd43b,
    48px 0 #4dabf7,
    34px 34px #69db7c,
    0 48px #ffa94d,
   -34px 34px #b197fc,
   -48px 0 #ff6bcb,
   -34px -34px #22b8cf,
    18px -44px #ffe066,
    44px -18px #a5d8ff,
    44px 18px #8ce99a,
    18px 44px #ffd8a8,
   -18px 44px #d0bfff,
   -44px 18px #fcc2d7,
   -44px -18px #99e9f2,
   -18px -44px #ffec99;
}

/* ================================
   PARAMÈTRES DES TIRS
   ================================ */

.fw1{ --dx:-18vw; --dy:78vh; --delay:0s;   }
.fw2{ --dx: 12vw; --dy:82vh; --delay:1.4s; }
.fw3{ --dx:-8vw;  --dy:74vh; --delay:2.8s; }

/* ================================
   ANIMATIONS
   ================================ */

/* 🚀 Trajectoire oblique réaliste */
@keyframes launch{
  0%{
    transform: translate(0,0);
    opacity:0;
    background:#fff;
  }

  6%{
    opacity:1;
  }

  /* montée */
  65%{
    transform: translate(var(--dx), calc(-1 * var(--dy)));
    opacity:1;
    background:#fff;
  }

  /* fusée s’éteint MAIS reste visible */
  66%{
    background: transparent;
    opacity:1;
  }

  /* on laisse le temps à l’explosion */
  88%{
    opacity:1;
  }

  /* reset */
  100%{
    transform: translate(0,0);
    opacity:0;
    background:#fff;
  }
}

/* Traînée s’éteint au sommet */
@keyframes trailOff{
  0%,65%{
    opacity:.9;
  }
  66%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
}

/* 💥 Explosion finale (FIABLE) */
@keyframes explode{
  0%,65%{
    transform: translate(-50%,-50%) scale(0);
    opacity:0;
  }

  68%{
    opacity:1;
  }

  74%{
    transform: translate(-50%,-50%) scale(1);
    opacity:1;
  }

  100%{
    transform: translate(-50%,-50%) scale(1.4);
    opacity:0;
  }
}

/* ================================
   ACCESSIBILITÉ
   ================================ */
@media (prefers-reduced-motion: reduce){
  .fw{ display:none; }
}