/* ============================================================
   BTE PRELOADER — opening animation sequence
   Stage 1: blank navy hex background fades in
   Stage 2: BTE logo fades/scales in, centred
   Stage 3: logo travels to its real header position (top-left)
   Stage 4: the whole mask (bg + logo + text) is wiped away
             diagonally right-to-left, revealing the real page
             that has been rendering underneath the entire time
   ============================================================ */

body.bte-loading {
    overflow: hidden;
}

.bte-preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader, 9999);
    /* No background here — the mask below provides the only
       visible surface, so when its clip-path retreats there is
       nothing left covering the real page. */
    pointer-events: none;
}

/* ---- Mask: this single element IS the preloader's visible surface.
   Its clip-path is animated via GSAP (matching the proven technique
   used elsewhere on this site, e.g. the Why Choose Us section) rather
   than a native CSS transition — GSAP's own ticker reliably drives
   clip-path animation, whereas plain CSS transitions on clip-path
   were found not to fire transition events at all on this element. ---- */
.bte-preloader__mask {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--bte-overlay-navy-rgb, 7, 9, 58));
    overflow: hidden;
    pointer-events: auto;
    will-change: clip-path;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ---- Hex triangle background ---- */
/* Triangle texture background — restored to the same photographic
   image used elsewhere on the site (e.g. Why Choose Us). A flat SVG
   triangle pattern is layered underneath as the background-color
   fallback area, so if the photo is slow to load there's still a
   instant navy/triangle base visible, then the photo fades on top
   once it's ready. */
.bte-preloader__hex-bg {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--bte-overlay-navy-rgb, 7, 9, 58));
    background-image:
        linear-gradient( rgba(var(--bte-overlay-navy-rgb, 7, 9, 58), 0.55), rgba(var(--bte-overlay-navy-rgb, 7, 9, 58), 0.78) ),
        var(--bte-overlay-bg-url, url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: bte-preloader-bg-in 0.5s ease forwards;
}

@keyframes bte-preloader-bg-in {
    to { opacity: 1; }
}

/* ---- Centred stage: logo + loading text + progress bar ---- */
.bte-preloader__stage {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
}

.bte-preloader__stage > * {
    flex-shrink: 0;
}

/* Logo wrapper — this is what gets transformed to travel to the
   header's real logo position. Positioned via JS using FLIP technique
   (measures the real header logo's rect and animates to match it).
   Stays fixed-position relative to the viewport once travelling
   starts, so it visually lands exactly on the real header logo
   regardless of where it sits inside the mask. */
.bte-preloader__logo-wrap {
    position: relative;
    z-index: 3;
    /* 2026-07-22 — was a fade/scale reveal that fired right before the FLIP
       travel and read as a position glitch/bounce. The logo now simply
       appears with the loading screen (no separate reveal); the ONLY motion
       is the smooth travel up-left to the header. */
    opacity: 1;
    transform: none;
    will-change: transform;
}

.bte-preloader__logo-wrap img,
.bte-preloader__logo-wrap svg {
    height: 64px;
    width: auto;
    display: block;
}

@keyframes bte-preloader-logo-in {
    to { opacity: 1; }
}

@keyframes bte-preloader-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.bte-preloader__logo-text {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--bte-white);
    letter-spacing: 0.02em;
}

/* Fades in once, then pulses continuously — the pulsing that used to
   live on the (now removed) red progress bar moved here instead, per
   client request (2026-07-12): remove the red line and the logo-area
   pulsing effect, and have the "Loading Please Wait…" text pulse in
   its place. */
.bte-preloader__text {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    opacity: 0;
    animation:
        bte-preloader-text-in 0.5s 0.8s ease forwards,
        bte-preloader-pulse 1.6s 1.3s ease-in-out infinite;
}

@keyframes bte-preloader-text-in {
    to { opacity: 1; }
}

/* Logo wrapper is switched to position:fixed directly via inline
   style by JS once the FLIP travel measurement is taken (see
   bte-preloader.js) — no class-based state needed here. All
   animated properties (logo transform, text opacity, mask clip-path)
   are driven by a manual setInterval stepper in JS that writes inline
   styles directly each tick, since requestAnimationFrame, GSAP, and
   native CSS transitions were all found to be unreliable on this page
   under real load conditions. */

/* ---- Whole preloader removal ---- */
.bte-preloader.is-done {
    pointer-events: none;
}

/* ---- Reduced motion — skip straight to done ---- */
@media (prefers-reduced-motion: reduce) {
    .bte-preloader__hex-bg,
    .bte-preloader__logo-wrap,
    .bte-preloader__text {
        animation: none;
        opacity: 1;
        transform: none;
    }
}