/* ZT Nature by Khairunnas for Zelowtype (free to use, see fonts/ZTNature-README.md).
   Shared with Forge VFX so the studio and its tools read as one family. */
@font-face {
    font-family: 'ZT Nature';
    src: url('../fonts/ZTNature-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helmet';
    src: url('../fonts/Helmet-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
    --bg:            #03050f;
    --surface:       rgba(255, 255, 255, 0.035);
    --surface-hover: rgba(255, 255, 255, 0.055);
    --stroke:        rgba(255, 255, 255, 0.09);
    --stroke-strong: rgba(255, 255, 255, 0.18);
    --text:          #eef1f7;
    --muted:         #b0b8c8;
    --faint:         #858ea2;
    /* Single warm accent: a muted champagne, echoing the starlight. */
    --accent:        #d8c08e;
    --accent-rgb:    216, 192, 142;
    --accent-soft:   rgba(var(--accent-rgb), 0.12);
    --font:          'ZT Nature', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
    --r-md:          14px;
    --r-lg:          22px;
}

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

body {
    font-family: var(--font);
    font-weight: 400;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    position: relative;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Soft vignette for text depth: above the starfield, below the content.
   The starfield layer itself (positioning + twinkle animations) is styled
   inside starfield.php, so the background renders even if this file is
   cached/stale. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.6) 100%);
    z-index: -1;
    pointer-events: none;
}

::selection {
    background: var(--accent-soft);
    color: #fff;
}

.hero {
    padding: 88px 20px 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    /* Landing page: the hero (big logo + title) shrinks toward the top bar and
       fades as you scroll, handing off to the compact bar logo that scales up at
       the same time. --scroll-progress (0 -> 1) is set on :root in index.php. */
    transform-origin: center top;
    transform: scale(calc(1 - 0.5 * var(--scroll-progress, 0)));
    opacity: calc(1 - var(--scroll-progress, 0));
    will-change: transform, opacity;
}

.logo {
    max-width: 104px;
    height: auto;
    position: relative;
    z-index: 1;
    transition: transform 0.6s var(--ease);
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
}

.logo:hover {
    transform: scale(1.04);
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.site-title {
    font-family: 'Helmet', sans-serif;
    font-size: 3.4rem;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.15;
    text-shadow: none;
}

.subtitle {
    font-family: 'Helmet', sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    margin: 0;
    color: var(--muted);
    letter-spacing: 0.62em;
    text-transform: uppercase;
    align-self: center;
}

h1, h2, h3 {
    font-weight: 600;
    margin: 0 0 20px 0;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

/* ---------- Landing: intro ---------- */

.intro {
    padding: 40px 0 36px;
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 22px;
}

/* Oversized, hand-set headline: each line rises out of its own mask. */
.display {
    font-size: clamp(2.9rem, 8.4vw, 7.6rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: var(--text);
    margin: 0;
}

.display-line {
    display: block;
    overflow: clip;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.display-line > span {
    display: inline-block;
}

.display-line--indent {
    padding-left: 24%;
}

.display-line--right {
    text-align: right;
}

/* A hairline with a small crosshair where it meets the column. */
.intro-rule {
    --line: 1;
    position: relative;
    height: 1px;
    margin: 56px 0 36px;
}

.intro-rule::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--stroke-strong);
    transform: scaleX(var(--line));
    transform-origin: left center;
}

.intro-rule i {
    position: absolute;
    left: 38%;
    top: -8px;
    width: 17px;
    height: 17px;
    opacity: var(--line);
}

.intro-rule i::before,
.intro-rule i::after {
    content: '';
    position: absolute;
    background: var(--accent);
}

.intro-rule i::before {
    left: 8px;
    top: 0;
    width: 1px;
    height: 17px;
}

.intro-rule i::after {
    top: 8px;
    left: 0;
    width: 17px;
    height: 1px;
}

.intro-grid {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 24px;
    align-items: start;
}

.intro-grid .eyebrow {
    padding-top: 6px;
}

.intro-sub {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
    max-width: 540px;
}

/* ---------- Landing: marquee ---------- */

.marquee {
    position: relative;
    overflow: hidden;
    margin: 64px calc(50% - 50vw) 40px;
    padding: 22px 0;
    border-top: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 60s linear infinite;
}

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

.marquee-track span {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.marquee-track span::after {
    content: '';
    width: 5px;
    height: 5px;
    margin: 0 34px;
    transform: rotate(45deg);
    border: 1px solid var(--accent);
    opacity: 0.7;
}

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

/* ---------- Landing: sections ---------- */

.work-section {
    padding: 64px 0 64px;
}

.section-head {
    --line: 1;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding-bottom: 26px;
    margin-bottom: 40px;
}

.section-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--stroke-strong);
    transform: scaleX(var(--line));
    transform-origin: left center;
}

.section-index {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
}

.section-title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 10px;
}

.section-sub {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 400;
}

/* ---------- Landing: statement ---------- */

.statement {
    padding: 120px 0 110px;
}

.statement-text {
    font-size: clamp(1.7rem, 3.6vw, 2.9rem);
    font-weight: 300;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: var(--text);
    max-width: 1020px;
}

.scrub-word {
    will-change: opacity, filter;
}

/* Shared card chrome */
.feature-card,
.work-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--r-lg);
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.feature-card:hover,
.work-card:hover {
    transform: translateY(-4px);
    border-color: var(--stroke-strong);
    background: var(--surface-hover);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

.work-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 14px;
}

.chip {
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: var(--accent-soft);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.12em;
}

.work-desc {
    color: var(--muted);
    font-size: 0.97rem;
    font-weight: 400;
    line-height: 1.65;
}

/* ---------- Featured software card ---------- */

.feature-card {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}

.feature-media {
    position: relative;
    min-height: 380px;
    padding: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(600px 300px at 30% 20%, rgba(120, 150, 255, 0.16), transparent 70%),
        radial-gradient(500px 300px at 80% 90%, rgba(var(--accent-rgb), 0.12), transparent 70%),
        rgba(0, 0, 0, 0.25);
    border-right: 1px solid var(--stroke);
}

.media-note {
    position: absolute;
    left: 20px;
    bottom: 16px;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Real product screenshot filling the media column */
.feature-media.feature-media--shot {
    padding: 0;
    min-height: 0;
    overflow: hidden;
    background: #0b0e16;
}

.feature-media--shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    transition: transform 0.8s var(--ease);
}

.feature-card:hover .feature-media--shot img {
    transform: scale(1.02);
}

.feature-title a {
    color: inherit;
    text-decoration: none;
}

.feature-title a:hover {
    color: var(--accent);
}

.feature-body {
    padding: 44px 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-title {
    font-size: 2.3rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.feature-list {
    list-style: none;
    margin: 24px 0;
    display: grid;
    gap: 10px;
}

.feature-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.93rem;
    font-weight: 400;
    color: var(--text);
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 10px;
    height: 1px;
    background: var(--accent);
}

.tech-line {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--faint);
    padding-top: 18px;
    border-top: 1px solid var(--stroke);
}

/* ---------- Games grid ---------- */

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.work-card {
    display: flex;
    flex-direction: column;
}

/* Media: app icons sit crisp and centred on a blurred bleed of themselves;
   wide key art (--cover) fills the frame instead. */
.work-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--stroke);
}

.work-media::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: var(--art) center / cover no-repeat;
    filter: blur(40px) saturate(1.2);
    opacity: 0.42;
    transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}

.work-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(3, 5, 15, 0.5));
}

.work-media img {
    position: relative;
    z-index: 1;
    width: 34%;
    max-width: 150px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 22%;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.6s var(--ease);
}

.work-card:hover .work-media::before {
    opacity: 0.6;
    transform: scale(1.05);
}

.work-card:hover .work-media img {
    transform: scale(1.04);
}

.work-media--cover img {
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

.work-media--cover::after {
    z-index: 2;
}

.work-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 30px 30px;
}

.work-title {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}

.work-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease);
}

.work-title a:hover {
    color: var(--accent);
}

.work-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

/* Official "Download on the App Store" / "Get it on Google Play" badges.
   Both images are identical-aspect pills, so one height rule matches them. */
.app-badge {
    display: block;
    height: 40px;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    opacity: 0.92;
}

.app-badge:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.app-badge img {
    display: block;
    height: 100%;
    width: auto;
}

/* Quiet outlined button for secondary links */
.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--stroke-strong);
    color: var(--text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.link-btn .icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.link-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

/* ---------- Principles ---------- */

.principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 40px 0 100px;
    border-top: 1px solid var(--stroke);
}

.principle-index {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--accent);
    margin-bottom: 14px;
}

.principle h3 {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.principle p {
    color: var(--muted);
    font-size: 0.93rem;
    font-weight: 400;
    line-height: 1.65;
}

/* ---------- Store buttons (used on /about) ---------- */

.store-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.store-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 25px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ios-btn { background: #000; color: #fff; }
.ios-btn:hover { background: #333; transform: scale(1.05); }
.android-btn { background: #01875f; color: #fff; }
.android-btn:hover { background: #019f6d; transform: scale(1.05); }
.youtube-btn { background: #FF0000; color: #fff; }
.youtube-btn:hover { background: #CC0000; transform: scale(1.05); }
.discord-btn { background: #5865F2; color: #fff; }
.discord-btn:hover { background: #4752C4; transform: scale(1.05); }
.kofi-btn { background: #FFD700; color: #03050f; }
.kofi-btn:hover { background: #ffe34d; transform: scale(1.05); }

.icon {
    width: 24px;
    height: 24px;
}

.page-content {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Support button ---------- */

.support-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    background: rgba(10, 12, 22, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.support-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--accent);
}

.support-btn:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

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

footer {
    text-align: center;
    padding: 48px 20px 56px;
    border-top: 1px solid var(--stroke);
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    color: var(--muted);
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 24px;
}

.footer-social a {
    display: inline-flex;
    color: var(--muted);
    transition: color 0.3s var(--ease);
}

.footer-social a:hover {
    color: var(--text);
}

.footer-social svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-note {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--faint);
}

footer .footer-link {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--stroke-strong);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

footer .footer-link:hover {
    color: var(--text);
    border-color: var(--text);
}

/* ---------- Nav ---------- */

nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(3, 5, 15, 0.6);
    border-bottom: 1px solid var(--stroke);
    padding: 16px 0;
    text-align: center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Compact logo pinned to the left of the sticky top bar. It links home and, on
   inner pages, is always shown at full size. On the landing page it starts
   scaled to nothing and grows in (scale + fade) as the hero scrolls away,
   handing off from the shrinking hero title. The scale lives on the link (not
   the img) so its click area scales too — at progress 0 it can't be clicked.
   --scroll-progress (0 -> 1) is set on :root by the handler in index.php. */
.nav-logo {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.nav-logo img {
    height: 32px;
    width: auto;
}

.nav-logo:hover {
    opacity: 0.85;
}

nav.nav--main {
    background: rgba(3, 5, 15, calc(0.6 * var(--scroll-progress, 0)));
    border-bottom-color: rgba(255, 255, 255, calc(0.09 * var(--scroll-progress, 0)));
}

nav.nav--main .nav-logo {
    opacity: var(--scroll-progress, 0);
    transform: scale(var(--scroll-progress, 0));
    transform-origin: left center;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 36px;
}

nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.3s var(--ease);
}

nav a:hover {
    color: var(--text);
}

@media (max-width: 900px) {
    .feature-card {
        grid-template-columns: 1fr;
    }

    .feature-media {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--stroke);
    }

    .feature-body {
        padding: 32px 26px;
    }

    .work-grid,
    .principles {
        grid-template-columns: 1fr;
    }

    .principles {
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .nav-logo {
        left: 16px;
    }

    .nav-logo img {
        height: 28px;
    }

    nav ul {
        gap: 24px;
    }

    .hero {
        flex-direction: column;
        gap: 18px;
        padding-top: 56px;
    }

    .logo {
        max-width: 72px;
    }

    .title-container {
        align-items: center;
    }

    .site-title {
        font-size: 2rem;
        letter-spacing: 0.12em;
    }

    .subtitle {
        font-size: 0.95rem;
        letter-spacing: 0.5em;
    }

    .intro {
        padding-bottom: 48px;
    }

    .feature-media {
        padding: 22px 22px 44px;
    }

    .feature-title {
        font-size: 1.9rem;
    }

    .work-body {
        padding: 24px 22px 26px;
    }

    .section-title {
        font-size: 1.6rem;
    }
}

/* ---------- Inner pages ---------- */

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 0 110px;
}

.page--center {
    text-align: center;
    padding-top: 120px;
}

.page-hero {
    margin-bottom: 48px;
}

.page-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
}

.page-lede {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--muted);
    max-width: 600px;
}

.page--center .page-lede {
    margin: 0 auto;
}

.muted {
    color: var(--faint);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Long-form reading: about, legal, blog posts */
.prose {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.8;
    color: #d3d8e2;
}

.prose p {
    margin: 0 0 1.25em;
}

.prose strong {
    font-weight: 600;
    color: var(--text);
}

.prose h2 {
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.015em;
    margin: 2.4em 0 0.8em;
}

.prose h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text);
    margin: 1.8em 0 0.6em;
}

.prose a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.prose a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.prose ul,
.prose ol {
    margin: 0 0 1.25em 1.4em;
}

.prose li {
    margin-bottom: 0.4em;
}

.prose li::marker {
    color: var(--faint);
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--stroke);
    margin: 3em 0;
}

.legal {
    font-size: 0.98rem;
}

.legal h1 {
    font-size: 2.4rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 1em;
}

.legal h2 {
    font-size: 1.2rem;
}

/* Buttons */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 1.5em;
}

.button-row--center {
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.prose a.btn {
    border-bottom: 0;
}

.btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.btn--primary {
    background: var(--text);
    color: #05070f;
    border: 1px solid var(--text);
}

.btn--primary:hover {
    background: #fff;
    transform: translateY(-1px);
}

.btn--ghost,
.prose a.btn--ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--stroke-strong);
}

.btn--ghost:hover,
.prose a.btn--ghost:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
}

.social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5em;
}

.prose .social-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    color: var(--muted);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.prose .social-row a:hover {
    color: var(--text);
    border-color: var(--stroke-strong);
}

.social-row svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ---------- Game detail pages ---------- */

.game-detail {
    max-width: 820px;
    margin: 0 auto;
    padding: 72px 0 110px;
    font-weight: 400;
    line-height: 1.75;
    color: #d3d8e2;
}

.detail-hero {
    text-align: center;
}

.detail-icon {
    display: inline-block;
    border-radius: 26px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
    margin-bottom: 28px;
}

.detail-title {
    font-size: clamp(2.3rem, 5vw, 3.2rem);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 14px;
}

.game-detail .detail-lede {
    font-size: 1.12rem;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 32px 0 56px;
}

.detail-badges--end {
    margin: 56px 0 0;
}

.detail-badges img {
    display: block;
    height: 44px;
    width: auto;
}

.detail-intro {
    font-size: 1.1rem;
    padding-top: 40px;
    border-top: 1px solid var(--stroke);
}

.game-detail strong {
    font-weight: 600;
    color: var(--text);
}

.game-detail h2 {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 64px 0 20px;
}

.game-detail h3 {
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text);
    margin: 26px 0 6px;
}

.game-detail p {
    margin: 0 0 1em;
}

.game-detail a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
}

.game-detail .detail-badges a {
    border-bottom: 0;
}

.detail-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--stroke);
    border: 1px solid var(--stroke);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.detail-features > div {
    background: #070913;
    padding: 26px 28px 22px;
}

.detail-features h3 {
    margin-top: 0;
}

.detail-features p {
    font-size: 0.94rem;
    color: var(--muted);
}

.detail-shots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.detail-shots img {
    width: 100%;
    display: block;
    border-radius: var(--r-md);
    border: 1px solid var(--stroke);
}

.detail-video iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    border: 1px solid var(--stroke);
}

.detail-note {
    text-align: center;
    color: var(--faint);
    font-size: 0.9rem;
    margin-top: 28px;
}

/* ---------- Blog ---------- */

.blog-list-section {
    padding: 72px 0 110px;
}

.blog-heading {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 300;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}

.blog-intro {
    color: var(--muted);
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--stroke);
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--stroke-strong);
    background: var(--surface-hover);
}

.blog-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--stroke);
}

.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.blog-card:hover .blog-card-thumb img {
    transform: scale(1.04);
}

.blog-card-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-date {
    order: -1;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 10px;
}

.blog-card-title {
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 12px;
}

.blog-card-excerpt {
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 12px;
}

/* Tag chips: quiet outlines, a hue hint only in the dot */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.blog-tags [class^="tag-"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    color: var(--muted);
    --dot: var(--faint);
}

.blog-tags [class^="tag-"]::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dot);
}

.tag-code            { --dot: #a98bff; }
.tag-graphics        { --dot: #5fc4d4; }
.tag-game            { --dot: #e68594; }
.tag-physics         { --dot: #6cc493; }
.tag-off             { --dot: #d8b45f; }
.tag-personalproject { --dot: #7fa3ea; }
.tag-experiment      { --dot: #b59bf0; }
.tag-university      { --dot: #d98fbf; }

/* Individual post */
.blog-post {
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 0 110px;
    font-weight: 400;
    line-height: 1.8;
    color: #d3d8e2;
    text-align: left;
}

/* Wider sheet for posts with a full-width interactive map */
.blog-post--wide {
    max-width: 1100px;
}

.blog-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 40px;
    transition: color 0.3s var(--ease);
}

.blog-back:hover {
    color: var(--text);
}

.blog-post-title {
    font-size: clamp(2rem, 4.6vw, 3rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 22px;
}

.blog-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 44px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--stroke);
}

.blog-post-date {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.blog-post-body {
    font-size: 1.06rem;
}

.blog-post-body strong,
.blog-post-body b {
    font-weight: 600;
    color: var(--text);
}

.blog-post-body h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.015em;
    margin: 2.2em 0 0.7em;
}

.blog-post-body h3 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
    margin: 1.8em 0 0.6em;
}

.blog-post-body a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.blog-post-body a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.blog-post-body .app-badges a,
.blog-post-body a.btn {
    border-bottom: 0;
}

.blog-post-body ul,
.blog-post-body ol {
    margin: 14px 0 14px 26px;
}

.blog-post-body li {
    margin-bottom: 6px;
}

.blog-post-body iframe {
    max-width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--stroke);
    margin: 10px 0;
}

/* Code: older posts carry light inline backgrounds, so pin every block to the
   dark theme here. */
.blog-post-body pre,
.blog-post-body pre[style] {
    background: #070913 !important;
    color: #d5dae4 !important;
    border: 1px solid var(--stroke);
    border-radius: var(--r-md) !important;
    padding: 18px 20px !important;
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    overflow-x: auto;
    margin: 26px 0 !important;
}

.blog-post-body :not(pre) > code {
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.blog-post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 26px 0;
    font-size: 0.92rem;
}

.blog-post-body th,
.blog-post-body td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--stroke);
}

.blog-post-body th {
    color: var(--text);
    font-weight: 500;
}

/* Store badges embedded in older posts */
.app-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 10px 0 26px;
}

/* Inline figures and captions */
.content-image {
    display: block;
    margin: 34px auto 10px;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--stroke);
}

.image-description {
    text-align: center;
    font-size: 0.86rem;
    color: var(--faint);
    margin-bottom: 30px;
}

/* Interactive world map */
#world-map {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
}

@media (max-width: 1000px) {
    .blog-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page,
    .game-detail,
    .blog-post,
    .blog-list-section {
        padding-top: 48px;
    }

    .blog-list,
    .detail-features,
    .detail-shots {
        grid-template-columns: 1fr;
    }
}


/* ---------- Menu button (narrow screens) ---------- */

.nav-toggle {
    display: none;
}

@media (max-width: 600px) {
    nav {
        min-height: 60px;
    }

    .nav-toggle {
        position: absolute;
        right: 10px;
        top: 8px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 2;
    }

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 1.5px;
        background: var(--text);
        transition: transform 0.35s var(--ease);
    }

    nav.nav--open .nav-toggle span:first-child {
        transform: translateY(3.75px) rotate(45deg);
    }

    nav.nav--open .nav-toggle span:last-child {
        transform: translateY(-3.75px) rotate(-45deg);
    }

    nav ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 52px 20px 10px;
        text-align: left;
    }

    nav.nav--open,
    nav.nav--main.nav--open {
        background: rgba(3, 5, 15, 0.94);
        border-bottom-color: var(--stroke);
    }

    nav.nav--open ul {
        display: flex;
    }

    nav ul li {
        border-top: 1px solid var(--stroke);
    }

    nav ul a {
        display: block;
        padding: 16px 4px;
        font-size: 0.85rem;
    }

    /* The logo shows whenever the menu is open, even at the top of the landing page. */
    nav.nav--main.nav--open .nav-logo {
        opacity: 1;
        transform: none;
    }

    .nav-logo {
        top: 0;
        bottom: auto;
        height: 60px;
    }
}

.intro-actions {
    margin-top: 34px;
}

html:not(.lenis) {
    scroll-behavior: smooth;
}

#games,
#generate {
    scroll-margin-top: 70px;
}

@media (max-width: 600px) {
    .support-btn {
        width: 46px;
        height: 46px;
        padding: 0;
        justify-content: center;
        right: 14px;
        bottom: 14px;
    }

    .support-btn span {
        display: none;
    }
}

/* ---------- Landing: Project Car Crash card and the games row ---------- */

.feature-card--flip {
    grid-template-columns: 1fr 1.25fr;
}

.feature-card--flip .feature-media {
    order: 2;
    border-right: 0;
    border-left: 1px solid var(--stroke);
}

.feature-media.feature-media--video {
    padding: 0;
    min-height: 0;
    overflow: hidden;
    background: #0b0e16;
}

.feature-media--video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

@media (max-width: 900px) {
    .feature-card--flip {
        grid-template-columns: 1fr;
    }

    .feature-card--flip .feature-media {
        order: 0;
        border-left: 0;
        aspect-ratio: 16 / 9;
    }

    .work-grid--three {
        grid-template-columns: 1fr;
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .intro-rule i {
        left: 0;
    }

    .display-line--indent {
        padding-left: 12%;
    }

    .statement {
        padding: 72px 0 64px;
    }
}

/* ---------- Pointer spotlight on cards (position set by scripts/motion.js) ---------- */

.feature-card,
.work-card,
.blog-card,
.detail-features > div {
    position: relative;
}

:is(.feature-card, .work-card, .blog-card, .fx-panel, .fx-perf, .detail-features > div)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.055), transparent 45%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: 3;
}

:is(.feature-card, .work-card, .blog-card, .fx-panel, .fx-perf, .detail-features > div):hover::after {
    opacity: 1;
}

/* ---------- Motion (scripts/motion.js) ---------- */

html.js-motion .page-content {
    opacity: 0;
}

html.js-motion.motion-ready .page-content {
    opacity: 1;
    transition: opacity 0.6s var(--ease);
}

html.js-motion:not(.motion-ready) .hero .logo,
html.js-motion:not(.motion-ready) .hero .title-container {
    opacity: 0;
}

/* Headings stay hidden until they are split into lines, so they never flash in whole. */
html.js-motion :is(.section-title, .feature-title, .page-title, .blog-heading, .blog-post-title, .detail-title, .fx-h2, .fx-h3, .fx-context-text h3, .principle h3, .prose h2, .game-detail h2):not(.is-split) {
    visibility: hidden;
}

/* Room for descenders inside each line's clipping mask. */
.split-line-mask {
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

/* Smooth scrolling (Lenis) */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: clip;
}

/* The bar slides away while reading down and returns on the way up. */
nav {
    transition: transform 0.6s var(--ease);
}

nav.nav--hidden {
    transform: translateY(-100%);
}

/* Blog posts written with paragraphs, inline video, and wide tables on phones. */
.blog-post-body p:not(.image-description) {
    margin: 0 0 1.25em;
}

.blog-post-body .content-video {
    display: block;
    width: 100%;
    height: auto;
    margin: 10px auto 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--stroke);
    background: #07080d;
}

@media (max-width: 640px) {
    .blog-post-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.blog-post-body td:last-child {
    white-space: nowrap;
}