:root {
  --ink: #111111;
  --soft-ink: rgba(17, 17, 17, 0.52);
  --faint: rgba(17, 17, 17, 0.10);
  --line: rgba(17, 17, 17, 0.14);
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
}

button {
  font: inherit;
}

.void {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #fff;
  isolation: isolate;
}

/* The entrance deliberately has almost nothing on it. */
.welcome-screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  overflow: hidden;
  opacity: 1;
  transition: opacity 900ms ease, filter 900ms ease;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}

.welcome-screen.leaving {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

.center-welcome {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 300;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.word-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.echo-word {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rotation));
  white-space: nowrap;
  line-height: 1;
  opacity: 0;
  animation: arrive 520ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes arrive {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(.78); filter: blur(5px); }
  to { opacity: .92; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1); filter: blur(0); }
}

#gestureCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(17,17,17,.42);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  z-index: 7;
  white-space: nowrap;
}

.welcome-screen.hint-visible .hint { opacity: 1; }
.welcome-screen.leaving .hint { opacity: 0; }

#brainCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  z-index: 1;
}

#brainCanvas.visible {
  opacity: 1;
}

.world {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s ease;
  z-index: 3;
}

.world.visible {
  opacity: 1;
  pointer-events: auto;
}

.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: breathe 8s ease-in-out infinite;
}

.halo-one {
  width: min(46vw, 560px);
  aspect-ratio: 1;
}

.halo-two {
  width: min(68vw, 840px);
  aspect-ratio: 1;
  animation-delay: 1.4s;
}

.world.visible .halo {
  opacity: 1;
}

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.97); opacity: 0.36; }
  50% { transform: translate(-50%, -50%) scale(1.03); opacity: 0.75; }
}

.center-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.center-mark span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 0 rgba(17,17,17,0.12);
  animation: pulse 3.2s ease-out infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(17,17,17,0.12); }
  70% { box-shadow: 0 0 0 22px rgba(17,17,17,0); }
  100% { box-shadow: 0 0 0 0 rgba(17,17,17,0); }
}

.node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--soft-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease, transform 1s ease, color 250ms ease;
}

.world.visible .node {
  opacity: 1;
  transform: translateY(0);
}

.node:hover {
  color: var(--ink);
}

.node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 8px rgba(17, 17, 17, 0.025);
}

.node-label {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.node-music { left: 19%; top: 28%; transition-delay: 150ms; }
.node-world { right: 17%; top: 24%; transition-delay: 320ms; }
.node-contact { left: 16%; bottom: 22%; transition-delay: 500ms; }
.node-portal { right: 18%; bottom: 23%; transition-delay: 680ms; }
.node-about { left: 50%; bottom: 12%; transform: translate(-50%, 6px); transition-delay: 860ms; }
.world.visible .node-about { transform: translate(-50%, 0); }

.whisper {
  position: absolute;
  left: 50%;
  top: calc(50% + 34px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(17,17,17,0.36);
  opacity: 0;
  transition: opacity 1.2s ease 1.4s;
}

.world.visible .whisper {
  opacity: 1;
}

.reset-button {
  position: absolute;
  right: 24px;
  bottom: 22px;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(17,17,17,0.25);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 250ms ease;
}

.reset-button:hover {
  color: rgba(17,17,17,0.65);
}

@media (max-width: 720px) {
  .halo-one { width: 64vw; }
  .halo-two { width: 98vw; }

  .node-music { left: 8%; top: 24%; }
  .node-world { right: 6%; top: 20%; }
  .node-contact { left: 7%; bottom: 22%; }
  .node-portal { right: 7%; bottom: 21%; }
  .node-about { bottom: 9%; }

  .node-label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Successful star: the scattered language field tears outward like a jump to light speed. */
.word-field.light-speed .echo-word {
  animation: language-warp 1500ms cubic-bezier(.18,.72,.18,1) var(--warp-delay, 0ms) forwards;
  will-change: transform, opacity, filter;
}

.center-welcome.light-speed-center {
  animation: center-warp 1350ms cubic-bezier(.2,.75,.18,1) forwards;
  will-change: transform, opacity, filter, letter-spacing;
}

@keyframes language-warp {
  0% {
    opacity: .92;
    transform: translate(-50%, -50%) rotate(var(--rotation)) scale(1);
    filter: blur(0);
  }
  22% {
    opacity: 1;
    filter: blur(.4px);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--warp-x)), calc(-50% + var(--warp-y))) rotate(var(--rotation)) scaleX(5.5) scaleY(.18);
    filter: blur(8px);
  }
}

@keyframes center-warp {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
    letter-spacing: .04em;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(12);
    filter: blur(15px);
    letter-spacing: .32em;
  }
}


/* Rare nonverbal and coded welcomes. */
.echo-morse,
.echo-code {
  letter-spacing: .12em;
  max-width: min(52vw, 520px);
  white-space: normal;
  text-align: center;
}

.echo-glitch {
  text-shadow: 1px 0 rgba(0,0,0,.18), -1px 0 rgba(0,0,0,.12);
}

.echo-whisper {
  letter-spacing: .22em;
  text-transform: lowercase;
  opacity: .7;
}

.echo-asl {
  width: clamp(92px, 12vw, 145px);
  color: currentColor;
}

.asl-sketch {
  display: block;
  width: 100%;
  text-align: center;
}

.asl-sketch svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.asl-hand,
.asl-arm,
.asl-motion,
.asl-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asl-motion {
  stroke-dasharray: 5 7;
  animation: asl-motion 1.5s linear infinite;
}

.asl-sketch small {
  display: block;
  margin-top: -2px;
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: .13em;
}

@keyframes asl-motion {
  to { stroke-dashoffset: -24; }
}

/* --- Portal and games --------------------------------------------------- */
.portal-screen,
.games-screen,
.rain-game {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 850ms ease;
  overflow: hidden;
}

.portal-screen.visible,
.games-screen.visible,
.rain-game.visible {
  opacity: 1;
  pointer-events: auto;
}

.portal-games {
  --x: 50vw;
  --y: 50vh;
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: rgba(17,17,17,.66);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .18em;
  cursor: pointer;
  animation: portal-float 9s ease-in-out infinite alternate;
}

.portal-games::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-22px,-50%);
}

@keyframes portal-float {
  0% { translate: -12vw -11vh; rotate: -2deg; }
  33% { translate: 18vw -4vh; rotate: 2deg; }
  67% { translate: 10vw 16vh; rotate: -1deg; }
  100% { translate: -18vw 10vh; rotate: 1deg; }
}

.quiet-back {
  position: absolute;
  left: 22px;
  bottom: 20px;
  border: 0;
  background: transparent;
  color: rgba(17,17,17,.27);
  font-size: 10px;
  letter-spacing: .14em;
  cursor: pointer;
  z-index: 20;
}

.quiet-back:hover { color: rgba(17,17,17,.7); }

.rain-game-entry {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  animation: rain-entry-drift 7s ease-in-out infinite alternate;
}

.rain-game-entry span {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 400;
  letter-spacing: -.03em;
}

.rain-game-entry small {
  display: block;
  margin-top: 6px;
  color: rgba(17,17,17,.3);
  font-size: 9px;
  letter-spacing: .18em;
}

@keyframes rain-entry-drift {
  from { transform: translate(-50%, -50%) translate(-2vw, -1.5vh); }
  to { transform: translate(-50%, -50%) translate(2vw, 1.5vh); }
}

/* --- Rain game ---------------------------------------------------------- */
.rain-game {
  background: linear-gradient(180deg, #f9fafb 0%, #eef2f5 100%);
  color: #16202a;
}

#rainCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .58;
}

.rain-game::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.92), rgba(255,255,255,.18) 42%, rgba(80,100,115,.08));
}

.rain-game-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.rain-game-topbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
}

.rain-back { position: static; }

.rain-score {
  display: flex;
  gap: 18px;
  color: rgba(25,40,52,.35);
  font-size: 9px;
  letter-spacing: .12em;
}

.rain-game-stage,
.rain-complete {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(820px, calc(100vw - 44px));
  transform: translate(-50%, -50%);
  text-align: center;
}

.rain-eyebrow {
  margin: 0 0 26px;
  color: rgba(25,40,52,.32);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: lowercase;
}

.rain-lyric {
  min-height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .18em .24em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(29px, 4.8vw, 58px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.015em;
  text-wrap: balance;
  transition: filter 350ms ease, opacity 350ms ease;
}

.rain-word { display: inline-block; }
.rain-blank {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 .08em .06em;
  border-bottom: 1px solid rgba(25,40,52,.38);
  color: transparent;
  text-shadow: none;
}

.rain-blank.restored {
  color: inherit;
  border-bottom-color: transparent;
  animation: restore-word 650ms ease both;
}

@keyframes restore-word {
  0% { opacity: 0; filter: blur(8px); transform: translateY(-8px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.rain-answer-form {
  width: min(480px, 100%);
  margin: 32px auto 0;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(25,40,52,.22);
}

.rain-answer-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 2px;
  outline: none;
  font: 300 14px "Inter", sans-serif;
  color: #16202a;
  text-align: center;
  letter-spacing: .04em;
}

.rain-answer-form input::placeholder { color: rgba(25,40,52,.25); }

.rain-answer-form button,
.rain-continue,
.rain-complete button {
  border: 0;
  background: transparent;
  color: rgba(25,40,52,.48);
  font-size: 9px;
  letter-spacing: .14em;
  cursor: pointer;
}

.rain-feedback {
  min-height: 18px;
  margin: 14px 0 0;
  color: rgba(25,40,52,.38);
  font-size: 10px;
  letter-spacing: .08em;
}

.rain-continue {
  margin-top: 18px;
  padding: 8px;
}

.rain-game-stage.wrong {
  animation: storm-shudder 380ms ease;
}

.rain-game.stormier #rainCanvas { opacity: .9; }

@keyframes storm-shudder {
  0%,100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 4px), -50%); }
  55% { transform: translate(calc(-50% + 5px), -50%); }
  80% { transform: translate(calc(-50% - 2px), -50%); }
}

.rain-complete p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 400;
}

.rain-complete strong {
  display: block;
  margin: 18px 0 25px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  color: rgba(25,40,52,.42);
}

.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;
}

@media (max-width: 600px) {
  .rain-score { gap: 10px; }
  .rain-lyric { min-height: 120px; }
  .rain-answer-form { width: min(90vw, 420px); }
}


/* --- void orbit navigation --- */
.world .node {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  transition: opacity 1s ease, color 250ms ease;
  will-change: transform;
}
.world.visible .node,
.world.visible .node-about {
  transform: translate(-50%, -50%);
}
.center-mark {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 6;
}
.center-mark:focus-visible {
  outline: 1px solid rgba(17,17,17,.36);
  outline-offset: 12px;
  border-radius: 50%;
}
.front-door-link {
  position: absolute;
  left: 24px;
  bottom: 22px;
  color: rgba(17,17,17,0.25);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: color 250ms ease;
  z-index: 8;
}
.front-door-link:hover {
  color: rgba(17,17,17,0.65);
}
@media (max-width: 720px) {
  .front-door-link { left: 18px; bottom: 18px; }
  .reset-button { right: 18px; bottom: 18px; }
}