@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/spectral-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../fonts/spectral-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/spectral-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/jakarta-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../fonts/jakarta-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('../fonts/jakarta-600.woff2') format('woff2');
}

:root {
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

body {
  background:
    radial-gradient(circle at 29% 53%, var(--glow-a) 0%, transparent 54%),
    radial-gradient(circle at 70% 48%, var(--glow-b) 0%, transparent 50%),
    linear-gradient(165deg, var(--bg-top) 0%, var(--bg-mid) 54%, var(--bg-bottom) 100%);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* One composition, scaled as a whole by stage.js */
.stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.living-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Birds fly over the words and the panel, so their canvas sits on top and lets every click through. */
.tree-birds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  pointer-events: none;
}

.studio-whisper {
  position: absolute;
  top: 32px;
  left: 44px;
  right: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.identity-line {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.studio-mark {
  width: 26px;
  height: 26px;
  display: inline-block;
  background-color: var(--ink);
  -webkit-mask: url('../assets/bird-mark.svg') center / contain no-repeat;
  mask: url('../assets/bird-mark.svg') center / contain no-repeat;
  opacity: 0.94;
}

.studio-name {
  font-family: var(--serif);
  font-size: 1.38rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.studio-fact {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin-left: 8px;
}

.studio-mail {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--ink-soft);
  transition: color 160ms ease, transform 140ms var(--ease-out);
}
.studio-mail:hover {
  color: var(--accent);
}
.studio-mail:active {
  transform: scale(0.97);
}

.constellation-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.node-anchor {
  position: absolute;
  transform: translate(42px, -50%);
  appearance: none;
  background: none;
  border: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  padding: 4px 6px;
  transition: transform 160ms var(--ease-out), opacity 180ms ease;
}
.node-anchor:hover .node-title {
  color: var(--ink);
}
.node-anchor:active {
  transform: translate(42px, -50%) scale(0.96);
}

.node-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.node-title {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  transition: color 180ms ease;
  text-shadow: 0 1px 10px var(--halo), 0 0 22px var(--halo);
}

.node-sub {
  font-size: 0.74rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px var(--halo), 0 0 16px var(--halo);
}

.node-anchor[aria-selected="true"] .node-title {
  color: var(--accent);
  font-weight: 500;
}
.node-anchor[aria-selected="true"] .node-sub {
  color: var(--accent-soft);
}