/* ─── Splash Screen CSS ───────────────────────────────── */
/* Brand intro animation with SVG + particles             */

.splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  background: #050710;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

/* ── Background Particles ── */
.splash-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.splash-particles {
  position: absolute;
  inset: 0;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(79, 195, 247, 0.4);
  border-radius: 50%;
  animation: particle-float linear infinite;
}

.particle:nth-child(even) {
  background: rgba(0, 240, 255, 0.4);
}

.particle:nth-child(3n) {
  background: rgba(224, 64, 251, 0.3);
  width: 3px;
  height: 3px;
}

@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.5);
  }
}

/* ── Center Content ── */
.splash-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s var(--ease-out);
}

.splash.animate .splash-center {
  opacity: 1;
  transform: scale(1);
}

/* ── SVG Logo ── */
.splash-logo {
  width: min(85vw, 500px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0, 240, 255, 0.15));
}

/* Frame animation */
.logo-frame {
  stroke-dasharray: 1432;
  stroke-dashoffset: 1432;
  animation: draw-frame 2s ease-out 0.3s forwards;
}

@keyframes draw-frame {
  to { stroke-dashoffset: 0; }
}

/* Text animation */
.logo-text {
  opacity: 0;
  animation: reveal-text 0.8s ease-out 1.2s forwards;
}

@keyframes reveal-text {
  from {
    opacity: 0;
    letter-spacing: 30px;
  }
  to {
    opacity: 1;
    letter-spacing: 16px;
  }
}

/* Circuit line animations */
.circuit-line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: draw-circuit 0.6s ease-out forwards;
}

.c1 { animation-delay: 0.5s; }
.c2 { animation-delay: 0.7s; }
.c3 { animation-delay: 0.9s; }
.c4 { animation-delay: 1.1s; }

@keyframes draw-circuit {
  to { stroke-dashoffset: 0; }
}

/* Node animations */
.node {
  opacity: 0;
  animation: node-appear 0.4s ease-out forwards;
}

.n1 { animation-delay: 0.6s; }
.n2 { animation-delay: 0.8s; }
.n3 { animation-delay: 1.0s; }
.n4 { animation-delay: 1.2s; }

@keyframes node-appear {
  from {
    opacity: 0;
    r: 0;
  }
  to {
    opacity: 1;
    r: 3;
  }
}

/* ── Tagline ── */
.splash-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 0.6s ease-out 1.6s forwards;
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ── Loader Bar ── */
.splash-loader {
  width: min(50vw, 200px);
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1px;
  overflow: hidden;
  opacity: 0;
  animation: fade-in 0.4s ease-out 2s forwards;
}

.splash-loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4fc3f7, #00f0ff, #e040fb);
  border-radius: 1px;
}

/* ── Skip Button ── */
.splash-skip {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 2;
  opacity: 0;
  animation: fade-in 0.4s ease-out 2.5s forwards;
}

.btn-skip {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-skip:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Mobile Adjustments ── */
@media (max-width: 640px) {
  .splash-skip {
    bottom: 24px;
    right: 24px;
  }

  .splash-tagline {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }
}

/* ═══════════════════════════════════════════════════════ */
/*  SPLASH ADDITIONS — boot sequence, grid, loader meta    */
/* ═══════════════════════════════════════════════════════ */

/* Subtle grid behind the logo to echo the developer aesthetic */
.splash-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0.65) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,0.65) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  animation: splash-grid-in 1.2s 0.4s ease-out forwards;
}

@keyframes splash-grid-in {
  to { opacity: 1; }
}

/* Tagline word colorisation — dev cyan, art magenta, creator blend */
.splash-tagline .tag-piece {
  display: inline-block;
  transition: color 0.4s, text-shadow 0.4s;
}
.splash-tagline .tag-dev     { color: #4fc3f7; text-shadow: 0 0 8px rgba(79, 195, 247, 0.35); }
.splash-tagline .tag-art     { color: #e040fb; text-shadow: 0 0 8px rgba(224, 64, 251, 0.35); }
.splash-tagline .tag-creator { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.35); }
.splash-tagline .tag-sep     { color: rgba(255, 255, 255, 0.25); margin: 0 8px; }

/* Boot sequence terminal block */
.splash-boot {
  margin: 18px auto 0;
  max-width: 360px;
  min-height: 88px;
  text-align: left;
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(79, 195, 247, 0.8);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(79, 195, 247, 0.12);
  border-radius: 4px;
  padding: 10px 14px;
  white-space: pre;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  animation: boot-in 0.5s 0.6s ease-out forwards;
}

@keyframes boot-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Loader meta row (percentage + status) */
.splash-loader { position: relative; }
.splash-loader-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'Fira Code', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}
.splash-loader-status::before { content: '· '; opacity: 0.4; }

/* Skip button keyboard hint */
.skip-key {
  margin-left: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
}

/* Logo letter-by-letter glitch flicker */
.splash.animate .logo-text {
  animation: logo-glitch 4s infinite;
}
@keyframes logo-glitch {
  0%, 92%, 100% { filter: none; }
  93% { filter: hue-rotate(20deg) brightness(1.2); transform: translateX(0.6px); }
  94% { filter: hue-rotate(-15deg) brightness(0.95); transform: translateX(-0.6px); }
  95% { filter: none; transform: translateX(0); }
}