/* Web Kai — loading FX layer (additive; pairs with pro.css + plus.js) */

body.is-intro-active .loading-screen {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 600 !important;
}

body.is-intro-active .loading-screen::before {
  display: none;
  content: none;
}

body.is-intro-active .loading-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(34, 245, 208, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 95% 85% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.62) 100%);
}

.wk-load-fx {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.wk-load-fx__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  mix-blend-mode: screen;
}

.wk-load-fx__grid {
  position: absolute;
  inset: -25%;
  background:
    linear-gradient(rgba(34, 245, 208, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 245, 208, 0.055) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 46%, #000 5%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 46%, #000 5%, transparent 75%);
  animation: wkPlusGridDrift 12s linear infinite;
  opacity: 0.7;
}

.wk-load-fx__flare {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(90vw, 640px);
  height: 3px;
  margin: -1.5px 0 0 calc(min(45vw, 320px) * -1);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 245, 208, 0.15) 30%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(74, 143, 212, 0.2) 70%,
    transparent
  );
  box-shadow: 0 0 40px rgba(34, 245, 208, 0.4);
  filter: blur(0.4px);
  opacity: 0;
  animation: wkPlusFlare 2.2s ease-in-out 0.1s infinite;
}

.wk-load-fx__ticks {
  position: absolute;
  left: 50%;
  bottom: clamp(16%, 20vh, 26%);
  transform: translateX(-50%);
  z-index: 9;
}

.loading-screen.is-exiting::before {
  animation: wkPlusExitSweep 0.65s cubic-bezier(0.55, 0, 0.85, 0.15) forwards !important;
  opacity: 1 !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34, 245, 208, 0.2) 35%,
    rgba(230, 255, 250, 0.45) 100%
  ) !important;
  mix-blend-mode: screen;
}

@keyframes wkPlusScanlines {
  to {
    transform: translate3d(0, 8px, 0);
  }
}

@keyframes wkPlusGridDrift {
  to {
    transform: translate3d(-32px, -24px, 0);
  }
}

@keyframes wkPlusFlare {
  0%,
  100% {
    opacity: 0;
    transform: scaleX(0.4);
  }
  40% {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

@keyframes wkPlusExitSweep {
  to {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-intro-active .loading-screen::before,
  .wk-load-fx__grid,
  .wk-load-fx__flare {
    animation: none !important;
  }

  .wk-load-fx {
    display: none !important;
  }
}