:root {
  --obsidian: #050403;
  --carbon: #10100D;
  --gold: #C8A24A;
  --gilt: #F2D27A;
  --green: #13281D;
  --emerald: #4FF0A8;
  --violet: #A675FF;
  --ivory: #F6EEDB;
  --display: "Cormorant Garamond", Georgia, serif;
  --serif: "Libre Baskerville", Georgia, serif;
  --num: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--obsidian);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% 48%, rgba(19, 40, 29, 0.52), transparent 34rem),
    radial-gradient(circle at 50% 120%, rgba(200, 162, 74, 0.12), transparent 45rem),
    linear-gradient(180deg, var(--obsidian), var(--carbon) 48%, var(--obsidian));
  font-family: var(--serif);
  overflow-x: hidden;
}

.lacquer-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    repeating-linear-gradient(90deg, rgba(246, 238, 219, 0.025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(200, 162, 74, 0.018) 0 1px, transparent 1px 11px);
  mix-blend-mode: screen;
}

.aurora-ceiling {
  position: fixed;
  inset: -12vh -12vw auto -12vw;
  height: 72vh;
  z-index: 0;
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.72;
}

.veil {
  position: absolute;
  width: 92vw;
  height: 18vh;
  border-radius: 999px;
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
}

.veil-one {
  left: -10vw;
  top: 16vh;
  background: linear-gradient(92deg, transparent, rgba(79, 240, 168, 0.26), rgba(166, 117, 255, 0.18), transparent);
  animation: veilDrift 18s ease-in-out infinite alternate;
}

.veil-two {
  right: -6vw;
  top: 4vh;
  background: linear-gradient(104deg, transparent, rgba(166, 117, 255, 0.22), rgba(79, 240, 168, 0.16), transparent);
  animation: veilDriftTwo 24s ease-in-out infinite alternate;
}

.veil-three {
  left: 12vw;
  top: 32vh;
  width: 70vw;
  background: radial-gradient(ellipse at center, rgba(242, 210, 122, 0.11), rgba(79, 240, 168, 0.13), transparent 68%);
  animation: veilPulse 21s ease-in-out infinite alternate;
}

.conservatory { position: relative; z-index: 2; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 7vw;
  border: 1px solid rgba(200, 162, 74, 0.18);
  transform: skewY(-6deg);
  pointer-events: none;
}

.chamber::after {
  content: "";
  position: absolute;
  width: min(78vw, 48rem);
  aspect-ratio: 1;
  border: 1px solid rgba(242, 210, 122, 0.18);
  transform: rotate(45deg);
  box-shadow: 0 0 4rem rgba(200, 162, 74, 0.05) inset;
  pointer-events: none;
}

.center-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92vw, 56rem);
  min-height: 43rem;
}

.compass-rings {
  position: absolute;
  inset: 50%;
  width: min(82vw, 42rem);
  aspect-ratio: 1;
  translate: -50% -50%;
}

.compass-rings span {
  position: absolute;
  inset: calc(var(--i, 0) * 12%);
  border: 1px solid rgba(200, 162, 74, 0.24);
  border-radius: 50%;
  animation: ringDraw 2.2s ease forwards, compassTurn 30s linear infinite;
  opacity: 0;
}

.compass-rings span:nth-child(1) { --i: 0; animation-delay: .2s, 2.6s; }
.compass-rings span:nth-child(2) { --i: 1; animation-delay: .55s, 2.6s; }
.compass-rings span:nth-child(3) { --i: 2; animation-delay: .9s, 2.6s; }

.iso-plinth {
  position: absolute;
  width: min(45vw, 18rem);
  aspect-ratio: 1;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2.4rem 3rem rgba(0, 0, 0, 0.7));
}

.diamond {
  position: absolute;
  inset: 0;
  transform: rotate(45deg) skew(-8deg, -8deg) scaleY(.72);
  border: 1px solid var(--gold);
}

.diamond-shadow {
  inset: 13% -4% -8% 13%;
  background: rgba(19, 40, 29, 0.82);
  border-color: rgba(19, 40, 29, 0.95);
}

.diamond-base {
  inset: 6%;
  background: linear-gradient(135deg, rgba(16, 16, 13, 0.98), rgba(19, 40, 29, 0.9));
  box-shadow: inset 0 0 2rem rgba(242, 210, 122, 0.08);
  animation: lineReveal 2.4s ease forwards;
  clip-path: inset(0 100% 0 0);
}

.diamond-top {
  inset: 18%;
  background:
    radial-gradient(circle, rgba(242, 210, 122, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(5, 4, 3, 0.95), rgba(16, 16, 13, 0.88));
  border-color: var(--gilt);
  animation: lineReveal 2.4s .55s ease forwards;
  clip-path: inset(0 100% 0 0);
}

.carbon-seed {
  position: absolute;
  inset: 39%;
  border-radius: 52% 48% 45% 55%;
  background:
    radial-gradient(circle at 34% 26%, rgba(246, 238, 219, 0.25), transparent 12%),
    radial-gradient(circle at 50% 56%, #13281D, #050403 70%);
  border: 1px solid rgba(242, 210, 122, 0.42);
  box-shadow: 0 0 2rem rgba(79, 240, 168, 0.18);
  opacity: 0;
  animation: seedAppear 1.6s 1.7s ease forwards, seedBreathe 5s 3s ease-in-out infinite;
}

.corner-sprout {
  position: absolute;
  width: 1px;
  height: 7.5rem;
  background: linear-gradient(var(--gilt), transparent);
  transform-origin: bottom center;
  opacity: 0;
  animation: sproutGrow 1.7s 2.1s ease forwards;
}

.sprout-a { left: 14%; top: 11%; rotate: -38deg; }
.sprout-b { right: 12%; top: 14%; rotate: 42deg; }
.sprout-c { left: 15%; bottom: 9%; rotate: -137deg; }
.sprout-d { right: 14%; bottom: 11%; rotate: 138deg; }

.corner-sprout::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: -0.55rem;
  width: 1.1rem;
  height: 0.56rem;
  border: 1px solid rgba(246, 238, 219, 0.58);
  border-radius: 100% 0 100% 0;
  transform: rotate(28deg);
}

.wordmark {
  position: relative;
  z-index: 4;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.8rem, 11vw, 11rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  color: var(--ivory);
  text-shadow: 0 0 1.4rem rgba(242, 210, 122, 0.12), 0 0 4rem rgba(79, 240, 168, 0.08);
  opacity: 0;
  transform: translateY(1.6rem);
  animation: titleRise 1.8s 1.1s ease forwards;
}

.wordmark span { color: var(--gilt); margin-inline: .02em; }

.plate-label,
.orbital-label,
.coordinate {
  position: absolute;
  z-index: 5;
  font-family: var(--serif);
  font-size: clamp(.62rem, 1vw, .82rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 238, 219, 0.78);
}

.north { top: 8vh; }
.south { bottom: 8vh; }
.west { left: 6vw; top: 50%; transform: rotate(-90deg); }
.east { right: 5vw; top: 50%; transform: rotate(90deg); }

.chamber-title {
  position: absolute;
  z-index: 5;
  max-width: 28rem;
}

.chamber-title p,
.final-copy p {
  margin: 0 0 .9rem;
  color: var(--gold);
  font-family: var(--num);
  text-transform: uppercase;
  letter-spacing: .22em;
}

.chamber-title h2,
.final-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 6.8rem);
  line-height: .9;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: -0.045em;
}

.title-left { left: 7vw; top: 16vh; }
.centered-title { top: 9vh; text-align: center; }

.root-illustration {
  width: min(90vw, 58rem);
  aspect-ratio: 1;
  position: relative;
}

.root-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.guide-diamonds path {
  fill: rgba(19, 40, 29, 0.08);
  stroke: rgba(200, 162, 74, 0.22);
  stroke-width: 1;
}

.roots path,
.orchid-lines path,
.orchid-lines circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  filter: url(#softGold);
}

.orchid-lines path,
.orchid-lines circle {
  stroke: var(--ivory);
  stroke-width: 1.4;
}

.in-view .roots path,
.in-view .orchid-lines path,
.in-view .orchid-lines circle {
  animation: rootDraw 3.2s ease forwards;
}

.roots path:nth-child(2n) { stroke: var(--gilt); animation-delay: .28s; }
.roots path:nth-child(3n) { stroke: rgba(79, 240, 168, 0.78); animation-delay: .5s; }

.specimen-note {
  position: absolute;
  max-width: 14rem;
  padding: .65rem .8rem;
  border: 1px solid rgba(200, 162, 74, 0.42);
  background: rgba(5, 4, 3, 0.72);
  color: rgba(246, 238, 219, 0.86);
  font-family: var(--serif);
  font-size: .74rem;
  line-height: 1.65;
  transform: translateY(.8rem);
  opacity: 0;
}

.specimen-note span {
  position: absolute;
  height: 1px;
  width: 5.5rem;
  background: var(--gold);
  top: 50%;
}

.note-a { top: 21%; right: 2%; }
.note-a span { right: 100%; }
.note-b { bottom: 18%; left: 0; }
.note-b span { left: 100%; }
.note-c { top: 45%; right: 8%; }
.note-c span { right: 100%; }
.in-view .specimen-note { animation: labelPlace .9s ease forwards; }
.in-view .note-b { animation-delay: .65s; }
.in-view .note-c { animation-delay: 1.05s; }

.gauge-cluster {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  width: min(90vw, 66rem);
  z-index: 4;
  transform: translateY(4rem);
}

.brass-gauge {
  position: relative;
  width: clamp(9rem, 22vw, 16rem);
  min-height: 13rem;
  display: grid;
  place-items: center;
  padding: 1.3rem;
  border: 1px solid rgba(200, 162, 74, 0.48);
  background:
    radial-gradient(circle at 50% 20%, rgba(242, 210, 122, 0.12), transparent 45%),
    linear-gradient(180deg, rgba(19, 40, 29, 0.72), rgba(5, 4, 3, 0.84));
  transform: rotate(45deg) skew(-7deg, -7deg);
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.45), inset 0 0 2rem rgba(242, 210, 122, 0.06);
}

.brass-gauge.tall { translate: 0 -3rem; }

.brass-gauge::before,
.brass-gauge::after {
  content: "";
  position: absolute;
  inset: .65rem;
  border: 1px solid rgba(242, 210, 122, 0.2);
}

.brass-gauge::after { inset: 1.2rem; border-color: rgba(79, 240, 168, 0.16); }

.gauge-window,
.brass-gauge p {
  transform: skew(7deg, 7deg) rotate(-45deg);
}

.gauge-window {
  font-family: var(--num);
  color: var(--gilt);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -.04em;
}

.gauge-window small { font-size: .36em; }

.brass-gauge p {
  margin: .3rem 0 0;
  font-size: .68rem;
  color: rgba(246, 238, 219, .78);
  text-transform: uppercase;
  letter-spacing: .18em;
  text-align: center;
}

.greenhouse-diamond {
  position: absolute;
  width: min(86vw, 45rem);
  aspect-ratio: 1;
  transform: rotate(45deg) scaleY(.58);
  border: 1px solid rgba(200, 162, 74, 0.16);
}

.greenhouse-diamond span {
  position: absolute;
  inset: calc(var(--d) * 12%);
  border: 1px solid rgba(200, 162, 74, 0.18);
}
.greenhouse-diamond span:nth-child(1) { --d: 1; }
.greenhouse-diamond span:nth-child(2) { --d: 2; }
.greenhouse-diamond span:nth-child(3) { --d: 3; }
.greenhouse-diamond span:nth-child(4) { --d: 4; }

.meridian-seal {
  position: relative;
  width: min(82vw, 39rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.seal-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold);
}

.ring-outer {
  inset: 0;
  box-shadow: 0 0 2.5rem rgba(200, 162, 74, 0.1) inset, 0 0 4rem rgba(79, 240, 168, 0.08);
}

.ring-inner { inset: 16%; border-color: rgba(242, 210, 122, 0.56); }

.seal-diamond {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid var(--gilt);
  transform: rotate(45deg) skew(-8deg, -8deg) scaleY(.68);
  background: rgba(19, 40, 29, 0.36);
}

.seal-leaf {
  position: absolute;
  width: 21%;
  height: 9%;
  border: 1px solid rgba(246, 238, 219, 0.7);
  border-radius: 100% 0 100% 0;
  background: rgba(79, 240, 168, 0.08);
}
.leaf-left { transform: translateX(-6rem) rotate(28deg); }
.leaf-right { transform: translateX(6rem) rotate(208deg); }

.monogram {
  z-index: 3;
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 8rem);
  letter-spacing: -.12em;
  color: var(--ivory);
}

.coordinate { color: var(--gold); font-family: var(--num); }
.coord-n { top: -2rem; left: 50%; transform: translateX(-50%); }
.coord-s { bottom: -2rem; left: 50%; transform: translateX(-50%); }
.coord-e { right: -3rem; top: 50%; transform: translateY(-50%) rotate(90deg); }
.coord-w { left: -3rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }

.final-copy {
  position: absolute;
  left: 7vw;
  bottom: 9vh;
  max-width: 35rem;
}
.final-copy span { display: block; margin-top: 1rem; color: rgba(246, 238, 219, .72); }

@keyframes veilDrift { to { transform: translate(14vw, 7vh) rotate(8deg) scale(1.08); } }
@keyframes veilDriftTwo { to { transform: translate(-12vw, 12vh) rotate(-12deg) scale(1.12); } }
@keyframes veilPulse { to { transform: translate(5vw, -4vh) scale(1.22); opacity: .5; } }
@keyframes lineReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes seedAppear { to { opacity: 1; transform: scale(1.02); } }
@keyframes seedBreathe { 50% { box-shadow: 0 0 3.4rem rgba(79, 240, 168, 0.28); transform: scale(1.08); } }
@keyframes sproutGrow { from { height: 0; opacity: 0; } to { height: 7.5rem; opacity: 1; } }
@keyframes titleRise { to { opacity: 1; transform: translateY(0); } }
@keyframes ringDraw { to { opacity: 1; } }
@keyframes compassTurn { to { rotate: 360deg; } }
@keyframes rootDraw { to { stroke-dashoffset: 0; } }
@keyframes labelPlace { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .west, .east { display: none; }
  .center-stage { min-height: 34rem; }
  .title-left, .final-copy { left: 1.2rem; right: 1.2rem; }
  .gauge-cluster { flex-direction: column; transform: translateY(5rem); gap: .8rem; }
  .brass-gauge { width: 11rem; min-height: 9rem; }
  .brass-gauge.tall { translate: 0; }
  .specimen-note { font-size: .62rem; max-width: 10rem; }
  .note-a, .note-c { right: -1rem; }
  .coord-e { right: -2rem; }
  .coord-w { left: -2rem; }
}