/* ==========================================================================
   Layout: preloader & page transitions  (partials/site/preloader.blade.php)
   --------------------------------------------------------------------------
   The white "wall" is the huge spread shadow of .preloader__window, a pill
   (the logo's م loop) in the logo's 7:4 ratio: 0×0 = solid white,
   260vmax = the page shows through.

   Everything is timed in CSS so it starts on the first paint and never
   waits for JavaScript or slow assets (js/modules/preloader.js only removes
   the classes afterwards and handles link clicks):
     .has-preloader   intro — the logo draws (≈1.2s, inside the SVG), then
                      the pill opens at 1.25s; overlay gone by 2.2s
     .has-transition  arriving on a later page — the pill opens at once
                      (0.5s); overlay gone by 0.6s
     .is-leaving      a link was clicked — the pill closes to white (0.25s)
   ========================================================================== */

.preloader { display: none; }

.has-preloader .preloader,
.has-transition .preloader,
.is-leaving .preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
}
.has-preloader .preloader  { animation: preloader-hide 0s linear 2.2s forwards; }
.has-transition .preloader { animation: preloader-hide 0s linear 0.6s forwards; }
.is-leaving .preloader     { pointer-events: auto; animation: none; visibility: visible; }   /* no double clicks while leaving */

/* The window */
.preloader__window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: var(--r-pill);
    box-shadow: 0 0 0 200vmax var(--paper);
    transform: translate(-50%, -50%);
}

/* What sits on the white: the full logo (intro only) */
.preloader__logo { position: relative; width: min(420px, 72vw); height: auto; display: none; }
.preloader__mark { display: none; }
.has-preloader .preloader__logo { display: block; animation: preloader-logo-out 0.35s var(--ease-out) 1.2s forwards; }

/* Opening */
.has-preloader .preloader__window  { animation: preloader-open 0.9s cubic-bezier(0.7, 0, 0.2, 1) 1.25s forwards; }
.has-transition .preloader__window { animation: preloader-open 0.5s cubic-bezier(0.6, 0, 0.2, 1) 0.05s forwards; }

/* Leaving: the pill closes from fully open to white */
.is-leaving .preloader__window { animation: preloader-close 0.25s cubic-bezier(0.6, 0, 0.4, 1) forwards; }

@keyframes preloader-open {
    from { width: 0; height: 0; }
    to   { width: 260vmax; height: calc(260vmax * 4 / 7); }
}
@keyframes preloader-close {
    from { width: 260vmax; height: calc(260vmax * 4 / 7); }
    to   { width: 0; height: 0; }
}
@keyframes preloader-logo-out { to { opacity: 0; transform: scale(1.08); } }
@keyframes preloader-hide { to { visibility: hidden; } }