/* ============================================================================
   home_preview.css — /preview/home ONLY: full-bleed moving hero backdrop.
   Loaded after home.css. The live homepage does not load this file.
   Drop real drone footage at static/video/hero-drone.mp4 and the route swaps
   the panning photo for the video automatically.
   ========================================================================== */

.bp-hero--media {
    background: var(--ba-ink);
    min-height: 92vh;
    overflow: hidden;
    position: relative;
}

.bp-hero-media {
    inset: 0;
    position: absolute;
}

/* Ken Burns: oversized layer drifting left -> right with a gentle zoom.
   Very slow (75s) so it reads as aerial drift, not a slideshow. */
.bp-hero-pan {
    animation: bp-hero-drift 75s ease-in-out infinite alternate;
    background-position: center 38%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: -15%;
    position: absolute;
    top: 0;
    transform-origin: center;
    width: 130%;
    will-change: transform;
}

@keyframes bp-hero-drift {
    from { transform: translateX(0) scale(1.05); }
    to   { transform: translateX(-10%) scale(1.14); }
}

.bp-hero-video {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Scrim: navy, heavier on the left where the copy sits. */
.bp-hero-scrim {
    background:
        linear-gradient(90deg, rgba(8, 17, 32, 0.86) 0%, rgba(8, 17, 32, 0.62) 44%, rgba(8, 17, 32, 0.28) 100%),
        linear-gradient(180deg, rgba(8, 17, 32, 0.55) 0%, rgba(8, 17, 32, 0.10) 30%, rgba(8, 17, 32, 0.55) 100%);
    inset: 0;
    position: absolute;
}

.bp-hero-grid--media {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    z-index: 2;
}

.bp-hero-copy--light .bp-hero-title { color: #ffffff; }
.bp-hero-copy--light .ba-eyebrow { color: #d7b06a; }
.bp-hero-copy--light .bp-hero-lede { color: rgba(255, 255, 255, 0.85); }

.bp-chip--dark {
    background: rgba(8, 17, 32, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.92);
}

.bp-button-gold {
    background: var(--ba-gold);
    box-shadow: 0 10px 30px rgba(201, 151, 61, 0.35);
    color: var(--ba-ink);
}

.bp-button-gold:hover {
    background: #d7a747;
    box-shadow: 0 16px 40px rgba(201, 151, 61, 0.45);
    color: var(--ba-ink);
}

.bp-button-ghost--dark {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.bp-button-ghost--dark:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

@media (max-width: 640px) {
    .bp-hero--media { min-height: 78vh; }
}

@media (prefers-reduced-motion: reduce) {
    .bp-hero-pan { animation: none; transform: translateX(-5%) scale(1.08); }
}


/* ─── Daylight theme: light wash, navy copy (closer to the live site) ──── */

.bp-hero--light .bp-hero-scrim {
    /* Wash only the text zone on the left; the photo stays full-color on the
       right (the previous full-page wash read as washed out). */
    background:
        linear-gradient(90deg, rgba(248, 250, 252, 0.90) 0%, rgba(248, 250, 252, 0.62) 34%, rgba(248, 250, 252, 0.08) 62%, rgba(248, 250, 252, 0) 78%),
        linear-gradient(180deg, rgba(248, 250, 252, 0) 78%, rgba(248, 250, 252, 0.25) 100%);
}

.bp-hero--light .bp-hero-pan {
    filter: saturate(1.1) contrast(1.04);
}

.bp-hero-copy--ink .bp-hero-title { color: var(--ba-ink); }
.bp-hero-copy--ink .ba-eyebrow { color: var(--ba-blue); }
.bp-hero-copy--ink .bp-hero-lede { color: #334155; }


/* ─── Variant switcher (preview-only chrome) ─────────────────────────── */

.bp-variant-bar {
    align-items: center;
    background: rgba(8, 17, 32, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    bottom: 18px;
    box-shadow: 0 10px 30px rgba(11, 25, 41, 0.35);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    left: 50%;
    padding: 8px 12px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 10001;
}

.bp-variant-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
    padding: 0 4px;
}

.bp-variant-pill {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.bp-variant-pill:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.bp-variant-pill.is-active {
    background: var(--ba-gold);
    border-color: var(--ba-gold);
    color: var(--ba-ink);
}

@media (max-width: 640px) {
    .bp-variant-bar { max-width: 94vw; }
}