/* Typography source names reflected from DESIGN.md: Archivo Black, Space Grotesk, Inter; Google Fonts; Inter** Grotesk**; Inte Grotes */
:root {
  --abyss: #07111F;
  --violet: #2B1B55;
  --cyan: #66E6FF;
  --teal: #1B8A8F;
  --coral: #FF6B4A;
  --frost: #DFF9FF;
  --moon: #F7F1D5;
  --archivo: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
  --space: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --inter: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--frost);
  background: var(--abyss);
  font-family: var(--inter);
  overflow-x: hidden;
}

.observatory {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 16%, rgba(102,230,255,.18), transparent 26%),
    radial-gradient(circle at 24% 8%, rgba(255,107,74,.08), transparent 22%),
    linear-gradient(155deg, var(--abyss) 0%, var(--violet) 48%, #081827 72%, var(--abyss) 100%);
}

.sky-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(110deg, rgba(223,249,255,.035) 0 1px, transparent 1px 76px),
    radial-gradient(ellipse at 50% 74%, rgba(27,138,143,.18), transparent 34%);
  mix-blend-mode: screen;
}

.particle-field, .echo-field { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(223,249,255,.75);
  animation: snowDrift var(--duration, 14s) linear infinite;
  opacity: .55;
}

@keyframes snowDrift {
  from { transform: translate3d(0, -8vh, 0); }
  to { transform: translate3d(var(--slide, 30px), 108vh, 0); }
}

.echo-ring {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(102,230,255,.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: echoPulse 900ms ease-out forwards;
}

@keyframes echoPulse {
  to { width: 280px; height: 280px; opacity: 0; border-color: rgba(255,107,74,.05); }
}

.site-mark {
  position: fixed;
  left: 2.5vw;
  top: 5vh;
  z-index: 7;
  width: min-content;
}

.vertical-title {
  font-family: var(--archivo);
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 7.6rem);
  line-height: .78;
  letter-spacing: -.08em;
  color: rgba(247,241,213,.92);
  text-shadow: 0 0 32px rgba(102,230,255,.16), 2px 2px 0 rgba(7,17,31,.8);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.station-code {
  margin: 18px 0 0;
  max-width: 210px;
  font: 600 .72rem/1.45 var(--inter);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(223,249,255,.68);
}

.scene {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  padding: 8vh 7vw 22vh 18vw;
}

.scene-copy { max-width: 710px; padding-top: 5vh; }
.scene-copy.narrow { max-width: 560px; }

.eyebrow {
  display: block;
  margin-bottom: 18px;
  font: 700 .78rem/1 var(--space);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
}

h1, h2 {
  margin: 0;
  font-family: var(--archivo);
  text-transform: uppercase;
  letter-spacing: -.055em;
}

h1 { font-size: clamp(3.6rem, 9vw, 10.8rem); line-height: .8; }
h2 { font-size: clamp(2.5rem, 6vw, 7rem); line-height: .84; }

p {
  font: 500 clamp(1rem, 1.4vw, 1.25rem)/1.55 var(--space);
  color: rgba(223,249,255,.78);
}

.specimen-wrap {
  position: absolute;
  right: 8vw;
  top: 18vh;
  width: min(420px, 38vw);
  height: 420px;
}

.phrase-specimen {
  position: absolute;
  inset: 42px 18px auto auto;
  z-index: 5;
  width: 340px;
  padding: 22px;
  border: 1px solid rgba(223,249,255,.38);
  border-radius: 28px;
  color: var(--frost);
  background: linear-gradient(140deg, rgba(223,249,255,.16), rgba(102,230,255,.08) 48%, rgba(43,27,85,.26));
  box-shadow: inset 0 1px 18px rgba(223,249,255,.16), 0 26px 70px rgba(0,0,0,.38);
  backdrop-filter: blur(22px) saturate(140%);
  cursor: grab;
  animation: specimenSink 4.6s ease-in-out infinite;
}

.phrase-specimen.dragging { cursor: grabbing; animation: none; }
.phrase-specimen strong { display: block; margin: 10px 0; font: 700 1.45rem/1.1 var(--space); }
.phrase-specimen small, .specimen-label { font: 700 .68rem/1 var(--inter); text-transform: uppercase; letter-spacing: .16em; color: rgba(247,241,213,.8); }

@keyframes specimenSink { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(20px) rotate(1deg); } }

.bubble-stream { position: absolute; inset: 0; }
.bubble {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(7,17,31,.78);
  font: 900 1rem var(--space);
  background: radial-gradient(circle at 28% 22%, rgba(247,241,213,.92), rgba(102,230,255,.48) 28%, rgba(102,230,255,.08) 62%, rgba(255,107,74,.26));
  border: 1px solid rgba(223,249,255,.55);
  box-shadow: inset -8px -10px 18px rgba(7,17,31,.3), 0 0 30px rgba(102,230,255,.2);
  animation: bubbleRise 7s ease-in-out infinite;
}
.b1 { width: 54px; height: 54px; left: 44%; bottom: 14%; animation-delay: 0s; }
.b2 { width: 86px; height: 86px; left: 67%; bottom: 28%; clip-path: polygon(50% 0, 68% 24%, 98% 34%, 77% 59%, 80% 94%, 50% 78%, 20% 94%, 23% 59%, 2% 34%, 32% 24%); animation-delay: .7s; }
.b3 { width: 38px; height: 38px; left: 28%; bottom: 40%; animation-delay: 1.6s; }
.b4 { width: 68px; height: 68px; left: 52%; bottom: 56%; animation-delay: 2.3s; }
.b5 { width: 112px; height: 112px; left: 18%; bottom: 20%; animation-delay: 3.1s; background: radial-gradient(circle at 35% 25%, rgba(247,241,213,.86), rgba(223,249,255,.25) 30%, rgba(27,138,143,.2) 50%, rgba(255,107,74,.2) 72%); }

@keyframes bubbleRise { 0%,100% { transform: translateY(36px) translateX(0) scale(.94); opacity: .62; } 50% { transform: translateY(-80px) translateX(-28px) scale(1.06); opacity: 1; } }

.tone-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 12vh;
  perspective: 1200px;
}

.tone-card, .diagnostic-pane, .climate-readout {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(223,249,255,.28);
  background: linear-gradient(145deg, rgba(223,249,255,.14), rgba(7,17,31,.28));
  box-shadow: inset 0 1px 22px rgba(223,249,255,.12), 0 22px 70px rgba(0,0,0,.32);
  backdrop-filter: blur(19px) saturate(135%);
}

.tone-card {
  min-height: 220px;
  padding: 24px;
  border-radius: 30px;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--float, 0));
  transition: transform 350ms ease, border-color 350ms ease, background 350ms ease, box-shadow 350ms ease;
}
.tone-card:nth-child(1) { --tilt: -3deg; --float: 18px; }
.tone-card:nth-child(2) { --tilt: 2deg; --float: -12px; }
.tone-card:nth-child(3) { --tilt: -1deg; --float: 38px; }
.tone-card:nth-child(4) { --tilt: 3deg; --float: 4px; }
.tone-card:nth-child(5) { --tilt: -4deg; --float: 28px; }

.tone-card:hover, .tone-card.active {
  transform: rotate(0deg) translateY(-16px) scale(1.04);
  border-color: rgba(102,230,255,.85);
  background: linear-gradient(145deg, rgba(223,249,255,.24), rgba(27,138,143,.18), rgba(7,17,31,.24));
  box-shadow: inset 0 1px 28px rgba(223,249,255,.28), 0 28px 90px rgba(102,230,255,.18);
}

.tone-card::before, .diagnostic-pane::before {
  content: "";
  position: absolute;
  inset: -50% -20% auto;
  height: 130px;
  background: linear-gradient(90deg, transparent, rgba(247,241,213,.32), transparent);
  transform: rotate(-18deg);
  transition: transform 600ms ease;
}
.tone-card:hover::before, .tone-card.active::before, .diagnostic-pane:hover::before { transform: translateY(180px) rotate(-18deg); }

.tone-card h2 { font-size: 1.25rem; letter-spacing: -.03em; color: var(--moon); }
.tone-card p { font-size: .92rem; line-height: 1.45; }
.gauge { display: block; width: 58px; height: 30px; margin-bottom: 28px; border: 2px solid var(--cyan); border-bottom: 0; border-radius: 80px 80px 0 0; box-shadow: 0 0 20px rgba(102,230,255,.25); }
.hot .gauge, .unstable .gauge { border-color: var(--coral); }
.stable .gauge { border-color: var(--teal); }

.diagnostic-grid { display: grid; grid-template-columns: 1.2fr .9fr 1.1fr; gap: 22px; margin-top: 16vh; }
.diagnostic-pane { min-height: 290px; padding: 32px; border-radius: 34px; transform: translateY(var(--drop, 0)); }
.diagnostic-pane:nth-child(2) { --drop: -70px; }
.diagnostic-pane:nth-child(3) { --drop: 44px; }
.diagnostic-pane b { display: block; font: 700 2rem/1 var(--space); color: var(--moon); }
.diagnostic-pane span { display: block; margin-top: 26px; font: 500 1.08rem/1.5 var(--inter); color: rgba(223,249,255,.78); }
.coral-pane { background: linear-gradient(145deg, rgba(255,107,74,.24), rgba(7,17,31,.28)); }
.cyan-pane { background: linear-gradient(145deg, rgba(102,230,255,.22), rgba(7,17,31,.28)); }
.violet-pane { background: linear-gradient(145deg, rgba(43,27,85,.44), rgba(223,249,255,.08)); }

.climate-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10vh 0 26px; }
.climate {
  min-height: 170px;
  border: 1px solid rgba(223,249,255,.24);
  border-radius: 32px;
  color: var(--frost);
  background: rgba(223,249,255,.08);
  backdrop-filter: blur(17px);
  font: 800 1.4rem/1.05 var(--space);
  text-align: left;
  padding: 24px;
  cursor: pointer;
  transition: transform 260ms ease, background 260ms ease, border-color 260ms ease;
}
.climate:hover, .climate.active { transform: translateY(-12px); border-color: var(--cyan); background: linear-gradient(145deg, rgba(102,230,255,.2), rgba(255,107,74,.10)); }
.climate-readout { max-width: 850px; padding: 28px 32px; border-radius: 26px; font: 700 1.5rem/1.35 var(--space); color: var(--moon); }

.summit-constellation { position: relative; height: 50vh; margin-top: 8vh; }
.resolved-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  border: 1px solid rgba(223,249,255,.55);
  background: radial-gradient(circle at 30% 20%, rgba(247,241,213,.9), rgba(102,230,255,.34) 34%, rgba(27,138,143,.22) 66%, rgba(7,17,31,.12));
  box-shadow: 0 0 45px rgba(102,230,255,.18), inset -18px -22px 28px rgba(7,17,31,.34);
  font: 900 .9rem/1 var(--space);
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: calmFloat 6s ease-in-out infinite;
}
.resolved-bubble.large { width: 190px; height: 190px; left: 35%; top: 6%; }
.resolved-bubble.coral { left: 55%; top: 22%; background: radial-gradient(circle at 30% 20%, rgba(247,241,213,.9), rgba(255,107,74,.32), rgba(102,230,255,.14)); }
.resolved-bubble.teal { left: 22%; top: 42%; }
.resolved-bubble.pale { left: 70%; top: 4%; color: var(--abyss); }
.resolved-bubble.small { width: 86px; height: 86px; left: 48%; top: 58%; }
@keyframes calmFloat { 50% { transform: translateY(-24px); } }

.mountains { position: fixed; left: 0; right: 0; bottom: 0; height: 43vh; z-index: 3; pointer-events: none; }
.mountains svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 -18px 40px rgba(102,230,255,.08)); }
.ridge.rear { fill: rgba(43,27,85,.82); }
.ridge.mid { fill: rgba(7,17,31,.88); }
.ridge.front { fill: #07111F; }
.observatory-windows { position: absolute; left: 69%; bottom: 18%; display: flex; gap: 8px; }
.observatory-windows span { width: 14px; height: 8px; background: var(--moon); box-shadow: 0 0 22px var(--moon); border-radius: 8px; opacity: .8; }

body.climate-warm .observatory { background: radial-gradient(circle at 70% 20%, rgba(255,107,74,.14), transparent 30%), linear-gradient(155deg, var(--abyss), var(--violet) 44%, #123234 100%); }
body.climate-sharp .phrase-specimen { border-color: rgba(255,107,74,.75); box-shadow: inset 0 1px 18px rgba(255,107,74,.18), 0 26px 80px rgba(255,107,74,.16); }
body.climate-cool .phrase-specimen { border-color: rgba(102,230,255,.65); }

@media (max-width: 980px) {
  .site-mark { position: absolute; left: 5vw; top: 4vh; }
  .vertical-title { writing-mode: initial; transform: none; font-size: 2.4rem; line-height: .85; }
  .station-code { display: none; }
  .scene { padding: 24vh 5vw 20vh; }
  .specimen-wrap { position: relative; right: auto; top: auto; width: 100%; margin: 4vh 0; }
  .tone-grid, .diagnostic-grid, .climate-plates { grid-template-columns: 1fr; }
  .diagnostic-pane, .diagnostic-pane:nth-child(2), .diagnostic-pane:nth-child(3) { transform: none; }
}