#loading-indicator {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(111, 73, 221, 0.24), transparent 34%),
    radial-gradient(circle at 52% 72%, rgba(28, 122, 190, 0.16), transparent 42%),
    linear-gradient(145deg, #01020a 0%, #060819 48%, #120823 100%);
  transition: opacity 0.7s ease-out;
  contain: strict;
}

#loading-indicator::before,
#loading-indicator::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#loading-indicator::before {
  inset: -18%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(117, 93, 235, 0.16), transparent 36%),
    radial-gradient(ellipse at 52% 58%, rgba(78, 176, 236, 0.1), transparent 44%);
  filter: blur(30px);
  opacity: 0.85;
  animation: kameeAmbient 3.7s ease-in-out forwards;
}

#loading-indicator::after {
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(157, 222, 255, 0.14) 48%, rgba(157, 107, 255, 0.08) 55%, transparent 72%);
  filter: blur(18px);
  opacity: 0;
  transform: translateX(-58%);
  animation: kameeSoftSweep 3.7s cubic-bezier(.45, 0, .16, 1) forwards;
}

.kamee-loader {
  position: relative;
  --kamee-logo-width: min(68vw, 420px);
  --kamee-logo-height: calc(var(--kamee-logo-width) * 0.25028);
  --kamee-ee-width: calc(var(--kamee-logo-width) * 0.3856);
  --kamee-ee-height: calc(var(--kamee-logo-width) * 0.19369);
  --kamee-ee-offset-x: calc(var(--kamee-logo-width) * 0.31242);
  --kamee-ee-offset-y: calc(var(--kamee-logo-width) * 0.03357);
  width: min(72vw, 520px);
  height: 210px;
  display: grid;
  place-items: center;
  contain: layout paint style;
}

.kamee-loader::before {
  content: "";
  position: absolute;
  width: min(62vw, 400px);
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(104, 186, 255, 0.15), transparent 62%);
  filter: blur(24px);
  opacity: 0.54;
  animation: kameeHalo 3.7s ease-in-out forwards;
  will-change: opacity, transform;
}

.kamee-logo-silhouette {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--kamee-logo-width);
  height: var(--kamee-logo-height);
  opacity: 0;
  filter: drop-shadow(0 0 16px rgba(114, 190, 255, 0.14));
  transform: translate(-50%, -50%) scale(0.975);
  animation: kameeLogoSilhouette 3.7s cubic-bezier(.32, 0, .18, 1) forwards;
  will-change: opacity, transform;
}

.kamee-logo-piece {
  position: absolute;
  inset: 0;
  opacity: 1;
  will-change: opacity;
}

.kamee-logo-piece use,
.kamee-ee-shape use {
  width: 100%;
  height: 100%;
}

.piece-k {
  animation: kameePieceFadeK 3.7s cubic-bezier(.45, 0, .2, 1) forwards;
}

.piece-a {
  animation: kameePieceFadeA 3.7s cubic-bezier(.45, 0, .2, 1) forwards;
}

.piece-m {
  animation: kameePieceFadeM 3.7s cubic-bezier(.45, 0, .2, 1) forwards;
}

.kamee-ee-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--kamee-ee-width);
  height: var(--kamee-ee-height);
  opacity: 0;
  transform: translate(calc(-50% + var(--kamee-ee-offset-x)), calc(-50% + var(--kamee-ee-offset-y))) scale(1);
  filter: drop-shadow(0 0 14px rgba(118, 195, 255, 0.14));
  animation: kameeEeMove 3.7s cubic-bezier(.32, 0, .18, 1) forwards;
  will-change: opacity, transform;
}

.kamee-ee-shape,
.kamee-ee-trace,
.kamee-ee-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kamee-ee-shape {
  opacity: 0.82;
}

.kamee-ee-trace {
  background: radial-gradient(ellipse at center, rgba(105, 190, 255, 0.2), transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: kameeTraceReveal 3.7s ease-in-out forwards;
  will-change: opacity;
}

.kamee-ee-line {
  overflow: visible;
  opacity: 0;
  animation: kameeLineReveal 3.7s ease-in-out forwards;
}

.kamee-ee-line path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 92 908;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(188, 234, 255, 0.8)) drop-shadow(0 0 12px rgba(136, 110, 255, 0.28));
  animation: kameeInfinityLine 1.65s linear infinite;
  will-change: stroke-dashoffset;
}

/* Startup animation: full logo reveal, letter fade, then ee loader. */
@keyframes kameeAmbient {
  0% { opacity: 0.72; transform: scale(0.985); }
  50% { opacity: 0.95; transform: scale(1.025); }
  100% { opacity: 0.78; transform: scale(1); }
}

@keyframes kameeSoftSweep {
  0%, 18% { opacity: 0; transform: translateX(-58%); }
  32% { opacity: 0.42; }
  48% { opacity: 0.1; }
  66%, 100% { opacity: 0; transform: translateX(58%); }
}

@keyframes kameeHalo {
  0% { opacity: 0.35; transform: scale(0.95); }
  44%, 78% { opacity: 0.66; transform: scale(1.04); }
  100% { opacity: 0.48; transform: scale(1); }
}

@keyframes kameeLogoSilhouette {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.982); }
  10% { opacity: 0.46; transform: translate(-50%, -50%) scale(0.992); }
  20%, 86% { opacity: 0.96; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes kameePieceFadeK {
  0%, 42% { opacity: 1; }
  58%, 100% { opacity: 0; }
}

@keyframes kameePieceFadeA {
  0%, 48% { opacity: 1; }
  64%, 100% { opacity: 0; }
}

@keyframes kameePieceFadeM {
  0%, 54% { opacity: 1; }
  72%, 100% { opacity: 0; }
}

@keyframes kameeEeMove {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--kamee-ee-offset-x)), calc(-50% + var(--kamee-ee-offset-y))) scale(1);
  }
  10% {
    opacity: 0.46;
    transform: translate(calc(-50% + var(--kamee-ee-offset-x)), calc(-50% + var(--kamee-ee-offset-y))) scale(1);
  }
  20%, 72% {
    opacity: 1;
    transform: translate(calc(-50% + var(--kamee-ee-offset-x)), calc(-50% + var(--kamee-ee-offset-y))) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.24);
  }
}

@keyframes kameeTraceReveal {
  0%, 92% { opacity: 0; }
  100% { opacity: 0.32; }
}

@keyframes kameeLineReveal {
  0%, 78% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes kameeInfinityLine {
  to { stroke-dashoffset: -1000; }
}

@media (max-width: 520px) {
  .kamee-loader {
    --kamee-logo-width: 76vw;
    width: 86vw;
    height: 180px;
  }
}

/* Reload animation: skip the full logo and show the ee loader immediately. */
html.kamee-loader-reload .kamee-logo-silhouette {
  display: none;
}

html.kamee-loader-reload .kamee-loader::before,
html.kamee-loader-reload .kamee-loader::after {
  display: none;
}

html.kamee-loader-reload .kamee-ee-stage {
  left: 50%;
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.9);
  animation: none;
}

html.kamee-loader-reload .kamee-ee-shape {
  opacity: 0.82;
  animation: none;
}

html.kamee-loader-reload .kamee-ee-line {
  opacity: 1;
  animation: none;
}

html.kamee-loader-reload .kamee-ee-line path {
  opacity: 1;
  animation-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  #loading-indicator::before,
  #loading-indicator::after,
  .kamee-loader::before,
  .kamee-logo-silhouette,
  .kamee-logo-piece,
  .kamee-ee-stage,
  .kamee-ee-trace {
    animation: none;
  }

  .kamee-logo-silhouette {
    opacity: 0;
  }

  .kamee-ee-stage {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .kamee-ee-trace {
    opacity: 0.75;
  }

  .kamee-ee-line {
    display: none;
  }
}