/* Basic page reset and setup */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* Dark cyberpunk background */
  background-color: #020018;
  color: #00ffea;
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden; /* No scrollbars */
}

/* Main loader container */
#cyber-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100vw;
  height: 100vh;
  /* Add a subtle vignette */
  background: radial-gradient(ellipse at center, 
    rgba(2, 0, 24, 0.8) 0%, 
    #020018 70%);
  z-index: 1;
}

/* Scanlines overlay for a CRT/sci-fi feel */
.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 234, 0.03),
    rgba(0, 255, 234, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scanline-scroll 20s linear infinite;
  z-index: 2;
  pointer-events: none;
}

/* --- Data Core & Rings --- */
#data-core {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #00ffea;
  box-shadow: 
    0 0 20px #00ffea,
    0 0 40px #00ffea,
    0 0 60px #fff;
  animation: core-pulse 1.5s infinite ease-in-out;
  z-index: 10;
}

.core-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 2px solid #ff00c1; /* Neon magenta */
  box-shadow: 0 0 10px #ff00c1;
  animation: ring-rotate 4s linear infinite;
}

.ring-1 {
  width: 150px;
  height: 150px;
  margin-top: -77px;
  margin-left: -77px;
  animation-duration: 3s;
}
.ring-2 {
  width: 180px;
  height: 180px;
  margin-top: -92px;
  margin-left: -92px;
  animation-direction: reverse;
  border-color: #00f0ff; /* Neon cyan */
  box-shadow: 0 0 10px #00f0ff;
}
.ring-3 {
  width: 210px;
  height: 210px;
  margin-top: -107px;
  margin-left: -107px;
  animation-duration: 5s;
}

/* --- Data Packets (Generated by JS) --- */
#data-stream {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.data-packet {
  position: absolute;
  background-color: #00ffea;
  box-shadow: 0 0 10px #00ffea;
  /* Animation is set by JS */
}

/* --- Text & Countdown --- */
#loading-text {
  position: absolute;
  top: 35%;
  font-size: 1.5em;
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px #00ffea;
  z-index: 20;
}

#countdown-timer {
  position: absolute;
  bottom: 80px;
  font-size: 3em;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #faff00; /* Neon yellow */
  text-shadow: 0 0 10px #faff00;
  z-index: 20;
}

#fallback {
  position: absolute;
  bottom: 30px;
  font-size: 0.9em;
  color: #aaa;
  z-index: 20;
}
#fallback a {
  color: #ff00c1;
  text-decoration: none;
}
#fallback a:hover {
  text-decoration: underline;
  text-shadow: 0 0 10px #ff00c1;
}

/* --- Keyframe Animations --- */

/* Core pulsing */
@keyframes core-pulse {
  0%, 100% {
    transform: scale(0.9);
    box-shadow: 0 0 20px #00ffea, 0 0 40px #00ffea, 0 0 60px #fff;
  }
  50% {
    transform: scale(1.0);
    box-shadow: 0 0 30px #00ffea, 0 0 60px #00ffea, 0 0 80px #fff;
  }
}

/* Rings rotating */
@keyframes ring-rotate {
  from { transform: rotate3d(1, 1, 0, 0deg); }
  to { transform: rotate3d(1, 1, 0, 360deg); }
}

/* Scanlines moving */
@keyframes scanline-scroll {
  from { background-position: 0 0; }
  to { background-position: 0 100px; }
}

/* Data packets flying in */
@keyframes data-fly-in {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  90% {
    opacity: 1;
  }
  100% {
    /* Fly to the center */
    transform: translate(calc(50vw - 100%), calc(50vh - 100%)) scale(0);
    opacity: 0;
  }
}

/* Text glitch effect */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #020018; /* Match page background */
  overflow: hidden;
}
.glitch::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -1px 0 #00f0ff;
  animation: glitch-anim 1.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  20% { clip: rect(12px, 9999px, 50px, 0); }
  40% { clip: rect(38px, 9999px, 20px, 0); }
  60% { clip: rect(18px, 9999px, 30px, 0); }
  80% { clip: rect(45px, 9999px, 45px, 0); }
  100% { clip: rect(10px, 9999px, 52px, 0); }
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  #data-core { width: 60px; height: 60px; }
  .ring-1 { width: 100px; height: 100px; margin-top: -52px; margin-left: -52px; }
  .ring-2 { width: 120px; height: 120px; margin-top: -62px; margin-left: -62px; }
  .ring-3 { width: 140px; height: 140px; margin-top: -72px; margin-left: -72px; }
  
  #loading-text { top: 30%; font-size: 1em; }
  #countdown-timer { font-size: 2em; bottom: 70px; }
  #fallback { bottom: 20px; }
}