/* Splash screen styles — extracted from index.html inline styles for CSP compliance.
   CSP style-src 'self' blocks inline style="" attributes and <style> blocks,
   so all splash screen styling lives here as an external stylesheet. */

/* === Splash Container === */
.splash-container {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #0a0a0f;
  animation: splashFadeOut 0.8s ease 3.2s forwards;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
}

/* === Grid Background === */
.splash-grid-wrapper {
  position: absolute;
  inset: 0;
  perspective: 600px;
  overflow: hidden;
}

.splash-grid {
  position: absolute;
  bottom: -50%;
  left: -20%;
  right: -20%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0,200,255,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.15) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(60deg);
  animation: gridScroll 2s linear infinite;
}

/* === Glow Lines === */
.splash-glow-h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00c8ff, transparent);
  animation: glowPulse 2s ease-in-out infinite;
  opacity: 0.4;
}

.splash-glow-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, #00c8ff, transparent);
  animation: glowPulse 2s ease-in-out infinite 0.5s;
  opacity: 0.3;
}

/* === SVG Wireframe === */
.splash-svg {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
  animation: splashSlideUp 0.8s ease 0.2s both;
}

/* === Text === */
.splash-title {
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: 300;
  color: #00c8ff;
  margin: 0 0 8px;
  letter-spacing: 8px;
  text-transform: uppercase;
  animation: splashSlideUp 0.8s ease 0.5s both;
  text-shadow: 0 0 20px rgba(0,200,255,0.5);
}

.splash-subtitle {
  position: relative;
  z-index: 2;
  font-size: 11px;
  color: rgba(0,200,255,0.5);
  margin: 0 0 40px;
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: splashSlideUp 0.8s ease 0.7s both;
}

/* === Loading Bar === */
.splash-loading-track {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 2px;
  background: rgba(0,200,255,0.1);
  border-radius: 1px;
  overflow: hidden;
  animation: splashSlideUp 0.6s ease 0.9s both;
}

.splash-loading-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #00c8ff, #c8102e);
  border-radius: 1px;
  animation: loadingBar 2.8s ease-in-out;
  box-shadow: 0 0 10px #00c8ff;
}

/* === SVG Inline Animation Styles === */
.svg-trace-main {
  animation: traceIn 2s ease forwards;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.svg-trace-antenna {
  animation: traceIn 1.5s ease 0.5s forwards;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

.svg-antenna-pulse {
  animation: fadeInDelay 0.5s ease 1.5s forwards, pulseRing 1.5s ease-in-out infinite 1.5s;
  opacity: 0;
}

.svg-floor-1 { animation: fadeInDelay 0.3s ease 0.8s forwards; opacity: 0; }
.svg-floor-2 { animation: fadeInDelay 0.3s ease 0.9s forwards; opacity: 0; }
.svg-floor-3 { animation: fadeInDelay 0.3s ease 1s forwards; opacity: 0; }
.svg-floor-4 { animation: fadeInDelay 0.3s ease 1.1s forwards; opacity: 0; }
.svg-floor-5 { animation: fadeInDelay 0.3s ease 1.2s forwards; opacity: 0; }
.svg-floor-6 { animation: fadeInDelay 0.3s ease 1.3s forwards; opacity: 0; }
.svg-floor-7 { animation: fadeInDelay 0.3s ease 1.4s forwards; opacity: 0; }

.svg-windows { animation: fadeInDelay 0.8s ease 1.2s forwards; opacity: 0; }

.svg-trace-left {
  animation: traceIn 1.5s ease 0.4s forwards;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

.svg-trace-right {
  animation: traceIn 1.5s ease 0.6s forwards;
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
}

.svg-trace-ground {
  animation: traceIn 1s ease 0.2s forwards;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}

.svg-data-streams { animation: fadeInDelay 0.5s ease 2s forwards; opacity: 0; }

.svg-data-stream-1 { animation: dataStream 2s ease-in-out infinite; }
.svg-data-stream-2 { animation: dataStream 2s ease-in-out infinite 0.3s; }
.svg-data-stream-3 { animation: dataStream 2s ease-in-out infinite 0.6s; }

.svg-scan-line { animation: scanLine 3s ease-in-out infinite 1.5s; }

/* === Keyframe Animations === */
@keyframes splashSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes splashFadeOut {
  to { opacity: 0; pointer-events: none; }
}

@keyframes gridScroll {
  to { transform: rotateX(60deg) translateY(60px); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

@keyframes traceIn {
  to { stroke-dashoffset: 0; }
}

@keyframes fadeInDelay {
  to { opacity: 1; }
}

@keyframes pulseRing {
  0%, 100% { r: 3; opacity: 1; }
  50% { r: 6; opacity: 0.3; }
}

@keyframes dataStream {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(-5px); }
}

@keyframes scanLine {
  0% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(200px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 0.8; }
}

@keyframes loadingBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}