/* ============================================================
   checkmAIt brand stylesheet
   Oak ladder + baize accent. Chess colours lead, green brightens.
   Spec: checkmait/BRAND-DESIGN-RULES.md
   ============================================================ */

:root {
    /* ---- the board ---- */
    --chalk:       #FAF7F0;   /* bone piece, raised card */
    --oak-10:      #F2EDE1;   /* default ground */
    --oak-20:      #E3DACA;   /* light square */
    --oak-25:      #D2C7B2;   /* body text on dark grounds, 7.33:1 on oak-85 */
    --oak-30:      #C9BCA4;   /* hairline, edge */
    --oak-50:      #A0917A;   /* fills, glyphs, decorative. NOT body text */
    --oak-70:      #6B5D4B;   /* dark square, muted text on light */
    --oak-85:      #3B342B;   /* dark text on light grounds */

    /* ---- the black piece: ebonised, not grey ---- */
    --onyx:        #181613;   /* dark ground */
    --onyx-lift:   #232019;   /* raised card on a dark ground */
    --ink:         #171512;   /* black piece, primary text */

    /* ---- the felt, used sparingly ---- */
    --baize:       #24503C;
    --baize-lt:    #7FA88F;
    --baize-deep:  #1A3B2C;

    /* ---- semantic ---- */
    --ground:      var(--oak-10);
    --surface:     var(--chalk);
    --text:        var(--ink);
    --text-muted:  var(--oak-70);
    --line:        rgba(107, 93, 75, 0.26);
    --line-strong: rgba(23, 21, 18, 0.72);

    /* ---- texture ---- */
    --tex-light: url("./textures/oak-pore-light@1x.png");
    --tex-dark:  url("./textures/onyx-pore-dark@1x.png");
    --tex-size: 360px;

    /* ---- motion ---- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.9s;

    /* ---- type ---- */
    --display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (min-resolution: 1.5dppx) {
    :root {
        --tex-light: url("./textures/oak-pore-light@2x.png");
        --tex-dark:  url("./textures/onyx-pore-dark@2x.png");
    }
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--body);
    font-weight: 400;
    background-color: var(--ground);
    background-image: var(--tex-light);
    background-size: var(--tex-size) var(--tex-size);
    color: var(--text);
    line-height: 1.62;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

::selection { background: var(--baize); color: var(--oak-10); }

:focus-visible {
    outline: 2px solid var(--baize);
    outline-offset: 3px;
}

img { max-width: 100%; display: block; }

/* ============================================================
   TYPE
   ============================================================ */

.section-label,
.eyebrow {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.section-label::after,
.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
    max-width: 120px;
    transform-origin: left;
}
.section-dark .section-label,
.section-dark .eyebrow { color: var(--oak-50); }
.section-dark .section-label::after,
.section-dark .eyebrow::after { background: rgba(160, 145, 122, 0.34); }

h1, h2, h3, .section-title {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-transform: uppercase;
    text-wrap: balance;
}

.section-title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    margin-bottom: 24px;
}

.section-subtitle {
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--text-muted);
    max-width: 62ch;
    margin-bottom: 64px;
}
.section-dark .section-subtitle { color: var(--oak-25); }

/* the one emphasis device: tinted phrase on a fine rule.
   never a filled box. */
.gold,
.accent {
    color: var(--baize);
}
.section-dark .gold,
.section-dark .accent {
    color: var(--baize-lt);
}

/* the AI in the wordmark is the only permanent accent */
.ai { color: var(--baize); }

/* ============================================================
   SECTIONS
   ============================================================ */

section { position: relative; }

.section-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
}

.section-light,
.section-dark {
    padding: 140px 0;
}

.section-light {
    background-color: var(--oak-10);
    background-image: var(--tex-light);
    background-size: var(--tex-size) var(--tex-size);
}

.section-dark {
    background-color: var(--onyx);
    background-image: var(--tex-dark);
    background-size: var(--tex-size) var(--tex-size);
    color: var(--oak-10);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--chalk); }

/* ============================================================
   NAV
   ============================================================ */

nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 22px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.5s var(--ease);
}
nav.scrolled {
    background: rgba(24, 22, 19, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    border-bottom-color: rgba(160, 145, 122, 0.22);
    padding: 14px 40px;
}

.nav-logo {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.5s var(--ease);
}
nav.scrolled .nav-logo { color: var(--chalk); }
.nav-logo .ai { color: var(--baize); transition: color 0.5s var(--ease); }
nav.scrolled .nav-logo .ai { color: var(--baize-lt); }

.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a {
    font-family: var(--mono);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 3px;
    transition: color 0.35s var(--ease);
}
nav.scrolled .nav-links a { color: var(--oak-50); }
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a:hover { color: var(--ink); }
nav.scrolled .nav-links a:hover { color: var(--chalk); }
.nav-links a.nav-current { color: var(--ink); }
nav.scrolled .nav-links a.nav-current { color: var(--chalk); }
.nav-links a.nav-current::after { transform: scaleX(1); background: var(--baize); }
nav.scrolled .nav-links a.nav-current::after { background: var(--baize-lt); }

.nav-cta {
    background: var(--baize) !important;
    color: var(--oak-10) !important;
    padding: 11px 22px !important;
    border-radius: 0 !important;
    letter-spacing: 0.16em !important;
    transition: background 0.35s var(--ease) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--baize-deep) !important; color: var(--chalk) !important; }
nav.scrolled .nav-cta {
    background: var(--baize-lt) !important;
    color: #132A20 !important;
}
nav.scrolled .nav-cta:hover { background: var(--chalk) !important; }

.mobile-menu { display: none; cursor: pointer; }
.mobile-menu span {
    display: block; width: 22px; height: 1.5px;
    background: var(--ink); margin: 5px 0;
    transition: background 0.5s var(--ease), transform 0.35s var(--ease);
}
nav.scrolled .mobile-menu span { background: var(--chalk); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary,
.btn-secondary {
    font-family: var(--mono);
    display: inline-block;
    padding: 16px 32px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn-primary { background: var(--baize); color: var(--oak-10); border: 1px solid var(--baize); }
.btn-primary::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--ink);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.55s var(--ease);
    z-index: -1;
}
.btn-primary:hover::before { transform: scaleY(1); }
.btn-primary:hover { border-color: var(--ink); }

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn-secondary::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--oak-20);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.55s var(--ease);
    z-index: -1;
}
.btn-secondary:hover::before { transform: scaleY(1); }
.btn-secondary:hover { border-color: var(--ink); }
.section-dark .btn-secondary { color: var(--chalk); border-color: rgba(160,145,122,.4); }

/* the sweep sits behind the label inside the button's own stacking context */
.btn-primary, .btn-secondary { isolation: isolate; }

/* ============================================================
   BOARD DIVIDER  -  8 light / 8 dark squares, one rank
   ============================================================ */

.board-divider {
    display: block;
    height: 18px;
    background-color: var(--chalk);
    background-image: repeating-linear-gradient(
        90deg,
        var(--onyx) 0 18px,
        var(--chalk) 18px 36px
    );
}
/* squares stay square at any width, so the markup's cells are decoration only */
.board-divider div { display: none; }

/* ============================================================
   SHARED STAT TILES
   ============================================================ */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 88px;
}
.stat-tile {
    background: var(--oak-10);
    padding: 42px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.section-dark .stat-tile { background: var(--onyx); }
.stat-tile .value {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.6rem, 5vw, 3.9rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--baize);
}
.section-dark .stat-tile .value { color: var(--baize-lt); }
.stat-tile .label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--oak-85);
    max-width: 32ch;
}
.section-dark .stat-tile .label { color: var(--oak-25); }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
    background-color: var(--onyx);
    border-top: 1px solid rgba(160, 145, 122, 0.16);
    background-image: var(--tex-dark);
    background-size: var(--tex-size) var(--tex-size);
    color: var(--oak-50);
    padding: 90px 40px 56px;
    text-align: center;
}
.footer-logo {
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: var(--chalk);
    margin-bottom: 34px;
}
.footer-logo .ai { color: var(--baize-lt); }
.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 34px;
    margin-bottom: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(160, 145, 122, 0.18);
}
.footer-links a {
    font-family: var(--mono);
    color: var(--oak-25);
    text-decoration: none;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.35s var(--ease);
}
.footer-links a:hover { color: var(--chalk); }
footer p {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(160, 145, 122, 0.7);
}

/* ============================================================
   MOTION
   Slow, few, and staggered. Everything is a mask or a rule
   drawing itself, never a bounce or a pop.
   ============================================================ */

.reveal > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reveal.visible > * { opacity: 1; transform: none; }
.reveal.visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal.visible > *:nth-child(2) { transition-delay: 0.07s; }
.reveal.visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal.visible > *:nth-child(4) { transition-delay: 0.21s; }
.reveal.visible > *:nth-child(5) { transition-delay: 0.28s; }
.reveal.visible > *:nth-child(6) { transition-delay: 0.35s; }

/* headline mask: the line slides out from under its own edge */
.mask { display: block; overflow: hidden; }
.mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.05s var(--ease-out);
}
.visible .mask > span,
.mask.visible > span { transform: none; }
.mask:nth-of-type(2) > span { transition-delay: 0.09s; }

/* a hairline that draws itself in */
.rule-draw {
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease-out);
}
.visible .rule-draw { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal > *, .mask > span { opacity: 1 !important; transform: none !important; }
    .rule-draw { transform: scaleX(1) !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .section-light, .section-dark { padding: 96px 0; }
    .section-inner { padding: 0 24px; }
    nav, nav.scrolled { padding: 16px 24px; }

    .mobile-menu { display: block; }
    .nav-links {
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(24, 22, 19, 0.98);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(160,145,122,.22);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.6s var(--ease);
    }
    .nav-links.open { max-height: 320px; }
    .nav-links a {
        width: 100%;
        padding: 18px 24px;
        color: var(--oak-50);
        border-bottom: 1px solid rgba(160,145,122,.12);
    }
    .nav-links a::after { display: none; }
    .nav-cta { text-align: center; }
    .section-subtitle { margin-bottom: 44px; }
    footer { padding: 68px 24px 44px; }
    .footer-links { gap: 20px 26px; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .stat-tile { padding: 30px 24px; }
}