/*
 * ARHTRD Child Theme — assets/css/preloader.css
 *
 * Full-screen branded preloader overlay.
 * Shown on the first page view of each browser session.
 *
 * Layout (top → bottom, centred):
 *   1. Background layer — tool/product image + 82% black overlay
 *   2. Brand block      — logo + site name, fade-up entrance
 *   3. Divider          — thin amber hairline, scale-in
 *   4. Animation block  — SVG precision reticle (+ optional video overlay)
 *   5. Progress bar     — amber 1 px line at overlay bottom
 *
 * Animation sequence completes at ≈ 1.15 s.
 * preloader.js MIN_MS = 1 600 ms gives 450 ms of settled dwell time.
 *
 * All values that reference brand colours use the same tokens as home.css:
 *   dark bg  #0D0F16   (--home-dark-deep)
 *   amber    #D4A017   (--home-accent)
 *
 * @package ARHTRD
 */


/* ==========================================================================
   1. SESSION SKIP
   Inline <script> in wp_head (priority 1) adds .arhtrd-pl-skip to <html>
   before the first paint when the session flag is already set.
   This CSS rule hides the overlay node before it ever appears on screen.
   ========================================================================== */

.arhtrd-pl-skip .arhtrd-preloader {
    display: none !important;
}


/* ==========================================================================
   2. SCROLL LOCK
   Added to <body> by the wp_body_open inline script on first visits.
   Removed by preloader.js once the overlay exits the DOM.
   ========================================================================== */

body.preloader-active {
    overflow: hidden;
}


/* ==========================================================================
   3. OVERLAY SHELL
   ========================================================================== */

/*
 * CSS-only safety exit — fires if preloader.js never loads or executes.
 * After 5 s the overlay fades out and becomes non-interactive regardless
 * of JavaScript. When JS does run it removes the element from the DOM
 * well before 5 s, making this animation a no-op in the normal path.
 *
 * The body.preloader-active scroll lock cannot be cleared by CSS alone,
 * but with the overlay gone (opacity:0, visibility:hidden, pointer-events:none)
 * the site is at least visually usable. JS handles the complete cleanup.
 */
@keyframes pl-force-exit {
    to {
        opacity:        0;
        visibility:     hidden;
        pointer-events: none;
    }
}

@keyframes pl-shell-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.arhtrd-preloader {
    position:         fixed;
    inset:            0;
    width:            100vw;
    min-height:       100vh;
    min-height:       100svh;
    z-index:          99999;
    background-color: #0D0F16;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    overflow:         hidden;      /* contain the bg image */

    opacity:     0;
    visibility:  visible;
    transition:  opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                 visibility 0s linear 0.7s;  /* snaps hidden after fade */
    will-change: opacity;

    /* CSS safety fallback — exits after 5 s if JS never ran */
    animation:   pl-shell-in 0.45s ease forwards,
                 pl-force-exit 0.5s ease 5s forwards;
}

@supports (height: 100dvh) {
    .arhtrd-preloader {
        min-height: 100dvh;
    }
}

.arhtrd-preloader.is-exiting {
    opacity:        0;
    visibility:     hidden;   /* belt-and-suspenders over opacity alone */
    pointer-events: none;
}

.arhtrd-preloader.is-exiting .preloader-inner {
    opacity:   0;
    transform: translateY(-6px) scale(0.985);
}

.arhtrd-preloader.is-exiting .preloader-bg__video,
.arhtrd-preloader.is-exiting .preloader-bg__img,
.arhtrd-preloader.is-exiting .preloader-bg__overlay {
    transform: scale(1.015);
}


/* ==========================================================================
   4. BACKGROUND LAYER
   Stacking order inside .preloader-bg (bottom → top):
     z-index 0 — Background video  (.preloader-bg__video)
     z-index 1 — Background image  (.preloader-bg__img)   ← static fallback
     z-index 2 — Dark overlay      (.preloader-bg__overlay)
   Inner stage (.preloader-inner) sits at z-index 2 on the parent stacking
   context — above all background layers.

   The overlay is rgba(0,0,0,0.80) — 80% black — ensuring the logo and
   site name remain clearly legible regardless of which bg layer shows.
   ========================================================================== */

.preloader-bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}

/* ---- Background video — full-screen sparks loop ---- */

.preloader-bg__video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;          /* fills the overlay, safe crops on any ratio */
    object-position: center center;
    display:         block;
    z-index:         0;

    /* Fade in so there is no hard-pop; matches the overlay's own fade-in pace */
    opacity:    0;
    animation:  pl-bg-in 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0s both;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

/* ---- Background image — shows beneath video; permanent fallback ---- */

.preloader-bg__img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center 40%; /* keep tool subject above centreline */
    display:         block;
    z-index:         1;

    /* Fade in so the bg doesn't hard-pop before the overlay establishes */
    opacity:   0;
    animation: pl-bg-in 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0s both;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Dark overlay — always present, keeps content readable ---- */

.preloader-bg__overlay {
    position:   absolute;
    inset:      0;
    z-index:    2;
    background: rgba(0, 0, 0, 0.80);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pl-bg-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


/* ==========================================================================
   5. INNER STAGE — sits above background (z-index: 2)
   ========================================================================== */

.preloader-inner {
    position:         relative;
    z-index:          2;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    opacity:          1;
    transform:        translateY(0) scale(1);
    transition:       opacity 0.45s ease,
                      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change:      opacity, transform;
}


/* ==========================================================================
   6. BRAND BLOCK (logo + company name)
   Fades up from 10 px below its resting position.
   Delay 0.10 s — gives the overlay a single frame to settle before content enters.
   ========================================================================== */

.preloader-brand {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    margin-bottom:  22px;

    opacity:   0;
    animation: pl-brand-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.10s both;
}

@keyframes pl-brand-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Logo image */
.preloader-logo {
    width:       60px;
    height:      60px;
    object-fit:  contain;
    object-position: center;
    display:     block;
    /* Slight filter to ensure white/light logo is legible on any bg colour */
    filter:      drop-shadow(0 0 12px rgba(0, 0, 0, 0.6));
}

/* Hide if src is empty or image fails to load (JS sets opacity:0) */
.preloader-logo.is-hidden {
    display: none;
}

/* Company / site name */
.preloader-name {
    font-family:     inherit;           /* inherits GeneratePress body font */
    font-size:       9px;
    font-weight:     600;
    letter-spacing:  0.50em;
    text-transform:  uppercase;
    color:           rgba(255, 255, 255, 0.75);
    line-height:     1;
    text-indent:     0.50em;           /* optical compensation for letter-spacing */
    white-space:     nowrap;
}


/* ==========================================================================
   7. DIVIDER — amber hairline separator between brand and animation
   Scales in from the centre on its own axis.
   ========================================================================== */

.preloader-divider {
    width:            36px;
    height:           1px;
    background:       linear-gradient(
                          90deg,
                          transparent   0%,
                          #D4A017       30%,
                          #D4A017       70%,
                          transparent   100%
                      );
    margin-bottom:    22px;
    transform-origin: center;

    opacity:   0;
    animation: pl-divider-in 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s both;
}

@keyframes pl-divider-in {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}


/* ==========================================================================
   8. ANIMATION BLOCK — SVG precision reticle + optional video overlay
   ========================================================================== */

.preloader-anim {
    position: relative;
    width:    112px;
    height:   112px;
}

/* ---- Optional video element ---- */

.preloader-video {
    position:    absolute;
    inset:       0;
    width:       100%;
    height:      100%;
    object-fit:  contain;
    display:     block;
    z-index:     2;
    opacity:     0;                    /* JS sets .is-ready once canplay fires */
    transition:  opacity 0.4s ease;
}

.preloader-video.is-ready {
    opacity: 1;
}

/* ---- SVG precision reticle ---- */

.preloader-mark {
    position:  absolute;
    inset:     0;
    width:     100%;
    height:    100%;
    color:     #FFFFFF;
    overflow:  visible;
    display:   block;
    z-index:   1;
}

/* When video is shown, SVG becomes the background layer — stays visible
   at low opacity as a subtle frame */
.preloader-video.is-ready ~ .preloader-mark {
    opacity: 0.25;
}


/* --------------------------------------------------------------------------
   SVG element animations — unchanged from original design
   -------------------------------------------------------------------------- */

/* Outer decorative ring */
.pl-ring {
    opacity:   0;
    animation: pl-ring-in 0.7s ease 0.05s both;
}

@keyframes pl-ring-in {
    to { opacity: 0.1; }
}

/* Corner brackets — slide inward, 70 ms stagger */

.pl-bracket {
    transform-box:    fill-box;
    transform-origin: center;
}

.pl-tl { animation: pl-tl-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both; }
.pl-tr { animation: pl-tr-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.22s both; }
.pl-br { animation: pl-br-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.29s both; }
.pl-bl { animation: pl-bl-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.36s both; }

@keyframes pl-tl-in {
    from { transform: translate(-10px, -10px); opacity: 0; }
    to   { transform: translate(0, 0);         opacity: 1; }
}
@keyframes pl-tr-in {
    from { transform: translate(10px, -10px); opacity: 0; }
    to   { transform: translate(0, 0);        opacity: 1; }
}
@keyframes pl-br-in {
    from { transform: translate(10px, 10px); opacity: 0; }
    to   { transform: translate(0, 0);       opacity: 1; }
}
@keyframes pl-bl-in {
    from { transform: translate(-10px, 10px); opacity: 0; }
    to   { transform: translate(0, 0);        opacity: 1; }
}

/* Inner crosshair tick marks */
.pl-tick {
    opacity:   0;
    animation: pl-tick-in 0.35s ease 0.60s both;
}

@keyframes pl-tick-in {
    to { opacity: 0.3; }
}

/* Centre amber dot — "lock confirmed" */
.pl-dot {
    transform-box:    fill-box;
    transform-origin: center;
    opacity:          0;
    transform:        scale(0);
    animation:        pl-dot-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s both;
}

@keyframes pl-dot-in {
    to { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   9. PROGRESS BAR — 1 px amber line along the bottom of the overlay
   Simulates load progress — never reaches 100% (dismissed dynamically).
   ========================================================================== */

.preloader-progress {
    position:   absolute;
    bottom:     0;
    left:       0;
    height:     1px;
    width:      0%;
    background: #D4A017;
    z-index:    3;
    animation:  pl-progress 2.4s cubic-bezier(0.4, 0, 0.15, 1) 0.2s forwards;
}

@keyframes pl-progress {
    0%   { width: 0%; }
    50%  { width: 65%; }
    80%  { width: 88%; }
    100% { width: 96%; }
}

.arhtrd-preloader.is-exiting .preloader-progress {
    opacity:    0;
    transition: opacity 0.2s ease;
}


/* ==========================================================================
   10. REDUCED MOTION
   No keyframe animations. All elements appear immediately in their final state.
   Overlay exits with a fast 0.25 s opacity transition only.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    /* Background video: hidden at CSS level — JS also pauses it */
    .preloader-bg__video {
        display: none;
    }

    .preloader-bg__img {
        animation: none;
        opacity:   1;
    }

    .preloader-brand {
        animation: none;
        opacity:   1;
        transform: none;
    }

    .preloader-divider {
        animation: none;
        opacity:   1;
        transform: none;
    }

    .pl-ring {
        animation: none;
        opacity:   0.1;
    }

    .pl-bracket {
        animation: none;
        opacity:   1;
        transform: translate(0, 0);
    }

    .pl-tick {
        animation: none;
        opacity:   0.3;
    }

    .pl-dot {
        animation: none;
        opacity:   1;
        transform: scale(1);
    }

    .preloader-progress {
        display: none;
    }

    .arhtrd-preloader {
        opacity: 1;
        animation: pl-force-exit 0.5s ease 5s forwards;
        transition-duration: 0.25s;
    }

    .preloader-inner {
        transition-duration: 0.25s;
    }
}
