/* ============================================================
   Homepage preloader — "energy laser draw + bloom".
   A bright spark races the falcon outline leaving a glowing
   gold trail; a white flash + shockwave ring bursts on
   completion; the mark settles to solid gold with a steady glow.

   Theme-aware via --bg / --accent. The overlay always clears:
   preloader.js dismisses it early, and a CSS-only failsafe
   animation fades it even if JS never runs.

   Motion mode is driven by <html data-preloader>:
     show     -> full animation
     reduced  -> static gold falcon (set by JS for reduced-motion)
     skip     -> hidden (repeat visit this session)
   ============================================================ */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    /* No-JS / JS-failure failsafe: hold, then fade on its own. */
    animation: preloader-failsafe 4s ease 0s forwards;
}

/* Repeat visits this session: never render, no flash. */
html[data-preloader="skip"] .preloader { display: none; }

/* Stack falcon + flash + ring in one centered grid cell so each
   can scale around its own centre independently. */
.preloader-stage {
    display: grid;
    place-items: center;
}
.preloader-stage > * { grid-area: 1 / 1; }

.preloader-falcon {
    width: clamp(86px, 15vw, 150px);
    height: auto;
    overflow: visible;            /* don't clip the glow */
    color: var(--accent);
    transform: scale(0.9);
    animation:
        pl-pop 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
        pl-bloom 1.6s ease-out forwards;
}

/* The persistent gold trail being drawn on. */
.pl-trail {
    fill: var(--accent);
    fill-opacity: 0;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation:
        pl-draw 1.15s ease-in-out forwards,
        pl-fill 0.45s ease-out 1.1s forwards;
}

/* The bright spark racing along the outline (leading edge). */
.pl-spark {
    fill: none;
    color: #fff6d5;
    stroke: #fff6d5;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 0.035 0.965;   /* short lit segment, rest gap */
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 9px var(--accent));
    animation: pl-spark 1.15s ease-in-out forwards;
}

/* White flash bloom on completion. */
.preloader-flash {
    width: clamp(120px, 22vw, 230px);
    height: clamp(120px, 22vw, 230px);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        var(--accent) 32%,
        transparent 68%);
    opacity: 0;
    pointer-events: none;
    animation: pl-flash 0.55s ease-out 1.05s forwards;
}

/* Expanding shockwave ring. */
.preloader-ring {
    width: clamp(110px, 20vw, 210px);
    height: clamp(110px, 20vw, 210px);
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: pl-ring 0.6s ease-out 1.05s forwards;
}

/* JS dismiss: fast, clean fade that cancels the failsafe. */
.preloader.preloader--done {
    animation: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

@keyframes pl-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

@keyframes pl-fill {
    from { fill-opacity: 0; stroke-opacity: 1; }
    to   { fill-opacity: 1; stroke-opacity: 0; }
}

@keyframes pl-spark {
    0%   { stroke-dashoffset: 1; opacity: 0; }
    7%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes pl-pop {
    0%   { transform: scale(0.9); }
    78%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Two consistent drop-shadows throughout so the glow interpolates
   smoothly: faint while drawing -> flare at the flash -> steady. */
@keyframes pl-bloom {
    0%   { filter: drop-shadow(0 0 0 currentColor)  drop-shadow(0 0 0 currentColor); }
    68%  { filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 4px currentColor); }
    80%  { filter: drop-shadow(0 0 16px currentColor) drop-shadow(0 0 34px currentColor); }
    100% { filter: drop-shadow(0 0 5px currentColor)  drop-shadow(0 0 12px currentColor); }
}

@keyframes pl-flash {
    0%   { opacity: 0;    transform: scale(0.2); }
    55%  { opacity: 0.95; }
    100% { opacity: 0;    transform: scale(2.6); }
}

@keyframes pl-ring {
    0%   { opacity: 0;   transform: scale(0.3); }
    28%  { opacity: 0.8; }
    100% { opacity: 0;   transform: scale(2.4); }
}

@keyframes preloader-failsafe {
    0%, 80% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: hidden; }
}

/* Reduced motion set explicitly by JS: static gold falcon. */
html[data-preloader="reduced"] .pl-spark,
html[data-preloader="reduced"] .preloader-flash,
html[data-preloader="reduced"] .preloader-ring { display: none; }
html[data-preloader="reduced"] .pl-trail {
    fill-opacity: 1;
    stroke-opacity: 0;
    stroke-dashoffset: 0;
    animation: none;
}
html[data-preloader="reduced"] .preloader-falcon {
    transform: none;
    animation: none;
    filter: drop-shadow(0 0 5px currentColor);
}

/* Defense-in-depth: if JS never ran (no data-preloader attr) and the
   user prefers reduced motion, fall back to a static falcon too. */
@media (prefers-reduced-motion: reduce) {
    html:not([data-preloader]) .pl-spark,
    html:not([data-preloader]) .preloader-flash,
    html:not([data-preloader]) .preloader-ring { display: none; }
    html:not([data-preloader]) .pl-trail {
        fill-opacity: 1;
        stroke-opacity: 0;
        stroke-dashoffset: 0;
        animation: none;
    }
    html:not([data-preloader]) .preloader-falcon {
        transform: none;
        animation: none;
    }
}