/*
 * Naviun — Sonar Pulse Preloader
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * INTEGRATION GUIDE
 * ─────────────────
 * 1. Copy this file into your project and link it in <head>:
 *      <link rel="stylesheet" href="naviun-preloader.css">
 *
 * 2. Place the preloader markup as the FIRST child of <body>:
 *
 *    <div id="preloader" class="naviun-preloader" role="status" aria-label="Loading">
 *      <div class="naviun-preloader__wrap">
 *        <div class="naviun-preloader__radar">
 *          <span class="np-cross-x"></span>
 *          <span class="np-cross-y"></span>
 *          <span class="np-ring np-r1"></span>
 *          <span class="np-ring np-r2"></span>
 *          <span class="np-ring np-r3"></span>
 *          <span class="np-ring np-r4"></span>
 *          <span class="np-wave"></span>
 *          <span class="np-wave np-wave--b"></span>
 *          <span class="np-wave np-wave--c"></span>
 *          <img class="np-logo" src="Naviun Ncon White.png" alt="Naviun">
 *        </div>
 *      </div>
 *    </div>
 *
 * 3. Add this script before </body> — it dismisses the preloader
 *    once the page has fully loaded:
 *
 *    <script>
 *      window.addEventListener('load', function () {
 *        var el = document.getElementById('preloader');
 *        el.classList.add('naviun-preloader--exit');
 *        el.addEventListener('animationend', function () {
 *          el.classList.add('naviun-preloader--hidden');
 *        }, { once: true });
 *      });
 *    </script>
 *
 *    Tip: swap 'load' for 'DOMContentLoaded' if you want the
 *    preloader to disappear as soon as the DOM is ready rather
 *    than waiting for all images and assets to finish loading.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Fullscreen overlay ──────────────────────────────────────────────────── */
.naviun-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999999999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%,
    #0d4eaa 0%, #033C8D 45%, #022d6b 100%);
}

/* Exit animation — triggered by adding .naviun-preloader--exit via JS */
.naviun-preloader--exit {
  animation: np-exit-fade .8s ease forwards;
}
@keyframes np-exit-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* Fully hidden after exit animation completes */
.naviun-preloader--hidden {
  display: none;
}

/* ── Entrance: radar fades + scales up ──────────────────────────────────── */
.naviun-preloader__wrap {
  animation: np-wrap-fadein .9s cubic-bezier(.22, .68, .36, 1) both;
}
@keyframes np-wrap-fadein {
  0%   { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Radar canvas ────────────────────────────────────────────────────────── */
.naviun-preloader__radar {
  position: relative;
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
}

/* ── Crosshairs ──────────────────────────────────────────────────────────── */
.np-cross-x,
.np-cross-y {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.np-cross-x {
  top: 50%; left: 4%; right: 4%;
  height: 1px; transform: translateY(-50%);
  background: linear-gradient(to right,
    transparent 0%, rgba(255,255,255,.10) 20%,
    rgba(255,255,255,.10) 80%, transparent 100%);
}
.np-cross-y {
  top: 4%; bottom: 4%; left: 50%;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(to bottom,
    transparent 0%, rgba(255,255,255,.10) 20%,
    rgba(255,255,255,.10) 80%, transparent 100%);
}

/* ── Static range rings ──────────────────────────────────────────────────── */
.np-ring {
  position: absolute; z-index: 1;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}
.np-r1 { width: 34%; height: 34%; }
.np-r2 { width: 58%; height: 58%; }
.np-r3 { width: 80%; height: 80%; }
.np-r4 { width: 98%; height: 98%; border-color: rgba(255,255,255,.14); }

/* ── Sonar pulse waves ───────────────────────────────────────────────────── */
.np-wave {
  position: absolute; z-index: 2;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.95);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: np-sonar-ping 5s cubic-bezier(.18, .62, .28, 1) infinite;
  animation-delay: 1.50s;
}
.np-wave--b { animation-delay: 3.17s; }
.np-wave--c { animation-delay: 4.83s; }

@keyframes np-sonar-ping {
  0% {
    width: 8px; height: 8px;
    border-color: rgba(255,255,255,1);
    opacity: 1;
    box-shadow:
      0 0  5px  2px rgba(200,230,255,.80),
      0 0 14px  5px rgba(130,190,255,.55),
      0 0 28px  8px rgba(80,150,255,.32),
      0 0 48px 12px rgba(50,120,255,.16);
  }
  22% {
    opacity: .82;
    border-color: rgba(255,255,255,.90);
    box-shadow:
      0 0  6px  2px rgba(200,230,255,.60),
      0 0 16px  6px rgba(130,190,255,.38),
      0 0 34px 10px rgba(80,150,255,.20),
      0 0 55px 14px rgba(50,120,255,.09);
  }
  45% {
    opacity: .52;
    border-color: rgba(255,255,255,.70);
    box-shadow:
      0 0  5px  2px rgba(200,230,255,.35),
      0 0 14px  5px rgba(130,190,255,.20),
      0 0 28px  8px rgba(80,150,255,.10);
  }
  68% {
    opacity: .22;
    border-color: rgba(255,255,255,.40);
    box-shadow:
      0 0  4px  1px rgba(200,230,255,.12),
      0 0 10px  3px rgba(130,190,255,.07);
  }
  88% {
    opacity: .06;
    border-color: rgba(255,255,255,.15);
    box-shadow: none;
  }
  100% {
    width: 97%; height: 97%;
    border-color: rgba(255,255,255,0);
    opacity: 0; box-shadow: none;
  }
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.np-logo {
  position: absolute; z-index: 3;
  top: 50%; left: 50%;
  width: 36%; height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter:
    drop-shadow(0 0  6px rgba(255,255,255,.22))
    drop-shadow(0 0 14px rgba(130,190,255,.18));
  animation: np-icon-fadein 2.2s cubic-bezier(.4, 0, .6, 1) both;
  animation-delay: .6s;
}
@keyframes np-icon-fadein {
  0%   { opacity: 0; }
  40%  { opacity: .25; }
  100% { opacity: 1; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .np-wave { display: none; }
  .naviun-preloader__wrap,
  .np-logo { animation: none; opacity: 1; }
}

/* ── Tablet (≤ 1024px) ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .naviun-preloader__radar { width: 240px; }
}

/* ── Mobile (≤ 600px) ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .naviun-preloader__radar { width: 180px; }
}

/* ── Small mobile (≤ 380px) ─────────────────────────────────────────────── */
@media (max-width: 380px) {
  .naviun-preloader__radar { width: 150px; }
}