/* ============================================================
   SHOOTING STAR LOADER — Shared styles
   Used across all pages via <link rel="stylesheet">
   ============================================================ */

/* ---- CSS Variables (scoped to .loader-overlay so they don't leak) ---- */
.loader-overlay {
  --ssl-accent: #CFFD00;
  --ssl-accent-dim: rgba(207, 253, 0, 0.4);
  --ssl-accent-glow: rgba(207, 253, 0, 0.15);
  --ssl-bg: #121212;
  --ssl-text: #ffffff;
  --ssl-text-dim: rgba(255, 255, 255, 0.4);
}

/* ---- Overlay base (extends / overrides existing .loader-overlay) ---- */
.loader-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: var(--ssl-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
  overflow: hidden;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Support for show/hide toggle pattern used on some pages */
.loader-overlay.hidden,
.loader-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Pages that start hidden and use .show to reveal (login, register, etc.) */
.loader-overlay.ssl-starts-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-overlay.ssl-starts-hidden.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none; /* Appear INSTANTLY — no 0.5s fade-in delay */
}

/* ---- Hide old spinner if JS hasn't replaced it yet ---- */
.loader-overlay > img.spinner {
  display: none;
}

/* ========== SUBTLE NOISE TEXTURE ========== */
.ssl-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
}

/* ========== BACKGROUND STAR-FIELD ========== */
.ssl-starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ssl-starfield .ssl-dot {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--ssl-accent);
  border-radius: 50%;
  opacity: 0;
  animation: sslTwinkle 3s ease-in-out infinite;
}
.ssl-starfield .ssl-dot:nth-child(1)  { top: 12%; left: 8%;  animation-delay: 0s; }
.ssl-starfield .ssl-dot:nth-child(2)  { top: 25%; left: 85%; animation-delay: 0.5s; }
.ssl-starfield .ssl-dot:nth-child(3)  { top: 45%; left: 15%; animation-delay: 1.2s; }
.ssl-starfield .ssl-dot:nth-child(4)  { top: 70%; left: 90%; animation-delay: 0.8s; }
.ssl-starfield .ssl-dot:nth-child(5)  { top: 85%; left: 30%; animation-delay: 1.8s; }
.ssl-starfield .ssl-dot:nth-child(6)  { top: 18%; left: 55%; animation-delay: 2.2s; }
.ssl-starfield .ssl-dot:nth-child(7)  { top: 60%; left: 65%; animation-delay: 0.3s; }
.ssl-starfield .ssl-dot:nth-child(8)  { top: 35%; left: 42%; animation-delay: 1.5s; }
.ssl-starfield .ssl-dot:nth-child(9)  { top: 78%; left: 72%; animation-delay: 2.8s; }
.ssl-starfield .ssl-dot:nth-child(10) { top: 8%;  left: 38%; animation-delay: 1s; }
.ssl-starfield .ssl-dot:nth-child(11) { top: 55%; left: 5%;  animation-delay: 0.7s; }
.ssl-starfield .ssl-dot:nth-child(12) { top: 92%; left: 58%; animation-delay: 2s; }

@keyframes sslTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

/* ========== LONG STREAK LINES ========== */
.ssl-streaks {
  position: absolute;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.ssl-streaks span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ssl-accent), transparent);
  opacity: 0;
}
.ssl-streaks span:nth-child(1) { top: 15%; width: 25%; animation: sslStreak 1.8s linear infinite; animation-delay: -0.5s; }
.ssl-streaks span:nth-child(2) { top: 35%; width: 15%; animation: sslStreak 2.2s linear infinite; animation-delay: -1.2s; }
.ssl-streaks span:nth-child(3) { top: 55%; width: 20%; animation: sslStreak 1.5s linear infinite; animation-delay: -3s; }
.ssl-streaks span:nth-child(4) { top: 75%; width: 18%; animation: sslStreak 2s linear infinite; animation-delay: -2s; }
.ssl-streaks span:nth-child(5) { top: 90%; width: 12%; animation: sslStreak 1.6s linear infinite; animation-delay: -4s; }
.ssl-streaks span:nth-child(6) { top: 25%; width: 10%; animation: sslStreak 2.5s linear infinite; animation-delay: -1.8s; }

@keyframes sslStreak {
  0%   { left: 110%; opacity: 0; }
  5%   { opacity: 0.12; }
  95%  { opacity: 0.08; }
  100% { left: -30%; opacity: 0; }
}

/* ========== AMBIENT GLOW ========== */
.ssl-ambient {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 253, 0, 0.04) 0%, transparent 70%);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  animation: sslAmbient 4s ease-in-out infinite;
}
@keyframes sslAmbient {
  0%, 100% { opacity: 1; transform: translate(-50%, -55%) scale(1); }
  50%      { opacity: 0.5; transform: translate(-50%, -55%) scale(1.15); }
}

/* ========== ORBITAL RINGS ========== */
.ssl-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border: none; /* Ring line hidden - only small ball (::before) visible */
  border-radius: 50%;
  animation: sslOrbit 8s linear infinite;
  pointer-events: none;
}
.ssl-orbit::before {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  background: var(--ssl-accent);
  border-radius: 50%;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--ssl-accent-dim);
  opacity: 0.6;
}
.ssl-orbit-1 {
  width: 200px; height: 200px;
  margin-top: -100px; margin-left: -100px;
}
.ssl-orbit-2 {
  width: 260px; height: 260px;
  margin-top: -130px; margin-left: -130px;
  border: none; /* Ring line hidden - only small ball (::before) visible */
  animation-duration: 12s;
  animation-direction: reverse;
}
.ssl-orbit-2::before {
  width: 3px; height: 3px;
  opacity: 0.3;
}

@keyframes sslOrbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========== SHOOTING STAR CONTAINER ========== */
.ssl-star-container {
  position: relative;
  width: 340px; height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Shooting star unit — shake only, NO travel */
.ssl-star {
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -35px; margin-left: -35px;
  animation: sslShake 0.35s linear infinite;
  z-index: 10;
}

/* Intense micro-shake vibration */
@keyframes sslShake {
  0%   { transform: translate(1.5px, 0.8px) rotate(0deg); }
  10%  { transform: translate(-1px, -1.5px) rotate(-0.5deg); }
  20%  { transform: translate(-2px, 0.5px) rotate(0.5deg); }
  30%  { transform: translate(1px, 1.5px) rotate(0deg); }
  40%  { transform: translate(1.5px, -0.8px) rotate(0.5deg); }
  50%  { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
  60%  { transform: translate(-0.5px, 1px) rotate(0deg); }
  70%  { transform: translate(2px, 0.5px) rotate(-0.5deg); }
  80%  { transform: translate(-1.5px, -1px) rotate(0.5deg); }
  90%  { transform: translate(1.5px, 1px) rotate(0deg); }
  100% { transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
}

/* ---- LOGO HEAD ---- */
.ssl-logo {
  position: relative;
  width: 70px; height: 70px;
  z-index: 10;
  filter:
    brightness(1.6) sepia(1) hue-rotate(15deg) saturate(6)
    drop-shadow(0 0 6px var(--ssl-accent))
    drop-shadow(0 0 14px var(--ssl-accent-dim))
    drop-shadow(0 0 30px var(--ssl-accent-glow));
}
.ssl-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Pulsing aura */
.ssl-aura {
  position: absolute;
  width: 120px; height: 120px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207,253,0,0.25) 0%, rgba(207,253,0,0.08) 35%, transparent 70%);
  z-index: 1;
  animation: sslAura 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sslAura {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.5; transform: translate(-50%, -50%) scale(1.3); }
}

/* Bright center point */
.ssl-point {
  position: absolute;
  width: 8px; height: 8px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 50%;
  z-index: 12;
  box-shadow:
    0 0 4px 2px rgba(255,255,255,0.8),
    0 0 10px 4px var(--ssl-accent),
    0 0 20px 6px var(--ssl-accent-dim);
  animation: sslPoint 1.5s ease-in-out infinite;
}
@keyframes sslPoint {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Cross lens flares */
.ssl-flare-h {
  position: absolute;
  width: 60px; height: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), var(--ssl-accent), rgba(255,255,255,0.5), transparent);
  z-index: 13;
  opacity: 0.7;
  animation: sslFlare 2s ease-in-out infinite;
}
.ssl-flare-v {
  position: absolute;
  width: 2px; height: 45px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3), var(--ssl-accent-dim), rgba(255,255,255,0.3), transparent);
  z-index: 13;
  opacity: 0.5;
  animation: sslFlare 2s ease-in-out infinite;
  animation-delay: 0.5s;
}
@keyframes sslFlare {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* ---- COMET TAILS ---- */
.ssl-tail-main {
  position: absolute;
  width: 140px; height: 8px;
  right: 55px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(207,253,0,0.05) 20%, rgba(207,253,0,0.3) 70%, var(--ssl-accent) 100%);
  border-radius: 4px 0 0 4px;
  z-index: 3;
  opacity: 0.9;
}
.ssl-tail-diffuse {
  position: absolute;
  width: 200px; height: 24px;
  right: 45px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(207,253,0,0.01) 20%, rgba(207,253,0,0.06) 60%, rgba(207,253,0,0.12) 100%);
  border-radius: 12px 0 0 12px;
  z-index: 2;
}
.ssl-tail-outer {
  position: absolute;
  width: 260px; height: 40px;
  right: 35px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(207,253,0,0.005) 30%, rgba(207,253,0,0.03) 100%);
  border-radius: 20px 0 0 20px;
  z-index: 1;
}

/* ---- SPEED TRAIL LINES ---- */
.ssl-trails span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ssl-accent));
  right: 50px; top: 50%;
  opacity: 0.7;
  z-index: 5;
}
.ssl-trails span:nth-child(1) { width: 40px; margin-top: -2px;  animation: sslTr1 0.4s linear infinite; }
.ssl-trails span:nth-child(2) { width: 28px; margin-top: 3px;   animation: sslTr2 0.6s linear infinite; }
.ssl-trails span:nth-child(3) { width: 22px; margin-top: -5px;  animation: sslTr3 0.5s linear infinite; animation-delay: -0.2s; }
.ssl-trails span:nth-child(4) { width: 45px; margin-top: 6px;   animation: sslTr4 0.7s linear infinite; animation-delay: -0.4s; }
.ssl-trails span:nth-child(5) { width: 18px; margin-top: -8px;  animation: sslTr5 0.45s linear infinite; animation-delay: -0.1s; }
.ssl-trails span:nth-child(6) { width: 35px; margin-top: 9px;   animation: sslTr6 0.55s linear infinite; animation-delay: -0.3s; }
.ssl-trails span:nth-child(7) { width: 15px; margin-top: -10px; animation: sslTr7 0.65s linear infinite; animation-delay: -0.5s; }

@keyframes sslTr1 { 0% { transform: translateX(0); opacity: 0.7; } 100% { transform: translateX(-110px); opacity: 0; } }
@keyframes sslTr2 { 0% { transform: translateX(0); opacity: 0.5; } 100% { transform: translateX(-140px); opacity: 0; } }
@keyframes sslTr3 { 0% { transform: translateX(0); opacity: 0.6; } 100% { transform: translateX(-90px);  opacity: 0; } }
@keyframes sslTr4 { 0% { transform: translateX(0); opacity: 0.4; } 100% { transform: translateX(-170px); opacity: 0; } }
@keyframes sslTr5 { 0% { transform: translateX(0); opacity: 0.5; } 100% { transform: translateX(-75px);  opacity: 0; } }
@keyframes sslTr6 { 0% { transform: translateX(0); opacity: 0.35;} 100% { transform: translateX(-130px); opacity: 0; } }
@keyframes sslTr7 { 0% { transform: translateX(0); opacity: 0.45;} 100% { transform: translateX(-80px);  opacity: 0; } }

/* ---- SPARK PARTICLES ---- */
.ssl-sparks span {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--ssl-accent);
  border-radius: 50%;
  top: 50%; left: 50%;
  z-index: 14;
  box-shadow: 0 0 4px var(--ssl-accent-dim);
}
.ssl-sparks span:nth-child(1) { animation: sslSp1 0.9s ease-out infinite; }
.ssl-sparks span:nth-child(2) { animation: sslSp2 1.1s ease-out infinite; animation-delay: -0.35s; }
.ssl-sparks span:nth-child(3) { animation: sslSp3 0.8s ease-out infinite; animation-delay: -0.55s; }
.ssl-sparks span:nth-child(4) { animation: sslSp4 1s ease-out infinite;   animation-delay: -0.15s; }
.ssl-sparks span:nth-child(5) { animation: sslSp5 1.2s ease-out infinite; animation-delay: -0.7s; }
.ssl-sparks span:nth-child(6) { animation: sslSp6 0.85s ease-out infinite; animation-delay: -0.9s; }
.ssl-sparks span:nth-child(7) { animation: sslSp7 1.05s ease-out infinite; animation-delay: -0.45s; }
.ssl-sparks span:nth-child(8) { animation: sslSp8 0.95s ease-out infinite; animation-delay: -0.6s; }

@keyframes sslSp1 { 0% { transform: translate(0,0) scale(1); opacity:1;   } 100% { transform: translate(-50px,-28px) scale(0); opacity:0; } }
@keyframes sslSp2 { 0% { transform: translate(0,0) scale(1); opacity:0.8; } 100% { transform: translate(-60px,20px)  scale(0); opacity:0; } }
@keyframes sslSp3 { 0% { transform: translate(0,0) scale(1); opacity:0.9; } 100% { transform: translate(-35px,-32px) scale(0); opacity:0; } }
@keyframes sslSp4 { 0% { transform: translate(0,0) scale(1); opacity:0.7; } 100% { transform: translate(-70px,12px)  scale(0); opacity:0; } }
@keyframes sslSp5 { 0% { transform: translate(0,0) scale(1); opacity:0.6; } 100% { transform: translate(-42px,28px)  scale(0); opacity:0; } }
@keyframes sslSp6 { 0% { transform: translate(0,0) scale(1); opacity:0.7; } 100% { transform: translate(-55px,-18px) scale(0); opacity:0; } }
@keyframes sslSp7 { 0% { transform: translate(0,0) scale(1); opacity:0.5; } 100% { transform: translate(-48px,24px)  scale(0); opacity:0; } }
@keyframes sslSp8 { 0% { transform: translate(0,0) scale(1); opacity:0.8; } 100% { transform: translate(-38px,-22px) scale(0); opacity:0; } }

/* ---- GHOST ECHOES ---- */
.ssl-echoes {
  position: absolute;
  top: 0; left: 0;
  width: 70px; height: 70px;
  z-index: 4;
  pointer-events: none;
}
.ssl-echo {
  position: absolute;
  width: 100%; height: 100%;
  filter: brightness(1.6) sepia(1) hue-rotate(15deg) saturate(6) drop-shadow(0 0 4px var(--ssl-accent-dim));
}
.ssl-echo img { width: 100%; height: 100%; object-fit: contain; }
.ssl-echo:nth-child(1) { opacity: 0; animation: sslEcho1 1.2s ease-out infinite; }
.ssl-echo:nth-child(2) { opacity: 0; animation: sslEcho2 1.2s ease-out infinite; animation-delay: -0.4s; }
.ssl-echo:nth-child(3) { opacity: 0; animation: sslEcho3 1.2s ease-out infinite; animation-delay: -0.8s; }

@keyframes sslEcho1 { 0% { transform: translateX(0) scale(1); opacity: 0.25; } 100% { transform: translateX(-60px) scale(0.6); opacity: 0; } }
@keyframes sslEcho2 { 0% { transform: translate(0,3px) scale(1); opacity: 0.18; } 100% { transform: translate(-45px,8px) scale(0.5); opacity: 0; } }
@keyframes sslEcho3 { 0% { transform: translate(0,-2px) scale(1); opacity: 0.15; } 100% { transform: translate(-55px,-6px) scale(0.55); opacity: 0; } }

/* ========== LOADING TEXT ========== */
.ssl-text {
  z-index: 20;
  text-align: center;
  margin-top: 2rem;
}
.ssl-subtitle {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ssl-text-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
}

/* Progress bar */
.ssl-progress {
  width: 240px; height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin: 1.5rem auto 0;
  overflow: hidden;
  position: relative;
}
.ssl-progress-fill {
  height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--ssl-accent));
  border-radius: 2px;
  animation: sslProgress 2.5s ease-in-out infinite;
}
@keyframes sslProgress {
  0%   { transform: translateX(-150%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(350%); }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
  .ssl-subtitle { font-size: 0.6rem; letter-spacing: 2px; }
  .ssl-progress { width: 180px; }
  .ssl-star-container { transform: scale(0.8); }
}