:root {
  --ink-0: #05070a;
  --ink-1: #090c11;
  --ink-2: #11161d;
  --paper: #eef4f5;
  --muted: #818b95;
  --cyan: #9deef7;
  --cyan-soft: #63c9d8;
  --violet: #8d7df2;
  --hairline: rgba(198, 226, 231, 0.12);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-slow: cubic-bezier(.22, .61, .36, 1);
  --dur-intro: 1500ms;
  --font-display: "Noto Sans Display", "Lato", sans-serif;
  --font-body: "Noto Sans", "Lato", sans-serif;
  --font-mono: "DejaVu Sans Mono", "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink-0); color: var(--paper); }
body { font-family: var(--font-body); overflow: hidden; }

.site-shell {
  position: relative;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 51% 44%, rgba(48, 116, 128, 0.08) 0%, transparent 35%),
    linear-gradient(180deg, #080a0e 0%, #05070a 100%);
  isolation: isolate;
}

.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 50px);
  display: grid;
  place-items: center;
}

.ambient { position: fixed; border-radius: 999px; filter: blur(110px); pointer-events: none; opacity: .16; z-index: -3; }
.ambient-a { width: 36vw; height: 36vw; min-width: 360px; min-height: 360px; background: rgba(71, 198, 213, .16); left: 36%; top: 18%; }
.ambient-b { width: 22vw; height: 22vw; min-width: 240px; min-height: 240px; background: rgba(116, 87, 220, .12); right: 7%; bottom: 5%; opacity: .09; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.grid-field {
  position: fixed; inset: -20%; z-index: -4; pointer-events: none; opacity: .14;
  background-image: linear-gradient(rgba(153, 236, 247, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(153, 236, 247, .055) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, black 0%, transparent 72%);
  transform: perspective(800px) rotateX(59deg) translateY(25%);
  transform-origin: center;
}

.topline, .footerline {
  position: absolute; left: clamp(24px, 3.2vw, 50px); right: clamp(24px, 3.2vw, 50px);
  z-index: 6; display: flex; align-items: center; justify-content: space-between;
  font: 500 10px/1 var(--font-mono); letter-spacing: .17em; color: rgba(220, 235, 238, .5);
}
.topline { top: clamp(24px, 3.2vw, 50px); }
.footerline { bottom: clamp(24px, 3.2vw, 50px); }
.footer-code { color: rgba(220, 235, 238, .28); }

.sigil { display: grid; grid-template-columns: repeat(3, 4px); gap: 4px; }
.sigil span { width: 4px; height: 4px; border-radius: 50%; border: 1px solid rgba(157,238,247,.5); }
.sigil span:nth-child(2) { background: rgba(157,238,247,.7); box-shadow: 0 0 12px rgba(157,238,247,.8); }
.topline-status { display: flex; align-items: center; gap: 9px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(157,238,247,.8); animation: breathe 4.8s ease-in-out infinite; }

.worktree-stage {
  position: absolute;
  width: min(76vw, 920px);
  height: min(82vh, 760px);
  left: 50%; top: 47%;
  transform: translate3d(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0);
  opacity: 0;
  animation: stageIn 1.8s .1s var(--ease-out) forwards;
  z-index: 0;
}
.worktree { width: 100%; height: 100%; overflow: visible; }
.branch { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease-out) forwards; }
.branch-1 { animation-delay: .15s; }
.branch-2 { animation-delay: .75s; }
.branch-3 { animation-delay: .9s; }
.branch-4 { animation-delay: 1.05s; }
.branch-5 { animation-delay: 1.25s; }
.branch-6 { animation-delay: 1.35s; }
.branch-7 { animation-delay: 1.5s; }
.node { fill: var(--cyan); filter: url(#nodeGlow); opacity: 0; animation: nodeIn 900ms var(--ease-out) forwards, nodeIdle 6s 3s ease-in-out infinite; }
.node:nth-child(2n) { animation-delay: 1.15s, 3.4s; }
.node:nth-child(3n) { animation-delay: 1.55s, 4.1s; }
.node.dim { fill: #bed7da; opacity: 0; }
.node-core { fill: #fff; }
.node.endpoint { fill: var(--violet); }
.pulse { fill: #d8fbff; opacity: .78; }

.halo {
  position: absolute; z-index: -1; width: min(58vw, 760px); aspect-ratio: 1; left: 50%; top: 48%; border-radius: 50%;
  transform: translate3d(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0);
  background: radial-gradient(circle, rgba(91, 211, 225, .08) 0%, rgba(87, 183, 196, .03) 31%, transparent 68%);
  filter: blur(20px);
}

.hero-copy {
  position: relative; z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.eyebrow {
  margin: 0 0 18px; font: 500 9px/1 var(--font-mono); letter-spacing: .42em; color: rgba(210,229,232,.42);
  opacity: 0; animation: copyIn 1.1s 1.25s var(--ease-out) forwards;
}
.brand-title {
  display: flex; align-items: baseline; gap: .18em; margin: 0;
  font-family: var(--font-display); font-size: clamp(46px, 8vw, 118px); line-height: .92;
  font-weight: 300; letter-spacing: -.055em; white-space: nowrap;
  color: #f2f7f7; text-shadow: 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; filter: blur(9px); transform: scale(.99);
  animation: brandIn 1.6s 1.45s var(--ease-out) forwards;
}
.io-mark { position: relative; font-weight: 500; letter-spacing: -.07em; color: rgba(225,245,247,.88); }
.io-dot { color: var(--cyan); text-shadow: 0 0 20px rgba(157,238,247,.5); }
.io-mark::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; right: -14px; top: 4%;
  background: var(--cyan); box-shadow: 0 0 15px rgba(157,238,247,.72); opacity: .9;
}
.tagline {
  margin: 24px 0 0; font-size: clamp(13px, 1.2vw, 16px); font-weight: 300; letter-spacing: .065em; color: rgba(215,229,232,.55);
  opacity: 0; filter: blur(5px); animation: copyIn 1.3s 2.05s var(--ease-out) forwards;
}
.arrival {
  display: flex; align-items: center; gap: 12px; margin-top: 34px; font: 500 9px/1 var(--font-mono); letter-spacing: .28em; color: rgba(204,229,233,.42);
  opacity: 0; animation: copyIn 1.1s 2.5s var(--ease-out) forwards;
}
.arrival-line { display: block; width: 31px; height: 1px; background: linear-gradient(90deg, transparent, rgba(157,238,247,.6)); }

@keyframes stageIn { from { opacity: 0; filter: blur(10px); } to { opacity: .93; filter: blur(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes nodeIn { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: .7; transform: scale(1); } }
@keyframes nodeIdle { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
@keyframes brandIn { to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes copyIn { to { opacity: 1; filter: blur(0); } }
@keyframes breathe { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.05); } }

@media (max-width: 760px) {
  body { overflow: hidden; }
  .hero { padding: 24px; }
  .topline, .footerline { left: 24px; right: 24px; }
  .footer-code { display: none; }
  .topline-status { font-size: 8px; letter-spacing: .12em; }
  .worktree-stage { width: 138vw; height: 72vh; top: 44%; opacity: .75; }
  .worktree { transform: scale(.93); }
  .ghost-lines { display: none; }
  .branch-5, .branch-6, .branch-7 { opacity: .42; }
  .hero-copy { width: 100%; }
  .brand-title { flex-direction: column; align-items: center; gap: .15em; white-space: normal; font-size: clamp(50px, 16vw, 76px); line-height: .88; }
  .io-mark { font-size: .58em; letter-spacing: -.055em; margin-top: .1em; }
  .io-mark::after { right: -13px; top: 0; }
  .eyebrow { margin-bottom: 20px; font-size: 8px; }
  .tagline { margin-top: 24px; font-size: 12px; }
  .arrival { margin-top: 28px; font-size: 8px; }
  .ambient-a { left: 8%; top: 24%; }
  .grid-field { opacity: .085; background-size: 62px 62px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .brand-title { font-size: clamp(42px, 9vw, 72px); }
  .tagline { margin-top: 16px; }
  .arrival { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .worktree-stage, .hero-copy, .halo { transform: translate3d(-50%, -50%, 0); }
  .hero-copy { transform: none; }
  .branch { stroke-dashoffset: 0; }
  .pulse { display: none; }
  .node, .eyebrow, .brand-title, .tagline, .arrival, .worktree-stage { opacity: 1; filter: none; }
}