/* ═══════════════════════════════════════════════════════════════════
   BLADE BOSS - FREE SIGNUP MODAL
   The one-field conversion tool.

   Feel target: modern iOS sheet. Frosted overlay, spring entrance,
   drawn checkmarks, real press physics. Desktop gets a centered card;
   under 560px it becomes a bottom sheet, because 85% of traffic is a
   thumb on a phone and sheets are what thumbs expect.

   Every var() here is verified against design-tokens.css. The spring
   curves (--ease-spring, --ease-out-back) have existed in the tokens
   since day one and were never used anywhere. They are used now.
   ═══════════════════════════════════════════════════════════════════ */


/* ── OVERLAY - the frost ──────────────────────────────────────────── */

.bbfs-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: color-mix(in srgb, var(--bb-navy) 62%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.bbfs-overlay.is-open { opacity: 1; }

/* ── THE HIDDEN ATTRIBUTE MUST WIN ───────────────────────────────
   [hidden] gets display:none from the UA stylesheet, but ANY author
   display declaration overrides it - and .bbfs-modal sets display:flex.
   Without this rule the modal renders open on every page load, centred
   and above everything, silently stealing clicks from the page behind it.

   Attribute selector raises specificity to 0,2,0 so it beats the class
   rule without needing !important. */
.bbfs-overlay[hidden],
.bbfs-modal[hidden] {
    display: none;
}

/* Older browsers without color-mix get a plain dim - never a broken one */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .bbfs-overlay { background: rgba(10, 22, 40, 0.72); }
}


/* ── MODAL SHELL ──────────────────────────────────────────────────── */

.bbfs-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    /* The shell never blocks scroll-through clicks on its padding -
       only the card is interactive. Overlay handles dismissal. */
    pointer-events: none;
}

.bbfs-card {
    pointer-events: auto;
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--space-8) var(--space-6) var(--space-6);
    overflow: hidden;

    background:
        linear-gradient(168deg,
            color-mix(in srgb, var(--bb-navy-light) 88%, var(--bb-white) 12%) 0%,
            var(--bb-navy) 58%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-2xl);

    /* Layered depth: tight contact shadow, mid ambient, wide soft drop.
       One big blur reads flat; three layers read like material. */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.28),
        0 12px 28px -8px rgba(0, 0, 0, 0.42),
        0 40px 90px -24px rgba(0, 0, 0, 0.55);

    /* Entrance start state */
    opacity: 0;
    transform: scale(0.94) translateY(18px);
    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform 460ms var(--ease-spring);
    will-change: transform, opacity;
}

.bbfs-modal.is-open .bbfs-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Exit is deliberately quicker than entry - dismissal should feel
   instant, arrival can afford theatre. JS adds is-closing then waits. */
.bbfs-modal.is-closing .bbfs-card {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition:
        opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.bbfs-glow {
    position: absolute;
    top: -140px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle,
        color-mix(in srgb, var(--bb-orange) 26%, transparent) 0%,
        transparent 62%);
    filter: blur(2px);
    pointer-events: none;
}

.bbfs-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    color: var(--bb-ash);
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.bbfs-close:hover  { background: rgba(255, 255, 255, 0.12); color: var(--bb-white); }
.bbfs-close:active { transform: scale(0.92); }


/* ── TYPE ─────────────────────────────────────────────────────────── */

.bbfs-eyebrow {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bb-green-bright);
}

.bbfs-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--bb-white);
}

.bbfs-sub {
    margin: 0 0 var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--bb-ash);
}


/* ── THE FIELD ────────────────────────────────────────────────────── */

.bbfs-field {
    position: relative;
    margin-bottom: var(--space-4);
}

.bbfs-field-icon {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
    color: var(--bb-mid-gray);
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.bbfs-field:focus-within .bbfs-field-icon { color: var(--bb-orange); }

.bbfs-field input {
    width: 100%;
    min-height: 54px;
    padding: var(--space-4) var(--space-4) var(--space-4) 48px;
    /* 16px floor prevents iOS zoom-on-focus. Non-negotiable. */
    font-size: max(16px, var(--text-base));
    font-family: var(--font-body);
    color: var(--bb-white);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
}

.bbfs-field input::placeholder { color: var(--bb-mid-gray); }

.bbfs-field input:focus {
    border-color: var(--bb-orange);
    background: rgba(0, 0, 0, 0.36);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--bb-orange) 22%, transparent),
        0 0 24px -6px var(--bb-orange-glow);
}

.bbfs-field.is-invalid input {
    border-color: #E5484D;
    animation: bbfs-shake 300ms var(--ease-out);
}

@keyframes bbfs-shake {
    20%      { transform: translateX(-4px); }
    45%      { transform: translateX(4px);  }
    70%      { transform: translateX(-2px); }
    100%     { transform: translateX(0);    }
}


/* ── HONEYPOT - gone from every sense ─────────────────────────────── */

.bbfs-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.bbfs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ── THE CHECKBOX - drawn, not toggled ────────────────────────────── */

.bbfs-terms {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Real input stays real for keyboards and screen readers. Visually the
   custom box replaces it, functionally it never left. */
.bbfs-terms input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.bbfs-terms-box {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--bb-navy);
    transition:
        background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        transform 300ms var(--ease-out-back);
}

.bbfs-terms-box svg {
    width: 12px;
    height: 10px;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.bbfs-terms input:checked + .bbfs-terms-box {
    background: var(--bb-green-bright);
    border-color: var(--bb-green-bright);
    transform: scale(1.08);
}

.bbfs-terms input:checked + .bbfs-terms-box svg path {
    /* pathLength=1 in the markup makes this exact on any path shape */
    animation: bbfs-draw 240ms var(--ease-out) 40ms forwards;
}

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

.bbfs-terms input:focus-visible + .bbfs-terms-box {
    outline: 2px solid var(--bb-orange);
    outline-offset: 3px;
}

.bbfs-terms.is-invalid .bbfs-terms-box {
    border-color: #E5484D;
    animation: bbfs-shake 300ms var(--ease-out);
}

.bbfs-terms-text {
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--bb-ash);
    user-select: none;
}

.bbfs-terms-text a {
    color: var(--bb-green-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ── THE BUTTON - press physics ───────────────────────────────────── */

.bbfs-go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: var(--space-4) var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bb-orange);
    color: var(--bb-navy);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 10px 26px -8px var(--bb-orange-glow);
    transition:
        background var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.bbfs-go:hover {
    background: var(--bb-orange-hover);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 14px 32px -8px var(--bb-orange-glow);
}

.bbfs-go:active {
    background: var(--bb-orange-active);
    transform: scale(0.97);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 6px 16px -8px var(--bb-orange-glow);
}

.bbfs-go:focus-visible {
    outline: 2px solid var(--bb-white);
    outline-offset: 3px;
}

/* Loading: label yields to a drawn spinner. The button never changes
   size, so nothing under it shifts. */
.bbfs-go-spinner {
    position: absolute;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.bbfs-go-spinner svg {
    width: 22px;
    height: 22px;
    animation: bbfs-spin 800ms linear infinite;
}

@keyframes bbfs-spin { to { transform: rotate(360deg); } }

.bbfs-go.is-loading            { pointer-events: none; }
.bbfs-go.is-loading .bbfs-go-label   { opacity: 0; }
.bbfs-go.is-loading .bbfs-go-spinner { opacity: 1; }

.bbfs-error {
    min-height: 1.2em;
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: #FF8A8E;
}

.bbfs-trust {
    margin: var(--space-5) 0 0;
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--bb-mid-gray);
}


/* ── STATES - form / success / existing ───────────────────────────── */

.bbfs-state {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

.bbfs-state.is-active {
    opacity: 1;
    transform: translateY(0);
}

.bbfs-state--success,
.bbfs-state--existing { text-align: center; }

/* Success checkmark: ring draws, then the mark lands inside it. */
.bbfs-check {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-5);
    color: var(--bb-green-bright);
}

.bbfs-check svg { width: 100%; height: 100%; }

.bbfs-check-ring,
.bbfs-check-mark {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.bbfs-state--success.is-active .bbfs-check-ring {
    animation: bbfs-draw 500ms var(--ease-out) 120ms forwards;
}

.bbfs-state--success.is-active .bbfs-check-mark {
    animation: bbfs-draw 340ms var(--ease-out-back) 520ms forwards;
}


/* ── MOBILE - the bottom sheet ────────────────────────────────────── */

@media (max-width: 560px) {
    .bbfs-modal {
        align-items: flex-end;
        padding: 0;
    }

    .bbfs-card {
        max-width: none;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        border-bottom: 0;
        padding: var(--space-8) var(--space-5)
                 calc(var(--space-6) + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform 480ms var(--ease-spring),
                    opacity var(--duration-fast) linear;
    }

    .bbfs-modal.is-open .bbfs-card {
        transform: translateY(0);
    }

    .bbfs-modal.is-closing .bbfs-card {
        transform: translateY(100%);
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    /* Grab handle - sheets get one, dialogs do not */
    .bbfs-card::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.22);
    }
}


/* ── REDUCED MOTION - everything still works, nothing moves ───────── */

@media (prefers-reduced-motion: reduce) {
    .bbfs-overlay,
    .bbfs-card,
    .bbfs-state,
    .bbfs-close,
    .bbfs-go,
    .bbfs-terms-box,
    .bbfs-field input { transition: none; }

    .bbfs-card,
    .bbfs-modal.is-open .bbfs-card { transform: none; }

    .bbfs-go-spinner svg { animation-duration: 1.6s; }

    .bbfs-check-ring,
    .bbfs-check-mark,
    .bbfs-terms input:checked + .bbfs-terms-box svg path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .bbfs-field.is-invalid input,
    .bbfs-terms.is-invalid .bbfs-terms-box { animation: none; }
}