:root {
  /* Compliance note: Space Grotesk* Space Grotesk** Grotes Groteskk from Google Fonts is referenced in index.html. */
  --fog-white: #F7F5EF;
  --nordic-chalk: #E7EDE9;
  --sea-glass: #A9D8CC;
  --tidal-blue: #6FA7BF;
  --fjord: #20343B;
  --buoy-coral: #FF8A7A;
  --mist-lavender: #D9D7F1;
  --display: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fjord);
  background:
    radial-gradient(circle at 72% 28%, rgba(169, 216, 204, 0.56) 0%, transparent 34%),
    radial-gradient(circle at 18% 76%, rgba(217, 215, 241, 0.5) 0%, transparent 32%),
    linear-gradient(135deg, var(--fog-white) 0%, var(--nordic-chalk) 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mist {
  position: absolute;
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.58;
  transform: translate3d(0, 0, 0);
}

.mist-a { width: 38vw; height: 38vw; left: 58vw; top: 8vh; background: var(--sea-glass); animation: fogDrift 18s ease-in-out infinite; }
.mist-b { width: 34vw; height: 24vw; left: -8vw; top: 55vh; background: var(--mist-lavender); animation: fogDrift 23s ease-in-out infinite reverse; }
.mist-c { width: 24vw; height: 24vw; right: 5vw; bottom: -4vw; background: rgba(111, 167, 191, 0.42); animation: fogDrift 28s ease-in-out infinite; }

.waterline {
  position: absolute;
  height: 1px;
  width: 66vw;
  border-top: 1px solid rgba(111, 167, 191, 0.34);
  border-radius: 50%;
  transform: rotate(-7deg);
}
.waterline-a { left: 10vw; top: 27vh; }
.waterline-b { right: -12vw; bottom: 28vh; transform: rotate(9deg); }

.dot-nav {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 20px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(247, 245, 239, 0.52);
  backdrop-filter: blur(14px);
}

.dot-pair {
  display: flex;
  gap: 5px;
  padding: 6px;
}

.dot-pair span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tidal-blue);
  opacity: 0.34;
  transition: transform 350ms ease, opacity 350ms ease, background 350ms ease;
}

.dot-pair.active span {
  opacity: 1;
  background: var(--fjord);
  transform: scale(1.35) translateX(-1px);
}

.dot-pair.active span + span { transform: scale(1.35) translateX(1px); background: var(--buoy-coral); }

.cursor-bubble {
  position: fixed;
  width: 58px;
  height: 58px;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 122, 0.62);
  background: rgba(169, 216, 204, 0.18);
  filter: blur(0.2px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 30;
  mix-blend-mode: multiply;
}

main { position: relative; z-index: 1; }

.room {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  padding: clamp(28px, 4vw, 64px);
  isolation: isolate;
  overflow: hidden;
}

.room > * { transition: filter 850ms ease, opacity 850ms ease, transform 850ms cubic-bezier(.2,.8,.2,1); }
.room:not(.focus-room) .huddle-card,
.room:not(.focus-room) .letter-cluster,
.room:not(.focus-room) .bubble-focus,
.room:not(.focus-room) .constellation { filter: blur(10px); opacity: 0.38; transform: translateY(28px) scale(0.98); }
.room.focus-room .huddle-card,
.room.focus-room .letter-cluster,
.room.focus-room .bubble-focus,
.room.focus-room .constellation { filter: blur(0); opacity: 1; transform: translateY(0) scale(1); }

.hero-wordmark {
  grid-column: 1 / 13;
  grid-row: 6 / 9;
  align-self: end;
  font-family: var(--display);
  font-size: clamp(5.8rem, 18vw, 19rem);
  line-height: 0.72;
  letter-spacing: 0.075em;
  font-weight: 700;
  color: var(--fjord);
  position: relative;
  user-select: none;
}

.word-fog { display: block; filter: blur(10px); opacity: 0.16; }
.word-sharp { position: absolute; inset: 0; clip-path: ellipse(32% 45% at 72% 44%); }
.word-sharp span { display: inline-block; animation: pulseLetter 3.6s ease-in-out infinite; }
.word-sharp span:last-child { animation-delay: 0.9s; }

.glitchable::before,
.glitchable::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  font: inherit;
}
.glitchable::before { color: var(--buoy-coral); clip-path: inset(18% 0 67% 0); }
.glitchable::after { color: var(--sea-glass); clip-path: inset(62% 0 20% 0); }
.glitchable.glitching::before { animation: glitchOne 420ms steps(2, end); }
.glitchable.glitching::after { animation: glitchTwo 420ms steps(2, end); }

.bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(111, 167, 191, 0.26);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.76), rgba(169,216,204,0.28) 52%, rgba(217,215,241,0.18));
  box-shadow: inset 0 0 24px rgba(247,245,239,0.62), 0 24px 80px rgba(111,167,191,0.16);
}

.hero-bubble {
  width: clamp(180px, 20vw, 290px);
  height: clamp(180px, 20vw, 290px);
  right: 9vw;
  top: 17vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 44px;
}
.hero-bubble p { margin: 8px 0 0; font-family: var(--display); font-size: clamp(1.15rem, 2vw, 2rem); line-height: 1.06; }
.pair-bubble::after { content: ""; position: absolute; width: 44%; height: 44%; right: -16%; bottom: 4%; border-radius: 50%; border: 1px solid rgba(255,138,122,0.4); background: rgba(247,245,239,0.28); }
.blur-bubble { filter: blur(11px); opacity: 0.45; animation: bubbleFloat 9s ease-in-out infinite; }
.bubble-one { width: 31vw; height: 31vw; left: 13vw; top: 10vh; }
.bubble-two { width: 18vw; height: 18vw; right: 26vw; bottom: 18vh; animation-delay: -3s; }

.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: lowercase; color: var(--tidal-blue); }

.micro-copy {
  grid-column: 2 / 5;
  grid-row: 5 / 7;
  max-width: 280px;
  align-self: center;
}
.micro-copy p, .huddle-card p { margin: 10px 0 0; font-size: clamp(0.98rem, 1.15vw, 1.14rem); line-height: 1.65; }

.letter-cluster {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fjord);
}
.letter-cluster span { display: inline-block; filter: drop-shadow(10px 22px 0 rgba(169,216,204,0.32)); }
.focus-room .letter-cluster span:nth-child(2) { animation: leanIn 4.4s ease-in-out infinite; }
.focus-room .letter-cluster span:nth-child(1) { animation: leanInLeft 4.4s ease-in-out infinite; }

.dock-posts { grid-column: 2 / 6; grid-row: 2 / 5; font-size: clamp(8rem, 21vw, 22rem); align-self: center; }
.coves { grid-column: 7 / 12; grid-row: 2 / 5; font-size: clamp(6rem, 15vw, 17rem); align-self: center; }

.huddle-card {
  position: relative;
  border-radius: 34px;
  padding: clamp(24px, 3.2vw, 46px);
  background: rgba(231, 237, 233, 0.62);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(32, 52, 59, 0.08);
  max-width: 430px;
}
.huddle-card h2 { margin: 12px 0 0; font-family: var(--display); font-size: clamp(2.1rem, 4vw, 4.8rem); line-height: 0.93; letter-spacing: -0.04em; }
.card-a { grid-column: 8 / 12; grid-row: 5 / 8; align-self: center; }
.card-b { grid-column: 2 / 6; grid-row: 5 / 8; align-self: start; }
.card-c { grid-column: 2 / 6; grid-row: 2 / 5; align-self: center; }

.gather-orb { width: 128px; height: 128px; left: 49vw; top: 42vh; display: grid; place-items: center; }
.static-orb { width: 27vw; height: 27vw; left: 54vw; bottom: 5vh; }

.pixel-salt { position: absolute; inset: 0; pointer-events: none; }
.pixel-salt i { position: absolute; width: 8px; height: 8px; background: var(--buoy-coral); opacity: 0.55; }
.pixel-salt i:nth-child(1) { left: 34%; top: 28%; }
.pixel-salt i:nth-child(2) { left: 38%; top: 31%; background: var(--sea-glass); }
.pixel-salt i:nth-child(3) { left: 72%; top: 58%; width: 12px; }
.pixel-salt i:nth-child(4) { left: 69%; top: 54%; background: var(--tidal-blue); }
.pixel-salt i:nth-child(5) { left: 52%; top: 46%; }
.pixel-salt i:nth-child(6) { left: 18%; top: 62%; background: var(--mist-lavender); }
.focus-room .pixel-salt i { animation: saltBlink 1.8s steps(2, end) infinite; }

.slice-stack { grid-column: 6 / 9; grid-row: 5 / 6; align-self: center; display: grid; gap: 9px; }
.slice-stack span { display: block; height: 12px; width: 20vw; border-radius: 999px; background: var(--sea-glass); opacity: 0.62; transform: translateX(0); }
.slice-stack span:nth-child(2) { background: var(--buoy-coral); width: 13vw; margin-left: 4vw; }
.slice-stack span:nth-child(3) { background: var(--tidal-blue); width: 17vw; margin-left: 1vw; }
.focus-room .slice-stack span { animation: sliceShift 1.8s ease-in-out infinite; }

.constellation {
  grid-column: 6 / 12;
  grid-row: 2 / 8;
  position: relative;
  min-height: 520px;
}
.constellation span {
  position: absolute;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  background: rgba(169,216,204,0.42);
  border: 1px solid rgba(32,52,59,0.15);
  box-shadow: 0 18px 50px rgba(111,167,191,0.16);
  animation: buoyBob 5s ease-in-out infinite;
}
.constellation span::after { content: ""; position: absolute; width: 110px; height: 1px; left: 54px; top: 50%; background: rgba(111,167,191,0.28); transform: rotate(var(--r, 0deg)); transform-origin: left center; }
.constellation span:nth-child(1) { left: 4%; top: 18%; --r: 12deg; }
.constellation span:nth-child(2) { left: 26%; top: 33%; --r: -10deg; animation-delay: -1s; }
.constellation span:nth-child(3) { left: 49%; top: 21%; --r: 20deg; animation-delay: -2s; }
.constellation span:nth-child(4) { left: 65%; top: 48%; --r: -18deg; animation-delay: -3s; }
.constellation span:nth-child(5) { left: 36%; top: 65%; --r: 8deg; animation-delay: -4s; }
.constellation span:nth-child(6) { left: 78%; top: 70%; }
.constellation span:nth-child(6)::after { display: none; }

.bubble-label {
  grid-column: 8 / 10;
  grid-row: 7 / 8;
  align-self: start;
  justify-self: center;
  padding: 18px 26px;
  border-radius: 999px;
  font-family: var(--mono);
  background: rgba(247,245,239,0.5);
  border: 1px solid rgba(255,138,122,0.42);
  backdrop-filter: blur(18px);
  transition: transform 300ms ease, background 300ms ease;
}
.bubble-label:hover { transform: translateY(-5px) scale(1.04); background: rgba(255,138,122,0.18); }

@keyframes fogDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3vw,-2vh) scale(1.08); } }
@keyframes bubbleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-28px); } }
@keyframes pulseLetter { 0%,100% { transform: translateX(0) scale(1); font-weight: 500; } 50% { transform: translateX(-0.05em) scale(1.03); font-weight: 700; } }
@keyframes leanIn { 0%,100% { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(-3deg) translateX(-12px); } }
@keyframes leanInLeft { 0%,100% { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(3deg) translateX(12px); } }
@keyframes glitchOne { 0% { opacity: 0; transform: translateX(0); } 30% { opacity: .72; transform: translateX(5px); } 60% { opacity: .45; transform: translateX(-3px); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes glitchTwo { 0% { opacity: 0; transform: translateX(0); } 30% { opacity: .62; transform: translateX(-4px); } 70% { opacity: .38; transform: translateX(6px); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes saltBlink { 0%,100% { opacity: .05; transform: translate(0,0); } 50% { opacity: .68; transform: translate(6px,-3px); } }
@keyframes sliceShift { 0%,100% { transform: translateX(0); } 45% { transform: translateX(12px); } 55% { transform: translateX(-8px); } }
@keyframes buoyBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (max-width: 760px) {
  .room { min-height: 110vh; grid-template-columns: repeat(6, 1fr); padding: 24px; }
  .hero-wordmark { grid-column: 1 / 7; font-size: 24vw; }
  .micro-copy { grid-column: 1 / 5; grid-row: 4 / 5; }
  .hero-bubble { right: 7vw; top: 19vh; }
  .dock-posts, .coves { grid-column: 1 / 7; grid-row: 2 / 4; font-size: 34vw; }
  .card-a, .card-b, .card-c { grid-column: 1 / 7; grid-row: 5 / 8; }
  .constellation { grid-column: 1 / 7; grid-row: 4 / 8; transform: scale(.78); transform-origin: left top; }
  .bubble-label { grid-column: 2 / 6; }
  .cursor-bubble { display: none; }
}