/* ═══════════════════════════════════════════════════════════
   ARMEER — CINEMATIC PRELOADER
   Inspired by: large counter · scroll-fill progress · reveal
   ═══════════════════════════════════════════════════════════ */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #030610;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: all;
  /* will be removed by JS after exit animation */
}

/* ── HORIZONTAL PROGRESS LINE at very top ── */
#preloader-line {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #0D2440, #2E5E99, #5eb8ff, #7BA4D0);
  background-size: 200% 100%;
  animation: line-shimmer 1.5s linear infinite;
  box-shadow: 0 0 14px rgba(94,184,255,0.7);
  transition: width 0.08s linear;
  z-index: 2;
}
@keyframes line-shimmer {
  0%   { background-position: 0%   0; }
  100% { background-position: 200% 0; }
}

/* ── GRID overlay (matches hero) ── */
#preloader-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(94,184,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,184,255,0.025) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: 0.7;
}

/* ── CENTER CONTENT ── */
#preloader-body {
  position: relative; z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(2rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 8vw, 7rem);
}

/* ── COUNTER NUMBER ── */
#preloader-count {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(6rem, 18vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(94,184,255,0.22);
  position: relative;
  user-select: none;
  overflow: hidden;
}
/* Filled layer that animates upward with progress */
#preloader-count-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E7F0FA 0%, #7BA4D0 35%, #5eb8ff 60%, #7c6fe0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  clip-path: inset(100% 0 0 0);   /* starts fully hidden bottom */
  transition: clip-path 0.12s linear;
}

/* ── WORD LINES ── */
#preloader-words {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pl-word-row {
  overflow: hidden;
  line-height: 1;
}
.pl-word {
  display: block;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 6.5rem);
  letter-spacing: -0.04em;
  color: var(--c-text, #ddeeff);
  transform: translateY(110%);
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1);
  white-space: nowrap;
}
.pl-word.alt {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.8rem, 4.5vw, 5rem);
  color: var(--c-text2, #9ab8d8);
  -webkit-text-fill-color: var(--c-text2, #9ab8d8);
  letter-spacing: 0.01em;
}
.pl-word.accent {
  background: linear-gradient(135deg, #E7F0FA 0%, #5eb8ff 50%, #7c6fe0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pl-word.in { transform: translateY(0); }

/* ── BOTTOM BAR — percent text + tagline ── */
#preloader-bottom {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3rem);
  left: clamp(2rem, 6vw, 5rem);
  right: clamp(2rem, 6vw, 5rem);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

#preloader-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.68rem, 1.2vw, 0.85rem);
  letter-spacing: 0.18em;
  color: var(--c-muted, #5a7a9a);
  transition: color 0.3s;
}

#preloader-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-dim, #2a3f58);
  text-align: right;
  transition: color 0.4s;
}

/* ── REVEAL CURTAIN — slides up on exit ── */
#preloader-curtain {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0%;
  background: #020508;
  z-index: 3;
  transition: height 0.7s cubic-bezier(0.76,0,0.24,1);
}

/* ── EXIT ANIMATION ── */
#preloader.exiting {
  pointer-events: none;
}
#preloader.exiting #preloader-curtain {
  height: 100%;
}
#preloader.done {
  display: none;
}

/* ── Logo top-left ── */
#preloader-logo {
  position: absolute;
  top: clamp(1.5rem, 4vw, 2.5rem);
  left: clamp(2rem, 6vw, 5rem);
  z-index: 2;
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-text, #ddeeff);
  opacity: 0;
  animation: logo-in 0.6s 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
#preloader-logo span { color: #5eb8ff; text-shadow: 0 0 18px rgba(94,184,255,0.7); }
@keyframes logo-in {
  from { opacity:0; transform: translateY(-12px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Orb accent ── */
#preloader-orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,94,153,0.18) 0%, transparent 70%);
  bottom: -200px; right: -150px;
  pointer-events: none; z-index: 0;
  animation: orb-breathe 4s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%,100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.1); opacity: 1; }
}

/* Loading dots row (phase 1) */
#preloader-dots {
  display: flex; gap: 6px; margin-top: 2rem;
  opacity: 1; transition: opacity 0.4s;
}
#preloader-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-dim, #2a3f58);
  animation: dot-seq 1.4s ease-in-out infinite;
}
#preloader-dots span:nth-child(2) { animation-delay: 0.18s; }
#preloader-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dot-seq {
  0%,100% { background: var(--c-dim, #2a3f58); transform: scale(1); }
  50%      { background: #5eb8ff;              transform: scale(1.5); }
}