/* Web Kai — intro loading (dynamic, no cheesy spinner; loads last) */

.loading-screen {
  background: #010406 !important;
  overflow: hidden !important;
}

.loading-screen__base {
  background:
    radial-gradient(ellipse 80% 65% at 50% 45%, #0d221e 0%, #020608 70%) !important;
  animation: wkLoadBasePulse 1.8s ease-in-out infinite alternate !important;
}

.loading-screen__base::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(34, 245, 208, 0.22), transparent 48%);
  opacity: 0;
  animation: wkLoadFlash 0.55s ease-out 0.12s 1 both;
  pointer-events: none;
}

.loading-screen__glow {
  opacity: 0.65 !important;
  filter: blur(36px) saturate(1.25) !important;
  animation: wkLoadGlowSurge 2.2s ease-in-out infinite alternate !important;
}

.loading-screen__mark {
  position: relative !important;
  overflow: visible !important;
  display: grid !important;
  justify-items: center !important;
  gap: 16px !important;
  animation: wkLoadMarkSlam 0.72s cubic-bezier(0.34, 1.45, 0.64, 1) 0.18s both !important;
  filter: none !important;
}

/* Shockwave ring 1 */
.loading-screen__mark::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  border: 1px solid rgba(34, 245, 208, 0.65) !important;
  background: transparent !important;
  box-shadow:
    0 0 24px rgba(34, 245, 208, 0.35),
    inset 0 0 20px rgba(34, 245, 208, 0.08);
  animation: wkLoadShockwave 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.28s infinite !important;
  pointer-events: none;
  z-index: 0;
}

/* Shockwave ring 2 — offset timing via box-shadow layer on logo wrapper... use sweep area */
.loading-screen__mark::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  border: 1px solid rgba(74, 143, 212, 0.4) !important;
  background: transparent !important;
  animation: wkLoadShockwave 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.78s infinite !important;
  pointer-events: none;
  z-index: 0;
}

.loading-screen__logo {
  position: relative;
  z-index: 2;
  animation: wkLoadLogoPulse 1.1s ease-in-out 0.5s infinite alternate !important;
}

/* Bold dual scan */
.loading-screen__sweep {
  display: block !important;
  top: 50% !important;
  left: -160% !important;
  width: 320% !important;
  height: 2px !important;
  margin-top: -1px;
  opacity: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34, 245, 208, 0.1) 32%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(34, 245, 208, 0.1) 68%,
    transparent 100%
  ) !important;
  box-shadow:
    0 0 28px rgba(34, 245, 208, 0.65),
    0 0 60px rgba(34, 245, 208, 0.25) !important;
  animation: wkLoadScan 1.05s cubic-bezier(0.4, 0, 0.15, 1) 0.42s 2 both !important;
  pointer-events: none;
  z-index: 4;
}

body.is-intro-active .loading-screen__mark {
  animation: wkLoadMarkSlam 0.72s cubic-bezier(0.34, 1.45, 0.64, 1) 0.18s both !important;
}

body.is-intro-active .loading-screen__sweep {
  animation: wkLoadScan 1.05s cubic-bezier(0.4, 0, 0.15, 1) 0.42s 2 both !important;
}

body.is-intro-active .loading-screen__mark::before {
  animation: wkLoadShockwave 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.28s infinite !important;
}

body.is-intro-active .loading-screen__mark::after {
  animation: wkLoadShockwave 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.78s infinite !important;
}

.loading-screen.is-sequence .loading-screen__mark {
  animation: wkLoadMarkSlam 0.72s cubic-bezier(0.34, 1.45, 0.64, 1) 0.18s both !important;
}

.loading-screen__word {
  position: relative;
  z-index: 2;
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) scale(0.92) !important;
  letter-spacing: 0.55em !important;
  font-family: var(--font-tech, "Space Mono", "JetBrains Mono", monospace) !important;
  font-size: 0.64rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: #e8fffc !important;
  text-shadow:
    0 0 20px rgba(34, 245, 208, 0.45),
    0 0 40px rgba(34, 245, 208, 0.2) !important;
  animation: none !important;
}

.loading-screen.is-word-visible .loading-screen__word,
.loading-screen.is-sequence .loading-screen__word {
  animation: wkLoadWordBurst 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards !important;
}

.loading-screen.is-exiting {
  clip-path: inset(0 0 100% 0) !important;
  transition:
    clip-path 0.65s cubic-bezier(0.55, 0, 0.85, 0.15),
    opacity 0.4s ease 0.15s !important;
}

.loading-screen.is-exiting .loading-screen__base::after {
  animation: none !important;
}

.loading-screen.is-exiting .loading-screen__mark,
.loading-screen.is-exiting .loading-screen__word,
.loading-screen.is-exiting .loading-screen__glow,
.loading-screen.is-exiting .loading-screen__sweep {
  animation: wkLoadExit 0.45s ease forwards !important;
}

.loading-screen.is-hidden {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

@keyframes wkLoadBasePulse {
  from {
    filter: brightness(0.92);
  }
  to {
    filter: brightness(1.08);
  }
}

@keyframes wkLoadFlash {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  35% {
    opacity: 0.85;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes wkLoadGlowSurge {
  from {
    opacity: 0.45;
    transform: scale(0.96);
  }
  to {
    opacity: 0.85;
    transform: scale(1.12);
  }
}

@keyframes wkLoadMarkSlam {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.72);
  }
  55% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.06);
  }
  78% {
    transform: translate3d(0, 2px, 0) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes wkLoadShockwave {
  0% {
    opacity: 0.9;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(2.15);
  }
}

@keyframes wkLoadLogoPulse {
  from {
    filter: drop-shadow(0 0 8px rgba(34, 245, 208, 0.25));
  }
  to {
    filter: drop-shadow(0 0 28px rgba(34, 245, 208, 0.55));
  }
}

@keyframes wkLoadScan {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate3d(48%, 0, 0);
    opacity: 0;
  }
}

@keyframes wkLoadWordBurst {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.92);
    letter-spacing: 0.55em;
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.03);
    letter-spacing: 0.32em;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    letter-spacing: 0.38em;
  }
}

@keyframes wkLoadExit {
  to {
    opacity: 0;
    transform: translate3d(0, -16px, 0) scale(0.94);
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen__base,
  .loading-screen__base::after,
  .loading-screen__glow,
  .loading-screen__mark::before,
  .loading-screen__mark::after,
  .loading-screen__logo,
  .loading-screen__sweep {
    animation: none !important;
  }

  .loading-screen__mark {
    animation: wkLoadMarkSlam 0.5s ease 0.1s both !important;
  }

  .loading-screen__word {
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: 0.38em !important;
  }

  .loading-screen.is-exiting {
    clip-path: none !important;
    opacity: 0 !important;
  }
}