/* ============================================================
   AVISHKAARI PORTFOLIO — LOADER
   ============================================================ */

#loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.6s var(--ease-in-out), visibility 0.6s;
}
#loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Curtain panels */
.loader-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: var(--bg);
  z-index: 2;
  transition: transform 0.9s var(--ease-out);
}
.loader-curtain.left  { left: 0; transform-origin: left; }
.loader-curtain.right { right: 0; transform-origin: right; }
#loader.done .loader-curtain.left  { transform: translateX(-100%); }
#loader.done .loader-curtain.right { transform: translateX(100%); }

/* Logo mark */
.loader-logo {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 12px;
  color: var(--text);
  text-align: center;
  animation: loaderLogoPulse 1.6s var(--ease-out) forwards;
}
.loader-logo span { color: var(--accent); }

@keyframes loaderLogoPulse {
  0%   { opacity: 0; transform: scale(0.85) translateY(10px); letter-spacing: 6px; }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); letter-spacing: 14px; }
  100% { opacity: 1; transform: scale(1) translateY(0); letter-spacing: 12px; }
}

/* Progress track */
.loader-track {
  position: relative;
  z-index: 3;
  margin-top: 40px;
  width: 180px;
  height: 1px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent3), var(--accent));
  border-radius: 1px;
  transition: width 0.2s linear;
  box-shadow: 0 0 10px var(--glow);
}

/* Counter */
.loader-counter {
  position: relative;
  z-index: 3;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--text3);
}

/* Tagline */
.loader-tagline {
  position: relative;
  z-index: 3;
  margin-top: 32px;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--text3);
  opacity: 0;
  animation: fadeInUp 0.8s 0.8s var(--ease-out) forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Grid overlay on loader */
.loader-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 100%);
}