/* Indeterminate line loader for corporate_new.
   A brand-gradient segment sweeps right-to-left (RTL) while a navigation or AJAX
   action is in flight. Toggled by the `is-loading` class on <body>, set by
   assets/js/page-loader.js (which also backs the legacy showLoader/hideLoader
   call sites). Two placements, because the header restructures on mobile:
     - Desktop: the seam between the white header card and the nav strip (#page-loader),
       layered BELOW the categories button so the sweep passes behind it.
     - Mobile: the divider line under the logo row (.logo-section::after).
   Colors come from CSS vars set per-template in index.php's inline <style>. */

@keyframes page-loader-sweep {
    /* Segment is 50% wide: translateX(200%) parks it fully off the right edge,
       translateX(-100%) fully off the left — a clean right-to-left sweep. */
    from { transform: translateX(200%); }
    to   { transform: translateX(-100%); }
}

/* --- Desktop: seam below the white card --- */
#page-loader {
    position: absolute;
    top: 112px;   /* 16px container padding-top + 96px card height = card bottom */
    left: 60px;   /* match card inset (.menu-container side padding) */
    right: 60px;
    height: 3px;
    z-index: 50;  /* below .header-buttons-strip (100) so the button stays on top */
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#page-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--page-loader-c1, #2020b3) 25%,
        var(--page-loader-c2, #4138f2) 50%,
        var(--page-loader-c3, #E3BC7F) 75%,
        transparent 100%
    );
    box-shadow: 0 0 8px var(--page-loader-c2, #4138f2);
    animation: page-loader-sweep 1.1s ease-in-out infinite;
}

body.is-loading #page-loader {
    opacity: 1;
}

/* --- Mobile: the divider under the logo row --- */
@media (max-width: 768px) {
    /* The header stacks into rows; the seam is the divider under the logo row.
       --header-h-red is that row's height (set at runtime by
       header-mobile-sticky.js). Reuse the same #page-loader, just reposition it
       full-width onto that seam and lift it above the white card (z 1000) so the
       sweep is visible on top. .logo-section is left untouched on purpose:
       it's a flex item with flex-basis:0, so overflow:hidden there would
       collapse the logo row. */
    #page-loader {
        top: calc(var(--header-h-red, 64px) - 3px);
        left: 0;
        right: 0;
        z-index: 1001;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-loader::before {
        animation-duration: 1.8s;
        animation-timing-function: linear;
    }
}
