/* GitHub Activity (variations) — scoped to #github section in main site.
   Global rules from the standalone preview (html/body/main/h2) intentionally
   dropped because they would override the host site's typography and layout. */

/* Host site's .section enforces padding 96/64 + max-width 1037 + flex row
   center — turns the new edge-to-edge variant into a centered tile. Reset. */
.section-github.section {
    display: block;
    padding: 0;
    max-width: none;
    min-height: 100svh;
    align-items: stretch;
}
.section-github > .variation { width: 100%; }

.section-github { background: #0f0f0e; color: #faf9f0; }
.section-github .variation-head h2,
.section-github .variation-head h2 * {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    max-width: 100%;
    overflow: visible;
}

.section-github .activity-prelude {
    position: relative;
    min-height: 72svh;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
    background: #0f0f0e;
    overflow: hidden;
}

.section-github .prelude-line {
    position: absolute;
    left: clamp(1.25rem, 3vw, 3rem);
    right: clamp(1.25rem, 3vw, 3rem);
    bottom: 0;
    height: 1px;
    background: rgba(250, 249, 240, 0.13);
}

.section-github .variation {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    padding: 0 0 clamp(2rem, 4vh, 3.5rem);
    width: 100%;
    overflow: hidden;
}

.section-github .variation-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 23rem);
    grid-template-areas:
        "title title"
        "copy copy";
    column-gap: clamp(2.5rem, 8vw, 9rem);
    row-gap: clamp(2.2rem, 5vh, 4.2rem);
    align-items: end;
    min-height: clamp(16rem, 34svh, 21.5rem);
    padding: clamp(3.4rem, 7vh, 5.2rem) clamp(1.25rem, 3vw, 3rem) clamp(1.45rem, 3.1vh, 2.35rem);
    width: 100%;
    overflow: visible;
}

.section-github .variation-meta p,
.section-github .variation-meta a {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    text-transform: uppercase;
}

.section-github .variation-title { grid-area: title; min-width: 0; align-self: end; }

.section-github .variation-head h2 {
    max-width: 100%;
    font-size: clamp(4.4rem, 9.2vw, 9.6rem);
    line-height: 0.84;
    padding: 0.035em 0 0.055em;
    /* Explicit <br> in markup fixes the title at two lines. No text-wrap:balance
       here — balance re-evaluates breaks on every relayout (and when GSAP's
       clearProps strips the reveal transform), which surfaced a 1-line -> 2-line
       reflow during the curtain transition as the Syne (display=swap) font
       swapped in over the narrower fallback. A forced break is reflow-proof. */
}

.section-github .variation-copy {
    grid-area: copy;
    align-self: start;
    max-width: 34rem;
    margin-left: 0.12rem;
}

.section-github .variation-copy p {
    margin: 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.08rem, 1.42vw, 1.52rem);
    font-style: italic;
    line-height: 1.38;
    color: rgba(250, 249, 240, 0.72);
}

.section-github .variation-meta a {
    display: inline-block;
    color: rgba(232, 132, 86, 0.96);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 132, 86, 0.62);
    transition: color 180ms ease, border-color 180ms ease;
}

.section-github .variation-meta a:hover {
    color: rgba(250, 249, 240, 0.88);
    border-bottom-color: rgba(250, 249, 240, 0.55);
}

.section-github .variation-meta {
    display: grid;
    grid-template-columns: minmax(9rem, 0.8fr) minmax(14rem, 1fr) minmax(12rem, 0.92fr) auto;
    gap: clamp(1rem, 4vw, 5.25rem);
    align-items: baseline;
    width: 100%;
    padding: clamp(1.2rem, 2.6vh, 1.9rem) clamp(1.25rem, 3vw, 3rem) 0;
    border-top: 1px solid rgba(250, 249, 240, 0.13);
}

.section-github .variation-meta p {
    margin: 0;
    max-width: none;
    color: rgba(250, 249, 240, 0.54);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.45;
}

.section-github .variation-meta p:nth-child(2) { justify-self: center; }
.section-github .variation-meta p:nth-child(3) { justify-self: end; text-align: right; }
.section-github .variation-meta a { justify-self: end; white-space: nowrap; }

.section-github .motion-ready .variation-head,
.section-github .motion-ready .variation-canvas-wrap,
.section-github .motion-ready .variation-meta {
    opacity: 0;
    transform: translateY(1.8rem);
    transition:
        opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.section-github .motion-ready .variation-head > * { opacity: 1; transform: none; }
.section-github .motion-ready .variation-canvas-wrap { transition-delay: 210ms; }
.section-github .motion-ready .variation-meta { transition-delay: 390ms; }

.section-github .motion-ready.is-visible .variation-head,
.section-github .motion-ready.is-visible .variation-canvas-wrap,
.section-github .motion-ready.is-visible .variation-meta {
    opacity: 1;
    transform: none;
}

.section-github .variation-canvas-wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #0f0f0e;
    border-top: 1px solid rgba(250, 249, 240, 0.12);
    border-bottom: 1px solid rgba(250, 249, 240, 0.12);
}

.section-github .variation-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    background: #0f0f0e;
}

.section-github .variation-dense { background: #0d0d0c; }

@media (max-width: 900px) {
    .section-github .activity-prelude { min-height: 64svh; }
    .section-github .variation-head {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "copy";
        min-height: auto;
        gap: 1.65rem;
        padding: 3.25rem clamp(1.25rem, 3vw, 3rem) 2rem;
    }
    .section-github .variation { min-height: auto; padding: 0 0 2.25rem; }
    .section-github .variation-head h2 {
        font-size: clamp(2.18rem, 10.7vw, 2.68rem);
        line-height: 0.86;
        /* No max-width here: it clamped the h2 to ~10ch, and the masked
           .vh-line (overflow:hidden, needed for the vertical reveal) then
           clipped the longer word's last glyph ("SHIPPIN|G"). The font-size
           below is sized so each word fits the full content width instead. */
        max-width: none;
    }
    .section-github .variation-copy { max-width: 22rem; margin-left: 0; }
    .section-github .variation-copy p { font-size: 1.02rem; line-height: 1.4; }
    .section-github .variation-meta {
        grid-template-columns: 1fr;
        gap: 0.58rem;
        padding: 1rem clamp(1.25rem, 3vw, 3rem) 0;
    }
    .section-github .variation-meta p { font-size: 0.54rem; letter-spacing: 0.1em; }
    .section-github .variation-meta p:nth-child(2),
    .section-github .variation-meta p:nth-child(3) { justify-self: start; text-align: left; }
    .section-github .variation-meta a { justify-self: start; margin-top: 0.34rem; width: max-content; font-size: 0.58rem; }
}

/* ─── Cinematic cover mode ───────────────────────────────────────────────
   When .is-cover is on .section-github, the section becomes a layered
   100dvh stage: cells fill the viewport as the background, head sits at
   the top with a fade-to-bg gradient, meta at the bottom. Replaces the
   linear head → canvas-strip → meta flow so the github matrix itself is
   what "covers the screen" during the entry transition. */
.section-github.is-cover .variation {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 152vh; /* taller than the viewport so the section breathes
                          and the user can scroll THROUGH it before leaving */
    padding: 0;
}

.section-github.is-cover .variation-canvas-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border: 0;
    background: #0d0d0c;
    overflow: hidden;
    pointer-events: none;
}

.section-github.is-cover .variation-canvas {
    width: 100%;
    max-width: 100%;
}

.section-github.is-cover .variation-head {
    position: relative;
    z-index: 3;
    background: linear-gradient(to bottom, rgba(13,13,12,0.88) 0%, rgba(13,13,12,0.62) 55%, rgba(13,13,12,0) 100%);
    padding-bottom: clamp(2.6rem, 5vh, 4rem);
}

.section-github.is-cover .variation-meta {
    position: relative;
    z-index: 3;
    margin-top: auto;
    background: linear-gradient(to top, rgba(13,13,12,0.94) 0%, rgba(13,13,12,0.68) 55%, rgba(13,13,12,0) 100%);
    border-top: 1px solid rgba(250, 249, 240, 0.13);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding-top: clamp(1.6rem, 3.2vh, 2.4rem);
}

@media (max-width: 900px) {
    .section-github.is-cover .variation-head {
        padding-bottom: 2rem;
    }
    .section-github.is-cover .variation-meta {
        padding-top: 1.6rem;
    }
}

/* ─── Overlay-cover intro mode ───────────────────────────────────────────
   When .is-overlay-cover is on .section-github, the canvas wrap, head and
   meta are LIFTED out of the section's flow and pinned as a fixed viewport
   overlay (above the prev section). This is the "squares cover the prev
   section as an intro" state, applied for the duration of the autoplay
   animation. After the animation, the class is removed and these elements
   settle back into the section's natural .is-cover layout — visually
   identical at handoff (because at that moment github is already at
   viewport top via Lenis scrollTo). */
.section-github.is-overlay-cover .variation-canvas-wrap {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 10500;
    background: #0d0d0c;
}

.section-github.is-overlay-cover .variation-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 10501;
    margin: 0;
}

.section-github.is-overlay-cover .variation-meta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 10501;
    margin: 0;
}

/* ─── Breathing room (cover mode) ────────────────────────────────────────
   The full-bleed activity grid was competing with the title at full
   intensity, leaving no air. Here the grid is demoted to a calm backdrop:
   dimmed, vignetted at the edges, and pulled into a centred band so the
   title has clear space above and the meta clear space below. The title is
   also brought down from its enormous display size to something the screen
   can hold without feeling crammed. */
.section-github.is-cover .variation-canvas-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(22rem, 62vh, 44rem);
    margin: 0;
    display: flex;
    align-items: center;
    -webkit-mask-image: radial-gradient(120% 92% at 50% 50%, #000 44%, transparent 100%);
    mask-image: radial-gradient(120% 92% at 50% 50%, #000 44%, transparent 100%);
}

/* Dim on the CANVAS (not the wrap) — the wrap carries an inline
   gsap opacity:1 from section-pin-reveal.js that would override a wrap rule.
   Kept light so the activity squares read as themselves (the warm graph is
   the point of the section), not as a near-black backdrop. */
.section-github.is-cover .variation-canvas { opacity: 0.82; }

.section-github.is-cover .variation-head h2 {
    font-size: clamp(4.2rem, 8.6vw, 9rem);
    line-height: 0.92;
}

/* ─── Masked line reveal ───────────────────────────────────────────────
   The title is split into two block lines, each a clipping window with its
   text on an inner slider. Default (no JS / reduced motion) = visible. The
   curtain enter arms it (.reveal-armed -> instantly hidden below the mask)
   then plays it (.is-revealed -> lines rise with stagger). Block lines also
   make the two-line layout deterministic, so the Syne display=swap font swap
   can never reflow it. */
.section-github .variation-title h2 .vh-line {
    display: block;
    overflow: hidden;
    /* descender room (the 'p'/'g' of "Shipping") without disturbing spacing */
    padding-bottom: 0.13em;
    margin-bottom: -0.09em;
}
.section-github .variation-title h2 .vh-inner {
    display: block;
    transform: translateY(0);
}
.section-github .variation-title h2.reveal-armed .vh-inner {
    transform: translateY(118%);
}
.section-github .variation-title h2.is-revealed .vh-inner {
    transform: translateY(0);
    transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.section-github .variation-title h2.is-revealed .vh-line:nth-child(2) .vh-inner {
    transition-delay: 0.13s;
}

/* "13" carries the graph's warm accent — ties the headline to the squares. */
.section-github .variation-title h2 .vh-accent {
    color: var(--accent, #d97757);
}

.section-github.is-cover .variation-head {
    background: none;
    padding-top: clamp(6rem, 16vh, 11rem);
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

.section-github.is-cover .variation-meta {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: clamp(2.4rem, 5vh, 3.6rem);
    padding-bottom: clamp(5rem, 12vh, 8rem);
}

@media (max-width: 900px) {
    .section-github.is-cover .variation { min-height: 158vh; }
    .section-github.is-cover .variation-canvas-wrap {
        height: clamp(18rem, 52vh, 30rem);
    }
    .section-github.is-cover .variation-canvas { opacity: 0.86; }
    .section-github.is-cover .variation-head { padding-top: clamp(5rem, 13vh, 8rem); }
    /* "SHIPPING" is the widest word; the masked .vh-line box is ~325px at 375px.
       At 11.2vw (42px) the word measured 343px and still clipped. 9.2vw lands
       ~34.5px at 375 (word ~282px) leaving comfortable margin; verified 0 clip
       in Playwright across 320/375/414. */
    .section-github.is-cover .variation-head h2 {
        font-size: clamp(2rem, 9.2vw, 3rem);
        line-height: 0.92;
    }
}