/* Preloader — echoes the Warriors header: ink surface, drifting contour map,
           a self-drawing orange ring and radar sweep around the site logo. */
        #preloader {
            position: fixed;
            inset: 0;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 34px;
            background-color: var(--color-ink, #121820);
            overflow: hidden;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.6s ease, visibility 0s linear 0.6s;
        }

        #preloader.is-done {
            opacity: 0;
            visibility: hidden;
        }

        /* Drifting contour-map texture, same motif as the header background */
        #preloader::before {
            content: "";
            position: absolute;
            inset: -25% -10%;
            background-image: url("<?= htmlspecialchars($preloader_map_lines, ENT_QUOTES, 'UTF-8') ?>");
            background-repeat: repeat;
            background-size: 780px auto;
            background-position: center;
            opacity: 0.08;
            animation: preloaderMapDrift 40s linear infinite;
            pointer-events: none;
        }

        /* Soft orange glow bleeding up from the centre */
        #preloader::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 620px;
            height: 620px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle,
                rgba(var(--color-orange-rgb, 232, 119, 34), 0.16) 0%,
                rgba(var(--color-orange-rgb, 232, 119, 34), 0) 62%);
            pointer-events: none;
        }

        .preloader_core {
            position: relative;
            width: 190px;
            height: 190px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        /* Self-drawing orange ring (mirrors the header logo ring animation) */
        .preloader_ring {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
            transform: rotate(-90deg);
        }

        .preloader_ring_track {
            fill: none;
            stroke: rgba(255, 255, 255, 0.08);
            stroke-width: 2;
        }

        .preloader_ring_draw {
            fill: none;
            stroke: var(--color-orange, #e87722);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 264;
            stroke-dashoffset: 264;
            animation: preloaderRingDraw 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        }

        /* Rotating radar sweep */
        .preloader_sweep {
            position: absolute;
            inset: 6px;
            border-radius: 50%;
            background: conic-gradient(from 0deg,
                rgba(var(--color-orange-rgb, 232, 119, 34), 0) 0deg,
                rgba(var(--color-orange-rgb, 232, 119, 34), 0) 300deg,
                rgba(var(--color-orange-rgb, 232, 119, 34), 0.35) 350deg,
                rgba(var(--color-orange-rgb, 232, 119, 34), 0.55) 360deg);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 calc(100% - 33px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 calc(100% - 33px));
            animation: preloaderSpin 2.4s linear infinite;
        }

        /* Orbiting compass tick */
        .preloader_orbit {
            position: absolute;
            inset: -6px;
            animation: preloaderSpin 3.6s linear infinite reverse;
        }

        .preloader_orbit::before {
            content: "";
            position: absolute;
            top: -3px;
            left: 50%;
            width: 8px;
            height: 8px;
            margin-left: -4px;
            border-radius: 50%;
            background-color: var(--color-orange-bright, #f08832);
            box-shadow: 0 0 12px rgba(var(--color-orange-rgb, 232, 119, 34), 0.9);
        }

        /* Site logo — used as-is, gently floating */
        .preloader_logo {
            width: 108px;
            height: auto;
            position: relative;
            z-index: 2;
            animation: preloaderFloat 3.4s ease-in-out infinite;
            filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
        }

        /* Wordmark + progress bar */
        .preloader_meta {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .preloader_label {
            font-family: var(--font-heading, "Montserrat", sans-serif);
            font-weight: 800;
            font-size: 0.72rem;
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: var(--color-text-inverse-muted, #d1d1d1);
            padding-left: 0.42em;
        }

        .preloader_bar {
            width: 190px;
            height: 3px;
            border-radius: 999px;
            background-color: rgba(255, 255, 255, 0.1);
            overflow: hidden;
        }

        .preloader_bar span {
            display: block;
            width: 40%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg,
                var(--color-orange, #e87722),
                var(--color-orange-bright, #f08832));
            animation: preloaderBar 1.4s ease-in-out infinite;
        }

        @keyframes preloaderMapDrift {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-110px, 0, 0); }
        }

        @keyframes preloaderRingDraw {
            0% { stroke-dashoffset: 264; }
            45% { stroke-dashoffset: 0; }
            55% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: -264; }
        }

        @keyframes preloaderSpin {
            to { transform: rotate(360deg); }
        }

        @keyframes preloaderFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        @keyframes preloaderBar {
            0% { transform: translateX(-120%); }
            100% { transform: translateX(360%); }
        }

        @media screen and (max-width: 767px) {
            #preloader { gap: 26px; }
            .preloader_core { width: 158px; height: 158px; }
            .preloader_logo { width: 88px; }
            .preloader_bar { width: 158px; }
        }

        @media (prefers-reduced-motion: reduce) {
            #preloader::before,
            .preloader_ring_draw,
            .preloader_sweep,
            .preloader_orbit,
            .preloader_logo,
            .preloader_bar span {
                animation-duration: 0.001s;
                animation-iteration-count: 1;
            }
            .preloader_ring_draw { stroke-dashoffset: 0; }
        }