/* Coming Soon Styles*/

:root {
    --bm-bg: #f0f2f4;
    --bm-bg-2: #e3e7eb;
    --bm-ink: #0e0f11;
    --bm-muted: #555;
    --bm-contrast: #fff;
    --bm-dark: #222;
    --bm-accent: #145481;
    /* brand accent */
    --bm-maxw: min(96rem, 92vw);
}

/* Page wrapper */
.bm-coming,
.bm-coming--hero-only {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--bm-ink);
    background: linear-gradient(135deg, var(--bm-bg) 0%, var(--bm-bg-2) 100%);
    display: grid;
}

/* Hero */
.bm-hero {
    position: relative;
    min-height: 72vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.bm-hero--full {
    min-height: 100vh;
}

.bm-hero_inner {
    width: 100%;
    max-width: var(--bm-maxw);
    padding: clamp(2rem, 5vw, 4rem) 1rem;
    text-align: center;
    transform: translateY(12px);
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
}

.bm-hero.is-in .bm-hero_inner {
    opacity: 1;
    transform: translateY(0);
}

.bm-hero_title {
    margin: 0 0 .25em;
    font-weight: 800;
    letter-spacing: .02em;
    font-size: clamp(2.5rem, 7.5vw, 5rem);
}

.bm-hero--full .bm-hero_title {
    font-size: clamp(2.5rem, 7.5vw, 5rem);
}

.bm-hero_lead {
    margin: 1rem auto 0;
    max-width: 70ch;
    color: var(--bm-muted);
    font-size: clamp(1rem, 1.7vw, 1.125rem);
}

/* Accent underline under headline */
.bm-hero_underline {
    display: block;
    width: clamp(140px, 22vw, 260px);
    height: 6px;
    margin: .6rem auto 0;
    position: relative;
    overflow: hidden;
    background: rgba(20, 84, 129, .25);
    border-radius: 3px;
}

.bm-hero_underline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bm-accent);
    transform: translateX(-100%);
    animation: bm-underline 1.4s ease .35s forwards;
}

@keyframes bm-underline {
    to {
        transform: translateX(0);
    }
}

/* CTA button (if used later) */
.bm-btn {
    display: inline-block;
    padding: .9rem 1.25rem;
    border-radius: .5rem;
    background: var(--bm-dark);
    color: var(--bm-contrast);
    text-decoration: none;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    will-change: transform;
}

.bm-btn:hover,
.bm-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    background: #1d1f22;
}

/* Hero decorative layers */
.bm-hero_overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 40%),
        radial-gradient(1200px 600px at 15% 20%, rgba(0, 0, 0, .10), transparent 60%);
    pointer-events: none;
}

.bm-hero_texture,
.bm-hero_dots {
    position: absolute;
    inset: -20%;
    pointer-events: none;
}

/* Moving concrete texture */
@keyframes bm-pan {
    0% {
        transform: translate3d(0, 0, 0) scale(1.05);
    }

    50% {
        transform: translate3d(-1.5%, -1.5%, 0) scale(1.08);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1.05);
    }
}

.bm-hero_texture {
    background:
        radial-gradient(1200px 600px at 10% 20%, rgba(0, 0, 0, .08), transparent 60%),
        radial-gradient(900px 550px at 80% 60%, rgba(0, 0, 0, .06), transparent 60%),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .02) 0 2px, transparent 2px 6px);
    mix-blend-mode: multiply;
    animation: bm-pan 18s ease-in-out infinite;
    opacity: .35;
}

/* Dotted overlay */
@keyframes bm-drift {
    0% {
        transform: translateY(0);
        opacity: .18;
    }

    50% {
        transform: translateY(-8px);
        opacity: .24;
    }

    100% {
        transform: translateY(0);
        opacity: .18;
    }
}

.bm-hero_dots {
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .15) 1px, transparent 1px);
    background-size: 18px 18px;
    animation: bm-drift 10s ease-in-out infinite;
}

/* SVG Skyline */
.bm-hero_svgwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 3rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
}

.bm-hero.is-in .bm-hero_svgwrap {
    opacity: 1;
    transform: translateY(0);
}

.bm-skyline {
    width: clamp(240px, 40vw, 520px);
    height: auto;
    display: block;
}

/* Lines & fills */
.bm-stroke {
    fill: none;
    stroke: #2e3338;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bm-fill {
    fill: #b6bbc2;
}

.bm-fill-accent {
    fill: var(--bm-accent);
}

/* Line draw */
.bm-draw {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: bm-draw 1.1s ease forwards;
}

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

/* Staggered build utilities */
.bm-stg-1 {
    animation-delay: 0.00s;
}

.bm-stg-2 {
    animation-delay: 0.10s;
}

.bm-stg-3 {
    animation-delay: 0.20s;
}

.bm-stg-4 {
    animation-delay: 0.30s;
}

.bm-stg-5 {
    animation-delay: 0.40s;
}

.bm-stg-6 {
    animation-delay: 0.50s;
}

.bm-stg-7 {
    animation-delay: 0.60s;
}

.bm-stg-8 {
    animation-delay: 0.70s;
}

.bm-stg-9 {
    animation-delay: 0.80s;
}

.bm-stg-10 {
    animation-delay: 0.90s;
}

.bm-stg-11 {
    animation-delay: 1.00s;
}

.bm-stg-12 {
    animation-delay: 1.10s;
}

.bm-stg-13 {
    animation-delay: 1.20s;
}

.bm-stg-14 {
    animation-delay: 1.30s;
}

.bm-stg-15 {
    animation-delay: 1.40s;
}

.bm-stg-16 {
    animation-delay: 1.50s;
}

.bm-stg-17 {
    animation-delay: 1.60s;
}

.bm-stg-18 {
    animation-delay: 1.70s;
}

.bm-stg-19 {
    animation-delay: 1.80s;
}

/* Fade + rise for buildings/payloads */
.bm-fade {
    opacity: 0;
    transform: translateY(6px);
    animation: bm-fade-up .6s ease forwards;
}

@keyframes bm-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Crane motion */
.bm-crane {
    transform-origin: center bottom;
    animation: bm-sway 6s ease-in-out infinite alternate;
}

.bm-crane-b {
    animation-delay: .6s;
}

@keyframes bm-sway {
    0% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(1deg);
    }
}

.bm-payload {
    transform-origin: 280px 160px;
    animation: bm-bob 3.2s ease-in-out infinite;
}

@keyframes bm-bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

.bm-beacon {
    fill: var(--bm-accent);
    animation: bm-blink 1.2s steps(2, end) infinite;
}

@keyframes bm-blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }

    100% {
        opacity: 1;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [class*="bm-stg-"] {
        animation-delay: 0s !important;
    }

    .bm-fade,
    .bm-draw,
    .bm-crane,
    .bm-payload,
    .bm-beacon,
    .bm-hero_underline::after,
    .bm-hero_texture,
    .bm-hero_dots {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Small viewport tweaks */
@media (max-width: 720px) {
    .bm-hero_lead {
        max-width: 62ch;
    }
}