/**
 * NCDL Premium Preloader  v1.0
 * ══════════════════════════════
 * Full-screen luxury loading experience.
 * Brand palette: #C9A84C (gold) · #0B1F3A (navy) · #040810 (ink)
 *
 * Architecture
 * ─────────────
 *  • All motion: CSS @keyframes — GPU composited (transform + opacity only)
 *  • Progress: JS drives scaleX / left — no CSS width transitions
 *  • Glass panel: backdrop-filter with solid fallback via @supports
 *  • Exit: single CSS class (.npl-exit) triggers transition, then .npl-gone removes from layout
 *
 * @file  public/assets/css/ncdl-preloader.css
 */

/* ════════════════════════════════════════════════════════════════════
   1. HOST ELEMENT
════════════════════════════════════════════════════════════════════ */

#ncdl-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #040810;
  overflow: hidden;

  /* Exit transition (class .npl-exit triggers these) */
  transition:
    opacity  .70s cubic-bezier(.4, 0, .2, 1),
    transform .70s cubic-bezier(.4, 0, .2, 1),
    visibility .70s linear;
  will-change: opacity, transform;
}

/* State: exiting — JS adds this class */
#ncdl-preloader.npl-exit {
  opacity: 0;
  transform: scale(1.035);
  visibility: hidden;
  pointer-events: none;
}

/* State: gone — JS adds this class after transition ends */
#ncdl-preloader.npl-gone {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════
   2. BACKGROUND LAYERS
════════════════════════════════════════════════════════════════════ */

/* 2a. Dot-grid texture (subtle premium weave) */
.npl-bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle, rgba(201,168,76,.040) 1px, transparent 1px
  );
  background-size: 30px 30px;
}

/* 2b. Central radial glow — breathes gently */
.npl-bg-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 58% at 50% 48%,
      rgba(11,31,58,.90)  0%,
      transparent         72%),
    radial-gradient(ellipse 38% 32% at 50% 48%,
      rgba(201,168,76,.07) 0%,
      transparent          56%);
  animation: npl-glow-breathe 7s ease-in-out infinite;
}

@keyframes npl-glow-breathe {
  0%, 100% { opacity: .72; }
  50%       { opacity: 1; }
}

/* 2c. Subtle scanning beam (single pass, very delicate) */
.npl-scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,.08) 20%,
    rgba(201,168,76,.18) 50%,
    rgba(201,168,76,.08) 80%,
    transparent 100%
  );
  pointer-events: none;
  animation: npl-scan 4s ease-in-out infinite;
  animation-delay: .8s;
  opacity: 0;
}

@keyframes npl-scan {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   3. CORNER BRACKETS
════════════════════════════════════════════════════════════════════ */

.npl-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  opacity: 0;
  animation: npl-corner-in .75s cubic-bezier(.22,.68,0,1.18) forwards;
}

/* Four corners */
.npl-tl { top: 2rem;    left: 2rem;
  border-top:  1px solid rgba(201,168,76,.50);
  border-left: 1px solid rgba(201,168,76,.50);
  animation-delay: .18s; }

.npl-tr { top: 2rem;    right: 2rem;
  border-top:   1px solid rgba(201,168,76,.50);
  border-right: 1px solid rgba(201,168,76,.50);
  animation-delay: .28s; }

.npl-bl { bottom: 2rem; left: 2rem;
  border-bottom: 1px solid rgba(201,168,76,.50);
  border-left:   1px solid rgba(201,168,76,.50);
  animation-delay: .38s; }

.npl-br { bottom: 2rem; right: 2rem;
  border-bottom: 1px solid rgba(201,168,76,.50);
  border-right:  1px solid rgba(201,168,76,.50);
  animation-delay: .48s; }

@keyframes npl-corner-in {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════
   4. GLASS PANEL
════════════════════════════════════════════════════════════════════ */

.npl-panel {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(400px, calc(100vw - 2.5rem));
  padding: 2.75rem 2.5rem 2.25rem;
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,.20);

  /* Solid fallback */
  background: rgba(11,31,58,.88);

  /* Entrance */
  opacity: 0;
  transform: translateY(24px);
  animation: npl-panel-in .80s cubic-bezier(.22,.68,0,1.2) .10s forwards;
}

/* Glassmorphism — @supports guards non-supporting browsers */
@supports (backdrop-filter: blur(1px)) {
  .npl-panel {
    background: rgba(11,31,58,.55);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
  }
}

/* Inner top-edge highlight line */
.npl-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,168,76,.45) 30%,
    rgba(201,168,76,.45) 70%,
    transparent
  );
  border-radius: 1px;
}

@keyframes npl-panel-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   5. LOGO + RING
════════════════════════════════════════════════════════════════════ */

.npl-logo-box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: npl-logo-in .65s cubic-bezier(.22,.68,0,1.1) .40s forwards;
}

@keyframes npl-logo-in {
  from { opacity: 0; transform: scale(.80); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);  filter: blur(0);  }
}

/* SVG ring container */
.npl-ring-svg {
  position: absolute;
  inset: -8px; /* slightly larger than logo-box so ring doesn't clip */
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  overflow: visible;
}

/* Dim track circle */
.npl-ring-track {
  fill: none;
  stroke: rgba(201,168,76,.14);
  stroke-width: 1.5;
}

/* Rotating arc group — rotate the <g> for reliable cross-browser SVG animation */
.npl-ring-spin-g {
  transform-origin: 68px 68px; /* center of the larger viewBox (136x136) */
  animation: npl-ring-rotate 2s linear infinite;
}

/* Glowing arc inside the group */
.npl-ring-arc {
  fill: none;
  stroke: #C9A84C;
  stroke-width: 2.2;
  stroke-linecap: round;
  /* ~90° arc: circumference of r=60 → 2π×60 = 376.99; 90° arc ≈ 94.25 */
  stroke-dasharray: 94 283;
  filter: drop-shadow(0 0 5px rgba(201,168,76,.80));
}

@keyframes npl-ring-rotate {
  to { transform: rotate(360deg); }
}

/* Logo image centred in ring */
.npl-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  filter: drop-shadow(0 0 12px rgba(201,168,76,.30));
  user-select: none;
  -webkit-user-drag: none;
}

/* ════════════════════════════════════════════════════════════════════
   6. BRAND IDENTITY TYPOGRAPHY
════════════════════════════════════════════════════════════════════ */

.npl-brand-name {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,.94);
  letter-spacing: .095em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 .32rem;
  white-space: nowrap;
  opacity: 0;
  animation: npl-text-rise .55s ease-out .62s forwards;
}

.npl-brand-est {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 400;
  color: rgba(201,168,76,.70);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.5rem;
  opacity: 0;
  animation: npl-text-rise .55s ease-out .76s forwards;
}

@keyframes npl-text-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   7. GOLD DIVIDER
════════════════════════════════════════════════════════════════════ */

.npl-divider {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(201,168,76,.55) 22%,
    rgba(201,168,76,.55) 78%,
    transparent
  );
  margin-bottom: 1.5rem;
  animation: npl-divider-widen .65s ease-out .88s forwards;
}

@keyframes npl-divider-widen {
  to { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   8. PROGRESS BAR
════════════════════════════════════════════════════════════════════ */

.npl-progress-wrap {
  width: 100%;
  opacity: 0;
  animation: npl-fade-in .4s ease-out 1.05s forwards;
}

@keyframes npl-fade-in {
  to { opacity: 1; }
}

/* Track */
.npl-progress-track {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.09);
  border-radius: 2px;
  overflow: visible;  /* allow head dot to extend beyond 2px height */
  margin-bottom: .72rem;
}

/* Fill — JS drives scaleX via inline style, transform-origin left */
.npl-progress-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #7a5e20 0%, #C9A84C 55%, #E8C97A 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  /* No CSS transition — requestAnimationFrame drives this smoothly */
}

/* Glowing head dot — JS drives left % via inline style */
.npl-progress-head {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 8px;
  height: 8px;
  background: #EDD07A;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 2px rgba(201,168,76,.20),
    0 0 6px 2px rgba(201,168,76,.75);
  animation: npl-head-pulse 1.3s ease-in-out infinite;
}

@keyframes npl-head-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(201,168,76,.15),
      0 0 5px 1px rgba(201,168,76,.65);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(201,168,76,.25),
      0 0 10px 4px rgba(201,168,76,.95);
  }
}

/* ════════════════════════════════════════════════════════════════════
   9. STATUS ROW (status text + percentage counter)
════════════════════════════════════════════════════════════════════ */

.npl-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .5rem;
}

.npl-status-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .645rem;
  font-weight: 500;
  color: rgba(255,255,255,.40);
  letter-spacing: .09em;
  text-transform: uppercase;
  flex: 1;
  transition: color .4s ease;
}

/* "Welcome" colour highlight applied by JS */
.npl-status-text.is-welcome {
  color: rgba(201,168,76,.80);
}

.npl-pct-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .665rem;
  font-weight: 600;
  color: rgba(201,168,76,.70);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
  transition: color .4s ease;
}

/* ════════════════════════════════════════════════════════════════════
   10. RESPONSIVE ADJUSTMENTS
════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .npl-corner       { width: 22px; height: 22px; }
  .npl-tl, .npl-tr  { top:    1.25rem; }
  .npl-bl, .npl-br  { bottom: 1.25rem; }
  .npl-tl, .npl-bl  { left:   1.25rem; }
  .npl-tr, .npl-br  { right:  1.25rem; }

  .npl-panel        { padding: 2.25rem 1.75rem 1.75rem; border-radius: 16px; }
  .npl-logo-box     { width: 84px; height: 84px; }
  .npl-ring-svg     { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
  .npl-brand-name   { font-size: .92rem; white-space: normal; }
  .npl-brand-est    { font-size: .60rem; }
}

@media (max-width: 360px) {
  .npl-panel { padding: 2rem 1.5rem 1.5rem; }
}

/* Hide corners on very small screens to avoid clutter */
@media (max-width: 320px) {
  .npl-corner { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   11. REDUCED-MOTION OVERRIDE
   JS also skips animation when prefers-reduced-motion is detected,
   but this CSS rule is a belt-and-braces safety net.
════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .npl-logo-box,
  .npl-panel,
  .npl-corner,
  .npl-bg-glow,
  .npl-scan-beam   { animation: none !important; opacity: 1 !important; transform: none !important; }
  .npl-ring-arc    { animation: none !important; }
  .npl-divider     { animation: none !important; width: 100% !important; }
  .npl-progress-wrap { animation: none !important; opacity: 1 !important; }
  .npl-progress-head { animation: none !important; }
  .npl-brand-name,
  .npl-brand-est   { animation: none !important; opacity: 1 !important; }

  #ncdl-preloader  { transition: opacity .3s ease, visibility .3s linear; }
}

/* ════════════════════════════════════════════════════════════════════
   12. DARK / LIGHT THEME VARIANTS
   Preloader is always brand-dark for consistency (luxury club feel).
   A subtle ink deepening in dark mode adds richness.
════════════════════════════════════════════════════════════════════ */

[data-theme="light"] #ncdl-preloader { background-color: #030710; }
[data-theme="dark"]  #ncdl-preloader { background-color: #020508; }