/* ════════════════════════════════
   WHY JOTNO
   jotno.ai — why.css
════════════════════════════════ */

/* The reasons read as a spec board: eight ruled cells, nothing in them but
   a numeral and a claim. Ground and rules are tokenised so the same board
   can sit on paper (default) or on ink (.wj-ink) — see the block below. */
#why-jotno {
    --wj-paper: rgba(255, 255, 255, 0.72);
    --wj-line: rgba(8, 145, 178, 0.16);
    --wj-wash: rgba(8, 145, 178, 0.055);
    --wj-num: rgba(8, 145, 178, 0.3);
    --wj-num-hot: var(--primary-dark);
    --wj-label: var(--text);
    --wj-lead: var(--muted);
    --wj-shadow: 0 18px 50px rgba(8, 145, 178, 0.09);

    position: relative;
    padding: var(--sec-y-lg) var(--sec-x) var(--sec-y-lg);
}

/* Light pools placed off the "How Jotno Works" band above, so the two
   sections keep reading as separate stages */
#why-jotno::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 44% 56% at 10% 18%, rgba(8, 145, 178, 0.07), transparent 70%),
        radial-gradient(ellipse 42% 50% at 92% 82%, rgba(99, 102, 241, 0.06), transparent 70%);
}

.wj-inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

/* ════ HEAD ════
   Claim on the left, the sentence that qualifies it on the right, both
   sitting on one baseline — the board below repeats that discipline. */
.wj-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: 2.6rem;
    margin-bottom: 3rem;
}

.wj-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(14, 116, 144, 0.78);
    margin-bottom: 1.25rem;
}

.wj-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(8, 145, 178, 0.55);
    flex-shrink: 0;
}

.wj-title {
    font-family: 'Playfair Display', 'Plus Jakarta Sans', serif;
    font-size: clamp(1.95rem, 3vw, 2.65rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.12;
    color: var(--text);
}

/* SERIF accent — see the accent map in common.css. This band is an index:
   you read it and move on, so the phrase shifts to the display italic and
   takes no decoration at all. */
.wj-title-accent {
    font-style: italic;
    font-weight: 700;
    color: var(--primary-dark);
}

.wj-lead {
    font-size: 0.95rem;
    line-height: 1.78;
    font-weight: 500;
    color: var(--wj-lead);
    padding-bottom: 0.35rem;
}

/* ════ BOARD ════
   Every cell carries its own top and left rule and is pulled back one
   pixel, so the outer rules fall under the board's own border. The grid
   then reflows to any column count without a single nth-child fix-up. */
.wj-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    border: 1px solid var(--wj-line);
    border-radius: var(--radius);
    background: var(--wj-paper);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--wj-shadow);
    overflow: hidden;
}

.wj-cell {
    position: relative;
    margin: -1px 0 0 -1px;
    padding: 1.85rem 1.5rem 2rem;
    border-top: 1px solid var(--wj-line);
    border-left: 1px solid var(--wj-line);
}

/* A wash that rises through the cell on hover — the tile equivalent of the
   rail filling in over in "How Jotno Works" */
.wj-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--wj-wash), transparent 80%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.wj-cell:hover::before,
.wj-cell:focus-within::before {
    opacity: 1;
}

/* The numeral is set in the display serif, ghosted back until the cell is
   read — it gives the board its rhythm without shouting over the claims */
.wj-index {
    display: block;
    font-family: 'Playfair Display', 'Plus Jakarta Sans', serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--wj-num);
    margin-bottom: 1.1rem;
    transition: color 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wj-cell:hover .wj-index,
.wj-cell:focus-within .wj-index {
    color: var(--wj-num-hot);
    transform: translateY(-2px);
}

.wj-label {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--wj-label);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wj-cell:hover .wj-label,
.wj-cell:focus-within .wj-label {
    transform: translateX(2px);
}

/* A rule that draws itself along the foot of the cell being read */
.wj-cell::after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--cyan));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wj-cell:hover::after,
.wj-cell:focus-within::after {
    transform: scaleX(1);
}

/* ════ INK VARIANT ════
   Add class="wj-ink" to the section to drop the same board onto a dark
   band instead of the page's paper. Nothing else changes. */
#why-jotno.wj-ink {
    --wj-paper: rgba(255, 255, 255, 0.03);
    --wj-line: rgba(255, 255, 255, 0.12);
    --wj-wash: rgba(34, 211, 238, 0.1);
    --wj-num: rgba(34, 211, 238, 0.4);
    --wj-num-hot: var(--cyan);
    --wj-label: rgba(255, 255, 255, 0.9);
    --wj-lead: rgba(255, 255, 255, 0.62);
    --wj-shadow: none;

    background:
        radial-gradient(ellipse 52% 64% at 84% 6%, rgba(34, 211, 238, 0.15), transparent 66%),
        radial-gradient(ellipse 46% 60% at 2% 92%, rgba(99, 102, 241, 0.085), transparent 70%),
        linear-gradient(158deg, #06333d 0%, #042a33 56%, #03212a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

#why-jotno.wj-ink::before {
    background: none;
}

.wj-ink .wj-eyebrow {
    color: rgba(34, 211, 238, 0.9);
}

.wj-ink .wj-eyebrow-line {
    background: rgba(34, 211, 238, 0.6);
}

.wj-ink .wj-title {
    color: #ffffff;
}

/* On ink the italic still reads, so it stays — only the colour has to
   change, and cyan is the one accent that holds up against this ground. */
.wj-ink .wj-title-accent {
    color: var(--cyan);
}

/* ─── STAGGERED REVEAL ───
   The board carries the shared .fade-in hook; the cells arrive row by row,
   left to right, the way the grid is read. */
.wj-board.fade-in .wj-cell {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wj-board.fade-in.visible .wj-cell {
    opacity: 1;
    transform: translateY(0);
}

.wj-board.fade-in.visible .wj-cell:nth-child(1) {
    transition-delay: 0.05s;
}

.wj-board.fade-in.visible .wj-cell:nth-child(2) {
    transition-delay: 0.11s;
}

.wj-board.fade-in.visible .wj-cell:nth-child(3) {
    transition-delay: 0.17s;
}

.wj-board.fade-in.visible .wj-cell:nth-child(4) {
    transition-delay: 0.23s;
}

.wj-board.fade-in.visible .wj-cell:nth-child(5) {
    transition-delay: 0.29s;
}

.wj-board.fade-in.visible .wj-cell:nth-child(6) {
    transition-delay: 0.35s;
}

.wj-board.fade-in.visible .wj-cell:nth-child(7) {
    transition-delay: 0.41s;
}

.wj-board.fade-in.visible .wj-cell:nth-child(8) {
    transition-delay: 0.47s;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {

    .wj-index,
    .wj-label,
    .wj-cell::before,
    .wj-cell::after,
    .wj-board.fade-in .wj-cell {
        transition: none;
    }

    .wj-board.fade-in .wj-cell {
        opacity: 1;
        transform: none;
    }
}