/* Isolated motion trial: remove these two index.html imports to revert. */
#ambient-particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: .65;
}
.site-nav, .site-footer, .site-main { position: relative; z-index: 2; }
.site-nav { position: sticky; z-index: 10; }
.home-stage__tab, .work-card {
    rotate: var(--motion-axis, 1 0 0) var(--motion-angle, 0deg);
    transition: rotate 280ms ease-out, border-color 220ms ease, box-shadow 280ms ease;
}
.motion-hover {
    border-color: rgba(255,255,255,.32);
    box-shadow: 0 16px 38px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
@media (prefers-reduced-motion: reduce) {
    #ambient-particles { display: none; }
    .home-stage__tab, .work-card { rotate: none; }
}

/* Motion study, phase two: staged typography and a real CSS 3D volume. */
.home-sidebar__title-block { animation: motion-rise 650ms 80ms both; }
.home-sidebar__description { animation: motion-rise 650ms 170ms both; }
.home-sidebar__meta { animation: motion-rise 650ms 300ms both; }
.home-stage__tab { position: relative; isolation: isolate; }
.home-stage__tab::after {
    content: ''; position: absolute; inset: auto 22% 0; height: 1px;
    background: linear-gradient(90deg, transparent, #eee, transparent);
    scale: 0 1; opacity: 0; transition: scale 350ms ease, opacity 350ms ease;
}
.home-stage__tab--active::after { scale: 1 1; opacity: .8; }
.home-stage__tab--active { background: linear-gradient(145deg, #303032, #171718); }
.home-focus-stage__image, .work-card__main-image {
    transition: scale 600ms cubic-bezier(.2,.7,.2,1), filter 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .home-focus-stage__media-launch:hover .home-focus-stage__image,
    .work-card__media:hover .work-card__main-image { scale: 1.025; filter: brightness(1.07); }
}
.home-focus-stage__image, .home-focus-stage__video { animation: media-arrive 360ms ease both; }
.orbital-mark {
    height: 145px; position: relative; display: grid; place-items: center;
    perspective: 650px; pointer-events: none; overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.045), transparent 65%);
    animation: motion-rise 800ms 220ms both;
}
.orbital-mark__cube {
    width: 62px; height: 62px; position: relative; transform-style: preserve-3d;
    animation: orbit-volume 24s linear infinite;
}
.orbital-mark__cube i {
    position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.42);
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.01));
    box-shadow: inset 0 0 18px rgba(255,255,255,.025);
}
.orbital-mark__cube i:nth-child(1) { transform: translateZ(31px); }
.orbital-mark__cube i:nth-child(2) { transform: rotateY(180deg) translateZ(31px); }
.orbital-mark__cube i:nth-child(3) { transform: rotateY(90deg) translateZ(31px); }
.orbital-mark__cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(31px); }
.orbital-mark__cube i:nth-child(5) { transform: rotateX(90deg) translateZ(31px); }
.orbital-mark__cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(31px); }
.orbital-mark__orbit {
    position: absolute; width: 142px; height: 142px; border: 1px solid #ffffff20;
    border-radius: 50%; transform: rotateX(65deg) rotateZ(-25deg);
}
.orbital-mark__caption {
    position: absolute; bottom: 3px; font-size: 8px; letter-spacing: .24em; color: #ffffff50;
}
html.motion-paused .orbital-mark__cube { animation-play-state: paused; }
@keyframes orbit-volume {
    from { transform: rotateX(-22deg) rotateY(0deg) rotateZ(12deg); }
    to { transform: rotateX(-22deg) rotateY(360deg) rotateZ(12deg); }
}
@keyframes motion-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes media-arrive { from { opacity: .25; } to { opacity: 1; } }
@media (max-width: 700px) { .orbital-mark { height: 120px; } }
@media (prefers-reduced-motion: reduce) {
    .orbital-mark__cube { animation: none; transform: rotateX(-22deg) rotateY(35deg); }
    .home-focus-stage__image, .work-card__main-image { scale: 1 !important; }
    .home-sidebar__title-block, .home-sidebar__description, .home-sidebar__meta,
    .orbital-mark, .home-focus-stage__image, .home-focus-stage__video { animation: none; }
}
.home-stage__tab-list { position: relative; isolation: isolate; }
.category-selection-plate {
    position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none;
    border-radius: 1.4rem; border: 1px solid #ffffff30; box-sizing: border-box;
    background: linear-gradient(135deg, #ffffff12, #ffffff03);
    transition: transform 380ms cubic-bezier(.2,.7,.2,1), width 380ms ease, height 380ms ease, opacity 200ms ease;
}
.orbital-mark { transition: rotate 600ms ease-out; }

/* Soft cursor light: separate composited layer instead of repainting a full gradient. */
.home-scroll-shell::before {
    background: linear-gradient(180deg, #ffffff06, transparent 18%, transparent 74%, #ffffff08);
}
#cursor-aura {
    position: fixed; top: 0; left: 0; width: 620px; height: 620px;
    margin: -310px 0 0 -310px; border-radius: 50%; z-index: 1;
    pointer-events: none; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(ellipse at center,
        rgba(230,235,242,.075) 0%, rgba(230,235,242,.038) 24%,
        rgba(230,235,242,.014) 45%, transparent 70%);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    #cursor-aura { display: none; }
}
/* Keep the decorative layer inside its own section, not past the footer. */
.home-scroll-shell::before { inset: 0; }
/* Use the shell's continuous background through the homepage and footer. */
.home-scroll-shell::before { background: none; }
.site-shell:has(.home-page) .site-footer { border-top-color: transparent; }

/* Curated landing state and monochrome category signatures. */
.home-featured { min-height: 0; gap: .75rem; }
.home-featured__heading {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .6rem .25rem; color: #ffffff70;
    font: 10px ui-monospace, monospace; letter-spacing: .16em;
}
.home-featured__heading span:first-child { color: #ffffffb0; }
.home-featured__hint { margin: 0; padding: .25rem; font-size: .72rem; color: #ffffff65; }
.home-featured .home-focus-stage { animation-delay: 100ms; }
.category-art {
    position: absolute; right: 12px; top: 14px; width: 38px; height: 38px;
    opacity: .22; pointer-events: none; transition: opacity 300ms ease, transform 500ms ease;
}
.category-art i { position: absolute; display: block; border: 1px solid #eee; box-sizing: border-box; }
.home-stage__tab:hover .category-art,
.home-stage__tab:focus-visible .category-art,
.home-stage__tab--active .category-art { opacity: .55; }
[data-category='works-category-web'] .category-art i:nth-child(1) { inset: 3px 0; border-radius: 3px; }
[data-category='works-category-web'] .category-art i:nth-child(2) { left: 0; right: 0; top: 11px; border-bottom: 0; }
[data-category='works-category-web'] .category-art i:nth-child(3) { left: 6px; top: 17px; width: 8px; height: 13px; }
[data-category='works-category-web'] .category-art i:nth-child(4) { left: 19px; top: 17px; width: 12px; height: 1px; }
[data-category='works-category-game'] .category-art i { width: 5px; height: 5px; border-radius: 50%; background: #ddd; }
[data-category='works-category-game'] .category-art i:nth-child(1) { top: 3px; left: 5px; }
[data-category='works-category-game'] .category-art i:nth-child(2) { top: 16px; left: 27px; }
[data-category='works-category-game'] .category-art i:nth-child(3) { top: 28px; left: 9px; }
[data-category='works-category-game'] .category-art i:nth-child(4) {
    width: 24px; height: 26px; left: 8px; top: 5px; border-radius: 0;
    background: none; border-width: 1px 1px 0 0; transform: rotate(25deg);
}
[data-category='works-category-modeling'] .category-art { perspective: 100px; }
[data-category='works-category-modeling'] .category-art i { width: 23px; height: 23px; top: 7px; left: 7px; transform: rotate(-24deg) skew(12deg,12deg); }
[data-category='works-category-modeling'] .category-art i:nth-child(2) { translate: 5px -5px; opacity: .5; }
[data-category='works-category-modeling'] .category-art i:nth-child(n+3) { display: none; }
[data-category='works-category-misc'] .category-art i:nth-child(1) { inset: 7px; border-radius: 50%; }
[data-category='works-category-misc'] .category-art i:nth-child(2) { left: 0; right: 0; top: 19px; border-bottom: 0; }
[data-category='works-category-misc'] .category-art i:nth-child(3) { top: 0; bottom: 0; left: 19px; border-right: 0; }
[data-category='works-category-misc'] .category-art i:nth-child(4) { inset: 13px; transform: rotate(45deg); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .home-stage__tab:hover .category-art { transform: translateY(-3px) rotate(-5deg); }
    [data-category='works-category-game']:hover .category-art i { animation: signature-pulse 1.8s ease-in-out infinite alternate; }
    [data-category='works-category-game']:hover .category-art i:nth-child(2) { animation-delay: .3s; }
}
@keyframes signature-pulse { to { opacity: .3; translate: 0 -3px; } }
@media (max-width: 640px) {
    .home-featured__heading { flex-wrap: wrap; }
    .category-art { width: 32px; right: 14px; }
}

/* Visual-first category entrance; labels remain as concise accessible identifiers. */
.category-portal-preview { display: none; }
.home-stage__panel:has(.home-stage__tab-list--prompt) { grid-template-rows: minmax(0, 1fr); }
.home-stage__tab-list--prompt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: 0; height: 100%; gap: 1rem;
}
.home-stage__tab-list--prompt .home-stage__tab {
    min-height: 0; overflow: hidden; padding: 1.5rem;
    background: radial-gradient(ellipse at 65% 25%, #ffffff09, transparent 70%), #111112;
    transition: transform 400ms ease, border-color 300ms ease, opacity 300ms ease;
}
.home-stage__tab-list--prompt .category-art {
    top: 35%; left: 50%; right: auto; translate: -50% -50%; scale: 2.8;
    opacity: .48;
}
.home-stage__tab-list--prompt .home-stage__tab strong { position: relative; z-index: 2; font-size: 1rem; }
.home-stage__tab-list--prompt .home-stage__tab-index,
.home-stage__tab-list--prompt .home-stage__tab small { display: none; }
.home-stage__tab-list--prompt .category-portal-preview {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; filter: grayscale(1) brightness(.45);
    transform: scale(1.07); transition: opacity 500ms ease, transform 900ms ease;
    pointer-events: none;
    mask-image: linear-gradient(black 25%, transparent 100%);
}
.home-stage__tab-list--prompt .home-stage__tab:is(:hover,:focus-visible) .category-portal-preview {
    opacity: .75; transform: scale(1);
}
.home-stage__tab-list--prompt .home-stage__tab:is(:hover,:focus-visible) .category-art { opacity: .8; }
@media (hover: hover) {
    .home-stage__tab-list--prompt:has(.home-stage__tab:hover) .home-stage__tab:not(:hover) { opacity: .55; }
}
@media (max-width: 900px) {
    .home-stage__tab-list--prompt { height: auto; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .home-stage__tab-list--prompt .home-stage__tab { min-height: 220px; }
}
@media (max-width: 480px) {
    .home-stage__tab-list--prompt { gap: .6rem; }
    .home-stage__tab-list--prompt .home-stage__tab { min-height: 180px; padding: 1rem; }
    .home-stage__tab-list--prompt .category-art { scale: 2; }
    .home-stage__tab-list--prompt .home-stage__tab strong { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .category-portal-preview { transition: none !important; transform: none !important; }
}
@media (min-width: 1101px) {
    .home-stage__panel:has(.home-stage__tab-list--prompt) {
        height: calc(var(--home-stage-viewport-height) - 2.5rem);
        min-height: 0;
    }
    .home-stage__tab-list--prompt { height: 100%; align-content: stretch; }
}


/* Four interactive exhibits — local transforms, no scene snapshots or render loop. */
.home-stage__tab-list--prompt .home-stage__tab {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.025' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"), radial-gradient(ellipse at 65% 25%, #ffffff08, transparent 70%);
    background-size: 160px 160px, auto;
    box-shadow: inset 0 1px 0 #ffffff08, 0 12px 30px #00000018;
}
.home-stage__tab-list--prompt .category-art {
    transform: perspective(220px) rotateX(var(--exhibit-rx, 0deg)) rotateY(var(--exhibit-ry, 0deg));
    transition: transform 400ms ease-out, opacity 350ms ease;
    transform-style: preserve-3d;
}
.home-stage__tab-list--prompt .category-art i {
    transition: transform 550ms cubic-bezier(.2,.7,.2,1), opacity 350ms ease;
}
/* Website: floating layers open like interface sheets. */
.home-stage__tab-list--prompt [data-category='works-category-web']:is(:hover,:focus-visible) .category-art i:nth-child(1) { transform: translateZ(5px) rotateY(-12deg); }
.home-stage__tab-list--prompt [data-category='works-category-web']:is(:hover,:focus-visible) .category-art i:nth-child(2) { transform: translateY(-4px) translateZ(9px); }
.home-stage__tab-list--prompt [data-category='works-category-web']:is(:hover,:focus-visible) .category-art i:nth-child(3) { transform: translate(-3px,3px) translateZ(15px); }
.home-stage__tab-list--prompt [data-category='works-category-web']:is(:hover,:focus-visible) .category-art i:nth-child(4) { transform: translate(4px,3px) translateZ(12px); }
/* Game: four independent points gather and scatter around the pointer. */
.home-stage__tab-list--prompt [data-category='works-category-game'] .category-art i:nth-child(4) {
    width: 4px; height: 4px; left: 20px; top: 4px; border-radius: 50%;
    background: #ddd; border: 1px solid #eee; transform: none;
}
.home-stage__tab-list--prompt [data-category='works-category-game']:is(:hover,:focus-visible) .category-art i {
    animation: exhibit-particles 2.8s ease-in-out infinite alternate;
    translate: var(--exhibit-px, 0px) var(--exhibit-py, 0px);
}
.home-stage__tab-list--prompt [data-category='works-category-game'] .category-art i:nth-child(2) { animation-delay: -.7s; }
.home-stage__tab-list--prompt [data-category='works-category-game'] .category-art i:nth-child(3) { animation-delay: -1.4s; }
.home-stage__tab-list--prompt [data-category='works-category-game'] .category-art i:nth-child(4) { animation-delay: -2.1s; }
/* Modeling: crossed wireframe planes read as a spatial structure. */
.home-stage__tab-list--prompt [data-category='works-category-modeling'] .category-art i {
    display: block; inset: 4px; width: 30px; height: 30px;
    translate: none; opacity: .7; transform: rotateY(35deg) rotateX(20deg);
}
.home-stage__tab-list--prompt [data-category='works-category-modeling'] .category-art i:nth-child(2) { transform: rotateY(95deg) rotateX(20deg); }
.home-stage__tab-list--prompt [data-category='works-category-modeling'] .category-art i:nth-child(3) { transform: rotateY(155deg) rotateX(20deg); }
.home-stage__tab-list--prompt [data-category='works-category-modeling'] .category-art i:nth-child(4) { transform: rotateX(90deg); }
.home-stage__tab-list--prompt [data-category='works-category-modeling']:is(:hover,:focus-visible) .category-art { animation: exhibit-orbit 14s linear infinite; }
/* Making: linked ring and tool-like cross turn in opposing directions. */
.home-stage__tab-list--prompt [data-category='works-category-misc']:is(:hover,:focus-visible) .category-art i:nth-child(2) { transform: rotate(35deg); }
.home-stage__tab-list--prompt [data-category='works-category-misc']:is(:hover,:focus-visible) .category-art i:nth-child(3) { transform: rotate(-35deg); }
.home-stage__tab-list--prompt [data-category='works-category-misc']:is(:hover,:focus-visible) .category-art i:nth-child(4) { transform: rotate(135deg) scale(.8); }
.home-stage__tab-list--prompt .home-stage__tab:is(:hover,:focus-visible) { box-shadow: inset 0 1px 0 #ffffff25, 0 18px 32px #00000030; }
@keyframes exhibit-particles {
    from { transform: translate(-2px, 1px) scale(.7); opacity: .45; }
    to { transform: translate(4px, -3px) scale(1.1); opacity: 1; }
}
@keyframes exhibit-orbit {
    from { transform: perspective(220px) rotateX(var(--exhibit-rx, 0deg)) rotateY(var(--exhibit-ry, 0deg)) rotateZ(0deg); }
    to { transform: perspective(220px) rotateX(var(--exhibit-rx, 0deg)) rotateY(calc(var(--exhibit-ry, 0deg) + 360deg)) rotateZ(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .home-stage__tab-list--prompt .category-art,
    .home-stage__tab-list--prompt .category-art i { animation: none !important; transition: none !important; }
}
html.motion-paused .home-stage__tab-list--prompt .category-art,
html.motion-paused .home-stage__tab-list--prompt .category-art i { animation-play-state: paused; }

/* First-visit reveal: one short sequence, never a blocking loading screen. */
.home-stage__tab-list--prompt.entrance-reveal .home-stage__tab {
    animation: entrance-card 520ms cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--entrance-delay, 0ms);
}
.entrance-reveal .home-stage__tab:nth-of-type(1) { --entrance-delay: 0ms; }
.entrance-reveal .home-stage__tab:nth-of-type(2) { --entrance-delay: 80ms; }
.entrance-reveal .home-stage__tab:nth-of-type(3) { --entrance-delay: 160ms; }
.entrance-reveal .home-stage__tab:nth-of-type(4) { --entrance-delay: 240ms; }
.entrance-reveal .category-art i {
    animation: entrance-line 480ms ease-out both !important;
    animation-delay: var(--entrance-delay, 0ms) !important;
}
.entrance-reveal .home-stage__tab strong {
    animation: entrance-label 350ms ease-out both;
    animation-delay: calc(var(--entrance-delay, 0ms) + 200ms);
}
@keyframes entrance-card { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes entrance-line { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes entrance-label { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .entrance-reveal .home-stage__tab,
    .entrance-reveal .category-art i,
    .entrance-reveal .home-stage__tab strong { animation: none !important; }
}
/* Independent pre-home opening, transform/opacity and small SVG strokes only. */
#site-intro {
    position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100dvh;
    border: 0; padding: 0; margin: 0; display: grid; place-items: center;
    background: #080809; color: #d8d8dc; cursor: pointer;
    transition: opacity 380ms ease; touch-action: manipulation;
}
#site-intro svg { width: min(70vw, 480px); height: min(70vw, 480px); overflow: visible; }
#site-intro .intro-seed { animation: intro-seed 700ms ease both; transform-origin: center; }
#site-intro .intro-lines { fill: none; stroke: currentColor; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
#site-intro .intro-lines path, #site-intro .intro-lines rect, #site-intro .intro-lines circle {
    stroke-dasharray: 180; stroke-dashoffset: 180;
    animation: intro-draw 850ms 180ms ease forwards;
}
#site-intro .intro-symbol { transform-box: fill-box; transform-origin: center; animation: intro-symbol 1500ms ease both; }
#site-intro .intro-symbol:nth-child(2) { animation-delay: 60ms; }
#site-intro .intro-symbol:nth-child(3) { animation-delay: 120ms; }
#site-intro .intro-symbol:nth-child(4) { animation-delay: 180ms; }
#site-intro.intro-leave { opacity: 0; pointer-events: none; }
#site-intro.intro-leave svg { transform: scale(1.15); transition: transform 380ms ease; }
html[data-intro='running'] { overflow: hidden; }
html[data-intro='running'] .site-shell { visibility: hidden; }
@keyframes intro-seed { 0% { opacity: 0; scale: .3; } 40% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 2; } }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-symbol { 0% { opacity: 0; scale: .4; } 25% { opacity: .25; } 65%,100% { opacity: .85; scale: 1; } }
@media (prefers-reduced-motion: reduce) { #site-intro { display: none; } }

/* Identity is visible immediately; symbols become a secondary signature. */
#site-intro .intro-identity {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    display: grid; gap: 14px; text-align: center; z-index: 1;
    color: #f0f0f2; pointer-events: none;
}
#site-intro .intro-identity strong {
    font: 400 clamp(36px, 6vw, 64px) system-ui, sans-serif;
    letter-spacing: .16em; padding-left: .16em;
}
#site-intro .intro-identity > span {
    font: 400 10px ui-monospace, monospace; letter-spacing: .32em;
    padding-left: .32em; color: #ffffff70;
}
#site-intro svg { width: min(90vw, 700px); height: min(90vw, 700px); opacity: .4; }
#site-intro .intro-seed { display: none; }
#site-intro .intro-symbol { animation-duration: 950ms; }
#site-intro .intro-lines path, #site-intro .intro-lines rect, #site-intro .intro-lines circle {
    animation-duration: 650ms; animation-delay: 180ms;
}
/* Keep a clear center around the name. */
#site-intro .intro-lines > g:nth-child(1) { translate: -42px -22px; }
#site-intro .intro-lines > g:nth-child(2) { translate: 42px -22px; }
#site-intro .intro-lines > g:nth-child(3) { translate: -42px 22px; }
#site-intro .intro-lines > g:nth-child(4) { translate: 42px 22px; }
@media (max-width: 480px) {
    #site-intro svg { width: 100vw; height: 100vw; opacity: .25; }
    #site-intro .intro-identity strong { font-size: 34px; }
}