/**
 * =========================================================================
 *  GGWPS — Global Navigation Loader  (ggwps-nav-loader.css)
 * =========================================================================
 *  Premium "Aegis Hyper-Warp" overlay shown during full-page navigations.
 *
 *  • Pre-rendered in DOM (hidden by default: opacity 0 + pointer-events none)
 *  • Toggled via the `.ggwps-nav-loader--visible` class
 *  • Body scroll locked via `.ggwps-nav-loading` class
 *  • z-index 999990: above all site UI, below WP admin bar (999999)
 *  • Respects prefers-reduced-motion
 *  • Responsive clamp() sizing + iOS safe-area insets
 *
 *  Does NOT touch the existing Continue loader (#locker-overlay).
 *  =========================================================================
 */

/* ─── Google Fonts (also loaded in functions.php, safe duplication) ───── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* ─── CSS Custom Properties ──────────────────────────────────────────── */
:root {
    --gnl-bg-deep:     #020308;
    --gnl-gold-lux:    #D4AF37;
    --gnl-gold-glow:   rgba(212, 175, 55, 0.4);
    --gnl-cyan-tech:   #0AE0FF;
    --gnl-cyan-glow:   rgba(10, 224, 255, 0.4);
    --gnl-alert-red:   #FF2A5F;
    --gnl-glass-bg:    rgba(10, 15, 30, 0.5);
}

/* ─── Body Scroll Lock ───────────────────────────────────────────────── */
body.ggwps-nav-loading {
    overflow: hidden !important;
    touch-action: none;
}

/* ─── Overlay Container ──────────────────────────────────────────────── */
#ggwps-nav-loader {
    position: fixed;
    inset: 0;
    z-index: 999990;

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

    background-color: var(--gnl-bg-deep);
    font-family: 'Share Tech Mono', monospace;

    /* ── Pre-rendered hidden state: instant first show ── */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    /* ── Smooth fade ── */
    transition: opacity 0.22s ease-out, visibility 0s linear 0.22s;

    /* ── Prevent layout shifts ── */
    contain: layout style paint;
    will-change: opacity;

    /* ── iOS safe area ── */
    padding:
        env(safe-area-inset-top, 0)
        env(safe-area-inset-right, 0)
        env(safe-area-inset-bottom, 0)
        env(safe-area-inset-left, 0);
}

/* ── Visible state ── */
#ggwps-nav-loader.ggwps-nav-loader--visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.18s ease-in, visibility 0s linear 0s;
}

/* ─── Canvas Starfield ───────────────────────────────────────────────── */
#ggwps-nav-starfield {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ─── HUD Wrapper (holds the gyro + ship) ────────────────────────────── */
.gnl-hud-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    perspective: 1000px;
}

/* ─── 3D Gyroscopic Rings Container ──────────────────────────────────── */
.gnl-gyro-container {
    position: absolute;
    width:  clamp(220px, 40vw, 400px);
    height: clamp(220px, 40vw, 400px);
    transform-style: preserve-3d;
    animation: gnl-float 6s ease-in-out infinite;
}

/* ─── Rings ──────────────────────────────────────────────────────────── */
.gnl-ring {
    position: absolute;
    top: 0;  left: 0;
    width: 100%;  height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform-style: preserve-3d;
}

.gnl-ring-1 {
    border-top:    2px solid var(--gnl-gold-lux);
    border-bottom: 2px solid var(--gnl-gold-lux);
    animation: gnl-spinX 8s linear infinite;
    box-shadow: 0 0 20px var(--gnl-gold-glow);
}

.gnl-ring-2 {
    width: 80%;  height: 80%;
    top: 10%;    left: 10%;
    border-left:  2px solid var(--gnl-cyan-tech);
    border-right: 2px solid var(--gnl-cyan-tech);
    animation: gnl-spinY 6s linear infinite reverse;
    box-shadow: 0 0 20px var(--gnl-cyan-glow);
}

.gnl-ring-3 {
    width: 60%;  height: 60%;
    top: 20%;    left: 20%;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    animation: gnl-spinZ 10s linear infinite;
}

/* ─── Central Aircraft / Spacecraft SVG ──────────────────────────────── */
.gnl-aircraft-core {
    position: absolute;
    width:  clamp(120px, 20vw, 200px);
    height: clamp(120px, 20vw, 200px);
    top: 50%;  left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

.gnl-aircraft-core svg {
    width: 100%;
    height: 100%;
}

/* SVG stroke animations */
.gnl-svg-ship .gnl-hull {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: gnl-drawShip 3s ease-out forwards;
}

.gnl-svg-ship .gnl-wings {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: gnl-drawShip 3s ease-out 1s forwards;
}

.gnl-svg-ship .gnl-engine-pulse {
    animation: gnl-engineFlicker 0.1s infinite alternate;
}

/* ─── "Warping…" Status Text ─────────────────────────────────────────── */
.gnl-status-text {
    position: absolute;
    bottom: clamp(12%, 15vh, 22%);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(0.7rem, 2vw, 1.1rem);
    color: var(--gnl-cyan-tech);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    text-shadow: 0 0 12px var(--gnl-cyan-glow), 0 0 30px var(--gnl-cyan-glow);
    animation: gnl-pulse 2s ease-in-out infinite;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* ─── Keyframes ──────────────────────────────────────────────────────── */
@keyframes gnl-spinX {
    0%   { transform: rotateX(0deg)   rotateY(0deg);   }
    100% { transform: rotateX(360deg) rotateY(180deg);  }
}
@keyframes gnl-spinY {
    0%   { transform: rotateY(0deg)   rotateZ(0deg);   }
    100% { transform: rotateY(360deg) rotateZ(180deg);  }
}
@keyframes gnl-spinZ {
    0%   { transform: rotateZ(0deg)   rotateX(0deg);   }
    100% { transform: rotateZ(360deg) rotateX(180deg);  }
}
@keyframes gnl-float {
    0%, 100% { transform: translateY(0);     }
    50%      { transform: translateY(-20px); }
}
@keyframes gnl-drawShip {
    to { stroke-dashoffset: 0; }
}
@keyframes gnl-engineFlicker {
    0%   { opacity: 0.6; }
    100% { opacity: 1;   }
}
@keyframes gnl-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1;   }
}

/* ─── prefers-reduced-motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gnl-gyro-container,
    .gnl-ring-1,
    .gnl-ring-2,
    .gnl-ring-3,
    .gnl-svg-ship .gnl-hull,
    .gnl-svg-ship .gnl-wings,
    .gnl-svg-ship .gnl-engine-pulse,
    .gnl-status-text {
        animation: none !important;
    }
    .gnl-svg-ship .gnl-hull,
    .gnl-svg-ship .gnl-wings {
        stroke-dashoffset: 0 !important;
    }
    #ggwps-nav-loader {
        transition-duration: 0.05s !important;
    }
    /* Starfield will be stopped via JS matchMedia check */
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
/* Tablets (landscape) */
@media (max-width: 1024px) {
    .gnl-gyro-container {
        width: clamp(200px, 45vw, 350px);
        height: clamp(200px, 45vw, 350px);
    }
}
/* Mobiles */
@media (max-width: 600px) {
    .gnl-gyro-container {
        width: clamp(180px, 55vw, 300px);
        height: clamp(180px, 55vw, 300px);
    }
    .gnl-aircraft-core {
        width:  clamp(100px, 28vw, 160px);
        height: clamp(100px, 28vw, 160px);
    }
}

/* ─── Backdrop filter graceful fallback ──────────────────────────────── */
@supports (backdrop-filter: blur(4px)) {
    #ggwps-nav-loader {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}