/*===================================================
    Preloader artwork
    ---------------------------------------------------
    Styles only. The theme's exit timeline in gsap-animation.js owns
    .loader-wrap, #svg, .loader-wrap-heading, .loading-text, .loading-bar and
    .loading-counter - none of those are repositioned here in a way that
    would fight it. Everything new lives inside .bh-loader-art, which rides
    out with the overlay.
====================================================*/

.loader-wrap {
    background: var(--dl-bg-dark, #222831);
}

.loader-wrap svg path#svg {
    fill: var(--dl-bg-dark, #222831);
}

/* ---------- Artboard frame ---------- */
.bh-loader-art {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 42px;
    pointer-events: none;
    z-index: 2;
}

.bh-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--dl-primary-color, #29a587);
    background: var(--dl-bg-dark, #222831);
    opacity: 0;
    animation: bh-handle-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.bh-handle.tl { top: 7vh; left: 7vw; animation-delay: 0.05s; }
.bh-handle.tr { top: 7vh; right: 7vw; animation-delay: 0.14s; }
.bh-handle.bl { bottom: 7vh; left: 7vw; animation-delay: 0.23s; }
.bh-handle.br { bottom: 7vh; right: 7vw; animation-delay: 0.32s; }

@keyframes bh-handle-in {
    from { opacity: 0; transform: scale(0.2); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------- Stage ---------- */
.bh-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- The wordmark drawing itself ---------- */
/* The theme sets .loader-wrap svg { position:absolute; width:100vw; height:110vh }
   for the curtain path, and that rule also catches this one. Matching its
   specificity and resetting is what keeps the wordmark at its own size. */
.loader-wrap svg.bh-wordmark {
    position: static;
    width: min(460px, 62vw);
    height: auto;
    overflow: visible;
    fill: none;
}

.bh-wordmark path {
    fill: var(--dl-primary-color, #29a587);
    stroke: var(--dl-primary-color, #29a587);
    stroke-width: 0.6;
    stroke-linejoin: round;
    /* Letterforms are small closed paths; 420 comfortably exceeds the longest
       perimeter here, so one value covers every glyph without measuring each. */
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    fill-opacity: 0;
    animation:
        bh-draw 1.15s cubic-bezier(0.65, 0, 0.35, 1) forwards,
        bh-fill 0.6s ease forwards;
    animation-delay:
        calc(0.25s + var(--i) * 0.1s),
        calc(0.95s + var(--i) * 0.1s);
}

@keyframes bh-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes bh-fill {
    to { fill-opacity: 1; }
}

/* ---------- Measurement guides ---------- */
.bh-measure {
    position: relative;
    width: min(460px, 62vw);
    height: 22px;
    margin-bottom: 16px;
    opacity: 0;
    animation: bh-fade-in 0.5s ease 0.85s forwards;
}

.bh-measure::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}

/* End ticks, the way a design tool caps a dimension line. */
.bh-measure::after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    left: 0;
    right: 0;
    height: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.bh-measure span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--dl-bg-dark, #222831);
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

.bh-baseline {
    width: min(460px, 62vw);
    height: 1px;
    margin-top: 18px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--dl-primary-color, #29a587),
        transparent
    );
    transform: scaleX(0);
    animation: bh-baseline-in 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.7s forwards;
}

@keyframes bh-baseline-in {
    to { transform: scaleX(1); }
}

/* ---------- Palette loading in ---------- */
.bh-swatches {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bh-swatches li {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: var(--c);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset;
    opacity: 0;
    transform: translateY(14px);
    animation: bh-swatch-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(1.25s + var(--i) * 0.08s);
}

@keyframes bh-swatch-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bh-fade-in {
    to { opacity: 1; }
}

/* ---------- Restyling the theme's own loader elements ---------- */
.loader-wrap-heading {
    z-index: 3;
}

.loader-wrap-heading .loading-text {
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.loader-wrap-heading .loading-bar {
    background: var(--dl-primary-color, #29a587);
}

/* The counter reads as a selection badge from a design tool. */
.loader-wrap .loading-counter {
    background: var(--dl-primary-color, #29a587);
    color: #ffffff;
    padding: 3px 11px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    z-index: 3;
}

@media (max-width: 767px) {
    .bh-loader-art { gap: 30px; }
    .bh-swatches li { width: 24px; height: 24px; }
    .bh-handle.tl, .bh-handle.tr { top: 5vh; }
    .bh-handle.bl, .bh-handle.br { bottom: 5vh; }
}

/* A visitor who asked for less motion gets the composed result immediately,
   with no drawing, snapping or staggering. */
@media (prefers-reduced-motion: reduce) {
    .bh-wordmark path,
    .bh-handle,
    .bh-measure,
    .bh-baseline,
    .bh-swatches li {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

/* ---------- Layout-shift containment ---------- */
/* The exit animation morphs the curtain SVG's path `d` attribute. Chrome
   recorded that as a layout shift of a viewport-sized element, which alone
   produced a desktop CLS of 1.004 - the full 25-point penalty - even though
   nothing the visitor cares about actually moved.
   Containment keeps the morph from being measured as page-level movement,
   and promoting the overlay to its own layer stops it affecting the content
   underneath. */
.loader-wrap {
    contain: layout paint;
    will-change: transform;
}

.loader-wrap svg {
    contain: strict;
    will-change: contents;
}