:root {
  --black: #08080a;
  --white: #f3f0e9;
  --acid: #c8ff3d;
  --violet: #735cff;
  --blue: #4a63ff;
  --red: #ff3a29;
  --cyan: #48e7df;
  --line: rgba(255,255,255,.18);
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
body.low-power #world { display: none; }
body.low-power {
  background:
    radial-gradient(circle at 22% 18%, rgba(115,92,255,.22), transparent 32%),
    radial-gradient(circle at 80% 58%, rgba(72,231,223,.16), transparent 30%),
    #08080a;
}
body.low-power .grain { opacity: .045; animation: none; }
body.low-power .shader-surface,
body.low-power .surface-core,
body.low-power .surface-lines,
body.low-power .spectral-scan { animation: none !important; }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
::selection { color: #08080a; background: var(--acid); }

#world {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.grain {
  position: fixed;
  z-index: 40;
  inset: -50%;
  opacity: .075;
  pointer-events: none;
  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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: grain .18s steps(2) infinite;
}

.boot {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  background: #08080a;
  transition: clip-path 1s var(--ease), visibility 1s;
  clip-path: inset(0);
}
.boot img { width: 92px; animation: breathe 1.2s ease-in-out infinite alternate; }
.boot span {
  position: absolute;
  bottom: 32px;
  font: 10px/1 monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}
.loaded .boot { visibility: hidden; clip-path: inset(0 0 100% 0); }

.cursor-orbit {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .35s var(--ease), height .35s var(--ease), background .35s;
  mix-blend-mode: difference;
}
.cursor-orbit.hover { width: 74px; height: 74px; background: white; }

.topbar {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  mix-blend-mode: difference;
}
.logo { display: flex; gap: 10px; align-items: center; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.logo img { width: 25px; height: 25px; object-fit: contain; }
.topbar-meta { display: flex; gap: 34px; align-items: center; }
.availability { font: 10px/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.availability i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 18px var(--acid); }
.menu-button { border: 0; padding: 0; background: none; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.menu-button b { display: inline-block; margin-left: 8px; font-size: 16px; transition: transform .4s var(--ease); }
.menu-open .menu-button b { transform: rotate(45deg); }

.menu {
  position: fixed;
  z-index: 55;
  inset: 0;
  display: flex;
  padding: 15vh 8vw;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  background: rgba(8,8,10,.93);
  backdrop-filter: blur(22px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .75s var(--ease), visibility .75s;
}
.menu-open .menu { visibility: visible; clip-path: inset(0); }
.menu a {
  display: flex;
  gap: 24px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: clamp(42px,7vw,96px);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: 1.12;
  transition: padding-left .35s var(--ease), color .35s;
}
.menu a:hover { padding-left: 22px; color: var(--acid); }
.menu a span { font: 11px/1 monospace; letter-spacing: .1em; }

.scene-index {
  position: fixed;
  z-index: 50;
  right: 28px;
  top: 50%;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}
.scene-index a {
  width: 6px;
  height: 6px;
  border: 1px solid white;
  border-radius: 50%;
  transition: height .4s var(--ease), border-radius .4s, background .4s;
}
.scene-index a.active { height: 28px; border-radius: 8px; background: white; }

main, .scene { position: relative; z-index: 2; }
.scene { min-height: 100vh; padding: 110px clamp(24px,5vw,76px) 50px; overflow: hidden; }
.reveal { opacity: 0; transform: translateY(42px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.section-label { font: 10px/1.2 monospace; letter-spacing: .13em; text-transform: uppercase; }
.section-label span { margin-right: 18px; opacity: .45; }

.hero { display: flex; flex-direction: column; justify-content: center; }
.hero-kicker { position: absolute; top: 110px; left: clamp(24px,5vw,76px); font: 10px/1 monospace; letter-spacing: .15em; text-transform: uppercase; }
.hero-mark {
  position: absolute;
  z-index: -1;
  top: 47%;
  left: 57%;
  width: min(57vw,720px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.hero-mark img, .play-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,.55));
}
.hero-mark img { opacity: .86; mix-blend-mode: screen; }
.logo-echo { position: absolute; inset: 8%; background: url("./assets/vela-mark.png") center/contain no-repeat; mix-blend-mode: screen; opacity: .24; }
.echo-one { filter: blur(4px) sepia(1) saturate(8) hue-rotate(205deg); transform: translate(-21px,4px); }
.echo-two { filter: blur(3px) sepia(1) saturate(10) hue-rotate(285deg); transform: translate(19px,-4px); }
.spectral-scan {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: linear-gradient(100deg, transparent 26%, rgba(114,255,222,.8) 45%, rgba(123,76,255,.92) 52%, transparent 68%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: .5;
  animation: scan 5s ease-in-out infinite alternate;
}
.hero-title { margin: 7vh 0 0; font-size: clamp(58px,10vw,154px); font-weight: 630; line-height: .81; letter-spacing: -.085em; pointer-events: none; }
.hero-title span { display: block; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.76); transform: translateX(8vw); }
.hero-foot { display: flex; width: 100%; margin-top: 7vh; align-items: end; justify-content: space-between; }
.hero-foot p { width: min(400px,42vw); margin: 0; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.55; }
.round-link {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  text-decoration: none;
  font: 10px/1 monospace;
  text-transform: uppercase;
  transition: background .4s, color .4s;
}
.round-link:hover { color: black; background: var(--acid); }
.round-link svg { width: 18px; fill: none; stroke: currentColor; }

.capability-scene { min-height: 118vh; background: #0a0a0d; }
.capability-stage {
  position: relative;
  min-height: calc(100vh - 160px);
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 4vw;
  align-items: center;
}
.capability-copy .overline { color: var(--acid); font: 10px/1 monospace; letter-spacing: .13em; text-transform: uppercase; }
.capability-copy h2 { margin: 20px 0; font-size: clamp(48px,6vw,92px); line-height: .93; letter-spacing: -.07em; }
.capability-proof {
  position: relative;
  width: min(420px, 100%);
  margin: 42px 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  background: #07070a;
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
}
.capability-proof::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  border: 1px solid rgba(200,255,61,.18);
  pointer-events: none;
  mix-blend-mode: screen;
}
.capability-proof::after {
  position: absolute;
  inset: -20%;
  z-index: 1;
  content: "";
  background:
    radial-gradient(circle at 20% 20%, rgba(200,255,61,.22), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(72,231,223,.2), transparent 28%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.capability-proof img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.94) contrast(1.05) brightness(.82);
  transform: scale(1.03);
}
.capability-stack { position: relative; height: min(68vh,640px); perspective: 1200px; }
.capability-tabs {
  position: absolute;
  z-index: 20;
  top: -46px;
  right: 0;
  display: flex;
  gap: 5px;
}
.capability-tabs button {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(8,8,10,.56);
  cursor: pointer;
  backdrop-filter: blur(12px);
  font: 8px/1 monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .3s, background .3s, border-color .3s;
}
.capability-tabs button span { opacity: .42; }
.capability-tabs button.active { border-color: var(--acid); color: #08080a; background: var(--acid); }
.capability-card {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(24px,3vw,44px);
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  transform-origin: 50% 90%;
  transition: transform .65s var(--ease), filter .65s;
  will-change: transform;
}
.capability-card.is-active { z-index: 9; transform: none !important; }
.capability-card.capability-single {
  isolation: isolate;
  box-shadow: 0 38px 120px rgba(0,0,0,.32);
}
.capability-card.capability-single::before {
  position: absolute;
  inset: 18px;
  z-index: 1;
  content: "";
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
.capability-card.capability-single::after {
  position: absolute;
  inset: -20%;
  z-index: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 35%, rgba(200,255,61,.36), transparent 18%),
    radial-gradient(circle at 76% 20%, rgba(115,92,255,.5), transparent 22%);
  opacity: .55;
  pointer-events: none;
  mix-blend-mode: screen;
}
.card-blue { color: white; background: #3526ed; }
.card-light { color: #111; background: #e9e5dc; }
.card-red { color: white; background: #df2f22; }
.card-top { position: relative; z-index: 3; display: flex; justify-content: space-between; font: 10px/1 monospace; letter-spacing: .1em; text-transform: uppercase; }
.capability-card p { position: relative; z-index: 2; width: 56%; margin: 0; font-size: 13px; line-height: 1.5; }
.shader-surface {
  position: absolute;
  inset: 15% 8% 20%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  background: #09090b;
  box-shadow: 0 30px 70px rgba(0,0,0,.24);
  transition: background .65s var(--ease), filter .65s var(--ease);
}
.card-light .shader-surface { border-color: rgba(0,0,0,.15); }
.surface-core, .surface-lines { position: absolute; inset: -18%; transition: transform .85s var(--ease), border-radius .85s var(--ease), filter .85s var(--ease); }
.surface-lines { inset: 0; }
.material-name {
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: 20%;
  display: flex;
  gap: 16px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(8,8,10,.56);
  color: white;
  backdrop-filter: blur(10px);
  font: 9px/1 monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.material-name b { font-weight: 400; opacity: .5; }
.cycle-note {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: -45px;
  font: 9px/1 monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
}

.capability-card[data-style="0"] .shader-surface { background: #08080a; }
.capability-card[data-style="0"] .surface-core {
  background:
    linear-gradient(104deg,transparent 18%,rgba(193,255,78,.92) 30%,rgba(78,255,228,.38) 38%,transparent 49%),
    linear-gradient(104deg,transparent 52%,rgba(134,80,255,.8) 64%,transparent 74%);
  filter: blur(13px);
  transform: scale(1.25) skewX(-12deg);
  animation: undertone 6s ease-in-out infinite alternate;
}
.capability-card[data-style="0"] .surface-lines { background: repeating-linear-gradient(104deg,transparent 0 18px,rgba(255,255,255,.12) 19px,transparent 21px); }

.capability-card[data-style="1"] .shader-surface { background: #fc402e; }
.capability-card[data-style="1"] .surface-core {
  background-image: radial-gradient(circle,rgba(255,245,154,.9) 0 1.2px,transparent 1.6px);
  background-size: 10px 10px;
  mask-image: linear-gradient(118deg,transparent 8%,black 25% 62%,transparent 82%);
  transform: rotate(-7deg) scale(1.18);
}
.capability-card[data-style="1"] .surface-lines { background: linear-gradient(118deg,transparent 20%,rgba(255,239,87,.8) 45%,transparent 69%); filter: blur(20px); }

.capability-card[data-style="2"] .shader-surface { background: #12102c; }
.capability-card[data-style="2"] .surface-core {
  border-radius: 44% 56% 38% 62%;
  background:
    radial-gradient(circle at 25% 30%,#75fff0,transparent 24%),
    radial-gradient(circle at 68% 34%,#b938ff,transparent 31%),
    radial-gradient(circle at 52% 78%,#ff7387,transparent 28%);
  filter: blur(22px) saturate(1.3);
  animation: prism 8s ease-in-out infinite alternate;
}
.capability-card[data-style="2"] .surface-lines { backdrop-filter: blur(8px); background: linear-gradient(110deg,transparent 42%,rgba(255,255,255,.25) 50%,transparent 58%); }

.capability-card[data-style="3"] .shader-surface { background: #020203; }
.capability-card[data-style="3"] .surface-core {
  inset: 17%;
  border: 2px solid rgba(255,255,255,.66);
  border-radius: 34% 66% 61% 39% / 43% 37% 63% 57%;
  background: radial-gradient(circle at 30% 20%,#fff 0 2%,#5b6cff 5%,#050509 32%,#d025ff 58%,#020203 72%);
  box-shadow: inset 0 0 35px #8d7dff, 0 0 50px rgba(148,92,255,.42);
  animation: chrome 7s ease-in-out infinite alternate;
}
.capability-card[data-style="3"] .surface-lines { background: radial-gradient(circle at 50% 50%,transparent 28%,rgba(255,255,255,.12) 29%,transparent 31%); }

.capability-card[data-style="4"] .shader-surface { background: #051c21; }
.capability-card[data-style="4"] .surface-core {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,#e8ffff 0 2%,#57f5e5 5%,transparent 28%),
    radial-gradient(circle at 65% 63%,#155dfc,transparent 34%),
    radial-gradient(circle at 35% 72%,#20e6b2,transparent 28%);
  filter: blur(8px);
  animation: liquid 7s ease-in-out infinite alternate;
}
.capability-card[data-style="4"] .surface-lines { background: repeating-radial-gradient(circle at 50% 50%,transparent 0 15px,rgba(122,255,238,.08) 16px,transparent 17px); }

.capability-card[data-style="5"] .shader-surface { background: #e8e4d9; }
.capability-card[data-style="5"] .surface-core {
  background: repeating-radial-gradient(ellipse at 42% 58%,transparent 0 9px,#151515 10px,transparent 11px);
  transform: rotate(-12deg) scale(1.25);
  opacity: .85;
}
.capability-card[data-style="5"] .surface-lines { background: radial-gradient(circle at 48% 50%,rgba(255,54,35,.8),transparent 25%); mix-blend-mode: multiply; filter: blur(14px); }

.capability-card[data-style="6"] .shader-surface { background: #2e19a9; }
.capability-card[data-style="6"] .surface-core {
  background-image: radial-gradient(circle,#f4f2e9 0 1.3px,transparent 1.8px);
  background-size: 9px 9px;
  mask-image: radial-gradient(ellipse at 30% 60%,black,transparent 40%),linear-gradient(115deg,transparent 22%,black 38% 68%,transparent 82%);
  transform: scale(1.2);
}
.capability-card[data-style="6"] .surface-lines { background: linear-gradient(118deg,transparent 23%,rgba(255,59,40,.8) 43%,transparent 67%); mix-blend-mode: screen; filter: blur(18px); }

.capability-card[data-style="7"] .shader-surface { background: #dcdde2; }
.capability-card[data-style="7"] .surface-core {
  background: linear-gradient(112deg,transparent 20%,rgba(255,255,255,.95) 38%,rgba(92,105,255,.38) 48%,rgba(255,255,255,.82) 62%,transparent 78%);
  filter: blur(13px);
  transform: skewX(-13deg) scale(1.2);
}
.capability-card[data-style="7"] .surface-lines { background: repeating-linear-gradient(112deg,rgba(255,255,255,.18) 0 8px,rgba(10,10,20,.08) 9px,transparent 14px); }

.work-scene { min-height: 120vh; background: var(--white); color: #0b0b0c; }
.work-header { display: flex; margin-bottom: 70px; justify-content: space-between; align-items: end; }
.work-header p { margin: 0; font: 10px/1 monospace; text-transform: uppercase; }
.projects-grid {
  display: grid;
  width: min(960px,82vw);
  margin: 0 auto;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(24px,5vw,78px);
}
.project-heading {
  display: flex;
  min-height: 78px;
  align-items: start;
  justify-content: space-between;
}
.project-heading div { display: flex; gap: 14px; align-items: baseline; }
.project-heading span { font: 9px/1 monospace; opacity: .42; }
.project-heading h3 { margin: 0; font-size: clamp(30px,4vw,52px); letter-spacing: -.06em; }
.project-heading p { max-width: 120px; margin: 8px 0 0; text-align: right; font: 9px/1.4 monospace; text-transform: uppercase; opacity: .5; }
.project-frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #161616;
  background: #0b0b0c;
  box-shadow: 0 30px 80px rgba(20,15,10,.14);
}
.project-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.project-scroll::-webkit-scrollbar { display: none; }
.project-scroll img { display: block; width: 100%; height: auto; }
.project-progress {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 12px;
  bottom: 15px;
  width: 2px;
  pointer-events: none;
  background: rgba(255,255,255,.28);
}
.project-progress i { display: block; width: 100%; height: 8%; background: white; transform-origin: top; }
.scroll-hint {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 15px;
  padding: 8px 10px;
  color: white;
  background: rgba(5,5,6,.72);
  backdrop-filter: blur(10px);
  font: 8px/1 monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity .35s;
}
.project-frame.scrolled .scroll-hint { opacity: 0; }
.idea-cta {
  display: flex;
  margin-top: clamp(110px,18vw,240px);
  padding: 28px 0 12px;
  flex-direction: column;
  border-top: 1px solid #111;
  font-size: clamp(52px,9vw,138px);
  font-weight: 650;
  letter-spacing: -.085em;
  line-height: .88;
}
.idea-cta strong { align-self: flex-end; color: transparent; font-weight: inherit; -webkit-text-stroke: 1.5px #111; }

.playground-scene { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5vw; align-items: center; background: rgba(6,6,9,.32); }
.playground-intro h2 { margin: 28px 0 16px; font-size: clamp(58px,8vw,118px); line-height: .82; letter-spacing: -.08em; }
.playground-intro p { max-width: 300px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.5; }
.control-deck { position: relative; z-index: 4; border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
.control-row { display: grid; min-height: 84px; padding: 0 20px; grid-template-columns: 1fr 1.5fr 42px; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); font: 10px/1 monospace; letter-spacing: .08em; text-transform: uppercase; }
.palette-controls { display: flex; gap: 10px; }
.swatch { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: #7058ff; cursor:pointer; transition: transform .3s; }
.swatch:nth-child(2) { background:#ff3a29; }.swatch:nth-child(3) { background:#48e7df; }.swatch:nth-child(4) { background:#eee; }
.swatch.active { transform: scale(.66); box-shadow:0 0 0 6px transparent,0 0 0 7px white; }
input[type="range"] { appearance:none; width:100%; height:1px; background:rgba(255,255,255,.4); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border:0; border-radius:50%; background:white; cursor:grab; }
.control-row output { text-align:right; }
.pulse-button { display:flex; width:100%; min-height:110px; padding:0 20px; align-items:center; justify-content:space-between; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; text-transform:uppercase; }
.pulse-button i { width:16px; height:16px; border-radius:50%; background:var(--acid); box-shadow:0 0 22px var(--acid); }
.pulse-button:hover { color:#08080a; background:var(--acid); }.pulse-button:hover i { background:#08080a; box-shadow:none; }
.play-logo { position:absolute; z-index:1; right:-7vw; bottom:-13vw; width:50vw; aspect-ratio:1; opacity:.12; transform:rotate(14deg); }

.contact-scene { display:flex; min-height:100vh; flex-direction:column; justify-content:space-between; background:#dedbd1; color:#0a0a0d; }
.contact-copy { margin:auto 0; }
.contact-copy h2 { margin:40px 0 60px; font-size:clamp(68px,11vw,170px); line-height:.78; letter-spacing:-.09em; }
.contact-copy h2 em { color:transparent; font-style:normal; -webkit-text-stroke:1.5px #111; }
.contact-link { display:flex; max-width:720px; padding:18px 0; justify-content:space-between; border-top:1px solid #111; border-bottom:1px solid #111; text-decoration:none; font-size:clamp(24px,4vw,58px); letter-spacing:-.05em; }
footer { display:flex; justify-content:space-between; padding-top:22px; border-top:1px solid #111; font:10px/1 monospace; text-transform:uppercase; }
footer a { text-decoration:none; }

@keyframes grain { 0%{transform:translate(0)} 25%{transform:translate(2%,-3%)} 50%{transform:translate(-3%,2%)} 75%{transform:translate(3%,4%)} 100%{transform:translate(-2%,-3%)} }
@keyframes breathe { to { opacity:.35; transform:scale(.92); } }
@keyframes scan { from{transform:translateX(-22%) rotate(-4deg)} to{transform:translateX(22%) rotate(4deg)} }
@keyframes beams { to{background-position:140px 0,0 0} }
@keyframes undertone { from{transform:translate(-8%,-4%) scale(1.25) skewX(-12deg)} to{transform:translate(9%,5%) scale(1.35) skewX(-7deg)} }
@keyframes prism { from{transform:translate(-7%,-3%) rotate(-4deg) scale(1.08)} to{transform:translate(8%,6%) rotate(7deg) scale(1.2)} }
@keyframes chrome { from{transform:rotate(-13deg) scale(.82);border-radius:34% 66% 61% 39% / 43% 37% 63% 57%} to{transform:rotate(18deg) scale(1.04);border-radius:62% 38% 32% 68% / 39% 62% 38% 61%} }
@keyframes liquid { from{transform:translate(-8%,-5%) rotate(-8deg) scale(1.08);border-radius:44% 56% 61% 39%} to{transform:translate(8%,6%) rotate(9deg) scale(1.2);border-radius:65% 35% 42% 58%} }

@media (max-width: 900px) {
  .cursor-orbit, .scene-index, .availability { display:none; }
  .scene { padding:100px 22px 44px; }
  .hero-mark { left:60%; width:95vw; opacity:.65; }
  .hero-title { font-size:clamp(54px,15vw,100px); }
  .hero-title .outline { transform:translateX(3vw); }
  .capability-scene { min-height:auto; }
  .capability-stage { position:relative; min-height:auto; grid-template-columns:1fr; }
  .capability-copy { padding:10vh 0 4vh; }
  .capability-proof { width:min(560px,100%); margin-top:34px; }
  .capability-stack { height:auto; display:grid; gap:14px; perspective:none; }
  .capability-tabs { position:relative; top:auto; right:auto; flex-wrap:wrap; margin-bottom:14px; }
  .capability-card { position:relative; min-height:56vh; transform:none !important; }
  .capability-card.capability-single::before { inset:12px; }
  .shader-surface { inset:16% 7% 24%; }
  .projects-grid { width:min(620px,88vw); grid-template-columns:1fr; gap:90px; }
  .idea-cta { margin-top:150px; }
  .playground-scene { grid-template-columns:1fr; }
  .playground-intro { padding-top:10vh; }
  .play-logo { width:90vw; }
  .contact-copy h2 { line-height:.85; }
}

@media (max-width: 560px) {
  .topbar { padding:20px; }
  .hero { min-height:900px; }
  .hero-kicker { top:100px; }
  .hero-mark { top:43%; left:52%; width:120vw; }
  .hero-title { margin-top:16vh; }
  .hero-foot { gap:30px; align-items:start; flex-direction:column; }
  .hero-foot p { width:85%; }
  .round-link { width:88px; height:88px; align-self:flex-end; }
  .capability-card p { width:85%; }
  .work-header { gap:20px; align-items:start; flex-direction:column; }
  .projects-grid { width:100%; gap:72px; }
  .project-heading { min-height:68px; }
  .project-heading p { max-width:100px; }
  .idea-cta { margin-top:120px; font-size:15vw; }
  .idea-cta strong { align-self:flex-start; }
  .control-row { padding:16px 10px; grid-template-columns:1fr; gap:14px; }
  .control-row output { display:none; }
  .swatch { width:34px; height:34px; }
  .contact-copy h2 { font-size:18vw; }
  footer { gap:18px; line-height:1.5; flex-direction:column; }
}

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