/* ==========================================================================
   Senku — "Ideas in motion"
   Near-black and cream scenes on a fine grid, bold uppercase type, mono labels,
   two accent colors (orange and lime by default; visitors can pick another pair),
   and 3D-tilted product frames. Plain CSS, no build step.
   Every animation is switched off by the reduced-motion rules at the end.
   ========================================================================== */
@font-face{font-family:'Inter Tight';src:url(assets/fonts/inter-tight-latin-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(assets/fonts/jetbrains-mono-latin-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(assets/fonts/jetbrains-mono-latin-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
 --night:#0e0f12;--coal:#111215;--cream:#f3efe4;--paper:#efe9db;--paper-2:#f7f4ec;
 --font:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.55,0,.75,.06);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-soft:cubic-bezier(.2,.7,.2,1);--ease-back:cubic-bezier(.34,1.45,.64,1);
 --gutter:clamp(20px,4vw,48px);color-scheme:dark
}
/* Accent colors. Every accent in the site comes from these tokens. --accent and --accent-2 are the bright
   fills used on dark scenes and on buttons (text on them is --coal); --accent-ink and --accent-display are
   deeper versions for text on light backgrounds (WCAG AA); --accent-2-deep is the secondary on light.
   Each [data-accent] pair is checked for contrast; the .swatch-chip rules let the picker show every pair. */
:root,.swatch-chip[data-accent=ember]{--accent:#ff6a3d;--accent-hover:#ff8058;--accent-soft:#ff9a76;--accent-ink:#b23a12;--accent-display:#d9471a;--accent-deep:#e8531f;--accent-2:#c8f04e;--accent-2-deep:#94bd18}
:root[data-accent=tide],.swatch-chip[data-accent=tide]{--accent:#4f9dff;--accent-hover:#73b1ff;--accent-soft:#9cc8ff;--accent-ink:#1f5fc4;--accent-display:#2b6fe0;--accent-deep:#2f7ae8;--accent-2:#7cf0d4;--accent-2-deep:#1fb894}
:root[data-accent=orchid],.swatch-chip[data-accent=orchid]{--accent:#b48cff;--accent-hover:#c4a3ff;--accent-soft:#d6c0ff;--accent-ink:#6c3fd1;--accent-display:#7d4ff0;--accent-deep:#8a5cf5;--accent-2:#ffc94d;--accent-2-deep:#e0a414}
:root[data-accent=punch],.swatch-chip[data-accent=punch]{--accent:#ff5c8a;--accent-hover:#ff7ea3;--accent-soft:#ffa3bd;--accent-ink:#b8164a;--accent-display:#d82a60;--accent-deep:#e83d70;--accent-2:#ffd166;--accent-2-deep:#e4ac1c}
:root[data-accent=mint],.swatch-chip[data-accent=mint]{--accent:#2fd18c;--accent-hover:#5cdca5;--accent-soft:#93e9c3;--accent-ink:#0d7049;--accent-display:#14855a;--accent-deep:#1ea873;--accent-2:#ff9f6b;--accent-2-deep:#ef7a3c}
:root[data-theme=light]{color-scheme:light}

/* Scene palettes. Ink scenes are near-black in dark mode and warm paper in light mode; paper scenes stay cream.
   Cards, product frames and chips are dark objects in both, as in the motion edit. */
.ink{--bg:var(--night);--fg:var(--cream);--muted:#9b9da4;--line:rgba(243,239,228,.11);--grid:rgba(243,239,228,.045);--accent-text:var(--accent);--strip:#2a2c31;--outline:rgba(243,239,228,.2);--chip:#1b1d21;--chip-line:rgba(243,239,228,.08);--glass:rgba(14,15,18,.9);--focus:var(--accent);--display-accent:var(--accent)}
.paper{--bg:var(--paper);--fg:#111215;--muted:#5c5850;--line:rgba(17,18,21,.14);--grid:rgba(17,18,21,.065);--accent-text:var(--accent-ink);--strip:#d2cbba;--outline:rgba(17,18,21,.18);--chip:var(--coal);--chip-line:transparent;--glass:rgba(239,233,219,.85);--focus:var(--accent-ink);--display-accent:var(--accent-display)}
:root[data-theme=light] .ink{--bg:var(--paper-2);--fg:#111215;--muted:#5d5a53;--line:rgba(17,18,21,.12);--grid:rgba(17,18,21,.055);--accent-text:var(--accent-ink);--strip:#dad4c5;--outline:rgba(17,18,21,.16);--chip:var(--coal);--chip-line:transparent;--glass:rgba(247,244,236,.86);--focus:var(--accent-ink);--display-accent:var(--accent-display)}
@media(prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light}:root:not([data-theme]) .ink{--bg:var(--paper-2);--fg:#111215;--muted:#5d5a53;--line:rgba(17,18,21,.12);--grid:rgba(17,18,21,.055);--accent-text:var(--accent-ink);--strip:#dad4c5;--outline:rgba(17,18,21,.16);--chip:var(--coal);--chip-line:transparent;--glass:rgba(247,244,236,.86);--focus:var(--accent-ink);--display-accent:var(--accent-display)}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--night);color:var(--cream);font:400 1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
:root[data-theme=light] body{background:var(--paper-2)}
@media(prefers-color-scheme:light){:root:not([data-theme]) body{background:var(--paper-2)}}
body.menu-open{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:var(--coal)}
:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:4px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;z-index:300;top:12px;left:12px;padding:12px 18px;border-radius:10px;background:var(--accent);color:var(--coal);font-weight:700;transform:translateY(-160%)}.skip:focus{transform:none}
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.mono{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.accent{color:var(--accent-text)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:var(--glass);color:var(--fg);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav-shell{display:flex;align-items:center;gap:32px;min-height:68px}
.wordmark{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}.wordmark span{color:var(--muted);font-weight:500;margin-inline:.1em}
.desktop-nav{margin-left:auto;display:flex;gap:28px;font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.09em}
.desktop-nav a{position:relative;padding-block:12px;color:var(--muted);transition:color .25s}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--fg)}.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1)}
.controls{display:flex;gap:10px;align-items:center}
.icon{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;position:relative;transition:background .2s,border-color .2s,scale .2s var(--ease-out)}
.icon:hover{border-color:var(--fg)}.icon:active{scale:.92}
.theme svg{width:19px;height:19px}.sun{display:none}:root[data-theme=dark] .sun{display:block}:root[data-theme=dark] .moon{display:none}
.menu-toggle{display:none}
.menu-toggle span,.menu-close span,.game-close span{position:absolute;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease-out),top .3s var(--ease-out)}
.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
.menu-close span:first-child,.game-close span:first-child{transform:rotate(45deg)}.menu-close span:last-child,.game-close span:last-child{transform:rotate(-45deg)}

/* Mobile menu: a full-screen panel whose links fall into place one after another. */
.mobile-menu{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:12px var(--gutter) 32px;border:0;background:var(--bg);color:var(--fg);overflow:auto;opacity:0;transition:opacity .25s var(--ease-soft)}
.mobile-menu.is-open{opacity:1}.mobile-menu::backdrop{background:transparent}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.mobile-menu nav{display:grid;margin-block:24px;perspective:900px}
.mobile-menu nav a{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,11vw,3.6rem);line-height:1;letter-spacing:-.02em;opacity:0;transform:translateY(26px) rotateX(-40deg);transform-origin:50% 100%;transition:color .2s,opacity .35s var(--ease-soft),transform .7s var(--ease-back)}
.mobile-menu nav a span{font:500 .75rem var(--mono);letter-spacing:.06em;color:var(--accent-text)}
.mobile-menu nav a:hover{color:var(--accent-text)}
.mobile-menu.is-open nav a{opacity:1;transform:none;transition-delay:0s,calc(.06s + var(--m,0) * .05s),calc(.06s + var(--m,0) * .05s)}
.mobile-menu nav a:nth-child(2){--m:1}.mobile-menu nav a:nth-child(3){--m:2}.mobile-menu nav a:nth-child(4){--m:3}.mobile-menu nav a:nth-child(5){--m:4}
.menu-note{font:500 .78rem/1.8 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);opacity:0;transition:opacity .4s var(--ease-soft)}.mobile-menu.is-open .menu-note{opacity:1;transition-delay:.32s}

/* Accent picker. A split chip shows each pair (main accent and secondary). The header button opens a small
   panel on wider screens; the mobile menu shows the same choices as a row. Both are native radio groups,
   so arrow keys move between colors, and the choice is saved for the next visit. */
.swatch-chip{display:block;width:20px;height:20px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--accent) 50%,var(--accent-2) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.accent-picker{position:relative}
.accent-toggle .swatch-chip{transition:transform .35s var(--ease-back)}
.accent-toggle[aria-expanded=true]{border-color:var(--fg)}.accent-toggle[aria-expanded=true] .swatch-chip{transform:rotate(180deg)}
.accent-panel{position:absolute;top:calc(100% + 12px);right:-6px;z-index:5;width:212px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--fg);box-shadow:0 24px 48px -24px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.12);visibility:hidden;opacity:0;transform:translateY(-6px);transform-origin:top right;transition:opacity .18s var(--ease-soft),transform .3s var(--ease-out),visibility 0s .3s}
.accent-picker.is-open .accent-panel{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.swatches{margin:0;padding:0;border:0;min-width:0}
.swatches legend{padding:6px 10px 10px;font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.swatch{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:600;font-size:.95rem;transition:background .2s,color .2s}
@media(hover:hover){.swatch:hover{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg)}}
.swatch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.swatch input:checked~.swatch-name{color:var(--fg)}
.swatch input:checked+.swatch-chip{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--fg)}
.swatch input:focus-visible+.swatch-chip{outline:2px solid var(--focus,var(--accent));outline-offset:5px}
.swatch .swatch-chip{transition:box-shadow .25s var(--ease-out)}
.swatch-name{transition:color .2s}
.menu-swatches{margin-bottom:28px;opacity:0;transition:opacity .4s var(--ease-soft)}.mobile-menu.is-open .menu-swatches{opacity:1;transition-delay:.28s}
.menu-swatches legend{padding:0 0 12px}
.menu-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.menu-swatches .swatch{flex-direction:column;justify-content:center;gap:8px;min-height:72px;padding:8px 0;font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
.menu-swatches .swatch-chip{width:28px;height:28px}
html:not(.js) .accent-picker,html:not(.js) .menu-swatches{display:none}
@media(max-width:720px){.site-header .accent-picker{display:none}}
@media(prefers-reduced-motion:reduce){.accent-panel,.accent-toggle .swatch-chip,.swatch .swatch-chip{transition:none}.menu-swatches{opacity:1;transition:none}}

/* Scenes: a fine grid fading at the edges, outlined rings, and generous spacing. */
.scene{position:relative;isolation:isolate;overflow:clip;background:var(--bg);color:var(--fg);padding-block:clamp(88px,11vw,150px)}
.scene::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:88px 88px;background-position:center -1px;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 30%,transparent 100%)}
.rings{position:absolute;z-index:-1;fill:none;stroke:var(--line);stroke-width:1;pointer-events:none;animation:spin 140s linear infinite}
.rings-hero{width:min(70vw,820px);right:-6%;top:2%}.rings-id{width:min(60vw,720px);right:-4%;top:4%}.rings-builds{width:min(70vw,840px);left:50%;top:50%;margin:calc(min(70vw,840px)/-2) 0 0 calc(min(70vw,840px)/-2)}.rings-right{width:min(58vw,700px);right:-10%;top:4%}

.label{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--accent-text);margin-bottom:14px}
.title{font-weight:800;text-transform:uppercase;letter-spacing:-.008em;line-height:.94;font-size:clamp(2.3rem,7.4vw,6.4rem);overflow-wrap:anywhere}
.title.xl{font-size:clamp(3rem,10.5vw,9.2rem)}
.title .accent{color:var(--display-accent)}
.subhead{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:500;letter-spacing:-.01em;margin-top:clamp(18px,2.4vw,30px)}

/* Letters of a split heading: real text stays available to assistive tech in .sr-only. */
.split .w{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block;transform-origin:50% 100%}
html.js:not(.split-done) [data-split]{opacity:0;animation:show-anyway 0s 2.5s forwards}
@keyframes show-anyway{to{opacity:1}}

/* Buttons and links */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:12px;border:1px solid transparent;font:800 .86rem var(--font);text-transform:uppercase;letter-spacing:.03em;transition:background .25s var(--ease-out),color .25s,border-color .25s,transform .45s var(--ease-out),scale .2s var(--ease-out)}
.button:hover{transform:translateY(-3px)}.button:active{scale:.97}
.primary{background:var(--accent);color:var(--coal)}.primary:hover{background:var(--accent-hover)}
.ghost{border-color:var(--line);color:var(--fg)}.ghost:hover{border-color:var(--fg)}
.button.small{min-height:40px;padding:8px 14px;font-size:.74rem}
.play-game svg{width:18px;height:18px}
.text-link{display:inline-block;font-weight:700;font-size:.95rem;padding-bottom:3px;border-bottom:2px solid var(--accent);transition:color .2s}.text-link:hover{color:var(--accent-text)}
.inline-link{border-bottom:1px solid var(--accent)}.inline-link:hover{color:var(--accent-text)}

/* Hero */
.hero{min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(48px,8vh,96px) 28px}
.hero-inner{position:relative}
.hero-head{position:relative}
.hero-title{position:relative;font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,10.6vw,9.2rem);line-height:.96;letter-spacing:-.01em;padding-right:clamp(64px,14vw,190px)}
.hero-line{position:relative;z-index:1;display:block}
.hero-line.accent{color:var(--display-accent)}
.echo{position:absolute;left:0;top:0;z-index:0;pointer-events:none}
.echo span{position:absolute;left:0;top:0;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--outline);translate:calc(var(--e) * .032em) calc(var(--e) * .15em);transform:translate(calc(var(--hx,0) * var(--e) * 7px),calc(var(--hy,0) * var(--e) * 6px));transition:transform .8s var(--ease-out)}
.echo span:nth-child(1){--e:1}.echo span:nth-child(2){--e:2;opacity:.7}.echo span:nth-child(3){--e:3;opacity:.4}
.starburst{position:absolute;right:0;top:0;width:clamp(56px,12vw,170px);fill:var(--accent);animation:spin 26s linear infinite}
.starburst.lime{position:static;flex:none;fill:var(--accent-2)}
:root[data-theme=light] .starburst.lime{fill:var(--accent-2-deep)}
@media(prefers-color-scheme:light){:root:not([data-theme]) .starburst.lime{fill:var(--accent-2-deep)}}
.hero-tag{margin-top:clamp(28px,4vw,46px);color:var(--accent-text);font-size:.82rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:end;margin-top:20px}
.hero-intro{max-width:560px;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.65;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-side{justify-self:end;display:grid;gap:18px;justify-items:start}
.announce{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:600;transition:border-color .25s,transform .45s var(--ease-out)}
.announce:hover{border-color:var(--accent);transform:translateY(-2px)}
.announce-tag{padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--coal);font:800 .7rem var(--font);letter-spacing:.06em;text-transform:uppercase}
.availability{display:flex;align-items:center;gap:10px;font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);max-width:360px}
.pulse{position:relative;flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e}
.pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:ping 2s ease-out infinite}

/* Slogan strips */
.marquee{overflow:hidden;margin-top:clamp(56px,7vw,100px);color:var(--strip);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.015em;white-space:nowrap;-webkit-user-select:none;user-select:none}
.hero .marquee{margin-top:clamp(48px,7vh,90px)}
.marquee-track{display:inline-flex;animation:marquee 46s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee-track span{padding-right:.5em}

/* Identity / about */
.identity-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.role{margin-top:30px;font-size:.84rem;color:var(--muted)}
.aka{margin-top:8px;font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2vw,1.65rem)}.aka span{color:var(--muted);font-weight:500}
.orbit{position:relative;width:min(100%,520px);aspect-ratio:1;justify-self:center}
.orbit-ring{position:absolute;inset:var(--inset);border:1px solid var(--line);border-radius:50%;container-type:size;animation:spin var(--dur) linear infinite var(--rev,normal)}
.orbit-tag{position:absolute;left:50%;top:50%;width:clamp(58px,7vw,80px);height:clamp(58px,7vw,80px);translate:-50% -50%;transform:rotate(var(--a)) translateX(50cqw) rotate(calc(var(--a) * -1))}
.orbit-tag>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--accent);color:var(--coal);font-weight:800;font-size:clamp(.72rem,1vw,.86rem);text-transform:uppercase;animation:spin var(--dur) linear infinite reverse}
.orbit-ring[style*="--rev:reverse"] .orbit-tag>span{animation-direction:normal}
.avatar{position:absolute;inset:21%;border-radius:50%;overflow:hidden;background:var(--coal);box-shadow:0 40px 80px -36px rgba(0,0,0,.55)}
.avatar img{width:100%;height:100%;object-fit:cover}
.monogram{position:absolute;inset:0;display:none;place-items:center;font-weight:800;font-size:clamp(2.4rem,6vw,4rem);color:var(--accent)}
.avatar.no-photo img{display:none}.avatar.no-photo .monogram{display:grid}
.about-copy{margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.large-copy{max-width:900px;font-size:clamp(1.45rem,2.6vw,2.2rem);font-weight:600;line-height:1.3;letter-spacing:-.02em}
.about-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:32px}
.about-cols p{color:var(--muted)}

/* Real builds */
.builds-field{position:relative;min-height:clamp(500px,54vw,680px);display:grid;place-items:center;perspective:1400px;margin-top:6px}
.builds-card{position:relative;z-index:3;max-width:min(780px,94%);padding:clamp(26px,3.4vw,46px) clamp(26px,3.6vw,52px);border-radius:24px;background:#0a0b0d;color:var(--cream);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.builds-card .title{font-size:clamp(2.5rem,6.6vw,6.2rem)}
.builds-sub{margin-top:22px;color:var(--accent);font-size:clamp(.78rem,1.3vw,1.05rem)}
.float-shot{position:absolute;z-index:1;width:clamp(140px,22vw,320px);padding:0 5px 5px;border-radius:12px;background:#1c1e23;border:1px solid rgba(255,255,255,.07);box-shadow:0 40px 60px -28px rgba(0,0,0,.65);transform:rotateX(var(--frx)) rotateY(var(--fry)) rotateZ(var(--frz)) translate(calc(var(--px,0) * var(--depth) * 16px),calc(var(--py,0) * var(--depth) * 12px));transition:transform 1s var(--ease-out),opacity .3s,scale .5s var(--ease-out)}
.float-shot:hover{z-index:4}
.float-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:7px}
.mini-bar{display:flex;align-items:center;gap:4px;height:18px;padding:0 3px}.mini-bar i{width:6px;height:6px;border-radius:50%;background:#3b3e45}.mini-bar i:first-child{background:var(--accent)}
.fs1{left:-1%;top:8%}.fs2{right:2%;top:-2%}.fs3{left:9%;bottom:-2%}.fs4{right:-1%;bottom:8%}
.builds-note{margin-top:28px;max-width:520px;color:var(--muted)}

/* 3D product stages. The rig sets the base angle (scroll-linked where supported); the tilt layer follows the
   pointer; phones and callouts sit forward in Z so they move with depth. */
.stage{position:relative;perspective:1700px;perspective-origin:50% 25%;--rx:7deg;--ry:-11deg}
.stage.flip{--ry:11deg}.stage-wide{--rx:9deg;--ry:-5deg}
.rig{transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.tilt{position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--ty,0) * -5deg)) rotateY(calc(var(--tx,0) * 7deg));transition:transform 1.1s var(--ease-out)}
.device{position:relative;padding:0 9px 9px;border-radius:16px;background:#1c1e23;border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 60px 90px -40px rgba(0,0,0,.6),0 24px 40px -26px rgba(0,0,0,.5)}
.device-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 6px;font:500 .64rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8b8e95}
.device-bar i{flex:none;width:10px;height:10px;border-radius:50%;background:#3b3e45}.device-bar i:first-child{background:var(--accent)}
.device-bar span{margin-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.screen{position:relative;overflow:hidden;border-radius:9px;background:#000;aspect-ratio:16/9}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.screen.tall{aspect-ratio:1280/880}.screen.wide{aspect-ratio:16/10}.screen.pulse-shot{aspect-ratio:1180/628}
.screen-badge{position:absolute;left:22px;bottom:22px;padding:6px 12px;border-radius:999px;background:rgba(8,10,16,.82);color:var(--cream);font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
.phone{position:absolute;bottom:-9%;width:24%;padding:clamp(4px,.5vw,7px);border:3px solid #5a5d64;border-radius:clamp(18px,2.6vw,32px);background:#0c0d0f;transform:translateZ(80px);box-shadow:0 40px 60px -26px rgba(0,0,0,.7)}
.phone::before{content:'';position:absolute;z-index:2;top:clamp(9px,1.1vw,14px);left:35%;width:30%;height:clamp(5px,.6vw,8px);border-radius:9px;background:#0c0d0f}
.phone .screen{aspect-ratio:9/19.5;border-radius:clamp(13px,2vw,25px)}
.pos-r{right:-5%}.pos-l{left:-5%}
.float-card{position:absolute;z-index:2;transform:translateZ(120px);animation:bob 7s ease-in-out infinite alternate}
.float-card.dark{padding:clamp(14px,1.8vw,22px) clamp(18px,2.4vw,30px);border-radius:14px;background:var(--coal);color:var(--cream);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);text-transform:uppercase;font-size:clamp(.95rem,1.9vw,1.6rem);line-height:1.1}
.float-card.dark strong{font-weight:800}
.float-card.bar{padding-left:clamp(30px,3.4vw,44px)}.float-card.bar::before{content:'';position:absolute;left:clamp(14px,1.6vw,20px);top:18%;bottom:18%;width:3px;border-radius:2px;background:var(--accent-2)}
.float-card.bar span{display:block;margin-top:6px;text-transform:none;font-size:clamp(.72rem,1vw,.92rem);color:#9b9da4}
.float-card.lime{width:min(48%,420px);padding:clamp(16px,2vw,26px);border-radius:20px;background:#e1efc9;color:var(--coal);box-shadow:0 30px 60px -24px rgba(0,0,0,.5);font-size:clamp(.92rem,1.7vw,1.45rem);line-height:1.2}
.float-card.lime strong{font-weight:800}
.typing{display:flex;gap:6px;margin-top:clamp(12px,1.6vw,22px)}.typing i{width:8px;height:8px;border-radius:50%;background:#2e3a1d;animation:typing 1.3s ease-in-out infinite}.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
.pos-bl{left:-3%;bottom:10%}.pos-br{right:-3%;bottom:-7%}
.shot-stage{margin:0}
.shot-main{transition:opacity .35s var(--ease-out),scale .6s var(--ease-out),filter .35s var(--ease-out)}
.shot-main.swap{opacity:0;scale:1.025;filter:blur(6px);transition-duration:.22s;transition-timing-function:var(--ease-in)}
.shot-badges{position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;pointer-events:none}
.shot-badges>span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(8,10,16,.8);color:var(--cream);font:500 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dev-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:#f5c451}
.shot-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;max-width:640px;margin-top:clamp(40px,5vw,64px)}
.shot-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:9px;border:2px solid transparent;opacity:.55;transition:opacity .25s,border-color .25s,scale .2s var(--ease-out)}
.shot-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot-thumb span{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:5px;background:rgba(8,10,16,.82);color:var(--cream);font:500 .62rem var(--mono);text-transform:uppercase;letter-spacing:.05em}
.shot-thumb:hover{opacity:.85}.shot-thumb:active{scale:.96}.shot-thumb[aria-pressed=true]{opacity:1;border-color:var(--accent)}
.shot-thumb:focus-visible{outline-offset:2px}
html:not(.js) .shot-thumbs{display:none}

/* Project scenes */
.project .title{margin-bottom:clamp(32px,4.4vw,64px)}
.split-stage{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.split-stage.flip{grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr)}
.callouts{display:grid;gap:12px;perspective:1000px}
.callouts li{position:relative;padding:18px 20px 18px 34px;border:1px solid var(--chip-line);border-radius:14px;background:var(--chip);color:rgba(243,239,228,.68);font-size:.92rem;line-height:1.55}
.callouts li::before{content:'';position:absolute;left:16px;top:18px;bottom:18px;width:3px;border-radius:2px;background:var(--accent-2)}
.callouts li:nth-child(even)::before{background:var(--accent)}
.callouts strong{display:block;margin-bottom:4px;color:var(--cream);font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:-.005em}
.project-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);margin-top:clamp(56px,7vw,100px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.category{font-size:.74rem;color:var(--accent-text);margin-bottom:14px}
.tagline{margin-bottom:16px;font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:700;line-height:1.22;letter-spacing:-.02em}
.project-lead>p:not(.category):not(.tagline){color:var(--muted)}
.project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:26px}
.description{display:grid;gap:24px;align-content:start}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.facts dt{margin-bottom:4px;font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.facts dd{font-weight:600;font-size:.95rem}
.facts.two{margin-top:24px}
.note{padding-left:14px;border-left:2px solid var(--accent);font-size:.88rem;color:var(--muted)}
.project-story{border-block:1px solid var(--line)}
.project-story summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;font:500 .76rem var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:color .2s}
.project-story summary::-webkit-details-marker{display:none}
.project-story summary:hover,.project-story[open] summary{color:var(--accent-text)}
.story-icon{position:relative;flex:none;width:18px;height:18px}
.story-icon::before,.story-icon::after{content:'';position:absolute;inset:8px 2px auto;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease-out)}
.story-icon::after{transform:rotate(90deg)}.project-story[open] .story-icon::after{transform:rotate(0)}
.story-body{display:grid;gap:20px;padding:4px 0 26px}
.story-body h3{margin-bottom:6px;font-weight:800;font-size:.95rem;text-transform:uppercase}
.story-body p{color:var(--muted);font-size:.95rem;line-height:1.7}
.project-lead .project-story{margin-top:28px}

/* Learnspace flow */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(36px,4.6vw,64px);perspective:1200px}
.step{display:flex;flex-direction:column;min-height:clamp(210px,18vw,250px);padding:clamp(20px,2vw,28px);border-radius:18px;background:var(--coal);color:var(--cream)}
.step-num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--coal);font-weight:800;font-size:1.25rem}
.step h3{margin-top:auto;padding-top:26px;font-weight:800;text-transform:uppercase;font-size:clamp(1.2rem,1.8vw,1.6rem)}
.step p{margin-top:6px;font-size:.88rem;color:rgba(243,239,228,.66)}
.step-bar{display:block;height:6px;margin-top:22px;overflow:hidden;border-radius:6px;background:#2e3036}
.step-bar span{display:block;width:var(--v);height:100%;border-radius:6px;background:var(--accent-2);transform-origin:left}
.fig-label{margin-top:18px;font-size:.7rem;color:var(--muted)}

/* AxoRonin concept card */
.axo-card{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:16/10;padding:clamp(18px,2.4vw,30px);border-radius:16px;background:#ccd9f3;color:#182c52;box-shadow:0 60px 90px -40px rgba(0,0,0,.6)}
.axo-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 .7rem var(--mono);letter-spacing:.08em}
.concept{padding:4px 10px;border:1px solid currentColor;border-radius:999px}
.axo-center{display:grid;justify-items:center;text-align:center}
.axo-center .kicker{font:500 .7rem var(--mono);letter-spacing:.12em}
.axo-center strong{margin-top:14px;font-weight:800;font-size:clamp(2.6rem,7.6vw,6.2rem);line-height:.86;letter-spacing:-.06em}
.axo-center strong span{display:block;color:#2c579a}
.axo-rule{width:56px;height:2px;margin:16px 0;background:#5273a7}
.axo-line{font-size:.85rem}

/* Blacklist constellation */
.constellation{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.constellation path{fill:none;stroke:var(--fg);stroke-opacity:.28;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
.constellation .ring{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping-ring 3.2s ease-out infinite}
.constellation .dot{fill:var(--accent-2)}
:root[data-theme=light] .constellation .dot{fill:var(--accent-2-deep)}
@media(prefers-color-scheme:light){:root:not([data-theme]) .constellation .dot{fill:var(--accent-2-deep)}}

/* Services */
.heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(36px,4.6vw,64px)}
.heading-row>p{max-width:280px;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;perspective:1200px}
.service{display:flex;flex-direction:column;padding:26px 24px;border-radius:18px;background:var(--coal);color:var(--cream);transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.service h3{margin:34px 0 10px;font-weight:800;font-size:1.25rem;line-height:1.12;text-transform:uppercase}
.service p{margin-bottom:22px;font-size:.9rem;color:rgba(243,239,228,.66)}
.service .text-link{margin-top:auto;align-self:flex-start}.service .text-link:hover{color:var(--accent)}
@media(hover:hover) and (pointer:fine){.service:hover{box-shadow:0 34px 50px -30px rgba(0,0,0,.6)}}

/* One experience */
.craft-stage{max-width:980px;margin:clamp(36px,4.4vw,60px) auto 0}
.craft-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:-28px;perspective:1000px}
.craft-cards li{position:relative;padding:22px 22px 22px 36px;border:1px solid var(--chip-line);border-radius:16px;background:var(--chip);color:var(--cream);box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.craft-cards li::before{content:'';position:absolute;left:17px;top:22px;bottom:22px;width:3px;border-radius:2px;background:var(--accent)}
.craft-cards li:nth-child(2)::before{background:var(--accent-2)}
.craft-cards strong{display:block;font-weight:800;font-size:clamp(1.05rem,1.6vw,1.3rem);text-transform:uppercase}
.craft-cards span{display:block;margin-top:4px;font-size:.88rem;color:rgba(243,239,228,.62)}

/* The full stack */
.graph{position:relative;aspect-ratio:2/1;max-width:1100px;margin:clamp(24px,3vw,44px) auto 0}
.graph-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.graph-lines .link{stroke:var(--fg);stroke-opacity:.32;stroke-width:1}
.graph-lines .dot{stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:0 calc(var(--len) * 2px);animation:travel 3.4s var(--ease-in-out) infinite;animation-delay:var(--delay,0s)}
.graph-hub{position:absolute;z-index:2;left:50%;top:52%;translate:-50% -50%;display:grid;place-items:center;width:clamp(76px,10vw,120px);aspect-ratio:1;border-radius:50%;background:var(--coal);color:var(--cream);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-.03em}
.graph-nodes li{position:absolute;z-index:2;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);translate:-50% -50%;padding:clamp(8px,1vw,13px) clamp(12px,1.4vw,20px);border-radius:10px;background:var(--coal);color:var(--cream);font-weight:800;font-size:clamp(.78rem,1.5vw,1.3rem);text-transform:uppercase;white-space:nowrap;box-shadow:0 18px 30px -20px rgba(0,0,0,.5)}
.skill-groups{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.skill-group{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:32px;padding:26px 0;border-bottom:1px solid var(--line)}
.skill-group h3{font-weight:800;font-size:1.15rem;text-transform:uppercase}
.skill-group p{font-size:.9rem;color:var(--muted)}
.skill-list{display:flex;flex-wrap:wrap;align-content:start;gap:8px}
.skill-list li{padding:9px 14px;border-radius:9px;background:var(--coal);color:var(--cream);font-weight:700;font-size:.92rem}
.skill-list.developing li{background:transparent;border:1px solid var(--fg);color:var(--fg)}

/* Contact */
.contact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.contact .title{font-size:clamp(2.6rem,9vw,8rem)}
.contact .title .accent{color:var(--display-accent)}
.contact .starburst.lime{width:clamp(56px,11vw,150px)}
.contact-intro{max-width:640px;margin-top:28px;font-size:1.1rem;color:var(--muted)}
.cta-bar{display:flex;flex-direction:column;gap:8px;margin-top:clamp(32px,4vw,56px);padding:clamp(22px,3vw,38px) clamp(22px,3vw,40px);border-radius:20px;background:var(--accent);color:var(--coal);transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.cta-bar:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(0,0,0,.6)}
.cta-label{font-size:.78rem}
.cta-mail{font-weight:800;font-size:clamp(1.45rem,5.2vw,4.4rem);line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere}
.cta-bar:focus-visible{outline-color:var(--fg)}
.contact-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:22px}
.sign{font-size:.85rem}
.contact-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,48px);perspective:1000px}
.contact-links a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;transition:border-color .25s,transform .45s var(--ease-out)}
.contact-links a:hover{border-color:var(--accent);transform:translateY(-3px)}
.contact-links .mono{font-size:.68rem;color:var(--muted)}
.contact-links strong{font-weight:700;font-size:1.15rem;overflow-wrap:anywhere}

/* Footer, scene counter and progress */
.footer{background:var(--bg);color:var(--fg);border-top:1px solid var(--line);padding:32px 0 60px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.footer .mono{margin-top:8px;font-size:.68rem;color:var(--muted)}
.footer nav{display:flex;gap:24px;font-weight:600}
.footer nav a:hover,.back-top:hover{color:var(--accent-text)}
.back-top{font-weight:600}
.hud{position:fixed;left:var(--gutter);bottom:16px;z-index:35;display:flex;gap:16px;font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;pointer-events:none}
.progress{position:fixed;left:0;right:0;bottom:0;z-index:36;height:4px;background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}
html:not(.js) .hud,html:not(.js) .vid-toggle{display:none}

/* Game player, toast, confetti */
.game-modal{width:min(1280px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid rgba(243,239,228,.12);border-radius:16px;background:var(--night);color:var(--cream);overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.6);opacity:0;scale:.97;transition:opacity .3s var(--ease-soft),scale .45s var(--ease-out),overlay .3s allow-discrete,display .3s allow-discrete}
.game-modal[open]{opacity:1;scale:1}
.game-modal::backdrop{background:rgba(0,0,0,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease-soft),overlay .3s allow-discrete,display .3s allow-discrete}
.game-modal[open]::backdrop{opacity:1}
@starting-style{.game-modal[open]{opacity:0;scale:.97}.game-modal[open]::backdrop{opacity:0}}
.game-modal{--line:rgba(243,239,228,.12);--fg:var(--cream);--focus:var(--accent)}
.game-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line)}
.game-modal-bar strong{display:block;font-weight:800;text-transform:uppercase}.game-modal-bar span{font:500 .68rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#9b9da4}
.game-frame{position:relative;aspect-ratio:16/9;max-height:calc(100dvh - 120px);margin-inline:auto;background:#05070c}
.game-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.game-loading{position:absolute;inset:0;display:grid;place-items:center;color:#9b9da4;font:500 .8rem var(--mono);text-transform:uppercase;letter-spacing:.08em}
.toast{position:fixed;left:50%;bottom:30px;z-index:60;max-width:calc(100% - 32px);padding:12px 20px;border-radius:999px;background:var(--accent);color:var(--coal);font-weight:700;font-size:.9rem;box-shadow:0 14px 30px rgba(0,0,0,.3);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;z-index:55;pointer-events:none}

/* Intro: SENKU / SKYBOY decodes, then the screen breaks into tiles that clear away. */
.intro{display:none}
html.intro-on body{overflow:hidden}
html.intro-on .intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;color:var(--cream);cursor:pointer;animation:intro-failsafe 0s 6s forwards}
@keyframes intro-failsafe{to{visibility:hidden;pointer-events:none}}
.intro-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,1),1fr);grid-template-rows:repeat(var(--rows,1),1fr);background:var(--night)}
.intro-tiles.has-tiles{background:transparent}
.intro-tile{background:var(--night)}
.intro-out .intro-tile{animation:tile-out .6s var(--ease-in-out) forwards;animation-delay:calc(var(--i) * 24ms)}
@keyframes tile-out{0%{background:var(--night)}35%{background:var(--c)}100%{background:var(--c);transform:scale(0)}}
.intro-inner{position:relative;z-index:1;padding:24px;text-align:center}
.intro-kicker{margin:0 0 20px;font:500 .74rem var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--accent);opacity:0;animation:intro-rise .6s .1s forwards}
.intro-name{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.22em;margin:0;font:500 clamp(2.4rem,9.5vw,7rem)/1 var(--mono);letter-spacing:.02em}
.intro-word{color:#8d8f95;transition:color .3s}.intro-word.set{color:var(--cream)}.intro-word.accent.set{color:var(--accent)}
.intro-slash{color:#4a4c52;animation:intro-flicker 1.2s .9s both}
@keyframes intro-flicker{0%,40%{opacity:0}45%{opacity:1}50%{opacity:.2}60%,100%{opacity:1}}
.intro-bar{width:min(320px,70vw);height:3px;margin:34px auto 16px;overflow:hidden;border-radius:3px;background:rgba(243,239,228,.12)}
.intro-bar span{display:block;height:100%;background:var(--accent);transform-origin:left;animation:intro-load 2.7s .2s cubic-bezier(.6,.05,.3,1) both}
@keyframes intro-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.intro-tag{margin:0;font:500 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8d8f95;opacity:0;animation:intro-rise .6s 1.4s forwards}
.intro-hint{position:absolute;z-index:1;left:0;right:0;bottom:22px;margin:0;text-align:center;font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6b6d73}
@keyframes intro-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.intro-out .intro-inner,.intro-out .intro-hint{animation:intro-leave .35s var(--ease-in) forwards}
@keyframes intro-leave{to{opacity:0;transform:scale(1.06);filter:blur(4px)}}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes spin{to{rotate:360deg}}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes ping{to{transform:scale(3);opacity:0}}
@keyframes ping-ring{50%{scale:1.6;opacity:.35}}
@keyframes bob{to{translate:0 -10px}}
@keyframes typing{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -5px;opacity:1}}
@keyframes travel{0%{stroke-dashoffset:0;stroke-opacity:0}12%{stroke-opacity:1}88%{stroke-opacity:1}100%{stroke-dashoffset:calc(var(--len) * -1px);stroke-opacity:0}}
@keyframes drop{from{opacity:0;transform:translate3d(0,-.7em,0) rotate(var(--r,0deg))}}
@keyframes rise{from{opacity:0;translate:0 26px}}
@keyframes fade-in{from{opacity:0}}
@keyframes echo-in{from{opacity:0;translate:0 0}}
@keyframes burst-in{from{opacity:0;scale:.3;rotate:-160deg}}
@keyframes icon-in{from{opacity:0;rotate:-90deg;scale:.5}}

/* Hero entrance: the letters of each line fall into place, the outline echoes fan out behind "Ideas.",
   and the starburst spins in. Starts after the intro, or as the page parses on return visits. */
html.hero-in .hero-line .ch{animation:drop 1s var(--ease-back) backwards;animation-delay:calc(.12s + var(--i) * 45ms)}
html.hero-in .hero-line.accent .ch{animation-delay:calc(.42s + var(--i) * 45ms)}
html.hero-in .echo span{animation:echo-in 1.3s var(--ease-out) backwards;animation-delay:calc(.55s + var(--e) * .09s)}
html.hero-in .hero-head .starburst{animation:burst-in 1.4s var(--ease-out) .3s backwards,spin 26s linear 1.7s infinite}
html.hero-in .hero-tag{animation:rise .9s .75s var(--ease-out) backwards}
html.hero-in .hero-copy{animation:rise 1s .85s var(--ease-out) backwards}
html.hero-in .hero-side{animation:rise 1s .95s var(--ease-out) backwards}
html.hero-in .hero .marquee{animation:fade-in 1.2s 1s var(--ease-soft) backwards}

/* Scroll reveals (script.js marks the parts; only content below the fold at load is hidden). */
.r-hide[data-r=up]{opacity:0;translate:0 32px}
.r-hide[data-r=flip]{opacity:0;transform:rotateX(-42deg) translateY(40px);transform-origin:50% 0}
.r-hide[data-r=chip]{opacity:0;translate:0 10px;scale:.9}
.r-hide[data-r=stage]{opacity:0}
.r-hide[data-r=stage] .rig{transform:rotateX(calc(var(--rx) + 22deg)) rotateY(calc(var(--ry) * 2.2)) translate3d(0,90px,-220px)}
.r-hide[data-r=title] .ch{opacity:0;transform:translate3d(0,-.7em,0) rotate(var(--r,0deg))}
.r-hide[data-r=draw] path{stroke-dashoffset:1}
.r-hide[data-r=draw] .node{opacity:0}
.r-hide .step-bar span{transform:scaleX(0)}
.r-hide.r-in{opacity:1}
.r-hide.r-in:is([data-r=up],[data-r=chip]){translate:none;scale:none}
.r-hide.r-in[data-r=flip]{transform:none}
.r-hide.r-in:is([data-r=up],[data-r=chip]){transition:opacity .9s var(--ease-soft) var(--d,0s),translate 1.1s var(--ease-out) var(--d,0s),scale 1s var(--ease-back) var(--d,0s)}
.r-hide.r-in[data-r=flip]{transition:opacity .7s var(--ease-soft) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s)}
.r-hide.r-in[data-r=stage]{transition:opacity .9s var(--ease-soft) var(--d,0s)}
.r-hide.r-in[data-r=stage] .rig{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform 1.6s var(--ease-out) var(--d,0s)}
.r-hide.r-in[data-r=title] .ch{opacity:1;transform:none;transition:opacity .45s var(--ease-soft) calc(var(--d,0s) + var(--i) * 28ms),transform .95s var(--ease-back) calc(var(--d,0s) + var(--i) * 28ms)}
.r-hide.r-in[data-r=draw] path{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease-in-out) var(--d,0s)}
.r-hide.r-in[data-r=draw] .node{opacity:1;transition:opacity .6s var(--ease-soft) calc(var(--d,0s) + 1s)}
.r-hide.r-in .step-bar span{transform:none;transition:transform 1.5s var(--ease-out) calc(var(--d,0s) + .35s)}

/* Scroll-linked 3D (browsers with scroll-driven animations): each product frame swings from a steep angle to
   its resting pose as it reaches the middle of the screen, then eases past it. Floating screenshots drift at
   different depths, and the hero copy sinks away. Compositor-driven, no scroll listeners. */
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
 @keyframes rig-scroll{0%{transform:rotateX(calc(var(--rx) + 20deg)) rotateY(calc(var(--ry) * 2.2)) translate3d(0,90px,-180px)}42%,58%{transform:rotateX(var(--rx)) rotateY(var(--ry))}100%{transform:rotateX(calc(var(--rx) - 8deg)) rotateY(calc(var(--ry) * .3)) translate3d(0,-40px,0)}}
 @keyframes shot-drift{from{translate:0 calc(var(--depth) * 44px)}to{translate:0 calc(var(--depth) * -44px)}}
 @keyframes hero-sink{to{opacity:.35;translate:0 40px}}
 @keyframes rings-turn{to{rotate:40deg}}
 .rig{animation:rig-scroll linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 .float-shot{animation:shot-drift linear both;animation-timeline:view();animation-range:cover}
 .hero-inner{animation:hero-sink linear both;animation-timeline:view();animation-range:exit 10% exit 100%;view-timeline:--hero block}
 @keyframes line-left{to{translate:-9% 0}}
 @keyframes line-right{to{translate:7% 0}}
 .hero-line,.echo{animation:line-left linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
 .hero-line.accent{animation-name:line-right}
}}

/* Pause looping motion in scenes that are off screen. */
.js .scene:not(.is-live) :is(.marquee-track,.starburst,.orbit-ring,.orbit-tag>span,.rings,.float-card,.graph-lines .dot,.constellation .ring,.typing i,.ring3d-spin,.screen.scroll img,.steps.is-working .step,.steps.is-working .step-bar span,.demo-cursor .cur,.demo-cursor svg,.demo-cursor i,.fx-slash i,.fx-embers i,.graph-hub){animation-play-state:paused}
.js .scene:not(.is-live) .pulse::after{animation-play-state:paused}

/* Hover and theme details */
html.theme-anim .theme svg{animation:icon-in .55s var(--ease-out)}
:root.theme-vt::view-transition-old(root),:root.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* "Behind the project" opens smoothly where the browser can animate to auto height. */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
 .project-story{interpolate-size:allow-keywords}
 .project-story::details-content{block-size:0;overflow:clip;overflow-clip-margin:10px;transition:block-size .55s var(--ease-out),content-visibility .55s allow-discrete}
 .project-story[open]::details-content{block-size:auto}
 .story-body{transition:opacity .45s var(--ease-soft),translate .55s var(--ease-out)}
 .project-story:not([open]) .story-body{opacity:0;translate:0 -8px}
 @starting-style{.project-story[open] .story-body{opacity:0;translate:0 -8px}}
}

/* ==========================================================================
   More motion
   ========================================================================== */
:root{--ink-bg:var(--night);--paper-bg:var(--paper);--fx-lime:var(--accent-2)}
:root[data-theme=light]{--ink-bg:var(--paper-2);--fx-lime:var(--accent-2-deep)}
@media(prefers-color-scheme:light){:root:not([data-theme]){--ink-bg:var(--paper-2);--fx-lime:var(--accent-2-deep)}}

/* Scene seams: where a dark scene meets a cream one, the outgoing colour breaks into tiles that clear away
   diagonally as you scroll, like the tile transitions in the motion edit. Scroll-driven browsers only. */
.seam{display:none}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
 .seam{--tile:clamp(56px,8vw,120px);position:absolute;z-index:-1;left:0;top:0;display:grid;grid-template-columns:repeat(var(--cols,12),var(--tile));grid-auto-rows:var(--tile);pointer-events:none;view-timeline:--seam block}
 .seam.from-ink{--seam-bg:var(--ink-bg)}.seam.from-paper{--seam-bg:var(--paper-bg)}
 .seam i{background:var(--seam-bg);animation:tile-away linear both;animation-timeline:--seam;animation-range:cover calc(var(--k) * 1.6%) cover calc(16% + var(--k) * 1.6%)}
 .seam i.hot{background:var(--accent)}
 @keyframes tile-away{to{transform:scale(0)}}
}}

/* Live screens: phone and desktop screens scroll through the real pages, pause, and scroll back. */
.screen.scroll img{height:auto}
.screen.scroll.ready img{animation:screen-scroll var(--dur,20s) var(--ease-in-out) var(--delay,0s) infinite}
@keyframes screen-scroll{0%,10%{translate:0 0}45%,55%{translate:0 calc(var(--travel,0px) * -1)}90%,100%{translate:0 0}}

/* Demo cursor: moves across a product screen and clicks, with an accent-colored ring at each click. */
.demo-cursor{position:absolute;inset:0;z-index:3;container-type:size;pointer-events:none}
.cur{position:absolute;left:0;top:0;width:clamp(14px,2.2cqw,24px);aspect-ratio:1;animation:11s var(--ease-in-out) infinite}
.cur svg{position:absolute;left:-16%;top:-10%;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transform-origin:16% 10%;animation:11s linear infinite}
.cur i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:11s linear infinite}
.cursor-sf .cur{animation-name:cur-sf;animation-duration:10s}.cursor-sf svg{animation-name:press-sf;animation-duration:10s}.cursor-sf i{animation-name:ring-sf;animation-duration:10s}
@keyframes cur-sf{0%{translate:52cqw 84cqh}14%,26%{translate:19cqw 63cqh}38%,50%{translate:69cqw 67cqh}62%,76%{translate:85cqw 4cqh}100%{translate:52cqw 84cqh}}
@keyframes press-sf{0%,18.5%,21.5%,42.5%,45.5%,67.5%,70.5%,100%{scale:1}20%,44%,69%{scale:.78}}
@keyframes ring-sf{0%,19.9%,28.1%,43.9%,52.1%,68.9%,77.1%,100%{opacity:0;scale:.3}20%,44%,69%{opacity:1;scale:.3}28%,52%,77%{opacity:0;scale:1.8}}

/* Slogan strips lean and speed up with the speed you scroll (script.js sets --skew and the playback rate). */
.marquee{transform:skewX(var(--skew,0deg))}

/* Cards tilt toward the pointer with a soft highlight; buttons lean a little toward it. */
.tiltable{position:relative}
.tiltable::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.11),transparent 62%);opacity:0;transition:opacity .35s var(--ease-soft)}
html .tiltable.is-tilting{transform:perspective(900px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg)) translateY(-4px);transition:transform .2s var(--ease-out),box-shadow .55s var(--ease-out),border-color .25s}
.tiltable.is-tilting::after{opacity:1}
.magnetic{translate:calc(var(--mgx,0) * 6px) calc(var(--mgy,0) * 5px)}
.button{transition:background .25s var(--ease-out),color .25s,border-color .25s,transform .45s var(--ease-out),scale .2s var(--ease-out),translate .45s var(--ease-out)}
.icon{transition:background .2s,border-color .2s,scale .2s var(--ease-out),translate .45s var(--ease-out)}
.announce{transition:border-color .25s,transform .45s var(--ease-out),translate .45s var(--ease-out)}
.cta-bar{transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),translate .5s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.float-shot:hover{scale:1.06}}

/* Battle of Shinkai: sword slashes sweep across the scene and embers drift up behind the game. */
.fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-embers{bottom:auto;height:min(100%,1150px)}
.fx-slash i{position:absolute;left:0;height:3px;width:42%;border-radius:3px;background:var(--fx-lime);rotate:-11deg;opacity:0;animation:slash 7s var(--ease-in-out) infinite}
.fx-slash i:nth-child(1){top:33%;animation-delay:.6s}
.fx-slash i:nth-child(2){top:41%;width:30%;height:2px;background:var(--accent);animation-delay:2.9s}
.fx-slash i:nth-child(3){top:24%;width:36%;rotate:-15deg;animation-delay:5.1s}
@keyframes slash{0%{transform:translateX(-110%) scaleX(.3);opacity:0}5%{opacity:1}17%{transform:translateX(300%) scaleX(1);opacity:0}100%{transform:translateX(300%);opacity:0}}
.fx-embers i{position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--accent);opacity:0;animation:ember var(--d) linear var(--delay) infinite}
@keyframes ember{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}75%{opacity:.45}100%{transform:translate(var(--dx),-1000px);opacity:0}}

/* The stack graph floats: nodes drift (script.js) and the hub breathes. */
.graph-nodes li{transform:translate(var(--dx,0px),var(--dy,0px))}
.graph-hub{animation:hub-breathe 4.5s ease-in-out infinite}
@keyframes hub-breathe{50%{scale:1.07}}

/* New reveal styles: Learnspace cards drop in from staggered heights; Real builds screenshots pop in from depth. */
.steps .step:nth-child(2){--k:1}.steps .step:nth-child(3){--k:2}.steps .step:nth-child(4){--k:3}
.r-hide[data-r=drop]{opacity:0;transform:translateY(calc(-60px - var(--k,0) * 36px)) rotate(calc(var(--k,0) * 1.5deg - 2deg))}
.r-hide.r-in[data-r=drop]{transform:none;transition:opacity .5s var(--ease-soft) var(--d,0s),transform 1.1s var(--ease-back) var(--d,0s)}
.r-hide[data-r=fly]{opacity:0;scale:.45}
.r-hide.r-in[data-r=fly]{scale:none;transition:opacity .6s var(--ease-soft) var(--d,0s),scale 1.3s var(--ease-back) var(--d,0s),transform 1s var(--ease-out)}

@media(prefers-reduced-motion:reduce){
 .seam,.demo-cursor,.fx{display:none}
 .r-hide[data-r=drop]{transform:none!important}
 .r-hide[data-r=fly]{scale:none!important}
 .marquee{transform:none}
 html .tiltable.is-tilting{transform:none}
 .magnetic{translate:none}
}

/* ==========================================================================
   Live projects: real screen recordings play inside the product frames while they are on screen.
   ========================================================================== */
.screen video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:#0b0c0e}
.vid-toggle{position:absolute;top:6px;right:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:999px;background:rgba(243,239,228,.08);color:#d9d6cd;border:1px solid rgba(243,239,228,.14);font:500 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s,scale .2s var(--ease-out)}
.vid-toggle::after{content:'';position:absolute;inset:-9px -4px}
.vid-toggle:hover{background:rgba(243,239,228,.16);color:#fff}.vid-toggle:active{scale:.94}
.vid-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vid-toggle svg{width:10px;height:10px;flex:none}.vid-toggle .i-pause,.vid-toggle .t-pause{display:none}
.device.is-playing .vid-toggle .i-pause,.device.is-playing .vid-toggle .t-pause{display:inline}.device.is-playing .vid-toggle .i-play,.device.is-playing .vid-toggle .t-play{display:none}
.device.is-playing .vid-toggle{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.device.is-playing .vid-toggle .i-pause{color:var(--accent)}
.device-bar span{margin-right:96px}
/* Chapter thumbnails show how far the recording has got through the current part. */
.chapters .shot-thumb::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0) * 100%);background:var(--accent);transition:width .3s linear}
.chapters .shot-thumb[aria-pressed=false]::after{width:0;transition:none}

/* Learnspace: the illustrated flow runs on its own, one step after another. */
.steps.is-working .step{animation:step-turn 8s var(--ease-in-out) infinite;animation-delay:calc(var(--k,0) * 2s)}
.steps.is-working .step-bar span{animation:bar-turn 8s var(--ease-out) infinite;animation-delay:calc(var(--k,0) * 2s)}
.steps.is-working .step-num{animation:num-turn 8s var(--ease-out) infinite;animation-delay:calc(var(--k,0) * 2s)}
@keyframes step-turn{0%,25%,100%{translate:0 0;box-shadow:0 0 0 0 transparent}4%,21%{translate:0 -8px;box-shadow:0 0 0 2px var(--accent),0 28px 40px -26px rgba(0,0,0,.6)}}
@keyframes bar-turn{0%{transform:scaleX(.03)}20%,100%{transform:scaleX(1)}}
@keyframes num-turn{0%,25%,100%{scale:1}6%{scale:1.18}12%{scale:1}}

@media(prefers-reduced-motion:reduce){.vid-toggle{transition:none}}

/* ==========================================================================
   3D scenes (gl.js): a WebGL tile floor behind the hero and contact scenes.
   ========================================================================== */
.gl{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none}
.gl-on>.rings{display:none}
.gl-on .starburst{visibility:hidden}
.gl-on.hero::before,.gl-on.contact::before{display:none}
/* Keeps words readable: the floor fades out behind the text. */
.gl-on.hero::after,.gl-on.contact::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 58% at 24% 40%,var(--bg) 18%,color-mix(in srgb,var(--bg) 55%,transparent) 55%,transparent 82%)}
.gl-on.contact::after{background:radial-gradient(ellipse 70% 60% at 30% 50%,var(--bg) 20%,color-mix(in srgb,var(--bg) 50%,transparent) 58%,transparent 85%)}
@media(max-width:720px){.gl-on.hero::after,.gl-on.contact::after{background:linear-gradient(180deg,transparent 0%,transparent 31%,color-mix(in srgb,var(--bg) 72%,transparent) 40%,color-mix(in srgb,var(--bg) 72%,transparent) 64%,color-mix(in srgb,var(--bg) 15%,transparent) 84%,transparent 100%)}}

/* ==========================================================================
   3D layer
   ========================================================================== */
/* Services: a pinned section whose cards turn on a 3D cylinder as you scroll (script.js adds .is-3d). */
.ring-progress{display:none}
.services.is-3d{height:270vh;padding-block:0}
.services.is-3d>.rings{display:none}
.services.is-3d>.wrap{position:sticky;top:68px;min-height:calc(100vh - 68px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(20px,4vh,48px)}
.services.is-3d .heading-row{margin-bottom:clamp(18px,3.5vh,40px)}
.services.is-3d .ring-stage{position:relative;height:clamp(320px,44vh,420px);perspective:1500px;perspective-origin:50% 35%}
.services.is-3d .service-grid{position:absolute;inset:0;display:block;perspective:none;transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1)) rotateX(calc(4deg - var(--ty,0) * 10deg)) rotateY(calc(var(--spin,0deg) + var(--tx,0) * 12deg));transition:transform .45s var(--ease-out)}
.services.is-3d .service{position:absolute;top:0;left:50%;width:var(--cw);height:100%;margin-left:calc(var(--cw) / -2);transform:rotateY(calc(var(--k) * var(--step))) translateZ(var(--r));backface-visibility:hidden;opacity:var(--o,1);transition:opacity .3s,box-shadow .45s var(--ease-out)}
.services.is-3d .service.is-front{box-shadow:0 0 0 2px var(--accent),0 50px 80px -40px rgba(0,0,0,.55)}
.services.is-3d .service h3{font-size:clamp(1.3rem,1.7vw,1.65rem);margin-top:auto;padding-top:28px}
.services.is-3d .service p{font-size:.95rem}
.services.is-3d .service .text-link{margin-top:0}
.services.is-3d .ring-progress{display:flex;justify-content:center;gap:10px;margin-top:clamp(18px,3vh,32px);font:500 .7rem var(--mono);letter-spacing:.08em}
.ring-progress i{font-style:normal;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:background .3s,color .3s,border-color .3s}
.ring-progress i.on{background:var(--coal);color:var(--cream);border-color:var(--coal)}

/* The full stack: a ring of letters spinning in 3D, readable at the front and faint at the back. */
.ring3d{position:relative;height:clamp(170px,21vw,270px);margin-top:clamp(50px,6vw,90px);perspective:1100px;perspective-origin:50% 20%;font:500 clamp(1.5rem,3.3vw,3rem)/1 var(--mono);text-transform:uppercase;-webkit-user-select:none;user-select:none}
.ring3d-spin{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(0deg);animation:ring-spin 40s linear infinite}
@keyframes ring-spin{to{transform:rotateX(-16deg) rotateY(-360deg)}}
.rc{position:absolute;left:-.31em;top:-.5em;width:.62em;text-align:center;backface-visibility:hidden;--R:calc(var(--n) * .62em / 6.2832);transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--R))}
.rc.out{color:var(--fg)}
.rc.in{color:var(--strip);transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--R)) rotateY(180deg)}

/* Real builds: the screenshots sit at different depths and the whole field orbits as you scroll past. */
.builds .wrap{perspective:1700px}
.builds-field{transform-style:preserve-3d;perspective:none}
.float-shot{transform:rotateX(var(--frx)) rotateY(var(--fry)) rotateZ(var(--frz)) translate3d(calc(var(--px,0) * var(--depth) * 16px),calc(var(--py,0) * var(--depth) * 12px),calc((var(--depth) - 1) * 170px))}
.builds-card{transform:translateZ(150px)}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
 @keyframes field-orbit{from{rotate:y 24deg}to{rotate:y -24deg}}
 .builds-field{animation:field-orbit linear both;animation-timeline:view();animation-range:cover}
}}

/* Big titles: letters lift toward the cursor (script.js sets --f). Project titles scatter upward as they leave. */
:where(.hero-title,#contact-title) .ch{translate:0 calc(var(--f,0) * -.14em);rotate:calc(var(--f,0) * var(--dir,1) * 10deg);scale:calc(1 + var(--f,0) * .1);transition:translate .45s var(--ease-out),rotate .45s var(--ease-out),scale .45s var(--ease-out)}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
 .project .title{view-timeline:--ttl block}
 .project .title .ch{animation:ch-out linear both;animation-timeline:--ttl;animation-range:exit 10% exit 100%}
 @keyframes ch-out{to{translate:0 calc(var(--u,5) * -9px - 24px);rotate:var(--r);opacity:0}}
 /* Paragraphs light up word by word (script.js wraps the words). */
 .scrub{view-timeline:--scrub block}
 .scrub .wd{animation:wd-in linear both;animation-timeline:--scrub;animation-range:var(--wr)}
 @keyframes wd-in{from{opacity:.14}}
}}

/* Cursor ring (mouse only, script.js): grows over links and becomes a label over project screens. */
.cursor{position:fixed;left:0;top:0;z-index:250;display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;border-radius:999px;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .25s,width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .25s,border-color .25s,scale .15s}
.cursor.on{opacity:1}.cursor.down{scale:.85}
.cursor.is-link{width:58px;height:58px;margin:-29px 0 0 -29px}
.cursor.is-label{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
.cursor-label{font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--coal);opacity:0;transition:opacity .2s}
.cursor.is-label .cursor-label{opacity:1}
.screen.clickable{cursor:pointer}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

@media(prefers-reduced-motion:reduce){.ring3d-spin{animation:none}.cursor{display:none}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1060px){
 .split-stage,.split-stage.flip{grid-template-columns:1fr}
 .split-stage>.stage,.split-stage>.shots{order:-1}
 .split-stage .callouts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
 .steps,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .about-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stage{--rx:7deg;--ry:-7deg}.stage.flip{--ry:7deg}
}
@media(max-width:860px){
 .project-body{grid-template-columns:1fr}
 .hero-grid{grid-template-columns:1fr}.hero-side{justify-self:start}
 .identity-grid{grid-template-columns:1fr}
 .orbit{width:min(88%,440px)}
 .contact-links{grid-template-columns:1fr}
 .craft-cards{grid-template-columns:1fr;margin-top:24px}
 .skill-group{grid-template-columns:1fr;gap:14px}
 .hud-name{display:none}
}
@media(max-width:720px){.hud{display:none}}
@media(max-width:720px){
 html{scroll-padding-top:72px}
 .nav-shell{min-height:62px;gap:16px}.controls{margin-left:auto}
 .desktop-nav{display:none}.menu-toggle{display:grid}
 .hero{min-height:calc(100svh - 62px)}
 .heading-row{display:block}.heading-row>p{margin-top:18px}
 .about-cols{grid-template-columns:1fr;gap:16px}
 .builds-field{min-height:clamp(440px,120vw,560px)}
 .float-shot{width:46%}
 .fs1{left:-4%;top:2%}.fs2{right:-4%;top:6%}.fs3{left:-2%;bottom:2%}.fs4{right:-4%;bottom:6%}
 .builds-card{max-width:100%}
 .phone{width:27%}.pos-r{right:-3%}.pos-l{left:-3%}
 .float-card.lime{width:60%}
 .pos-bl{left:-1%;bottom:6%}.pos-br{right:-1%;bottom:-10%}
 .stage,.stage-wide{--rx:8deg;--ry:-4deg}.stage.flip{--ry:4deg}
 .shot-thumbs{gap:6px}
 .steps{grid-template-columns:1fr}
 .step{min-height:0}
 .service-grid{grid-template-columns:1fr}
 .graph{aspect-ratio:1/1.12}
 .graph-nodes li{left:calc(var(--mx) * 1%);top:calc(var(--my) * 1%)}
 .facts{gap:16px}
 .contact-head .starburst{width:56px}
}
@media(max-width:400px){.shot-label{display:none!important}.wordmark{font-size:.95rem}.controls{gap:6px}}
@media(hover:none),(pointer:coarse){.button:hover,.announce:hover,.contact-links a:hover,.cta-bar:hover{transform:none}}

/* Without JavaScript the navigation still works on small screens. */
html:not(.js) .theme,html:not(.js) .menu-toggle{display:none!important}
@media(max-width:720px){html:not(.js) .nav-shell{flex-wrap:wrap;padding-block:12px}html:not(.js) .desktop-nav{display:flex;width:100%;justify-content:space-between;gap:10px}html:not(.js) .site-header{position:relative}}

/* Reduced motion: no movement at all. Everything is shown in its final, resting state. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .r-hide{opacity:1!important;translate:none!important;scale:none!important}
 .r-hide[data-r=flip]{transform:none!important}
 .r-hide .ch,.r-hide .rig{transform:none}
 .r-hide[data-r=stage] .rig{transform:rotateX(var(--rx)) rotateY(var(--ry))}
 .r-hide .ch,.r-hide .node{opacity:1!important}
 .r-hide path{stroke-dashoffset:0!important}
 .r-hide .step-bar span{transform:none!important}
 .mobile-menu nav a,.menu-note{opacity:1;transform:none}
 .intro-kicker,.intro-tag{opacity:1}.intro-bar span{transform:none}.intro-word{color:var(--cream)}.intro-word.accent{color:var(--accent)}
 .button:hover,.announce:hover,.contact-links a:hover,.cta-bar:hover,.service:hover{transform:none}
}