/*=========================================================
 NIC Kerala Onam Celebration 2026
 fireworks.css
=========================================================*/

/*=========================================================
 LAYER SYSTEM
=========================================================*/

/*=========================================================
 LAYER SYSTEM FIX
=========================================================*/

#fireworksCanvas {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: 9999;
}

#particleContainer {
  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 9998;
}

#flowerContainer {
  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 9997;
}

header,
.hero,
section,
footer {
  position: relative;

  z-index: 10;
}

/*=========================================================
 CLICK FLASH
=========================================================*/

.fireworkFlash {
  position: fixed;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 100;

  transform: translate(-50%, -50%);

  background: radial-gradient(circle, #ffffff, #ffd54f, transparent);

  box-shadow: 0 0 30px #ffd54f;

  animation: flash 0.7s ease-out forwards;
}

@keyframes flash {
  0% {
    transform: translate(-50%, -50%) scale(0.2);

    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(18);

    opacity: 0;
  }
}

/*=========================================================
 CANVAS PARTICLE EFFECTS
=========================================================*/

.fireParticle {
  position: fixed;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  pointer-events: none;

  animation: explode 1.4s linear forwards;
}

@keyframes explode {
  0% {
    opacity: 1;

    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;

    transform: translate(var(--tx), var(--ty)) scale(0.1);
  }
}

/*=========================================================
 SPARK
=========================================================*/

.spark {
  position: fixed;

  width: 3px;

  height: 24px;

  border-radius: 20px;

  transform-origin: center bottom;

  pointer-events: none;

  z-index: 90;

  box-shadow: 0 0 10px currentColor;

  animation: sparkMove 1s ease-out forwards;
}

@keyframes sparkMove {
  from {
    opacity: 1;

    transform: rotate(var(--r)) translateY(0);
  }

  to {
    opacity: 0;

    transform: rotate(var(--r)) translateY(-130px);
  }
}

/*=========================================================
 FIREWORK GLOW
=========================================================*/

.fireGlow {
  position: fixed;

  width: 120px;

  height: 120px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 80;

  filter: blur(25px);

  background: radial-gradient(circle, #ffd54f, transparent);

  animation: glowFade 0.8s ease forwards;
}

@keyframes glowFade {
  from {
    opacity: 0.8;

    transform: translate(-50%, -50%) scale(0.2);
  }

  to {
    opacity: 0;

    transform: translate(-50%, -50%) scale(2);
  }
}

/*=========================================================
 ROCKET TRAIL
=========================================================*/

.rocketTrail {
  position: fixed;

  width: 4px;

  height: 60px;

  border-radius: 30px;

  pointer-events: none;

  background: linear-gradient(transparent, #fff, #ffd54f);

  animation: rocketTrail 0.8s linear forwards;
}

@keyframes rocketTrail {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;

    transform: translateY(-120px);
  }
}

/*=========================================================
 STAR BURST
=========================================================*/

.star {
  position: fixed;

  width: 10px;

  height: 10px;

  pointer-events: none;

  z-index: 90;

  animation: starBurst 1.5s ease-out forwards;
}

.star::before,
.star::after {
  content: "";

  position: absolute;

  background: inherit;
}

.star::before {
  left: 4px;

  top: -5px;

  width: 2px;

  height: 20px;
}

.star::after {
  left: -5px;

  top: 4px;

  width: 20px;

  height: 2px;
}

@keyframes starBurst {
  from {
    opacity: 1;

    transform: scale(0.3) rotate(0);
  }

  to {
    opacity: 0;

    transform: scale(3) rotate(180deg);
  }
}

/*=========================================================
 SMOKE
=========================================================*/

.smoke {
  position: fixed;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: radial-gradient(rgba(255, 255, 255, 0.6), transparent);

  pointer-events: none;

  filter: blur(10px);

  animation: smoke 2s ease forwards;
}

@keyframes smoke {
  from {
    opacity: 0.5;

    transform: translate(-50%, -50%) scale(0.3);
  }

  to {
    opacity: 0;

    transform: translate(-50%, -120%) scale(2);
  }
}

/*=========================================================
 SHOCKWAVE
=========================================================*/

.shockwave {
  position: fixed;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.8);

  pointer-events: none;

  z-index: 100;

  box-shadow: 0 0 20px #ffd54f;

  animation: shockwave 1s ease-out forwards;
}

@keyframes shockwave {
  from {
    opacity: 1;

    transform: translate(-50%, -50%) scale(0.3);
  }

  to {
    opacity: 0;

    transform: translate(-50%, -50%) scale(8);
  }
}

/*=========================================================
 MOBILE OPTIMIZATION
=========================================================*/

@media (max-width: 768px) {
  #fireworksCanvas {
    opacity: 0.85;
  }
}