/**
 * vv.css — vivianvoss.net
 * Custom styles for Vivian Voss personal website.
 * Mobile-first. Each breakpoint adds only its deltas.
 *
 * Copyright 2026 Vivian Voss. All rights reserved.
 */

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/press-start-2p.woff2') format('woff2');
}

@font-face {
    font-family: 'Oxanium';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/oxanium.woff2') format('woff2');
}

@layer theme {
    :root {
        --accent: oklch(68% 0.18 35);
        --accent-subtle: light-dark(oklch(95% 0.04 35), oklch(22% 0.04 35));
        --bg: light-dark(oklch(98% 0.005 260), oklch(12% 0.005 260));
        --surface: light-dark(oklch(100% 0 0), oklch(18% 0.005 260));
        --text: light-dark(oklch(18% 0 0), oklch(93% 0 0));
        --muted: light-dark(oklch(55% 0 0), oklch(60% 0 0));
        --border: light-dark(oklch(88% 0 0), oklch(25% 0.005 260));
        --font-body: 'Oxanium', system-ui, sans-serif;
        --font-heading: 'Press Start 2P', monospace;
    }

    body {
        font-family: var(--font-body);
    }

    h1, h2, h3 {
        font-family: var(--font-heading);
    }
}

/* ========================================================================
   LAYOUT — Phone first
   ======================================================================== */

@layer castd {

    /* --- Scrollbar (macOS-style overlay) ---------------------------------- */

    html {
        scrollbar-width: thin;
        scrollbar-color: light-dark(oklch(70% 0 0 / 0.3), oklch(60% 0 0 / 0.3)) transparent;
        overflow-y: scroll;
    }

    ::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: light-dark(oklch(70% 0 0 / 0.3), oklch(60% 0 0 / 0.3));
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: light-dark(oklch(60% 0 0 / 0.5), oklch(70% 0 0 / 0.5));
    }

    /* --- Canvas background ------------------------------------------------ */

    #stars {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
    }

    /* --- Skip link -------------------------------------------------------- */

    .skip-link {
        position: absolute;
        top: calc(var(--unit) * -10);
        left: var(--unit);
        background: var(--accent);
        color: var(--text-inv);
        padding: var(--unit) calc(var(--unit) * 2);
        z-index: 100;
        text-decoration: none;

        &:focus {
            top: var(--unit);
        }
    }

    /* --- Header ----------------------------------------------------------- */

    header[role="banner"] {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
        background: light-dark(oklch(98% 0.005 260 / 0.9), oklch(12% 0.005 260 / 0.9));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);

        & a[aria-label] {
            text-decoration: none;
            color: var(--text);
            font-size: calc(var(--unit) * 2.25);
            letter-spacing: -0.02em;
        }

        & strong {
            font-weight: 700;
        }
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(var(--unit) * 5);
        height: calc(var(--unit) * 5);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;

        & span,
        & span::before,
        & span::after {
            display: block;
            width: calc(var(--unit) * 2.5);
            height: 2px;
            background: var(--text);
            transition: transform 0.2s, opacity 0.2s;
        }

        & span {
            position: relative;
        }

        & span::before,
        & span::after {
            content: "";
            position: absolute;
            left: 0;
        }

        & span::before { top: calc(var(--unit) * -1); }
        & span::after { top: var(--unit); }

        &[aria-expanded="true"] span {
            background: transparent;
        }
        &[aria-expanded="true"] span::before {
            top: 0;
            transform: rotate(45deg);
        }
        &[aria-expanded="true"] span::after {
            top: 0;
            transform: rotate(-45deg);
        }
    }

    nav#nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: light-dark(oklch(98% 0.005 260 / 0.95), oklch(12% 0.005 260 / 0.95));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
        padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
        flex-direction: column;
        gap: calc(var(--unit) * 2);

        &.is-open {
            display: flex;
        }

        & a {
            color: var(--text);
            text-decoration: none;
            padding: var(--unit) 0;
            font-size: calc(var(--unit) * 2);

            &:hover {
                color: var(--accent);
            }
        }
    }

    /* --- Main ------------------------------------------------------------- */

    main#content {
        padding: calc(var(--unit) * 4) calc(var(--unit) * 3);
        max-width: calc(var(--unit) * 160);
        margin: 0 auto;
        width: 100%;
        gap: calc(var(--unit) * 8);
    }

    /* --- Section ---------------------------------------------------------- */

    .vv-section {
        gap: calc(var(--unit) * 3);
    }

    .vv-section h1 {
        font-size: calc(var(--unit) * 2.5);
        font-weight: 400;
        letter-spacing: 0.02em;
        line-height: 1.6;
    }

    .vv-section h2 {
        font-size: calc(var(--unit) * 1.75);
        font-weight: 400;
        letter-spacing: 0.02em;
        line-height: 1.6;
        color: var(--accent);
    }

    .vv-section h3 {
        font-size: calc(var(--unit) * 1.5);
        font-weight: 400;
        letter-spacing: 0.02em;
        line-height: 1.6;
    }

    .vv-section p {
        line-height: var(--line-height-base);
        color: var(--muted);
        max-width: 65ch;
    }

    .vv-section p.lead {
        font-size: calc(var(--unit) * 2.5);
        color: var(--text);
    }

    /* --- Hero ------------------------------------------------------------- */

    .vv-hero {
        padding: calc(var(--unit) * 6) 0;
        gap: calc(var(--unit) * 3);
    }

    .vv-hero h1 {
        font-size: calc(var(--unit) * 3);
        line-height: 1.6;
    }

    .vv-hero .tagline {
        font-size: calc(var(--unit) * 2.5);
        color: var(--muted);
        max-width: 50ch;
    }

    .vv-hero .accent {
        color: var(--accent);
    }

    /* --- Card grid -------------------------------------------------------- */

    .vv-cards {
        display: grid;
        gap: calc(var(--unit) * 3);
    }

    .vv-card {
        background: var(--surface);
        border: 1px solid var(--border);
        padding: calc(var(--unit) * 3);
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        gap: calc(var(--unit) * 1.5);

        & h3 {
            font-size: calc(var(--unit) * 1.5);
            font-weight: 400;
            line-height: 1.6;
        }

        & p {
            color: var(--muted);
            line-height: var(--line-height-base);
        }

        & .size {
            font-family: ui-monospace, monospace;
            color: var(--accent);
            font-size: calc(var(--unit) * 1.75);
            font-weight: 600;
        }

        & .status {
            font-size: calc(var(--unit) * 1.75);
            color: var(--muted);
            font-style: italic;
            align-self: end;
        }

        & a:last-child {
            align-self: end;
        }
    }

    /* --- Series list ------------------------------------------------------ */

    .vv-series {
        display: grid;
        gap: calc(var(--unit) * 2);
    }

    .vv-series-item {
        display: grid;
        gap: var(--unit);
        padding: calc(var(--unit) * 2) 0;
        border-bottom: 1px solid var(--border);

        & .day {
            font-family: ui-monospace, monospace;
            font-size: calc(var(--unit) * 1.75);
            color: var(--accent);
            font-weight: 600;
        }

        & h3 {
            font-size: calc(var(--unit) * 1.5);
            font-weight: 400;
            line-height: 1.6;
        }

        & p {
            color: var(--muted);
            line-height: var(--line-height-base);
        }
    }

    /* --- Contact list ----------------------------------------------------- */

    .vv-contact {
        display: grid;
        gap: calc(var(--unit) * 2);

        & a {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    /* --- Hardware timeline ------------------------------------------------ */

    .vv-timeline {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--unit) * 2);
        font-family: ui-monospace, monospace;
        font-size: calc(var(--unit) * 1.75);
        color: var(--accent);
    }

    .vv-timeline .year {
        color: var(--muted);
    }

    /* --- Marquee (demoscene scroll) --------------------------------------- */

    .vv-marquee {
        overflow: hidden;
        font-family: ui-monospace, monospace;
        font-size: calc(var(--unit) * 1.75);
        color: var(--accent);
    }

    .vv-marquee-track {
        display: flex;
        gap: calc(var(--unit) * 2);
        white-space: nowrap;
        width: max-content;
        animation: marquee 30s linear infinite;
    }

    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    /* --- Performance dashboard -------------------------------------------- */

    .vv-perf-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--unit) * 2);
    }

    .vv-perf-metric {
        background: var(--surface);
        border: 1px solid var(--border);
        padding: calc(var(--unit) * 2);
        display: grid;
        gap: calc(var(--unit) * 0.5);
        text-align: center;
    }

    .vv-perf-metric .value {
        font-family: var(--font-heading);
        font-size: calc(var(--unit) * 1.75);
        color: var(--accent);
        line-height: 1.6;
    }

    .vv-perf-metric .label {
        font-size: calc(var(--unit) * 1.5);
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* --- Contact form ----------------------------------------------------- */

    .vv-form {
        display: grid;
        gap: calc(var(--unit) * 3);
        max-width: 50ch;
    }

    .vv-form-field {
        display: grid;
        gap: calc(var(--unit) * 0.75);
    }

    .vv-form-field label {
        font-size: calc(var(--unit) * 1.75);
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vv-form-field input,
    .vv-form-field textarea {
        font-family: var(--font-body);
        font-size: calc(var(--unit) * 2);
        color: var(--text);
        background: var(--surface);
        border: 1px solid var(--border);
        padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
        width: 100%;

        &:focus {
            outline: 2px solid var(--accent);
            outline-offset: -2px;
            border-color: var(--accent);
        }
    }

    .vv-form-field textarea {
        resize: vertical;
        min-height: calc(var(--unit) * 16);
    }

    .vv-hp {
        position: absolute;
        left: -9999px;
        opacity: 0;
        height: 0;
        overflow: hidden;
    }

    .vv-status {
        max-width: 50ch;
        padding: calc(var(--unit) * 2);
        border: 1px solid var(--border);
        font-size: calc(var(--unit) * 2);
        line-height: var(--line-height-base);
    }

    .vv-status-ok {
        color: oklch(72% 0.15 145);
        border-color: oklch(72% 0.15 145 / 0.4);
    }

    .vv-status-err {
        color: var(--accent);
        border-color: var(--accent);
    }

    .vv-btn {
        font-family: var(--font-heading);
        font-size: calc(var(--unit) * 1.5);
        color: var(--bg);
        background: var(--accent);
        border: none;
        padding: calc(var(--unit) * 1.75) calc(var(--unit) * 3);
        cursor: pointer;
        letter-spacing: 0.05em;
        justify-self: start;
        transition: opacity 0.15s;

        &:hover {
            opacity: 0.85;
        }

        &:focus-visible {
            outline: 2px solid var(--text);
            outline-offset: 2px;
        }
    }

    /* --- Footer ----------------------------------------------------------- */

    footer[role="contentinfo"] {
        padding: calc(var(--unit) * 4) calc(var(--unit) * 3);
        border-top: 1px solid var(--border);
        text-align: center;
        gap: calc(var(--unit) * 2);
        color: var(--muted);
        font-size: calc(var(--unit) * 1.75);

        & .powered-by {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--unit);
        }

        & .powered-by img {
            vertical-align: middle;
        }

        & .tech-stack {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--unit);
        }
    }

    /* ======================================================================
       TABLET — 560px
       Only deltas from phone.
       ====================================================================== */

    @media (min-width: 560px) {
        main#content {
            padding: calc(var(--unit) * 6) calc(var(--unit) * 4);
        }

        .vv-hero h1 {
            font-size: calc(var(--unit) * 4);
        }

        .vv-cards {
            grid-template-columns: repeat(2, 1fr);
        }

        .vv-perf-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* ======================================================================
       SCREEN — 960px
       Only deltas from tablet.
       ====================================================================== */

    @media (min-width: 960px) {
        .nav-toggle {
            display: none;
        }

        nav#nav {
            display: flex;
            position: static;
            background: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-bottom: none;
            padding: 0;
            flex-direction: row;
            gap: calc(var(--unit) * 3);
        }

        main#content {
            padding: calc(var(--unit) * 8) calc(var(--unit) * 6);
            gap: calc(var(--unit) * 12);
        }

        .vv-hero {
            padding: calc(var(--unit) * 12) 0;
        }

        .vv-hero h1 {
            font-size: calc(var(--unit) * 5);
        }

        .vv-section h1 {
            font-size: calc(var(--unit) * 3);
        }

        .vv-cards {
            grid-template-columns: repeat(3, 1fr);
        }

        .vv-perf-grid {
            grid-template-columns: repeat(6, 1fr);
        }

        .vv-series-item {
            grid-template-columns: calc(var(--unit) * 16) 1fr;
            grid-template-rows: auto auto;
            column-gap: calc(var(--unit) * 3);

            & .day {
                grid-row: 1 / -1;
                align-self: start;
                padding-top: calc(var(--unit) * 0.25);
            }
        }
    }

    /* ======================================================================
       WIDE — 1260px
       Only deltas from screen.
       ====================================================================== */

    @media (min-width: 1260px) {
        main#content {
            padding: calc(var(--unit) * 10) calc(var(--unit) * 8);
        }

        .vv-hero h1 {
            font-size: calc(var(--unit) * 6);
        }
    }
}

/* ========================================================================
   GAME — Sublayer for Space Invaders easter egg
   ======================================================================== */

@layer castd.game {
    .game-score,
    .game-restart {
        display: none;
    }

    @media (min-width: 560px) {
        .game-score {
            display: block;
            position: fixed;
            top: calc(var(--unit) * 15);
            right: 50px;
            z-index: 5;
            font-family: var(--font-heading);
            font-size: calc(var(--unit) * 10);
            color: var(--accent);
            opacity: 0.15;
            pointer-events: none;
        }

        .game-restart {
            display: block;
            position: fixed;
            bottom: calc(var(--unit) * 3);
            right: calc(var(--unit) * 3);
            z-index: 5;
            font-family: var(--font-heading);
            font-size: calc(var(--unit) * 2.25);
            color: var(--accent);
            opacity: 0.3;
            pointer-events: none;
        }
    }
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    #stars {
        display: none;
    }

    .vv-marquee-track {
        animation-play-state: paused;
    }
}