:root {
    --bg: #090d17;
    --bg-alt: #0d1424;
    --surface: #131b2c;
    --surface-2: #182236;
    --border: #22304a;
    --border-soft: #1b2536;
    --text: #f1f5f9;
    --text-muted: #8fa0bc;
    --text-dim: #5b6b87;
    --accent: #38bdf8;
    --accent-soft: rgba(56, 189, 248, 0.12);
    --chili: #ff6a45;
    --chili-soft: rgba(255, 106, 69, 0.12);
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

/* Ambient backdrop: faint grid + a soft light that follows the pointer */
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(var(--border-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.35;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 20%),
        rgba(56, 189, 248, 0.12) 0%,
        rgba(56, 189, 248, 0.04) 40%,
        rgba(56, 189, 248, 0) 68%);
    transition: background 0.15s ease-out;
}

.container { max-width: 850px; margin: 0 auto; }

header { text-align: center; padding: 60px 20px 40px; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

h1 {
    font-family: var(--font-display);
    font-size: 2.9rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    background: linear-gradient(100deg, #ffffff 30%, var(--accent) 65%, var(--chili) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sheen 7s ease-in-out infinite;
}

@keyframes sheen {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.subtitle {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    color: var(--text-muted);
    min-height: 1.4em;
}

.js .subtitle::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent);
    margin-left: 3px;
    vertical-align: -0.15em;
    animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

section { margin-bottom: 48px; }

/* Sections are visible from the moment the page renders. An earlier version
   hid them and revealed on scroll, but inside an embedded preview frame the
   scroll events never fired and everything below the fold stayed invisible.
   The fade now runs on load instead, so content can never be stuck hidden. */
[data-reveal] {
    animation: fadeUp 0.5s ease-out both;
}

[data-reveal]:nth-of-type(2) { animation-delay: 0.06s; }
[data-reveal]:nth-of-type(3) { animation-delay: 0.12s; }
[data-reveal]:nth-of-type(4) { animation-delay: 0.18s; }
[data-reveal]:nth-of-type(5) { animation-delay: 0.24s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 20px;
    color: #cbd5e1;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

@media (min-width: 720px) {
    .about-layout { grid-template-columns: 1.6fr 1fr; gap: 36px; }
}

.about-text {
    color: var(--text-muted);
    font-size: 1.05rem;
    position: relative;
    padding-left: 18px;
}

.about-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), var(--chili));
}

.about-facts {
    background: linear-gradient(160deg, var(--surface) 0%, var(--bg-alt) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.fact { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.fact:first-child { padding-top: 0; }
.fact:last-child { padding-bottom: 0; border-bottom: none; }

.fact dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 3px;
}

.fact dd {
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 500;
}

.fact dd.available {
    color: #6ee7a8;
    display: flex;
    align-items: center;
    gap: 7px;
}

.fact dd.available::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ee7a8;
    box-shadow: 0 0 0 0 rgba(110, 231, 168, 0.6);
    animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(110, 231, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0); }
}

/* Featured project */
.featured-card {
    position: relative;
    /* Glow is layered into the card background rather than sitting in a clipped
       pseudo-element. The stops end on a fully transparent chili rather than the
       `transparent` keyword, which resolves to transparent BLACK and would
       otherwise darken the midpoint into a visible edge. */
    background:
        radial-gradient(135% 150% at 92% 0%,
            rgba(255, 106, 69, 0.14) 0%,
            rgba(255, 106, 69, 0.06) 34%,
            rgba(255, 106, 69, 0.015) 55%,
            rgba(255, 106, 69, 0) 72%),
        linear-gradient(160deg, var(--surface) 0%, var(--bg-alt) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 28px 24px;
    overflow: hidden;
}

.featured-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--chili);
    background: var(--chili-soft);
    border: 1px solid rgba(255, 106, 69, 0.35);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.featured-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.featured-blurb {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 88ch;
    margin-bottom: 20px;
}

.tech-grid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tech-pill {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: #bcd4ea;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 5px 11px;
    border-radius: 6px;
}

.featured-role {
    color: var(--text-dim);
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.featured-links { display: flex; flex-wrap: wrap; gap: 20px; }

/* Systems Playground demo */
.demo-intro {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 105ch;
    margin-bottom: 20px;
}

.demo-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

#genCanvas {
    width: 100%;
    aspect-ratio: 700 / 360;
    height: auto;
    display: block;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
}

.demo-fallback {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-dim);
    padding: 12px 0;
}

.js .demo-fallback { display: none; }

.legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.legend li { display: flex; align-items: center; gap: 7px; }

.swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: transparent;
    background: color-mix(in srgb, var(--swatch) 22%, transparent);
    border: 1px solid var(--swatch);
}

.boss-notice {
    margin-top: 14px;
    padding: 9px 13px;
    border-radius: 8px;
    background: var(--chili-soft);
    border: 1px solid rgba(255, 106, 69, 0.35);
    color: #ffb199;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.boss-notice[hidden] { display: none; }

.demo-controls {
    /* Hidden by default; only revealed once JS confirms it is running,
       since the controls do nothing without it. */
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.js .demo-controls { display: flex; }

.btn-primary {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bg);
    background: var(--accent);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(56, 189, 248, 0.25); }
.btn-primary:active { transform: translateY(0); }

.demo-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.stat-label { color: var(--text-dim); margin-right: 6px; }
.stat-value { color: var(--accent); font-weight: 600; }

.code-reveal {
    margin-top: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--bg-alt);
    overflow: hidden;
}

.code-reveal summary {
    cursor: pointer;
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    list-style: none;
}

.code-reveal summary::-webkit-details-marker { display: none; }
.code-reveal summary::before { content: '▸ '; color: var(--accent); }
.code-reveal[open] summary::before { content: '▾ '; }

.code-reveal pre {
    margin: 0;
    padding: 0 16px 16px;
    overflow-x: auto;
}

.code-reveal code {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.65;
    color: #c9d6e8;
    white-space: pre;
}

/* Project grid */
.grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }

.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.card:hover {
    transform: translateY(-3px);
    border-color: #475569;
    box-shadow: 0 10px 30px -12px rgba(56, 189, 248, 0.25);
}

h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; color: #f1f5f9; }
.card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 16px; flex-grow: 1; }

.repo-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
}

.repo-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.2s ease;
}

.repo-link:hover::after { width: 100%; }

.contact-card { background-color: var(--surface); border: 1px solid var(--border); padding: 24px; border-radius: 12px; }
.contact-item { display: flex; margin-bottom: 12px; font-size: 1rem; }
.contact-item:last-child { margin-bottom: 0; }
.contact-label { width: 80px; font-weight: 600; color: #cbd5e1; }
.contact-value a { color: var(--accent); text-decoration: none; }
.contact-value a:hover { text-decoration: underline; }

footer { text-align: center; padding: 40px 0; color: var(--text-dim); font-size: 0.875rem; border-top: 1px solid var(--border-soft); }

@media (prefers-reduced-motion: reduce) {
    h1 { animation: none; background-position: 0% 50%; }
    .subtitle::after { animation: none; }
    .fact dd.available::before { animation: none; box-shadow: none; }
    [data-reveal] { animation: none; opacity: 1; transform: none; }
    .card, .btn-primary { transition: none; }
}

/* ---------------- Showreel page ---------------- */
.site-nav { padding: 24px 0 0; }

.nav-back {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-back:hover { color: var(--accent); }

.page-header { text-align: center; padding: 40px 20px 30px; }

.subtitle-static {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text-muted);
}

.reel-section { margin-bottom: 44px; }
.reel-section:last-child { margin-bottom: 0; }

.reel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.reel-head h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.reel-role {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--chili);
    background: var(--chili-soft);
    border: 1px solid rgba(255, 106, 69, 0.35);
    padding: 3px 9px;
    border-radius: 999px;
}

.reel-blurb {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 88ch;
    margin-bottom: 12px;
}

.reel-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 18px;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 720px) {
    .video-grid { grid-template-columns: 1fr 1fr; }
}

.video-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.video-card:hover {
    border-color: #475569;
    box-shadow: 0 10px 30px -12px rgba(56, 189, 248, 0.25);
}

.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-frame iframe,
.video-frame video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-missing {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
}

.video-meta { padding: 14px 16px 16px; }

.video-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.video-note {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.reel-empty {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-dim);
    background: var(--bg-alt);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
}

/* Header link across to the showreel from the main page */
.header-links {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 16px;
}

.header-links a {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 7px 15px;
    border-radius: 8px;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.header-links a:hover { border-color: var(--accent); transform: translateY(-1px); }

.video-link {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent);
    text-decoration: none;
}

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