/* BOOM — STAR FIREWORK FULLSCREEN */

#boomFx{
  position:fixed;
  inset:0;
  z-index:999999;
  overflow:hidden;
  display:none;
  pointer-events:none;
}

#boomFx.boom-active{
  display:block;
}

.firework-burst{
  position:absolute;
  width:1px;
  height:1px;
}

.firework-burst::after{
  content:"✦";
  position:absolute;
  left:0;
  top:0;
  color:#fff;
  font-size:22px;
  transform:translate(-50%,-50%) scale(0);
  text-shadow:
    0 0 8px #fff,
    0 0 18px #ffe066,
    0 0 32px #ffc400;
  animation:burstFlash .65s ease-out forwards;
}

.firework-burst i{
  --x:0px;
  --y:0px;
  --delay:0ms;
  --size:5px;

  position:absolute;
  left:0;
  top:0;

  width:var(--size);
  height:var(--size);

  border-radius:50%;
  background:#fff;

  box-shadow:
    0 0 8px #ffc400;

  opacity:0;

  animation:
    starFly .85s cubic-bezier(.12,.65,.25,1) var(--delay) forwards,
    starBlink .18s linear var(--delay) 4 alternate;
}

@keyframes starFly{
  0%{
    transform:translate(0,0) scale(.2);
    opacity:0;
  }

  10%{
    opacity:1;
    transform:translate(0,0) scale(1.8);
  }

  65%{
    opacity:1;
  }

  100%{
    transform:
      translate(var(--x),var(--y))
      scale(.15);
    opacity:0;
  }
}

@keyframes starBlink{
  from{
    filter:brightness(1);
  }

  to{
    filter:brightness(3);
  }
}

@keyframes burstFlash{
  0%{
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
  }

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

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

/* BOOM — LIGHTNING FX */
.boom-lightning {
  position: absolute;
  top: -5%;
  width: 5px;
  height: 75%;
  z-index: 5;
  opacity: 0;
  transform-origin: top center;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 5px #fff,
    0 0 12px #ffe066,
    0 0 24px #ffc400,
    0 0 40px rgba(255,196,0,.8);
  clip-path: polygon(
    40% 0%, 100% 0%,
    60% 22%, 95% 22%,
    35% 52%, 75% 52%,
    20% 100%, 38% 62%,
    0% 62%, 42% 30%,
    10% 30%
  );
  animation: boomLightning .7s ease-out forwards;
}

@keyframes boomLightning {
  0%   { opacity:0; filter:brightness(1); }
  8%   { opacity:1; filter:brightness(4); }
  15%  { opacity:.15; }
  23%  { opacity:1; filter:brightness(5); }
  31%  { opacity:.05; }
  42%  { opacity:.9; }
  100% { opacity:0; }
}

/* ===== BOOM LIGHTNING V2 — BRANCHED ===== */

.boom-lightning {
  position: absolute;
  top: 0;
  width: 90px;
  height: 190px;
  opacity: 0;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform-origin: top center;
  animation: lightningV2 .62s ease-out forwards !important;
}

.boom-lightning .bolt-main,
.boom-lightning .bolt-branch {
  position: absolute;
  height: 3px;
  border-radius: 4px;
  transform-origin: left center;
  background: #fff;
  box-shadow:
    0 0 4px #fff,
    0 0 9px #dff6ff,
    0 0 15px #8edfff;
}

/* batang utama patah-patah */
.boom-lightning .b1 {
  width: 48px;
  left: 42px;
  top: 0;
  transform: rotate(108deg);
}

.boom-lightning .b2 {
  width: 55px;
  left: 28px;
  top: 45px;
  transform: rotate(73deg);
}

.boom-lightning .b3 {
  width: 52px;
  left: 44px;
  top: 94px;
  transform: rotate(111deg);
}

.boom-lightning .b4 {
  width: 48px;
  left: 27px;
  top: 140px;
  transform: rotate(72deg);
}

/* cabang */
.boom-lightning .br1 {
  width: 30px;
  left: 43px;
  top: 92px;
  height: 2px;
  transform: rotate(25deg);
}

.boom-lightning .br2 {
  width: 27px;
  left: 30px;
  top: 139px;
  height: 2px;
  transform: rotate(150deg);
}

@keyframes lightningV2 {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  13%  { opacity: .12; }
  19%  { opacity: 1; }
  27%  { opacity: .05; }
  36%  { opacity: .85; }
  48%  { opacity: 0; }
  100% { opacity: 0; }
}

/* LIGHTNING V2 — UJUNG RUNCING */
.boom-lightning .bolt-main,
.boom-lightning .bolt-branch {
  border-radius: 0 !important;
  clip-path: polygon(
    0 35%,
    82% 35%,
    100% 50%,
    82% 65%,
    0 65%
  );
}

.boom-lightning .bolt-branch {
  clip-path: polygon(
    0 38%,
    78% 38%,
    100% 50%,
    78% 62%,
    0 62%
  );
}