/* ============================================
   Welcome — first-visit visitor card gate
   Mechanical-keyboard themed, portfolio dark stack
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'IBM Plex Sans', sans-serif;
    background: #000C19;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: url('assets/cursor.cur'), auto;
    min-height: 100vh;
    overflow-x: hidden;
}

a, button, [role="button"],
.layout-btn, .switch-btn, .swatch-btn,
.welcome-skip, .welcome-submit, .welcome-reroll,
.welcome-fineprint-link {
    cursor: url('assets/pointer.cur'), pointer;
}

input { cursor: url('assets/cursor.cur'), text; }

/* ============================================
   Backgrounds — dots + grid + radial glow
   ============================================ */
#dotted-surface {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#dotted-surface.dots-hidden { opacity: 0; }

#background-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent);
    mask-image: radial-gradient(ellipse at center, black, transparent);
}

#background-grid.grid-visible { opacity: 1; }

/* Interactive mesh grid canvas — same plane as #background-grid. Pulls
   toward the cursor (see welcome-grid.js). pointer-events:none so it never
   blocks the builder; the cursor is tracked on the window. */
.welcome-grid-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.welcome-grid-canvas.is-live { opacity: 1; }

.glow {
    display: none;
}

@keyframes glow-enter {
    to { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

.page-exit-active .glow {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) !important;
    animation: none !important;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* ============================================
   Skip / corner
   ============================================ */
.welcome-skip {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--text-14);
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.welcome-skip i { font-size: var(--text-16); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

.welcome-skip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.welcome-skip:hover i { transform: translateX(2px); }

/* ============================================
   Layout — viewport-fit, hero on top, two-column stage
   ============================================ */
.welcome-layout {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 56px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Hero — compact, one row of meaningful content
   ============================================ */
.welcome-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 640px;
}

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(17, 128, 249, 0.08);
    border: 1px solid rgba(17, 128, 249, 0.2);
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 500;
    color: #5aa3ff;
    letter-spacing: 0.06em;
    text-transform: lowercase;
}

.welcome-eyebrow i { font-size: var(--text-12); color: #66d2ff; }

.welcome-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.25rem, 4vw, 2.375rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
}

.welcome-title-accent {
    background: linear-gradient(135deg, #1180f9 0%, #66d2ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Second line reads as a lighter subhead under the welcome line. */
.welcome-title.welcome-title-sub {
    font-size: clamp(0.875rem, 2.4vw, 1.375rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: 6px;
}

.welcome-blurb {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: var(--text-13);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    max-width: 440px;
    margin: 0 auto;
}

/* ============================================
   Stage — card on left, control panel on right
   ============================================ */
.welcome-stage {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    column-gap: 44px;
    /* Stretch so the panel matches the card's height; the card keeps its
       natural height via align-self below. */
    align-items: stretch;
}

.welcome-stage > .build-card    { grid-column: 1; align-self: start; }
.welcome-stage > .welcome-panel { grid-column: 2; }

.welcome-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Push the Save button to the bottom so it sits as far from the fields as
       the card height allows. */
    justify-content: space-between;
    width: 100%;
}

/* ============================================
   Name row
   ============================================ */
.welcome-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 5px 5px 16px;
    /* Opaque frosted surface over #000C19 — backdrop-filter blur was ineffective
       because the entrance transform created a compositing layer, so we fake the
       frosted look with a near-solid navy that hides the background grid. */
    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), #0d1626;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    width: 100%;
}

.welcome-name-row:focus-within {
    border-color: rgba(17, 128, 249, 0.4);
    background: linear-gradient(rgba(17, 128, 249, 0.1), rgba(17, 128, 249, 0.1)), #0d1626;
    box-shadow: 0 0 0 4px rgba(17, 128, 249, 0.08);
}

.welcome-name-label {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.welcome-name-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.welcome-name-input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Space Mono', monospace;
    font-size: var(--text-13);
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 7px 0;
}

.welcome-name-input-wrap { flex: 1 1 auto; min-width: 0; }

.welcome-name-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.08em;
}

.welcome-reroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-14);
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
}

.welcome-reroll:hover {
    background: rgba(17, 128, 249, 0.15);
    color: #66d2ff;
}

/* ============================================
   The Build Card
   ============================================ */
.build-card {
    position: relative;
    width: 100%;
    padding: 36px 40px 32px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--case-color, #f4f4f6);
    border: 1px solid color-mix(in oklab, var(--case-color, #f4f4f6) 60%, white 25%);
    box-shadow:
        0 30px 60px -30px rgba(0, 0, 0, 0.7),
        0 10px 24px -12px rgba(17, 128, 249, 0.2);
    color: var(--case-text, #1c1c20);
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.build-card.bouncing {
    animation: card-bounce 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes card-bounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.012); }
    100% { transform: scale(1); }
}

.build-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.build-card-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.build-card-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: var(--text-20);
    letter-spacing: -0.02em;
    color: var(--case-text, #1c1c20);
    opacity: 0.95;
}

.build-card-meta {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 500;
    color: var(--case-text-dim, rgba(255, 255, 255, 0.55));
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.build-card-serial {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 600;
    color: var(--case-text-dim, rgba(255, 255, 255, 0.55));
    letter-spacing: 0.14em;
    padding: 3px 9px;
    border-radius: 8px;
    border: 1px solid color-mix(in oklab, var(--case-color, #f4f4f6) 60%, white 40%);
}

.build-card-name {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-20);
    font-weight: 700;
    color: var(--case-text, #1c1c20);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 24px;
    min-height: 24px;
    line-height: 1.1;
    transition: opacity 0.2s ease;
}

/* ============================================
   Mini keyboard rendered on the card
   ============================================ */
/* Flat 2D keyboard schematic — fixed u-sizing, intrinsic width, centered.
   --u sets the physical width of a 1u key. Keys never stretch to fill
   the card; the keyboard scales naturally with the chosen layout. */
.build-card-keyboard {
    --u: 18px;
    --kb-bg: color-mix(in oklab, var(--case-color, #f4f4f6) 70%, black 30%);
    --kb-edge: color-mix(in oklab, var(--case-color, #f4f4f6) 55%, white 10%);
    --kc-bg: var(--keycap-color, #e7dcc2);
    --kc-edge: color-mix(in oklab, var(--keycap-color, #e7dcc2) 78%, black 22%);
    --row-h: var(--u);
    --kb-gap: 3px;

    width: fit-content;
    max-width: 100%;
    margin: 0 auto 24px;
    background: var(--kb-bg);
    border: 1px solid var(--kb-edge);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--kb-gap);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.kb-row {
    display: flex;
    gap: var(--kb-gap);
    height: var(--row-h);
    align-items: stretch;
}

.kb-key {
    flex: 0 0 auto;
    width: var(--u);
    background: var(--kc-bg);
    border: 1px solid var(--kc-edge);
    border-radius: 2px;
    transition: background 0.06s ease, border-color 0.06s ease, transform 0.06s ease;
}

/* Modifier keys — slightly darker, like differently-colored mod caps */
.kb-key.kb-mod {
    --kc-bg: color-mix(in oklab, var(--keycap-color, #e7dcc2) 72%, var(--case-color, #f4f4f6) 28%);
}

/* Accent keys (esc, enter) — legend color as the cap */
.kb-key.kb-accent {
    --kc-bg: var(--keycap-legend, #1d1a14);
    --kc-edge: color-mix(in oklab, var(--keycap-legend, #1d1a14) 80%, white 16%);
}

/* Pressed feedback — brand blue cap while the physical key is held down */
.kb-key.is-pressed {
    background: linear-gradient(135deg, #1180f9 0%, #66d2ff 100%);
    border-color: rgba(102, 210, 255, 0.65);
    box-shadow: 0 0 0 1px rgba(102, 210, 255, 0.35),
                0 0 12px rgba(17, 128, 249, 0.45);
    transform: translateY(1px);
}

.kb-key.kb-1u    { width: var(--u); }
.kb-key.kb-1-25u { width: calc(var(--u) * 1.25); }
.kb-key.kb-1-5u  { width: calc(var(--u) * 1.5); }
.kb-key.kb-1-75u { width: calc(var(--u) * 1.75); }
.kb-key.kb-2u    { width: calc(var(--u) * 2); }
.kb-key.kb-2-25u { width: calc(var(--u) * 2.25); }
.kb-key.kb-2-75u { width: calc(var(--u) * 2.75); }
.kb-key.kb-space { width: calc(var(--u) * 6.25); }

.kb-gap {
    flex: 0 0 auto;
    width: var(--u);
    background: transparent;
    border: none;
    pointer-events: none;
}
.kb-gap.kb-0-5 { width: calc(var(--u) * 0.5); }

/* ============================================
   Spec list
   ============================================ */
.build-card-spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
    margin-bottom: 22px;
}

.build-card-spec-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.build-card-spec dt {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 500;
    color: var(--case-text-dim, rgba(255, 255, 255, 0.5));
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.build-card-spec dd {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Space Mono', monospace;
    font-size: var(--text-12);
    font-weight: 600;
    color: var(--case-text, #1c1c20);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-width: 0;
}

.build-card-spec dd i { font-size: var(--text-13); }

.build-card-swatch {
    width: 11px;
    height: 11px;
    border-radius: 8px;
    background: var(--swatch-color, #fff);
    border: 1px solid rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

/* ============================================
   Foot row
   ============================================ */
.build-card-foot {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 24px;
    padding-top: 18px;
    border-top: 1px dashed color-mix(in oklab, var(--case-text-dim, rgba(255,255,255,0.4)) 60%, transparent);
}

.build-card-foot-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.build-card-foot-label {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 500;
    color: var(--case-text-dim, rgba(255, 255, 255, 0.45));
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.build-card-foot-value {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--case-text, #1c1c20);
    letter-spacing: 0.04em;
}

.build-card-foot-sig {
    font-family: 'Space Grotesk', serif;
    font-size: var(--text-16);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--case-text, #1c1c20);
    opacity: 0.9;
    transform: rotate(-2deg);
    transform-origin: left;
}

/* ============================================
   Build controls — vertical stack, full-width rows
   ============================================ */
.build-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.build-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.build-control-label {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding-left: 4px;
}

.build-control-row {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    /* Opaque frosted surface — see .welcome-name-row note above. */
    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), #0d1626;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: 100%;
}

.layout-btn, .switch-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: 'Space Mono', monospace;
    font-size: var(--text-11);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    justify-content: center;
    min-width: 0;
}

.layout-btn .layout-btn-pct {
    font-size: var(--text-10);
    opacity: 0.65;
    margin-left: -2px;
}

.switch-btn i { font-size: var(--text-13); }

.layout-btn:hover,
.switch-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.layout-btn.active,
.switch-btn.active {
    color: #fff;
    background: rgba(17, 128, 249, 0.18);
    box-shadow: inset 0 0 0 1px rgba(17, 128, 249, 0.35);
}

/* Swatches */
.build-swatches {
    padding: 5px 8px;
    justify-content: space-between;
}

.swatch-btn {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: var(--swatch, #fff);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    flex: 0 0 24px;
}

.swatch-btn:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.swatch-btn.active {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 2px rgba(17, 128, 249, 0.45),
                0 4px 14px -5px rgba(17, 128, 249, 0.6);
}

/* ============================================
   CTA — Enter button + fineprint
   ============================================ */
.welcome-cta {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
}

.welcome-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: #1180f9;
    color: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--text-14);
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    width: 100%;
}

.welcome-submit i {
    font-size: var(--text-16);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-submit:hover {
    background: #2b91ff;
}

.welcome-submit:hover i { transform: translateX(3px); }

.welcome-submit:active { transform: translateY(0); }

.welcome-submit[disabled] {
    opacity: 0.55;
    cursor: progress;
}

.welcome-submit.is-loading i {
    animation: spin 0.8s linear infinite;
}

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

.welcome-fineprint {
    font-family: 'Space Mono', monospace;
    font-size: var(--text-11);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-align: center;
}

.welcome-fineprint-link {
    color: #66d2ff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(102, 210, 255, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.welcome-fineprint-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.welcome-fineprint.is-error { color: #ef4444; }
.welcome-fineprint.is-success { color: #4ade80; }

/* ============================================
   Bottom status bar
   ============================================ */
.welcome-foot {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Space Mono', monospace;
    font-size: var(--text-10);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-top: 24px;
}

.welcome-foot-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.welcome-foot-dot {
    width: 6px;
    height: 6px;
    border-radius: 8px;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    animation: dot-pulse 2.4s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================
   Responsive — collapse to single column under 900px
   ============================================ */
@media (max-width: 900px) {
    .welcome-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-width: 480px;
        margin: 0 auto;
        /* Stacked now — add vertical breathing room between the card and the
           controls below it. */
        row-gap: 28px;
    }
    .welcome-stage > .build-card,
    .welcome-stage > .welcome-panel,
    .welcome-stage > .welcome-fineprint {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 720px) {
    .welcome-layout {
        /* Top-align so the in-flow Skip button + hero sit near the top. */
        padding: 20px 22px 24px;
        gap: 20px;
        justify-content: flex-start;
    }

    /* Skip button drops into the flow, centered above the hero, on mobile
       (it's a fixed top-right pill on larger screens). */
    .welcome-skip {
        position: static;
        display: flex;
        width: fit-content;
        margin: 16px auto 0;
    }

    .build-card {
        padding: 20px 20px 18px;
    }

    .build-card-spec {
        gap: 10px 16px;
    }

    .build-card-foot {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .welcome-foot {
        flex-direction: column;
        gap: 6px;
    }
}

/* Short viewports — compress hero + shrink keyboard u-size */
@media (max-height: 820px) {
    .welcome-layout { padding-top: 44px; gap: 24px; }
    .welcome-hero { gap: 8px; }
    .welcome-title { font-size: clamp(1.5rem, 3.5vw, 2rem); }
    .welcome-blurb { font-size: var(--text-12); }
    .build-card { padding: 26px 30px 24px; }
    .build-card-keyboard { --u: 15px; }
    .build-card-name { font-size: var(--text-18); margin-bottom: 18px; }
}

@media (max-width: 720px) {
    .build-card-keyboard { --u: 13px; --kb-gap: 2px; }
}

@media (max-width: 420px) {
    .build-card-keyboard { --u: 11px; --kb-gap: 2px; }
}

/* ============================================
   Exit transition
   ============================================ */
/* Everything except the build-card lifts away and fades. We fade the hero and
   panel individually (rather than the whole .welcome-layout) so the card — a
   descendant — isn't dragged down by a parent's opacity/transform. The card is
   left completely untouched: it stays pinned in place and full-opacity so it
   reads as the same card the home page replays at the identical coordinates. */
body.welcome-exiting .welcome-hero,
body.welcome-exiting .welcome-panel,
body.welcome-exiting .welcome-skip {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   First-visit splash — JC monogram assemble
   ============================================ */
/* Frosted-glass curtain. We tint the viewport with a translucent navy and
   blur whatever sits beneath, so the builder can run its entrance animation
   underneath while the JC mark still reads as the focal point. */
.welcome-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: rgba(0, 12, 25, 0.95);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    will-change: transform, opacity;
}

.splash-mark {
    position: relative;
    width: clamp(120px, 22vw, 190px);
    will-change: transform, opacity;
}

.splash-svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    color: #fff;          /* caps inherit via currentColor */
    overflow: visible;    /* let cells lift/scale past the viewBox */
}

.splash-cell {
    fill: currentColor;
    opacity: 0;                   /* assembled in by welcome-splash.js */
    transform-box: fill-box;      /* scale/translate per-cell, not whole svg */
    transform-origin: center;
}

/* While the splash is up, only lock page scrolling — the builder is no
   longer hidden or paused, so its entrance animations play behind the
   blurred curtain and are already settled by the time the curtain lifts. */
body.is-splashing { overflow: hidden; }

/* Reduced motion: no assemble at all, show the page straight away.
   Also serves as a CSS failsafe if the script never runs. */
@media (prefers-reduced-motion: reduce) {
    .welcome-splash { display: none; }
    body.is-splashing { overflow: auto; }
}