/* POMBAS HOTFIX EFFECTS - visual only, no sound */

#pombasAtmosphereRain,
.pombas-lightning-layer,
.pombas-crt-layer,
.pombas-noise-layer{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
}

#pombasAtmosphereRain{
  z-index:6;
  opacity:.65;
  mix-blend-mode:screen;
}

.pombas-lightning-layer{
  z-index:12;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 62% 10%,rgba(255,255,255,.55),transparent 18%),
    linear-gradient(to bottom,rgba(190,220,255,.25),transparent 48%);
}

.pombas-lightning-layer::before,
.pombas-lightning-layer::after{
  content:"";
  position:absolute;
  width:3px;
  background:rgba(255,255,255,.95);
  box-shadow:
    0 0 12px rgba(255,255,255,.95),
    0 0 38px rgba(140,190,255,.8);
  opacity:0;
  clip-path:polygon(45% 0,82% 24%,58% 24%,92% 55%,62% 55%,100% 100%,35% 62%,55% 62%,18% 28%,42% 28%);
}

.pombas-lightning-layer::before{
  top:3%;
  right:24%;
  height:190px;
  transform:rotate(8deg) scaleY(1.1);
}

.pombas-lightning-layer::after{
  top:8%;
  right:31%;
  height:125px;
  transform:rotate(-13deg) scaleY(.85);
}

body.pombas-lightning-active .pombas-lightning-layer{
  opacity:1;
  animation:pombasSkyFlash .30s steps(2,end) forwards;
}

body.pombas-lightning-active .pombas-lightning-layer::before{
  animation:pombasBoltFlash .28s steps(2,end) forwards;
}

body.pombas-lightning-active .pombas-lightning-layer::after{
  animation:pombasBoltFlash2 .22s steps(2,end) forwards;
}

body.pombas-lightning-active .landing-image{
  filter:brightness(1.28) contrast(1.08) saturate(1.08);
}

.pombas-crt-layer{
  z-index:70;
  opacity:.11;
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(to right,rgba(255,100,20,.03) 0 1px,transparent 1px 4px);
  animation:pombasCrtDrift .18s linear infinite;
}

.pombas-noise-layer{
  z-index:71;
  opacity:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.08),transparent 2px),
    radial-gradient(circle at 80% 60%,rgba(255,255,255,.06),transparent 2px),
    radial-gradient(circle at 50% 90%,rgba(255,255,255,.04),transparent 2px);
  background-size:17px 17px,23px 23px,31px 31px;
  animation:pombasNoise .11s steps(2,end) infinite,pombasNoiseAppear 7s infinite;
}

.logo-glow{
  animation:
    neonPulse 2.8s ease-in-out infinite alternate,
    neonGlitch 12s steps(1,end) infinite,
    pombasNeonBreath 4.2s ease-in-out infinite !important;
}

@keyframes pombasSkyFlash{
  0%{opacity:0}
  12%{opacity:.9}
  30%{opacity:.18}
  54%{opacity:.7}
  100%{opacity:0}
}

@keyframes pombasBoltFlash{
  0%{opacity:0}
  15%{opacity:1}
  38%{opacity:.12}
  55%{opacity:.95}
  100%{opacity:0}
}

@keyframes pombasBoltFlash2{
  0%{opacity:0}
  20%{opacity:.75}
  50%{opacity:.08}
  100%{opacity:0}
}

@keyframes pombasCrtDrift{
  from{transform:translateY(0)}
  to{transform:translateY(4px)}
}

@keyframes pombasNoise{
  from{transform:translate(0,0)}
  to{transform:translate(3px,-2px)}
}

@keyframes pombasNoiseAppear{
  0%,96%,100%{opacity:0}
  97%{opacity:.08}
  98%{opacity:.025}
  99%{opacity:.055}
}

@keyframes pombasNeonBreath{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,50,50,.8)) drop-shadow(0 0 18px rgba(255,35,35,.65))}
  50%{filter:drop-shadow(0 0 14px rgba(255,90,90,.95)) drop-shadow(0 0 36px rgba(255,40,40,.85))}
}