:root {
  --ink: #0c101a;
  --paper: #e9e9e9;
  --muted: rgba(12, 16, 26, 0.55);
  --line: rgba(12, 16, 26, 0.3);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, "Inter Variable", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--paper);
}

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

body.ready { opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 5px; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

.space { width: 100%; }

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

.brand,
.x-btn {
  position: fixed;
  z-index: 5;
  top: 40px;
}

.brand {
  left: 4vw;
  width: 42px;
  height: 42px;
  display: block;
}

.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.x-btn {
  right: 4vw;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  text-decoration: none;
  border-radius: 999px;
  padding: 1.05em 1.7em;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font: 400 11px / 1 var(--mono);
  letter-spacing: 0.18em;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}

.x-btn svg {
  width: 12px;
  height: 12px;
  display: block;
  flex: none;
}

.x-btn:hover {
  background: transparent;
  color: var(--ink);
}

.flip { display: inline-flex; }

.ch {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
}

.ch-in {
  display: block;
  transition: translate 0.55s var(--ease);
}

.ch-in > span {
  display: block;
  height: 1em;
  line-height: 1em;
}

.x-btn:hover .ch-in,
.enter:hover .ch-in {
  translate: 0 -1em;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.rail {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding: 13vh 10vw 0 6vw;
  width: max-content;
  will-change: transform;
}

.col-title {
  flex: none;
  width: calc(100dvw - 6vw);
}

.wordmark {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(84px, 22vw, 340px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
}

.chapters {
  display: flex;
  align-items: flex-start;
}

.col {
  flex: none;
  width: min(720px, 78vw);
  padding-right: 8vw;
}

.col h2 {
  margin: 0;
  max-width: 10em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(28px, 2.1vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.col p {
  margin: 0.95em 0 0;
  max-width: 28em;
  font: 400 14px / 1.7 var(--mono);
  letter-spacing: 0.02em;
}

.emblem {
  position: absolute;
  left: 50%;
  top: 60%;
  translate: -50% -42%;
  width: min(240px, 28vw);
  z-index: 1;
  pointer-events: none;
  animation: float 7.5s ease-in-out infinite;
}

.emblem img,
.emblem .shadow {
  visibility: hidden;
}

.emblem.fallback img,
.emblem.fallback .shadow {
  visibility: visible;
}

.emblem img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.shadow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 70%;
  height: 18px;
  translate: -50% 0;
  background: radial-gradient(ellipse at center, rgba(12, 16, 26, 0.28), transparent 70%);
  filter: blur(2px);
  z-index: 0;
}

@keyframes float {
  0%, 100% { translate: -50% -42%; }
  50% { translate: -50% -48%; }
}

.blurb {
  position: absolute;
  z-index: 2;
  left: 4vw;
  bottom: 6vh;
  display: flex;
  flex-direction: column;
  gap: 0.42em;
  max-width: min(40ch, 27vw);
  font: 400 clamp(10px, 0.72vw, 12px) / 1.65 var(--mono);
  letter-spacing: 0.04em;
  text-align: left;
  pointer-events: auto;
}

.blurb p { margin: 0; }

.enter {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 6vh;
  translate: -50% 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  color: var(--ink);
  pointer-events: auto;
  font: 400 11px / 1 var(--mono);
  letter-spacing: 0.18em;
}

.ring {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.ring-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink);
  scale: 0;
  transition: scale 0.55s var(--ease);
}

.enter:hover .ring { border-color: var(--ink); }
.enter:hover .ring-fill { scale: 1; }

.hint {
  position: absolute;
  z-index: 2;
  right: 4vw;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  font: 400 11px / 1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--muted);
}

.field {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18vh 10vw 16vh;
  opacity: 0;
}

.kicker {
  margin: 0 0 0.8em;
  font: 400 12px / 1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.beat h2 {
  margin: 0;
  max-width: 12em;
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.field-x {
  pointer-events: auto;
  margin-top: 1.6em;
  width: fit-content;
  color: var(--ink);
  font: 400 12px / 1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-underline-offset: 0.35em;
}

.meter {
  position: absolute;
  left: 50%;
  bottom: 6vh;
  translate: -50% 0;
  margin: 0;
  font: 400 11px / 1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--muted);
}

html.mobile .space,
html.mobile .hint { display: none; }

html.mobile body { overflow-x: hidden; }

html.mobile .stage {
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  min-height: 100vh;
}

html.mobile .rail { display: contents; }

html.mobile .col-title {
  width: auto;
  order: 1;
  padding: 14vh 6vw 0;
}

html.mobile .wordmark {
  font-size: clamp(64px, 18vw, 148px);
  white-space: nowrap;
}

html.mobile .emblem {
  position: relative;
  order: 2;
  left: auto;
  top: auto;
  translate: none;
  width: min(168px, 46vw);
  margin: 3vh auto 0;
  animation: none;
}

html.mobile .blurb {
  position: relative;
  order: 3;
  left: auto;
  bottom: auto;
  max-width: 42ch;
  margin: 3vh 6vw 0;
  opacity: 1 !important;
  font-size: 12px;
}

html.mobile .enter {
  position: relative;
  order: 4;
  left: auto;
  bottom: auto;
  translate: none;
  margin: 3vh auto 7vh;
  opacity: 1 !important;
}

html.mobile .chapters {
  order: 5;
  flex-direction: column;
  gap: 3.4rem;
  padding: 6vh 6vw 12vh;
  scroll-margin-top: 108px;
}

html.mobile .col {
  width: auto;
  padding-right: 0;
}

html.mobile .field {
  position: relative;
  order: 6;
  opacity: 1;
  pointer-events: auto;
}

html.mobile .beat {
  position: relative;
  opacity: 1;
  min-height: 88vh;
  padding: 18vh 6vw;
}

html.mobile .meter { display: none; }

@media (prefers-reduced-motion: reduce) {
  .emblem { animation: none; }
  .ch-in,
  .ring-fill,
  .x-btn,
  body { transition: none; }
  html { scroll-behavior: auto; }
}