/* =============================================================================
   Hide the BROWSER's native vertical scrollbar so only DSN's custom
   thin scrollbar shows. Page is still scrollable — we're just hiding
   the visual chrome. This fixes the "two scrollbars" complaint:
   the browser scrollbar + DSN's custom thumb were both visible.
   ----------------------------------------------------------------- */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
body { scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar { width: 0; height: 0; }


/* =============================================================================
   Nexlla 2026 — Preloader + Page-Transition Loader
   -----------------------------------------------------------------------------
   Load order: plugins.css → style.css → nexlla-2026.css → nexlla-preloader.css
   Replaces the DSN logo-rotation preloader with a bespoke Nexlla treatment.

   Strategy A (DSN compatibility):
     • The outer wrapper keeps id="dsn_preloader" + class="preloader" so DSN's
       template JS (custom.js GSAP timeline, plugins.min.js) still finds it.
     • Internal DSN nodes (.dsnload, .logo-box, .loading-count, .loading-text,
       .bg-load) are kept as hidden DOM so DSN's count animation and AJAX nav
       continue to run no-op while our own visual stage is what the user sees.
     • Our JS mirrors DSN's hidden .loading-count value into the visible
       counter + arc + hairline, keeping everything in sync.

   Two pieces:
     A. .nx-preloader-*   — initial page-load preloader ("Spark Boots")
     B. .nx-transition-*  — AJAX page-transition overlay ("Curtain Sweep")
   ========================================================================== */


/* ────────────────────────────────────────────────────────────────────────
   0.  Hide all the DSN-template preloader nodes we keep for compatibility
   ──────────────────────────────────────────────────────────────────────── */
#nx_preloader .dsnload,
#nx_preloader .logo-box,
#nx_preloader .loading-count,
#nx_preloader .loading-text,
#nx_preloader .bg-load {
    /* Visually hidden but kept in the DOM so DSN JS can still address them.
       We don't use display:none because GSAP needs to mutate them. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
}


/* ────────────────────────────────────────────────────────────────────────
   A.  INITIAL PRELOADER  —  "Spark Boots"
   ──────────────────────────────────────────────────────────────────────── */

#nx_preloader {
    /* DSN's own CSS already positions #nx_preloader as a full-viewport fixed
       overlay; we reinforce/override to make sure the layout is right. */
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--nx-color-bg, #0A0908) !important;
    z-index: 10000 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--nx-color-text, #F1EDE4);
}

/* The visible stage — sits on top of all the hidden DSN nodes. */
.nx-preloader-stage {
    position: relative;
    z-index: 2;
    width: min(420px, 86vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
    padding: 0 16px;
}

/* Warm ember radial behind the centre mark — pure background, no motion. */
.nx-preloader-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 360px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(226, 90, 28, 0.18) 0%,
        rgba(226, 90, 28, 0.08) 28%,
        rgba(226, 90, 28, 0.00) 62%
    );
    filter: blur(8px);
    pointer-events: none;
    z-index: -1;
    animation: nxPreEmberPulse 4.2s ease-in-out infinite;
}

/* Top tagline */
.nx-preloader-tagline {
    font-family: var(--nx-font-mono, "IBM Plex Mono", monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--nx-color-text-muted, rgba(241, 237, 228, 0.62));
    margin: 0;
    line-height: 1;
}

.nx-preloader-tagline .nx-preloader-tagline__sep {
    display: inline-block;
    margin: 0 0.55em;
    opacity: 0.55;
}

/* Central mark — luminous accent dot + animated arc */
.nx-preloader-mark {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-preloader-mark__arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);   /* start the arc at 12 o'clock */
    overflow: visible;
}

/* Track ring (full circle, dim) */
.nx-preloader-mark__arc-track {
    fill: none;
    stroke: var(--nx-color-line, rgba(241, 237, 228, 0.10));
    stroke-width: 1.5;
}

/* Active progress ring — stroke-dasharray driven from JS */
.nx-preloader-mark__arc-progress {
    fill: none;
    stroke: var(--nx-color-accent, #E25A1C);
    stroke-width: 1.75;
    stroke-linecap: round;
    /* circumference for r=36 → 2π·36 ≈ 226.195 */
    stroke-dasharray: 226.195;
    stroke-dashoffset: 226.195;
    filter: drop-shadow(0 0 6px rgba(226, 90, 28, 0.55));
    transition: stroke-dashoffset 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pulsing central dot */
.nx-preloader-mark__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nx-color-accent, #E25A1C);
    box-shadow:
        0 0 12px rgba(226, 90, 28, 0.75),
        0 0 28px rgba(226, 90, 28, 0.35);
    animation: nxPreDotPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Numeric counter */
.nx-preloader-counter {
    font-family: var(--nx-font-mono, "IBM Plex Mono", monospace);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nx-color-text, #F1EDE4);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.nx-preloader-counter__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    display: inline-block;
    text-align: right;
}

.nx-preloader-counter__unit {
    color: var(--nx-color-text-dim, rgba(241, 237, 228, 0.40));
    font-weight: 500;
}

/* Hairline progress bar */
.nx-preloader-hairline {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 1px;
    background: var(--nx-color-line, rgba(241, 237, 228, 0.10));
    overflow: hidden;
}

.nx-preloader-hairline__fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(
        90deg,
        rgba(226, 90, 28, 0.0) 0%,
        var(--nx-color-accent, #E25A1C) 25%,
        var(--nx-color-accent, #E25A1C) 100%
    );
    transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

/* Bottom block — caption + 3 dots + serif accent */
.nx-preloader-foot {
    position: absolute;
    left: 50%;
    bottom: clamp(28px, 6vh, 56px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: max-content;
    z-index: 2;
}

.nx-preloader-foot__caption {
    font-family: var(--nx-font-mono, "IBM Plex Mono", monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--nx-color-text-dim, rgba(241, 237, 228, 0.40));
    margin: 0;
    line-height: 1;
}

.nx-preloader-foot__dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nx-preloader-foot__dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nx-color-text-muted, rgba(241, 237, 228, 0.62));
    animation: nxPreFootDot 1.4s ease-in-out infinite;
}

.nx-preloader-foot__dots span:nth-child(2) { animation-delay: 0.20s; }
.nx-preloader-foot__dots span:nth-child(3) { animation-delay: 0.40s; }

.nx-preloader-foot__accent {
    margin-top: 4px;
    font-family: var(--nx-font-serif, "IBM Plex Serif", Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    color: var(--nx-color-accent-soft, #FFB37A);
    opacity: 0.78;
    letter-spacing: 0.02em;
}


/* Dismissal — fade everything */
#nx_preloader.nx-preloader-out {
    opacity: 0;
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#nx_preloader.nx-preloader-hidden {
    display: none !important;
}


/* ────────────────────────────────────────────────────────────────────────
   B.  PAGE-TRANSITION OVERLAY  —  "Curtain Sweep"
   ──────────────────────────────────────────────────────────────────────── */

.nx-transition {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--nx-color-bg, #0A0908);
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
    transition:
        transform 600ms cubic-bezier(0.65, 0.05, 0.36, 1),
        opacity 280ms ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-transition.is-in {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0%);
}

.nx-transition.is-out {
    pointer-events: none;
    opacity: 1;
    transform: translateY(-100%);
}

.nx-transition__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms ease-out 180ms, transform 320ms ease-out 180ms;
}

.nx-transition.is-in .nx-transition__stage {
    opacity: 1;
    transform: translateY(0);
}

.nx-transition__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--nx-color-accent, #E25A1C);
    box-shadow:
        0 0 12px rgba(226, 90, 28, 0.75),
        0 0 26px rgba(226, 90, 28, 0.32);
    animation: nxPreDotPulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.nx-transition__label {
    font-family: var(--nx-font-mono, "IBM Plex Mono", monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--nx-color-text-muted, rgba(241, 237, 228, 0.62));
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}

.nx-transition__ellipsis {
    display: inline-block;
    min-width: 2ch;
    text-align: left;
    color: var(--nx-color-accent-soft, #FFB37A);
}


/* ────────────────────────────────────────────────────────────────────────
   ANIMATIONS
   ──────────────────────────────────────────────────────────────────────── */

@keyframes nxPreEmberPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 1;
    }
}

@keyframes nxPreDotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow:
            0 0 12px rgba(226, 90, 28, 0.75),
            0 0 28px rgba(226, 90, 28, 0.35);
    }
    50% {
        transform: scale(1.35);
        opacity: 0.85;
        box-shadow:
            0 0 18px rgba(226, 90, 28, 0.9),
            0 0 40px rgba(226, 90, 28, 0.55);
    }
}

@keyframes nxPreFootDot {
    0%, 100% {
        transform: scale(1);
        opacity: 0.35;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}


/* ────────────────────────────────────────────────────────────────────────
   REDUCED MOTION OVERRIDES
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .nx-preloader-stage::before {
        animation: none !important;
    }

    .nx-preloader-mark__dot,
    .nx-preloader-foot__dots span,
    .nx-transition__dot {
        animation: none !important;
        transform: none !important;
    }

    .nx-preloader-mark__arc-progress {
        /* Show a static frame at ~50% progress */
        stroke-dashoffset: 113.1 !important;
        transition: none !important;
    }

    .nx-preloader-hairline__fill {
        width: 50% !important;
        transition: none !important;
    }

    #nx_preloader.nx-preloader-out {
        transition: opacity 200ms linear;
    }

    .nx-transition,
    .nx-transition.is-in,
    .nx-transition.is-out {
        transition: opacity 200ms linear;
    }

    .nx-transition__stage {
        transition: opacity 160ms linear;
    }
}


/* (Light-theme inversion rules removed — the site is locked to its
   dark theme; no `body.v-light` state ever exists.) */


/* ────────────────────────────────────────────────────────────────────────
   SMALL VIEWPORT TWEAKS
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .nx-preloader-stage {
        gap: 22px;
        width: min(360px, 92vw);
    }

    .nx-preloader-mark {
        width: 72px;
        height: 72px;
    }

    .nx-preloader-tagline {
        font-size: 10px;
        letter-spacing: 0.22em;
    }

    .nx-preloader-foot {
        bottom: clamp(20px, 5vh, 40px);
    }
}