/* Loading screen: line-drawn ghost, pulse rings, cinematic wipe exit */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, var(--gray-900), var(--void) 70%);
  clip-path: inset(0);
  transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.loader.is-done { clip-path: inset(0 0 100% 0); }

.loader-brand {
  position: absolute;
  top: clamp(1.25rem, 4vw, 2.5rem);
  left: clamp(1.25rem, 4vw, 2.5rem);
  font: 500 0.8rem var(--font-display);
  letter-spacing: 0.42em;
  color: var(--gray-300);
}

.loader-stage {
  position: relative;
  width: min(46vw, 250px);
  aspect-ratio: 4 / 5;
  transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
}
.loader.is-exiting .loader-stage { transform: scale(1.25); opacity: 0; filter: blur(10px); }

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  aspect-ratio: 1;
  border: 1px solid var(--red);
  border-radius: 50%;
  translate: -50% -50%;
  opacity: 0;
  animation: ring 3.2s ease-out infinite;
}
.ring-2 { animation-delay: 1.6s; }

.ghost {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 16px var(--red-glow));
  animation: float 4s ease-in-out infinite;
}
.ghost-body {
  fill: url(#ghostFill);
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: draw 1.9s cubic-bezier(0.65, 0, 0.35, 1) 0.2s backwards,
             fill-in 1s ease 1.5s backwards;
}
.ghost-eye {
  fill: var(--red);
  filter: drop-shadow(0 0 5px var(--red)) drop-shadow(0 0 14px var(--red));
  transform-box: fill-box;
  transform-origin: center;
  animation: ignite 0.6s ease 1.9s backwards, blink 6s ease-in-out 3s infinite;
}

.loader-foot {
  position: absolute;
  left: clamp(1.25rem, 4vw, 2.5rem);
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.loader-count {
  font: 300 clamp(3rem, 11vw, 7rem)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--gray-100);
}
.loader-count::after { content: "%"; margin-left: 0.15em; font-size: 0.3em; color: var(--red); }
.loader-status { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--gray-500); }

.loader-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gray-800); }
.loader-fill {
  height: 100%;
  background: var(--red);
  box-shadow: 0 0 14px 1px var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes draw    { from { stroke-dashoffset: 1; } }
@keyframes fill-in { from { fill-opacity: 0; } }
@keyframes ignite  { from { opacity: 0; } }
@keyframes blink   { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes ring    { 0% { scale: 0.45; opacity: 0.5; } 100% { scale: 1; opacity: 0; } }