/* ════════════════════════════════════════════════════════════════
   PULSAR · BOOT SPLASH · entrance animation (console-style)
   ════════════════════════════════════════════════════════════════
   Plays once per session. Layered timeline lives in JS (BootSplash.jsx);
   this file is just keyframes + at-rest visual.
   ══════════════════════════════════════════════════════════════ */

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #06081A;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.4, 0, .2, 1);
}
.boot-splash.playing { opacity: 1; }
.boot-splash.fading  { opacity: 0; }

/* ── Ambient halo behind everything ── */
.boot-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%) scale(.85);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(112,72,232,.22) 0%, rgba(165,94,255,.10) 35%, transparent 70%);
  opacity: 0;
  animation: boot-halo-pulse 3000ms cubic-bezier(.25, .1, .25, 1) 200ms both;
}
@keyframes boot-halo-pulse {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.6); }
  35%  { opacity: 1;  transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: .9; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.2); }
}

/* ── Concentric expanding rings ── */
.boot-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1.5px solid rgba(112, 72, 232, .55);
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
}
.boot-ring-1 { animation: boot-ring-expand 1800ms cubic-bezier(.16, 1, .3, 1) 200ms forwards; }
.boot-ring-2 { animation: boot-ring-expand 1800ms cubic-bezier(.16, 1, .3, 1) 600ms forwards;
               border-color: rgba(165, 94, 255, .45); }
.boot-ring-3 { animation: boot-ring-expand 1800ms cubic-bezier(.16, 1, .3, 1) 1000ms forwards;
               border-color: rgba(155, 110, 255, .35); }
@keyframes boot-ring-expand {
  0%   { transform: translate(-50%, -50%) scale(.2);  opacity: 0; border-width: 2px; }
  20%  { opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(7);   opacity: 0; border-width: .5px; }
}

/* ── Seed dot — sits ON the EKG line, not breaking it.
   Stays around throughout the splash, beats subtly. ── */
.boot-seed {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7048E8, #A55EFF);
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 0 16px rgba(165, 94, 255, .7), 0 0 6px rgba(112, 72, 232, .9);
  animation: boot-seed-beat 2800ms cubic-bezier(.25, .1, .25, 1) 200ms forwards;
  z-index: 2;
}
@keyframes boot-seed-beat {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
  10%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
  18%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  35%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  45%  { transform: translate(-50%, -50%) scale(.95); opacity: 1; }
  65%  { transform: translate(-50%, -50%) scale(1.15);opacity: .9; }
  85%  { transform: translate(-50%, -50%) scale(1);   opacity: .5; }
  100% { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
}

/* ── EKG line drawing across full width ── */
.boot-ekg {
  position: absolute;
  top: 50%; left: 0; right: 0;
  width: 100%;
  max-width: 100vw;
  height: 80px;
  transform: translateY(-50%);
  opacity: 0;
  animation: boot-ekg-fade 1800ms cubic-bezier(.4, 0, .2, 1) 700ms both;
  overflow: visible;
  z-index: 1;
}
@keyframes boot-ekg-fade {
  0%   { opacity: 0; }
  20%  { opacity: .35; }
  80%  { opacity: .35; }
  100% { opacity: 0; }
}
.boot-ekg-line {
  fill: none;
  stroke: url(#bootGrad);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: boot-ekg-draw 1700ms cubic-bezier(.16, 1, .3, 1) 700ms both;
}
@keyframes boot-ekg-draw {
  0%   { stroke-dashoffset: 1400; }
  100% { stroke-dashoffset: 0; }
}

/* ── Wordmark + tagline ── */
.boot-mark {
  position: relative;
  text-align: center;
  z-index: 3;
  opacity: 0;
  padding: 0 24px;
  max-width: 100%;
  animation: boot-mark-reveal 1300ms cubic-bezier(.16, 1, .3, 1) 1700ms both;
}
@keyframes boot-mark-reveal {
  0%   { opacity: 0; transform: translateY(8px); letter-spacing: 8px; filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(0);   letter-spacing: 4px; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);   letter-spacing: 4px; filter: blur(0); }
}
.boot-wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(36px, 7vw, 56px);
  font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #7048E8 0%, #A55EFF 50%, #C088FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  text-shadow: 0 0 32px rgba(165, 94, 255, .15);
  animation: boot-word-glow 2.4s cubic-bezier(.22, 1, .36, 1) 1.7s infinite;
  white-space: nowrap;
}
.boot-wordmark span {
  background: linear-gradient(135deg, #A55EFF, #C088FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 300;
}
.boot-tagline {
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 238, 255, .55);
  opacity: 0;
  white-space: nowrap;
  animation: boot-tagline-fade 1000ms cubic-bezier(.16, 1, .3, 1) 2100ms both;
}
@keyframes boot-tagline-fade {
  0%   { opacity: 0; letter-spacing: 6px; }
  100% { opacity: 1; letter-spacing: 3px; }
}

/* ── Vignette — soft darkening around the edges ── */
.boot-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(6, 8, 26, .6) 100%);
}

/* Reduced motion: skip the show, just fade through */
@media (prefers-reduced-motion: reduce) {
  .boot-halo, .boot-ring, .boot-seed, .boot-ekg, .boot-ekg-line,
  .boot-mark, .boot-tagline {
    animation: none !important;
    opacity: 1 !important;
  }
  .boot-ekg-line { stroke-dashoffset: 0 !important; }
}

@keyframes boot-word-glow {
  0%, 100% { text-shadow: 0 0 22px rgba(112, 72, 232, .25); }
  50%      { text-shadow: 0 0 40px rgba(165, 94, 255, .75); }
}
@media (prefers-reduced-motion: reduce) { .boot-wordmark { animation: none; } }