/* ═══════════════════════════════════════════════════
   C. CINEMATIC LOADER
   ═══════════════════════════════════════════════════ */
#loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:22px;
  background:
    radial-gradient(circle at 50% 40%,rgba(30,45,90,.22),rgba(0,0,0,.96) 52%,#000 80%),
    #000;
  pointer-events:all;
}
#loader.done{
  pointer-events:none;
  display:none!important;
}

/* Title — flex container for char spans */
.loader-title{
  position:relative;
  display:flex;
  gap:0;
  font-size:clamp(38px,7.5vw,90px);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1;
  transform-origin:50% 50%;
  will-change:transform,filter,opacity;
}

/* Individual char */
.loader-title .lc{
  display:inline-block;
  opacity:0;
  transform:translateY(105%) scale(.45);
  filter:blur(10px);
  will-change:transform,filter,opacity;
  animation:lcIn .65s var(--ease-out-expo) var(--d) forwards;
}
@keyframes lcIn{
  0%{
    opacity:0;
    transform:translateY(105%) scale(.45);
    filter:blur(10px);
    text-shadow:0 0 50px rgba(0,212,255,.9),0 0 90px rgba(124,92,255,.7);
  }
  55%{
    opacity:1;
    transform:translateY(-6%) scale(1.04);
    filter:blur(0);
    text-shadow:0 0 28px rgba(0,212,255,.5),0 0 56px rgba(124,92,255,.35);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    text-shadow:0 0 0 transparent;
  }
}

/* Scanning light beam across title */
.loader-title::after{
  content:'';
  position:absolute;
  top:-30%;bottom:-30%;
  width:70px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.18),rgba(255,255,255,.12),rgba(124,92,255,.18),transparent);
  filter:blur(10px);
  opacity:0;
  pointer-events:none;
  will-change:left,opacity;
}
#loader.phase-in .loader-title::after{
  animation:scanBeam 1.1s ease-in-out .1s forwards;
}
@keyframes scanBeam{
  0%{left:-70px;opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{left:calc(100% + 70px);opacity:0}
}

/* Subtitle */
.loader-sub{
  color:var(--muted);
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  will-change:opacity,transform;
}
#loader.phase-in .loader-sub{
  animation:fadeUp .55s var(--ease-out-expo) .85s forwards;
}

/* Breathing glow while title is visible */
#loader.phase-in .loader-title{
  animation:titleBreathe 2.4s ease-in-out 1.3s infinite alternate;
}
@keyframes titleBreathe{
  0%{text-shadow:0 0 0 transparent}
  100%{text-shadow:0 0 22px rgba(0,212,255,.18),0 0 50px rgba(124,92,255,.12)}
}

/* ── Phase 2: clean cinematic zoom exit ── */
#loader.phase-out .loader-title{
  animation:loaderZoom 1.25s cubic-bezier(.22,.68,0,1) forwards!important;
}
#loader.phase-out .loader-sub{
  animation:subExit .4s ease forwards;
}
#loader.phase-out{
  animation:bgExit .6s ease .6s forwards;
}

/* Soft radial glow on exit */
#loader::before{
  content:'';
  position:absolute;
  width:180px;height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.35),rgba(124,92,255,.2) 40%,transparent 70%);
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
#loader.phase-out::before{
  animation:glowPulse .9s ease-out forwards;
}
@keyframes glowPulse{
  0%{opacity:0;transform:scale(0)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(14)}
}

@keyframes loaderZoom{
  0%{
    transform:scale(1);
    filter:blur(0) brightness(1);
    opacity:1;
  }
  25%{
    filter:blur(0) brightness(1.5);
    opacity:1;
    text-shadow:0 0 30px rgba(0,212,255,.45),0 0 70px rgba(124,92,255,.3);
  }
  100%{
    transform:scale(8);
    filter:blur(16px) brightness(2);
    opacity:0;
    text-shadow:0 0 80px rgba(0,212,255,.7),0 0 160px rgba(124,92,255,.5);
  }
}
@keyframes subExit{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-18px)}
}
@keyframes bgExit{
  0%{opacity:1}
  100%{opacity:0}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
html[data-theme="light"] #loader{
  background:
    radial-gradient(circle at 50% 38%,rgba(74,108,255,.12),rgba(255,255,255,.94) 48%,#f3efe7 78%),
    linear-gradient(180deg,#fffdf8,#eef4ff);
}