/* ============================================================
   preloader.css
   Enqueue via functions.php:
   wp_enqueue_style('preloader', get_template_directory_uri() . '/preloader.css');
   ============================================================ */

/* Lock scroll while preloader is active */
body.is-loading {
  overflow: hidden;
}

/* ── Overlay ─────────────────────────────────────────── */
#site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Exit: zoom + fade triggered by JS adding .pre-exit class */
  transition: opacity 0.7s ease;
}

/* ── Scene wrapper ───────────────────────────────────── */
.pre-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Glow backdrop ───────────────────────────────────── */
.pre-glow-bg {
  position: absolute;
  width: 600px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.07) 0%, transparent 70%);
  opacity: 0;
  animation: preGlowIn 0.8s ease forwards 2.6s;
}

@keyframes preGlowIn {
  to { opacity: 1; }
}

/* ── SVG logo ────────────────────────────────────────── */
#pre-logo {
  width: 480px;
  height: auto;
  filter: drop-shadow(0 0 0px rgba(255,255,255,0));
  animation: preShadowGrow 1s ease forwards 2.8s;

  /* Zoom-out exit — triggered by JS class */
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

@keyframes preShadowGrow {
  to { filter: drop-shadow(0 0 24px rgba(255,255,255,0.25)); }
}

/* ── Outline path ────────────────────────────────────── */
#pre-outline {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  /* Hide completely until JS sets up the dash array */
  stroke-dasharray: 0 99999;
}

/* ── Fill path ───────────────────────────────────────── */
#pre-filled {
  fill: #ffffff;
  opacity: 0;
  animation: preFillReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 2.0s;
}

@keyframes preFillReveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── EXIT state ─────────────────────────────────────── */
/* JS adds .pre-exit to #site-preloader after logo fully appears */
#site-preloader.pre-exit {
  opacity: 0;
  pointer-events: none;
}

#site-preloader.pre-exit #pre-logo {
  transform: scale(10);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
  #pre-logo {
    width: 85vw;
  }
  .pre-glow-bg {
    width: 100vw;
    height: 60vw;
  }
}