:root {
    --paper: #000000;
    /* pure black canvas — the paintball PNGs are matted on black and
       composite as clean cut-outs against it */
    --ink: #ffffff;
    /* primary text */
    --ink-soft: rgba(255, 255, 255, .68);
    /* secondary text */
    --signal: #2B3CFF;
    /* electric blue accent */
    --violet: #8A5BFF;
    /* gradient partner for the paint splash */
    --line: rgba(255, 255, 255, .14);
    /* hairlines separate sections now that no block carries its own color */
    --surface: #0a0a0a;
    /* the only lift off pure black — project cards */
    --card-r: 20px;
    --nav-h: 72px;
    --pad: clamp(20px, 4vw, 64px);
}

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

html {
    scroll-behavior: auto;
    background: var(--paper);
    /* keeps overscroll/rubber-band gutters black */
}

html.lenis,
html.lenis body {
    height: auto
}

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

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Archivo', system-ui, sans-serif;
    font-variation-settings: 'wdth' 100;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection {
    background: var(--signal);
    color: var(--paper)
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---------- Preloader ---------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--paper);
    color: var(--ink);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--pad);
}

#preloader .pct {
    font-family: 'Archivo';
    font-weight: 700;
    font-variation-settings: 'wdth' 75;
    font-size: clamp(64px, 14vw, 180px);
    line-height: .85;
}

#preloader .mono {
    color: var(--ink-soft)
}

/* ---------- Nav ---------- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad);
    mix-blend-mode: normal;
}


.nav .logo {
    display: flex;
    align-items: center;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 18px
}

.nav .logo img {
    height: calc(var(--nav-h) - 20px);
    width: auto;
    display: block
}

/* Shared compact 3D mark used in the site header. The model itself remains
   non-interactive so the whole mark behaves like one predictable home link. */
.nav .logo.nav-logo-3d {
    width: 58px;
    height: calc(var(--nav-h) - 12px);
    flex: 0 0 58px;
}

.nav-logo-model {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    pointer-events: none;
    --poster-color: transparent;
}

/* Footer version: large enough to read as a mark, but lazy-loaded so it
   never adds the 3D asset to the first page render. */
.foot-logo-3d {
    width: 160px;
    height: 115px;
    display: block;
}

.foot-logo-model {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    pointer-events: none;
    --poster-color: transparent;
}

.nav .logo span {
    color: var(--signal)
}

.nav ul {
    display: flex;
    gap: 28px;
    list-style: none
}

.nav ul a {
    font-size: 14px;
    font-weight: 500;
    position: relative
}

.nav ul a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 1.5px;
    width: 100%;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.nav ul a:hover::after {
    transform: scaleX(1);
    transform-origin: left
}

.nav .talk {
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--ink);
    border-radius: 99px;
    padding: 9px 18px;
    background: transparent;
    transition: background .3s, color .3s;
}

.nav .talk:hover {
    background: var(--ink);
    color: var(--paper)
}

@media(max-width:720px) {
    .nav ul {
        display: none
    }
}

/* ---------- About page: personal portfolio ---------- */
.page-about .nav {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .88), rgba(0, 0, 0, 0));
}

.about-hero {
    min-height: min(840px, 100svh);
    padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 112px));
    padding-bottom: clamp(72px, 10vw, 140px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: clamp(40px, 7vw, 110px);
    align-items: center;
    position: relative;
}

.about-hero::before {
    content: "";
    position: absolute;
    width: min(42vw, 620px);
    aspect-ratio: 1;
    right: 3%;
    top: 8%;
    border-radius: 50%;
    background: rgba(43, 60, 255, .2);
    filter: blur(100px);
    pointer-events: none;
}

.about-hero-copy,
.figure-card {
    position: relative;
    z-index: 1;
}

.about-hero .eyebrow,
.about-section-heading .eyebrow {
    color: rgba(255, 255, 255, .62);
    margin-bottom: 20px;
}

.about-hero h1 {
    font-size: clamp(52px, 7vw, 108px);
    font-weight: 760;
    font-variation-settings: 'wdth' 78;
    line-height: .93;
    letter-spacing: -.065em;
    max-width: 9.5ch;
}

.about-hero h1 em,
.about-cta h2 em {
    color: var(--violet);
    font-style: normal;
}

.about-lede {
    color: var(--ink-soft);
    max-width: 48ch;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.65;
    margin-top: 30px;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 32px;
}

.about-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.about-glow-button {
    box-shadow: 0 0 0 rgba(43, 60, 255, 0);
}

.about-glow-button:hover,
.about-glow-button:focus-visible {
    box-shadow: 0 0 24px rgba(43, 60, 255, .72), 0 0 54px rgba(138, 91, 255, .3);
    transform: translateY(-2px);
}

@keyframes about-button-idle {
    0%, 100% { box-shadow: 0 0 0 rgba(43, 60, 255, 0); }
    50% { box-shadow: 0 0 18px rgba(43, 60, 255, .34), 0 0 34px rgba(138, 91, 255, .16); }
}

@keyframes about-button-wiggle {
    0% { transform: translateY(-2px) rotate(0deg) scale(1); }
    20% { transform: translateY(-4px) rotate(-4deg) scale(1.04); }
    42% { transform: translateY(-4px) rotate(4deg) scale(1.05); }
    65% { transform: translateY(-3px) rotate(-2.5deg) scale(1.03); }
    82% { transform: translateY(-3px) rotate(2deg) scale(1.02); }
    100% { transform: translateY(-2px) rotate(0deg) scale(1.04); }
}

.page-about .btn,
.page-about .talk,
.page-about .figure-load-button {
    animation: about-button-idle 3.2s ease-in-out infinite;
    will-change: transform, box-shadow;
}

.page-about .btn:hover,
.page-about .btn:focus-visible,
.page-about .talk:hover,
.page-about .talk:focus-visible,
.page-about .figure-load-button:hover,
.page-about .figure-load-button:focus-visible {
    animation: about-button-wiggle .48s cubic-bezier(.2, .9, .25, 1) both;
    box-shadow: 0 0 24px rgba(43, 60, 255, .72), 0 0 54px rgba(138, 91, 255, .3);
}

.about-outline-button {
    border-color: rgba(255, 255, 255, .35);
}

.about-outline-button:hover,
.about-outline-button:focus-visible {
    border-color: var(--violet);
    color: white;
    background: rgba(138, 91, 255, .15);
}

.figure-card {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(circle at 55% 34%, rgba(138, 91, 255, .32), transparent 36%), #0d0d12;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
}

.figure-card-topline,
.figure-card-note {
    display: flex;
    justify-content: space-between;
    padding: 17px 20px;
}

.figure-card-topline {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.figure-status {
    color: #b7c0ff;
}

.figure-stage {
    min-height: clamp(330px, 37vw, 490px);
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}

.figure-stage::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 12%;
    left: 15%;
    bottom: 10%;
    border-radius: 50%;
    background: rgba(43, 60, 255, .38);
    filter: blur(30px);
    pointer-events: none;
}

/* Keep asset previews neutral so their authored materials are not tinted by the
   decorative blue glow used by the About-page figure. */
.page-asset-detail .figure-card {
    background: #0d0d12;
}

.page-asset-detail .figure-stage::after {
    content: none;
}

#figure-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
}

.figure-fallback {
    position: absolute;
    inset: auto 20px 18px;
    z-index: 2;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
}

.figure-load-button {
    appearance: none;
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 9px 13px;
    color: white;
    background: rgba(255, 255, 255, .06);
    font: 500 11px 'IBM Plex Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.figure-load-button:hover,
.figure-load-button:focus-visible {
    transform: translateY(-2px);
    background: rgba(138, 91, 255, .32);
    box-shadow: 0 0 22px rgba(138, 91, 255, .4);
}

.figure-card-note {
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: var(--ink-soft);
    font-size: 13px;
}

.about-intro {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 8vw, 140px);
    padding-top: clamp(80px, 12vw, 180px);
    padding-bottom: clamp(80px, 12vw, 180px);
}

.about-since {
    margin-top: 12px;
    color: var(--violet);
}

.about-intro h2,
.about-section-heading h2,
.about-now-card h2,
.about-cta h2 {
    font-size: clamp(34px, 4vw, 62px);
    font-weight: 720;
    font-variation-settings: 'wdth' 85;
    line-height: 1.02;
    letter-spacing: -.045em;
}

.about-intro h2 + p {
    max-width: 56ch;
    margin-top: 27px;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.7;
}

.about-principles {
    background: #0b0b0e;
    padding-top: clamp(80px, 10vw, 144px);
    padding-bottom: clamp(80px, 10vw, 144px);
}

.about-section-heading {
    display: grid;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: start;
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: clamp(42px, 6vw, 80px);
}

.principle-card {
    min-height: 318px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 38px);
    background: #101014;
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.principle-card:hover {
    transform: translateY(-9px) rotate(-.35deg);
    border-color: rgba(138, 91, 255, .78);
    background: #13111d;
}

.principle-card h3 {
    font-size: clamp(25px, 2.3vw, 36px);
    letter-spacing: -.045em;
    line-height: 1;
    margin: 52px 0 18px;
    max-width: 9ch;
    position: relative;
    z-index: 1;
}

.principle-card > p:not(.mono) {
    color: var(--ink-soft);
    line-height: 1.65;
    position: relative;
    z-index: 1;
}

.principle-card--featured {
    background: linear-gradient(150deg, rgba(43, 60, 255, .62), rgba(138, 91, 255, .36));
}

.principle-orbit {
    position: absolute;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    right: -54px;
    top: -58px;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.principle-orbit::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    position: absolute;
    bottom: 7px;
    left: 28px;
    box-shadow: 0 0 18px white;
}

.principle-card:hover .principle-orbit {
    transform: rotate(150deg) scale(1.15);
}

.about-now {
    padding-top: clamp(84px, 12vw, 180px);
    padding-bottom: clamp(84px, 12vw, 180px);
}

.about-now-card {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 28px;
    padding: clamp(30px, 5vw, 78px);
    display: grid;
    grid-template-columns: 1fr minmax(260px, .7fr);
    gap: clamp(36px, 8vw, 140px);
    background: radial-gradient(circle at 8% 0%, rgba(43, 60, 255, .26), transparent 34%), #0d0d10;
}

.about-now-card > p {
    color: var(--ink-soft);
    align-self: end;
    font-size: 17px;
    line-height: 1.7;
}

.about-now-card > p a {
    color: white;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.about-cta {
    text-align: center;
    padding-top: clamp(90px, 12vw, 170px);
    padding-bottom: clamp(100px, 14vw, 200px);
    background: radial-gradient(circle at 50% 50%, rgba(138, 91, 255, .19), transparent 42%);
}

.about-cta h2 {
    margin-top: 18px;
    font-size: clamp(48px, 7vw, 104px);
}

.about-cta .about-actions {
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .page-about *, .page-about *::before, .page-about *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 800px) {
    .about-hero,
    .about-intro,
    .about-section-heading,
    .about-now-card {
        grid-template-columns: 1fr;
    }

    .about-hero { min-height: auto; }
    .figure-card { max-width: 620px; width: 100%; }
    .principle-grid { grid-template-columns: 1fr; }
    .principle-card { min-height: 270px; }
}

@media (max-width: 480px) {
    .about-hero h1 { font-size: clamp(45px, 13vw, 64px); }
    .about-actions .btn { width: 100%; justify-content: center; }
    .figure-stage { min-height: 300px; }
    .figure-card-topline { gap: 12px; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--nav-h) + 16px) var(--pad) 40px;
}

/* ---------- Falling paintball (home page background) ----------
   #paintLayer is a fixed viewport-sized stage sitting behind every
   section. #paintBall owns the fall (y / sway / scale / rotation);
   the <img> inside owns the squash + fade at impact, so no two
   tweens ever compete for the same transform. */
#paintLayer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

/* Scrim keeping the nav legible where the paintball passes behind it. It
   lives inside the stage so it paints over the ball but still under page
   content — putting it in .nav would dim the copy scrolling underneath. */
#paintLayer::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--nav-h) + 56px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .88), rgba(0, 0, 0, 0));
}

#paintBall {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(230px, 38vw, 540px);
    will-change: transform;
}

#paintBall picture {
    display: block;
}

#paintBall img {
    width: 100%;
    height: auto;
    will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
    /* Both PNGs are matted on black rather than alpha-cut, and their mattes
       are floored to pure #000 at build time — otherwise compression noise
       in the near-black reads as a rectangle around the art on this page. */
}

/* The splash is ordinary in-flow content at the end of <main>, so it
   scrolls away with the page once the ball has landed in it. */
.splash-zone {
    display: flex;
    justify-content: center;
    padding: 0 var(--pad) clamp(40px, 6vw, 90px);
    pointer-events: none;
}

.splash-stack {
    position: relative;
}

.splash-stack picture {
    display: block;
}

#splashImg {
    width: clamp(260px, 44vw, 520px);
    height: auto;
    opacity: 0;
    /* revealed by the impact tween; reduced-motion override below */
    will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
}

/* Sits in the crown opening. Width tracks the falling ball's size at its
   landing scale so the handoff between the two is invisible. Unlike the
   other two, this asset is alpha-cut rather than matted on black — it has
   to sit solidly on top of the splash, and a blend mode would let the
   paint underneath show through and make it look like a ghost. */
.rest-ball {
    position: absolute;
    left: 50%;
    /* 62% = the crown opening, i.e. 12% of the splash's height below its
       centre. That 12% is CROWN_OFFSET in the fall timeline, which aims the
       falling ball at this exact spot — keep the two in step. */
    top: 62%;
    /* 0.30 must match the fall timeline's landing scale, or the handoff
       between the falling and resting ball pops. */
    width: calc(clamp(230px, 38vw, 540px) * 0.30);
}

#restBall {
    width: 100%;
    height: auto;
    opacity: 0;
    will-change: transform, opacity;
}

/* Page content always renders above the paintball stage. */
main,
footer {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-weight: 750;
    font-variation-settings: 'wdth' 78;
    font-size: clamp(40px, 7.2vw, 108px);
    line-height: .98;
    letter-spacing: -.025em;
    max-width: 16ch;
    text-wrap: balance;
}

.hero h1 .accent {
    color: var(--signal)
}

.hero .hero-foot {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.hero .scroll-hint {
    display: flex;
    align-items: center;
    gap: 10px
}

.hero .scroll-hint .dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--signal);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(6px)
    }
}

/* word-reveal masking */
.line-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top
}

.line-mask .word {
    display: inline-block;
    transform: translateY(110%)
}

/* Keep descenders such as the "g" in the hero headline clear of the
   word-reveal mask without increasing the space between text lines. */
.hero h1 .line-mask {
    padding-bottom: .1em;
    margin-bottom: -.1em;
}

/* ---------- Sections shared ---------- */
section {
    position: relative
}

.section-pad {
    padding: clamp(90px, 12vw, 180px) var(--pad)
}

.eyebrow {
    margin-bottom: 28px
}

.rule {
    height: 1px;
    background: var(--line);
    margin: 0 var(--pad)
}

/* ---------- Statement ---------- */
.statement h2 {
    font-weight: 650;
    font-variation-settings: 'wdth' 84;
    font-size: clamp(26px, 3.6vw, 52px);
    line-height: 1.16;
    letter-spacing: -.015em;
    max-width: 26ch;
}

.statement h2 .w {
    opacity: .12;
    transition: none
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--ink);
    border-radius: 99px;
    padding: 13px 26px;
    transition: background .3s, color .3s, transform .3s;
}

.btn:hover {
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-2px)
}

.btn.solid {
    background: var(--ink);
    color: var(--paper)
}

.btn.solid:hover {
    background: var(--signal);
    border-color: var(--signal)
}

/* ---------- Work (pinned horizontal) ---------- */
.work-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 var(--pad);
    margin-bottom: 36px;
    gap: 24px;
    flex-wrap: wrap;
}

.work-head h2 {
    font-weight: 750;
    font-variation-settings: 'wdth' 78;
    font-size: clamp(34px, 5vw, 72px);
    letter-spacing: -.02em;
    line-height: 1;
}

.work-head p {
    max-width: 38ch;
    color: var(--ink-soft);
    font-size: 15px
}

.work-wrap {
    overflow: hidden
}

.work-track {
    display: flex;
    gap: clamp(16px, 2vw, 32px);
    padding: 0 var(--pad);
    width: max-content;
    will-change: transform;
}

.card {
    position: relative;
    width: clamp(300px, 38vw, 560px);
    border-radius: var(--card-r);
    overflow: hidden;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    aspect-ratio: 4/4.6;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    cursor: pointer;
    flex-shrink: 0;
}

.card .thumb {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.card:hover .thumb {
    transform: scale(1.06)
}

.card .meta {
    position: relative;
    z-index: 1
}

.card .tags {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75;
    margin-bottom: 10px;
}

.card h3 {
    font-weight: 700;
    font-variation-settings: 'wdth' 82;
    font-size: clamp(22px, 2.4vw, 34px);
    letter-spacing: -.015em;
    line-height: 1.05;
}

.card .idx {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    opacity: .7;
}

.t1 {
    background: #04091f url("/assets/nexus-ai-screenshot.webp") center / contain no-repeat
}

.nexus-ai-card {
    background: #04091f;
    color: #f8f5ff;
    border-color: rgba(35, 231, 255, .35)
}

.nexus-ai-card .idx,
.nexus-ai-card .meta {
    width: fit-content;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(4, 9, 31, .9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28)
}

.nexus-ai-card .idx {
    opacity: 1
}

.t2 {
    background: #fff0a4 url("/assets/playtime-hobby-store-screenshot.webp") center / contain no-repeat
}

.playtime-card {
    background: #fff0a4;
    color: #0b174f;
    border-color: rgba(11, 23, 79, .24)
}

.playtime-card .idx,
.playtime-card .meta {
    width: fit-content;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 245, 190, .9);
    box-shadow: 0 4px 16px rgba(11, 23, 79, .14)
}

.playtime-card .idx {
    opacity: 1
}

.playtime-card .tags {
    opacity: .8
}

.t3 {
    background: #09051a url("/assets/neon-rift-screenshot.webp") center / contain no-repeat
}

.neon-rift-card {
    background: #09051a;
    border-color: rgba(255, 255, 255, .2)
}

.neon-rift-card .idx,
.neon-rift-card .meta {
    width: fit-content;
    padding: 8px 10px;
    border-radius: 8px;
    color: #fffaf5;
    background: rgba(9, 5, 26, .9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28)
}

.neon-rift-card .idx {
    opacity: 1
}

.t4 {
    background: #fff4d8 url("/assets/county-fair-screenshot-v3.webp") center / contain no-repeat
}

.county-fair-card {
    background: #fff4d8;
    color: #24211e;
    border-color: rgba(36, 33, 30, .24)
}

.county-fair-card .idx,
.county-fair-card .meta {
    width: fit-content;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 250, 240, .88);
    box-shadow: 0 4px 16px rgba(36, 33, 30, .12)
}

.county-fair-card .idx {
    opacity: 1
}

.county-fair-card .tags {
    opacity: .8
}

.t5 {
    background: #1d100a url("/assets/tv-coming-soon.webp") center / contain no-repeat
}

.lunar-descent-card {
    background: #1d100a;
    color: #fffaf5;
    border-color: rgba(150, 205, 255, .3)
}

.lunar-descent-card .idx,
.lunar-descent-card .meta {
    width: fit-content;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(20, 12, 9, .9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .32)
}

.lunar-descent-card .idx {
    opacity: 1
}

.work-end {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(260px, 26vw, 380px);
    flex-shrink: 0;
}

/* mobile: vertical stack instead of pinned horizontal */
@media(max-width:820px) {
    .work-track {
        flex-direction: column;
        width: auto
    }

    .card {
        width: 100%;
        aspect-ratio: 4/4.2
    }

    .work-end {
        width: 100%;
        padding: 32px 0
    }
}

/* ---------- Services ---------- */
.services {
    border-top: 1px solid var(--line)
}

.services .mono {
    color: var(--ink-soft)
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.svc-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 14px;
    background: #0b1020;
    padding: 0 28px;
}

.svc-grid::before,
.svc-grid::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from var(--gradient-angle), #00f5ff, #7c3aed, #ff2bd6, #00f5ff);
    animation: gradient-rotation 4s linear infinite;
}

.svc-grid::after {
    filter: blur(18px);
    opacity: .55;
}

@keyframes gradient-rotation {
    to {
        --gradient-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {

    .svc-grid::before,
    .svc-grid::after {
        animation: none;
    }
}

.svc {
    display: grid;
    grid-template-columns: 80px 1fr 1.2fr;
    gap: 24px;
    padding: 34px 0;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    transition: padding-left .4s cubic-bezier(.22, 1, .36, 1);
}

.svc:last-child {
    border-bottom: none;
}

.svc:hover {
    padding-left: 14px
}

.svc .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--violet)
}

.svc h3 {
    font-weight: 700;
    font-variation-settings: 'wdth' 80;
    font-size: clamp(24px, 3vw, 42px);
    letter-spacing: -.015em;
    line-height: 1.05;
}

.svc p {
    color: var(--ink-soft);
    font-size: 15px;
    max-width: 46ch
}

@media(max-width:720px) {
    .svc {
        grid-template-columns: 48px 1fr
    }

    .svc p {
        grid-column: 2
    }
}

/* ---------- About ---------- */
.about {
    padding-top: clamp(90px, 12vw, 160px)
}

.about .statement-block {
    padding: 0 var(--pad);
    margin-bottom: clamp(60px, 8vw, 120px)
}

/* ---------- CTA ---------- */
.cta {
    min-height: 90svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var(--pad);
}

.cta h2 {
    font-weight: 800;
    font-variation-settings: 'wdth' 74;
    font-size: clamp(52px, 11vw, 170px);
    letter-spacing: -.03em;
    line-height: .92;
}

.cta h2 em {
    font-style: italic;
    font-variation-settings: 'wdth' 90;
    color: var(--signal)
}

.cta .btn {
    margin-top: 44px
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    margin-top: 44px;
    text-align: left;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--ink-soft);
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--signal);
}

.contact-form .btn {
    margin-top: 0;
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

.contact-form .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid var(--line);
    padding: clamp(60px, 7vw, 100px) var(--pad) 32px;
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 70px
}

.foot-grid .mono {
    color: var(--ink-soft);
    margin-bottom: 14px
}

.foot-grid a {
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
    opacity: .85;
    transition: opacity .25s
}

.foot-grid a:hover {
    opacity: 1;
    color: var(--violet)
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.foot-grid .social-link {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    opacity: .85;
    transition: color .25s, border-color .25s, transform .25s;
}

.foot-grid .social-link:hover,
.foot-grid .social-link:focus-visible {
    color: var(--violet);
    border-color: var(--violet);
    opacity: 1;
    transform: translateY(-3px);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

@media(max-width:720px) {
    .foot-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }
}

/* reveal helper */
[data-reveal] {
    opacity: 0;
    transform: translateY(36px)
}

/* reduced motion: show everything, kill transforms */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none
    }

    .line-mask .word {
        transform: none
    }

    .statement h2 .w {
        opacity: 1
    }

    /* No falling ball; the splash simply sits above the footer. */
    #paintLayer {
        display: none
    }

    #splashImg,
    #restBall {
        opacity: 1
    }

    * {
        animation: none !important;
        transition: none !important
    }
}

/* ---------- 3D Assets Gallery ---------- */
.page-assets {
    padding-top: calc(var(--nav-h) + 60px);
}

.page-assets .statement {
    padding-bottom: 40px; /* Bring the gallery closer to the text */
}

.assets-gallery-wrap {
    height: 80vh;
    min-height: 600px;
    max-height: 900px;
    overflow: hidden;
    position: relative;
    padding: 0 var(--pad);
    margin-bottom: 120px;
}



.assets-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    height: 100%;
}

.asset-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Duplicated items to make the infinite scroll smooth */
.asset-column[data-direction="up"] {
    animation: scroll-up 45s linear infinite;
}

.asset-column[data-direction="down"] {
    animation: scroll-down 45s linear infinite;
    /* We animate from -50% to 0% so it scrolls down seamlessly */
}

.asset-column:hover {
    animation-play-state: paused;
}

@keyframes scroll-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes scroll-down {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

.asset-card {
    background: #151a2a;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    aspect-ratio: 4 / 5;
    display: block;
    text-decoration: none;
}

.asset-card:hover {
    transform: scale(1.03);
    z-index: 3;
}

/* <picture> wrapper needs explicit sizing: without it the inline element
   leaves a baseline gap and the image falls back to its intrinsic size. */
.asset-card picture {
    display: block;
    width: 100%;
    height: 100%;
}

.asset-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 12px;
    box-sizing: border-box;
}

.asset-card .asset-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #1e253c, #2a3454);
}

.asset-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.asset-card:hover .asset-card-title {
    transform: translateY(-4px);
}

/* Below 820px the auto-scrolling columns become a static grid, so every asset
   stays reachable instead of being hidden with the columns it happens to sit in. */
@media (max-width: 820px) {
    .assets-gallery-wrap {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    .assets-gallery {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }
    .asset-column {
        display: contents;
    }
    .asset-column[data-direction="up"],
    .asset-column[data-direction="down"] {
        animation: none;
    }
    .asset-card.is-clone {
        display: none;
    }
}
@media (max-width: 500px) {
    .assets-gallery {
        grid-template-columns: 1fr;
    }
}

/* reduced motion: no endless scroll. Falls back to the same static grid as the
   narrow breakpoint above — dropping the animation alone would leave the
   fixed-height, overflow-hidden wrap clipping most of the gallery with nothing
   left to bring the rest into view. */
@media (prefers-reduced-motion: reduce) {
    .assets-gallery-wrap {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .assets-gallery {
        height: auto;
    }

    .asset-column {
        display: contents;
    }

    .asset-column[data-direction="up"],
    .asset-column[data-direction="down"] {
        animation: none;
    }

    .asset-card.is-clone {
        display: none;
    }

    .asset-card:hover {
        transform: none;
    }

    .asset-card:hover .asset-card-title {
        transform: none;
    }
}

/* ---------- Projects page: editorial showcase ---------- */
.page-projects {
    --projects-lime: #c7ff4a;
    --projects-coral: #ff6b58;
    --projects-panel: #0d0d11;
}

.page-projects .nav {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
}

.projects-hero {
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + clamp(55px, 8vw, 120px));
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: center;
    overflow: hidden;
}

.projects-hero::before {
    content: "";
    position: absolute;
    width: min(50vw, 760px);
    aspect-ratio: 1;
    right: -12%;
    top: 6%;
    border-radius: 50%;
    background: rgba(43, 60, 255, .24);
    filter: blur(130px);
    pointer-events: none;
}

.projects-hero-copy,
.projects-hero-art {
    position: relative;
    z-index: 1;
}

.projects-hero .eyebrow {
    color: var(--projects-lime);
}

.projects-hero h1 {
    font-size: clamp(64px, 9vw, 144px);
    font-weight: 790;
    font-variation-settings: 'wdth' 74;
    letter-spacing: -.07em;
    line-height: .79;
    max-width: 8ch;
}

.projects-hero h1 em {
    color: var(--violet);
    font-style: italic;
    font-variation-settings: 'wdth' 92;
}

.projects-hero-copy > p {
    max-width: 51ch;
    margin-top: 34px;
    color: var(--ink-soft);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.65;
}

.projects-scroll {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 38px;
    color: white;
}

.projects-scroll span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.projects-scroll:hover span,
.projects-scroll:focus-visible span {
    transform: translateY(5px);
    background: var(--projects-lime);
    color: #090909;
}

.projects-hero-art {
    width: min(100%, 650px);
    aspect-ratio: 1;
    justify-self: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background:
        radial-gradient(circle at 66% 26%, rgba(199, 255, 74, .2), transparent 22%),
        radial-gradient(circle at 35% 68%, rgba(255, 107, 88, .32), transparent 29%),
        linear-gradient(145deg, #131333, #080811 60%);
    box-shadow: inset 0 0 70px rgba(255, 255, 255, .04), 0 40px 100px rgba(0, 0, 0, .52);
    animation: projects-disc-float 7s ease-in-out infinite;
}

.project-orbit {
    position: absolute;
    inset: 16%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    transform: rotate(-20deg);
}

.project-orbit--outer::after,
.project-orbit--inner::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--projects-lime);
    box-shadow: 0 0 22px var(--projects-lime);
}

.project-orbit--outer::after {
    left: 13%;
    bottom: 8%;
}

.project-orbit--inner {
    inset: 29%;
    transform: rotate(32deg);
    animation: projects-orbit 10s linear infinite;
}

.project-orbit--inner::after {
    right: 4%;
    top: 20%;
    background: var(--projects-coral);
    box-shadow: 0 0 22px var(--projects-coral);
}

.project-sphere {
    position: absolute;
    border-radius: 50%;
    box-shadow: inset -20px -24px 42px rgba(0, 0, 0, .25), 0 20px 60px rgba(0, 0, 0, .35);
}

.project-sphere--one {
    width: 27%;
    aspect-ratio: 1;
    left: 35%;
    top: 34%;
    background: linear-gradient(145deg, #a98bff, #3821cc);
    animation: projects-float 4.8s ease-in-out infinite;
}

.project-sphere--two {
    width: 12%;
    aspect-ratio: 1;
    right: 16%;
    bottom: 22%;
    background: linear-gradient(145deg, #ff9a6b, #e6325e);
    animation: projects-float 4s ease-in-out -1.4s infinite;
}

.projects-hero-index,
.projects-hero-note {
    position: absolute;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: rgba(255, 255, 255, .75);
    background: rgba(0, 0, 0, .34);
    backdrop-filter: blur(10px);
}

.projects-hero-index {
    left: 8%;
    top: 15%;
}

.projects-hero-note {
    right: 7%;
    bottom: 12%;
}

@keyframes projects-disc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes projects-orbit {
    to { transform: rotate(392deg); }
}

@keyframes projects-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(8deg); }
}

.projects-showcase {
    background: #f0eee7;
    color: #0a0a0a;
}

.projects-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .55fr);
    gap: clamp(36px, 8vw, 140px);
    align-items: end;
    margin-bottom: clamp(54px, 8vw, 110px);
}

.projects-section-head h2 {
    font-size: clamp(48px, 7vw, 108px);
    font-weight: 760;
    font-variation-settings: 'wdth' 76;
    letter-spacing: -.06em;
    line-height: .87;
}

.projects-section-head > p {
    color: rgba(10, 10, 10, .62);
    font-size: 17px;
    line-height: 1.65;
    max-width: 38ch;
}

.projects-grid {
    display: grid;
    gap: clamp(26px, 5vw, 70px);
}

.project-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    min-height: clamp(500px, 58vw, 760px);
    overflow: hidden;
    border-radius: 30px;
    background: #12121a;
    color: white;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .16);
}

.project-feature:nth-child(even) {
    grid-template-columns: minmax(280px, .55fr) minmax(0, 1.45fr);
}

.project-feature:nth-child(even) .project-feature-media {
    order: 2;
}

.project-feature-media {
    min-height: 100%;
    overflow: hidden;
    background: #17171b;
}

.project-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}

.project-feature-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 4vw, 58px);
    background:
        radial-gradient(circle at 90% 10%, rgba(138, 91, 255, .35), transparent 32%),
        #101015;
}

.project-feature--neon .project-feature-copy {
    background: radial-gradient(circle at 90% 10%, rgba(255, 43, 214, .31), transparent 34%), #100819;
}

.project-feature--fair .project-feature-copy {
    color: #16130e;
    background: radial-gradient(circle at 90% 10%, rgba(255, 107, 88, .34), transparent 35%), #f2d86f;
}

.project-feature--fair .project-number,
.project-feature--fair .project-feature-copy p {
    color: rgba(22, 19, 14, .67);
}

.project-number {
    margin-bottom: auto;
    color: rgba(255, 255, 255, .56);
}

.project-feature h3 {
    font-size: clamp(42px, 5.7vw, 88px);
    font-weight: 760;
    font-variation-settings: 'wdth' 76;
    letter-spacing: -.055em;
    line-height: .9;
}

.project-feature-copy p {
    max-width: 34ch;
    margin-top: 23px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.65;
}

.project-open {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-top: 34px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 22px;
    transition: transform .35s cubic-bezier(.2, .9, .25, 1), background .3s ease, color .3s ease;
}

.project-feature:hover .project-feature-media img,
.project-feature:focus-visible .project-feature-media img {
    transform: scale(1.045);
    filter: saturate(1.08);
}

.project-feature:hover .project-open,
.project-feature:focus-visible .project-open {
    transform: translate(5px, -5px) rotate(12deg);
    background: var(--projects-lime);
    border-color: var(--projects-lime);
    color: #090909;
}

.projects-cta {
    background: #f0eee7;
    color: #0a0a0a;
}

.projects-cta-card {
    min-height: min(720px, 78svh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    border-radius: 34px;
    padding: clamp(42px, 8vw, 110px) var(--pad);
    color: white;
    background:
        radial-gradient(circle at 15% 20%, rgba(199, 255, 74, .2), transparent 27%),
        radial-gradient(circle at 85% 80%, rgba(255, 107, 88, .32), transparent 28%),
        #15122e;
    box-shadow: 0 25px 90px rgba(20, 15, 52, .2);
}

.projects-cta-card h2 {
    margin-top: 22px;
    font-size: clamp(50px, 8vw, 116px);
    font-weight: 780;
    font-variation-settings: 'wdth' 75;
    letter-spacing: -.065em;
    line-height: .86;
}

.projects-cta-card h2 em {
    color: var(--projects-lime);
    font-style: italic;
}

.projects-cta-card p {
    max-width: 48ch;
    margin-top: 30px;
    color: rgba(255, 255, 255, .67);
    font-size: 17px;
}

.projects-cta-card .btn {
    margin-top: 36px;
}

.projects-cta-card .btn:hover,
.projects-cta-card .btn:focus-visible {
    background: var(--projects-lime);
    border-color: var(--projects-lime);
    color: #090909;
    transform: translateY(-3px) rotate(-2deg);
}

@media (max-width: 900px) {
    .projects-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .projects-hero-art {
        width: min(100%, 610px);
    }

    .project-feature,
    .project-feature:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .project-feature:nth-child(even) .project-feature-media {
        order: 0;
    }

    .project-feature-media {
        min-height: clamp(300px, 68vw, 560px);
    }

    .project-feature-copy {
        min-height: 390px;
    }
}

@media (max-width: 720px) {
    .projects-section-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

@media (max-width: 480px) {
    .projects-hero h1 {
        font-size: clamp(58px, 19vw, 82px);
    }

    .projects-hero-art {
        width: min(100%, 390px);
    }

    .projects-hero-note {
        display: none;
    }

    .project-feature,
    .projects-cta-card {
        border-radius: 22px;
    }

    .project-feature-copy {
        min-height: 350px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-projects *,
    .page-projects *::before,
    .page-projects *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}