/* ==========================================================================
   home.css
   Home page only: hero, about statement, selected work, "Currently",
   writing, and the closing call to action, plus their scroll-driven effects.
   Relies on the tokens in main.css and components in custom.css.

   How the effects are layered (progressive enhancement):
   1. Base styles: the full page, readable, with no motion at all.
   2. prefers-reduced-motion: no-preference: adds time-based entrance
      animations and hover transitions.
   3. @supports (animation-timeline: view()): adds the scroll-driven effects
      in browsers that support them.
   ========================================================================== */

.home > section + section {
    margin-top: var(--space-2xl);
}

/* Heading row with a "View all" link beside it */
.section-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-xs) var(--space-m);
    padding-top: var(--space-m);
    margin-bottom: var(--space-l);
}

/* The divider above each section; it "draws" across on scroll */
.section-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background-color: var(--color-text);
    transform-origin: 0 50%;
}

.section-header h2 {
    margin: 0;
}

/* Small uppercase link with an arrow that nudges on hover */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: var(--tap-target);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.arrow-link:hover {
    text-decoration: underline;
}

/* --- HERO --- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-l);
    min-height: calc(100svh - 10rem);
    padding-block: var(--space-l) var(--space-xl);
    /* Clips the sideways drift of the headline without creating a scroll container */
    overflow-x: clip;
}

.hero-title {
    margin: 0;
    font-size: clamp(2.75rem, 8vw, 7.5rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.hero-line {
    display: block;
}

/* Large text only, so the faint gray still meets 3:1 contrast */
.hero-line-faint {
    color: var(--color-text-faint);
}

.hero-meta {
    display: grid;
    gap: var(--space-l);
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-border);
}

.hero-bio {
    margin: 0;
    max-width: 36ch;
    font-size: clamp(1.125rem, 1vw + 0.875rem, 1.375rem);
    line-height: 1.45;
}

.hero-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-m);
    margin: 0;
}

.hero-facts dd {
    margin: 0.25rem 0 0;
    font-weight: 500;
}

@media (width >= 56rem) {
    .hero-meta {
        grid-template-columns: 1fr 1.25fr;
        align-items: start;
    }
}

/* Decorative "Scroll" hint with a line under it */
.scroll-cue {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.scroll-cue::after {
    content: "";
    width: 3rem;
    height: 1px;
    background-color: var(--color-text-muted);
    transform-origin: 0 50%;
}

/* --- ABOUT STATEMENT --- */
.statement-text {
    margin: var(--space-m) 0 var(--space-l);
    max-width: 28ch;
    font-size: clamp(1.75rem, 3.75vw, 3.5rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

/* Each sentence is its own block so it can light up separately on scroll */
.statement-text span {
    display: block;
}

/* --- SELECTED WORK --- */
/*
 * Numbered rows instead of cards. The number comes from a CSS counter; the
 * `/ ""` after content hides it from screen readers, which already announce
 * the position in the <ol>.
 */
.work-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: work;
}

.work-item {
    position: relative;
    counter-increment: work;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-xs) var(--space-s);
    padding: var(--space-m) var(--space-s);
    border-bottom: 1px solid var(--color-border);

    /* The hover fill: a solid layer that grows from 0% to 100% wide */
    background: linear-gradient(var(--color-text) 0 0) no-repeat 0 0 / 0% 100%;
}

.work-item::before {
    content: counter(work, decimal-leading-zero) / "";
    grid-row: 1 / span 3;
    padding-top: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.work-item > * {
    grid-column: 2;
    margin: 0;
}

.work-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -0.04em;
}

.work-title a {
    text-decoration: none;
}

/* Makes the whole row clickable while the link text stays just the title */
.work-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.work-summary {
    max-width: 45ch;
    color: var(--color-text-muted);
}

.work-meta {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Hover or keyboard focus: the row fills in and its text inverts */
.work-item:hover,
.work-item:has(a:focus-visible) {
    background-size: 100% 100%;
    color: var(--color-bg);
}

.work-item:hover :is(.work-summary, .work-meta),
.work-item:hover::before,
.work-item:has(a:focus-visible) :is(.work-summary, .work-meta),
.work-item:has(a:focus-visible)::before {
    color: var(--color-bg);
}

/* Inverted row means the focus ring needs inverted colors too */
.work-item a:focus-visible {
    outline-color: var(--color-bg);
    box-shadow: none;
}

@media (width >= 56rem) {
    .work-item {
        grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr) 9rem;
        align-items: baseline;
        padding-block: var(--space-l);
    }

    .work-item::before {
        grid-row: auto;
        padding-top: 0;
    }

    .work-item > * {
        grid-column: auto;
    }

    .work-meta {
        text-align: end;
    }
}

/* --- CURRENTLY --- */
.now-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-l);
    margin: 0;
}

.now-item {
    display: grid;
    align-content: start;
    gap: var(--space-s);
    padding: var(--space-m);
    background-color: var(--color-surface);
    border-radius: var(--radius);
}

.now-item dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* --- WRITING --- */
/* The section divider above replaces the list's own top border */
.home .post-list {
    margin-top: 0;
    border-top: none;
}

/* --- CLOSING CALL TO ACTION --- */
.cta {
    padding-block: var(--space-xl) var(--space-l);
}

.cta-title {
    margin: var(--space-s) 0 0;
    font-size: clamp(3.5rem, 14vw, 12rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.065em;
    transform-origin: 0 100%;
}

.cta-title a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15em;
    text-decoration: none;
}

.cta-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.04em;
    text-underline-offset: 0.08em;
}

.cta-arrow {
    display: inline-block;
    font-weight: 300;
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* --- Time-based: hero entrance on page load --- */
    .hero > .eyebrow,
    .hero-line,
    .hero-meta {
        animation: rise 1s var(--ease-out) both;
    }

    .hero > .eyebrow {
        animation-delay: 0s;
    }
    .hero-line:nth-child(1) {
        animation-delay: 0.1s;
    }
    .hero-line:nth-child(2) {
        animation-delay: 0.2s;
    }
    .hero-line:nth-child(3) {
        animation-delay: 0.3s;
    }
    .hero-meta {
        animation-delay: 0.5s;
    }

    .scroll-cue::after {
        animation: pulse-line 2.4s var(--ease-out) infinite;
    }

    /* --- Hover transitions --- */
    .work-item {
        transition:
            background-size 0.5s var(--ease-out),
            color 0.3s ease;
    }

    .work-item::before,
    .work-summary,
    .work-meta {
        transition: color 0.3s ease;
    }

    .arrow-link span,
    .cta-arrow {
        transition: translate 0.3s var(--ease-out);
    }

    .arrow-link:hover span {
        translate: 0.25em 0;
    }

    .cta-title a:hover .cta-arrow {
        translate: 0.1em 0;
    }

    /* --- Scroll-driven effects --- */
    @supports (animation-timeline: view()) {
        /*
         * Headline lines drift apart as the hero scrolls away. They already
         * run the `rise` entrance, so this adds a second animation on its
         * own timeline. `rise` animates `transform` and `opacity`, while
         * `drift` only animates `translate`, so the two never fight over
         * the same property.
         */
        .hero-line {
            animation:
                rise 1s var(--ease-out) both,
                drift linear both;
            animation-timeline: auto, view();
            animation-range: normal, exit 0% exit 100%;
        }

        .hero-line:nth-child(1) {
            --drift: -8%;
            animation-delay: 0.1s, 0s;
        }
        .hero-line:nth-child(2) {
            --drift: 6%;
            animation-delay: 0.2s, 0s;
        }
        .hero-line:nth-child(3) {
            --drift: -3%;
            animation-delay: 0.3s, 0s;
        }

        /* Hint disappears as soon as scrolling starts */
        .scroll-cue {
            animation: fade-out linear both;
            animation-timeline: scroll(root);
            animation-range: 0 20vh;
        }

        /* Section dividers draw from left to right as they come into view */
        .section-header::before {
            animation: grow-x linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 35%;
        }

        /* About statement: each sentence brightens as it nears the middle */
        .statement-text span {
            animation: brighten linear both;
            animation-timeline: view();
            animation-range: entry 100% cover 45%;
        }

        /* Work rows and post rows slide up as they enter */
        .work-item,
        .home .post-list article {
            animation: reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }

        /* "Currently" tiles enter one after another */
        .now-item {
            animation: reveal linear both;
            animation-timeline: view();
            animation-range: entry calc(var(--i, 0) * 15%) cover calc(30% + var(--i, 0) * 5%);
        }
        .now-item:nth-child(2) {
            --i: 1;
        }
        .now-item:nth-child(3) {
            --i: 2;
        }
        .now-item:nth-child(4) {
            --i: 3;
        }

        /*
         * "Let's talk" grows to full size as it scrolls into view. It sits at
         * the very end of the page, so the range must finish by the time it's
         * fully on screen; a `cover` range could never complete here.
         */
        .cta-title {
            animation: grow-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0.35em);
    }
}

@keyframes drift {
    to {
        translate: var(--drift, 0) 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes pulse-line {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

@keyframes brighten {
    from {
        color: var(--color-text-faint);
    }
    to {
        color: var(--color-text);
    }
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
}

@keyframes grow-in {
    from {
        opacity: 0;
        transform: scale(0.75);
    }
}