/* ============================================================
   BM Coming Soon — Scoped CSS
   ALL selectors are prefixed with .bm-cs-* so nothing leaks
   to headers, footers, or other page sections.
   ============================================================ */

/* Google Fonts — Bebas Neue + DM Sans + Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&family=Playfair+Display:ital@1&display=swap');

/* ── Section shell ── */
.bm-cs-section {
    /* CSS custom properties — overridden inline by shortcode */
    --bm-cs-bg:     #0d0d0d;
    --bm-cs-accent: #c8772a;
    --bm-cs-text:   #ffffff;
    --bm-cs-mh:     100vh;

    /* layout */
    position: relative;
    width: 100%;
    min-height: var(--bm-cs-mh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(60px, 10vw, 120px) clamp(20px, 6vw, 80px);

    /* reset any theme interference */
    box-sizing: border-box;
    margin: 0;
    border: none;
    outline: none;
}

/* ── Atmospheric background ── */
.bm-cs-bg-layer {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 55% at 18% 85%,  color-mix(in srgb, var(--bm-cs-accent) 22%, transparent) 0%, transparent 62%),
        radial-gradient(ellipse 55% 45% at 82% 18%,  color-mix(in srgb, var(--bm-cs-accent) 14%, transparent) 0%, transparent 56%),
        var(--bm-cs-bg);
    z-index: 0;
    pointer-events: none;
}

/* Grain texture overlay */
.bm-cs-bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* ── Diagonal decorative stripe ── */
.bm-cs-stripe {
    position: absolute;
    top: -15%; left: -8%;
    width: 50%; height: 140%;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--bm-cs-accent) 7%, transparent) 0%,
        transparent 55%
    );
    transform: skewX(-7deg);
    z-index: 0;
    pointer-events: none;
}

/* ── Animated dot grids ── */
.bm-cs-dots {
    position: absolute;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--bm-cs-accent) 45%, transparent) 1.5px,
        transparent 1.5px
    );
    background-size: 18px 18px;
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;
    animation: bm-cs-float 9s ease-in-out infinite;
}
.bm-cs-dots--tr { top: 8%;   right: 5%;  animation-delay: 0s; }
.bm-cs-dots--bl { bottom: 6%; left: 4%;  animation-delay: -4.5s; width: 130px; height: 130px; opacity: 0.28; }

@keyframes bm-cs-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-16px); }
}

/* ── Inner content container ── */
.bm-cs-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 780px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ── Label pill ── */
.bm-cs-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--bm-cs-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--bm-cs-accent) 38%, transparent);
    border-radius: 999px;
    padding: 6px 18px 6px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(.68rem, 1.2vw, .78rem);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--bm-cs-accent) 100%, white 20%);
    margin-bottom: clamp(20px, 3vw, 32px);
    animation: bm-cs-fade-up .8s ease both;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-cs-pill__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bm-cs-accent);
    animation: bm-cs-pulse 2.2s ease-in-out infinite;
}

@keyframes bm-cs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .35; transform: scale(1.6); }
}

/* ── Headline ── */
.bm-cs-headline {
    /* full reset so theme h2 styles don't interfere */
    all: unset;
    display: block;

    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(56px, 11vw, 128px) !important;
    line-height: .9 !important;
    letter-spacing: .03em !important;
    color: var(--bm-cs-text) !important;
    margin-bottom: clamp(18px, 2.5vw, 28px) !important;
    word-break: break-word;
    animation: bm-cs-fade-up .9s .1s ease both;
}

/* ── Sub-headline ── */
.bm-cs-sub {
    /* reset */
    all: unset;
    display: block;

    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: clamp(.95rem, 2vw, 1.3rem) !important;
    color: color-mix(in srgb, var(--bm-cs-text) 72%, transparent) !important;
    margin-bottom: clamp(16px, 2vw, 26px) !important;
    line-height: 1.55 !important;
    max-width: 560px;
    animation: bm-cs-fade-up .9s .18s ease both;
}

/* ── Body text ── */
.bm-cs-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(.88rem, 1.6vw, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: color-mix(in srgb, var(--bm-cs-text) 55%, transparent);
    max-width: 540px;
    animation: bm-cs-fade-up .9s .26s ease both;
}
.bm-cs-body a {
    color: var(--bm-cs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bm-cs-body strong { font-weight: 500; color: color-mix(in srgb, var(--bm-cs-text) 85%, transparent); }

/* ── Bottom accent divider ── */
.bm-cs-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--bm-cs-accent) 35%,
        color-mix(in srgb, var(--bm-cs-accent) 70%, white) 60%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
}

/* ── Shared entrance animation ── */
@keyframes bm-cs-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive tweaks ── */
@media (max-width: 600px) {
    .bm-cs-section {
        padding: 60px 20px;
    }
    .bm-cs-dots--tr { width: 120px; height: 120px; }
    .bm-cs-dots--bl { display: none; }
}

@media (max-width: 380px) {
    .bm-cs-pill { font-size: .65rem; padding: 5px 13px 5px 11px; }
}