/* loader.css - Core styles for NexLoad */
:root { 
  --nl-bg: #ffffff; 
  --nl-text: #0f172a; 
  --nl-text-muted: #64748b; 
  --nl-acc: #00d4aa; 
  --nl-acc-dim: rgba(0, 212, 170, 0.2); 
  --nl-overlay: rgba(0, 0, 0, 0.4); 
  --nl-radius: 16px; 
  --nl-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); 
  --nl-ease: cubic-bezier(.22, 1, .36, 1); 
}

/* Optional: Dark mode support */
[data-theme="dark"], .dark-mode { 
  --nl-bg: #1c1c2e; 
  --nl-text: #f0f0fa; 
  --nl-text-muted: #8888aa; 
  --nl-overlay: rgba(8, 8, 16, 0.7); 
  --nl-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); 
}

.nexload-overlay { 
  position: fixed; inset: 0; z-index: 99999; 
  background: var(--nl-overlay); 
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); 
  display: none; align-items: center; justify-content: center; 
  opacity: 0; transition: opacity 0.3s var(--nl-ease); 
}

.nexload-overlay.nl-show { opacity: 1; }

.nl-box { 
  background: var(--nl-bg); padding: 24px 32px; 
  border-radius: var(--nl-radius); box-shadow: var(--nl-shadow); 
  display: flex; flex-direction: column; align-items: center; gap: 16px; 
  transform: scale(0.9) translateY(10px); 
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1); 
  font-family: system-ui, -apple-system, sans-serif; min-width: 160px; 
}

.nexload-overlay.nl-show .nl-box { transform: scale(1) translateY(0); }

.nl-text { 
  margin: 0; font-size: 0.9rem; font-weight: 600; 
  color: var(--nl-text); letter-spacing: 0.02em; 
  text-align: center; display: none; 
}

/* 1. Spinner */
.nl-spinner { width: 36px; height: 36px; border: 4px solid var(--nl-acc-dim); border-top-color: var(--nl-acc); border-radius: 50%; animation: nl-spin 0.8s linear infinite; }
@keyframes nl-spin { to { transform: rotate(360deg); } }

/* 2. Dots */
.nl-dots { display: flex; gap: 6px; align-items: center; height: 36px; }
.nl-dots div { width: 10px; height: 10px; background: var(--nl-acc); border-radius: 50%; animation: nl-bounce 0.5s alternate infinite cubic-bezier(.6,0,.4,1); }
.nl-dots div:nth-child(2) { animation-delay: 0.15s; }
.nl-dots div:nth-child(3) { animation-delay: 0.3s; }
@keyframes nl-bounce { from { transform: translateY(8px); } to { transform: translateY(-8px); } }

/* 3. Pulse */
.nl-pulse { width: 40px; height: 40px; background: var(--nl-acc); border-radius: 50%; animation: nl-pulse-anim 1.2s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes nl-pulse-anim { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* 4. Bar */
.nl-bar-container { width: 100px; height: 6px; background: var(--nl-acc-dim); border-radius: 6px; overflow: hidden; position: relative; margin: 15px 0; }
.nl-bar { height: 100%; background: var(--nl-acc); width: 40%; border-radius: 6px; position: absolute; animation: nl-bar-slide 1.2s ease-in-out infinite alternate; }
@keyframes nl-bar-slide { 0% { left: -10%; } 100% { left: 70%; } }

/* 5. Wave */
.nl-wave { display: flex; gap: 5px; align-items: center; height: 36px; }
.nl-wave div { width: 6px; height: 12px; background: var(--nl-acc); border-radius: 4px; animation: nl-wave-anim 1s ease-in-out infinite; }
.nl-wave div:nth-child(2) { animation-delay: 0.1s; }
.nl-wave div:nth-child(3) { animation-delay: 0.2s; }
.nl-wave div:nth-child(4) { animation-delay: 0.3s; }
@keyframes nl-wave-anim { 0%, 100% { height: 12px; } 50% { height: 32px; } }