:root {
  --observatory-black: #070611;
  --manuscript-indigo: #17123A;
  --violet-archive: #6F4BFF;
  --solar-gold: #F4C95D;
  --witness-rose: #D95D8C;
  --parchment: #F2E8D5;
  --blue-ink: #101A2E;
  --plum: #3A1748;
  --progress: 0;
}

* { box-sizing: border-box; }

html { background: var(--observatory-black); }

body {
  margin: 0;
  min-height: 100%;
  color: var(--parchment);
  font-family: "Cormorant Garamond", serif;
  background: linear-gradient(135deg, #070611 0%, #17123A 46%, #3A1748 100%);
  overflow-x: hidden;
}

.sky {
  position: fixed;
  inset: 0;
  z-index: -5;
  background: #070611;
  overflow: hidden;
}

.sky-gradient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 70% 18%, rgba(111,75,255,.42), transparent 36%),
    radial-gradient(circle at 18% 62%, rgba(217,93,140,.24), transparent 28%),
    linear-gradient(135deg, #070611 0%, #17123A 46%, #3A1748 100%);
  transform: translate3d(calc(var(--progress) * -3vw), calc(var(--progress) * 4vh), 0) rotate(calc(var(--progress) * 5deg));
  transition: transform .15s linear;
}

.starfield {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(242,232,213,.95) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(244,201,93,.8) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(111,75,255,.7) 0 1px, transparent 1.4px);
  background-size: 93px 87px, 151px 137px, 227px 211px;
  background-position: 0 0, 31px 49px, 83px 17px;
  opacity: .42;
  filter: drop-shadow(0 0 7px rgba(244,201,93,.25));
  animation: starDrift 24s ease-in-out infinite alternate;
}

@keyframes starDrift {
  from { transform: translate3d(0, 0, 0); opacity: .34; }
  to { transform: translate3d(18px, -12px, 0); opacity: .48; }
}

.astrolabe {
  position: absolute;
  border: 1px solid rgba(242,232,213,.13);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(111,75,255,.13), 0 0 60px rgba(111,75,255,.11);
}

.astrolabe::before,
.astrolabe::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(244,201,93,.16);
  border-radius: 50%;
}

.astrolabe::after { inset: 34%; border-color: rgba(217,93,140,.18); }
.astrolabe-one { width: 74vw; height: 74vw; right: -24vw; top: -27vw; }
.astrolabe-two { width: 48vw; height: 48vw; left: -19vw; bottom: 12vh; opacity: .6; }

.constellation-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 560vh;
  pointer-events: none;
  z-index: 2;
}

.constellation-lines path {
  fill: none;
  stroke: #6F4BFF;
  stroke-width: .18;
  stroke-dasharray: 1200;
  stroke-dashoffset: calc(1200 - (var(--progress) * 1200));
  filter: drop-shadow(0 0 8px rgba(111,75,255,.6));
  opacity: .72;
}

.constellation-lines .counter-path {
  stroke: #F4C95D;
  stroke-width: .09;
  opacity: .38;
}

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5rem);
}

.desk-scene { overflow: hidden; }

.coordinate-strip,
.kicker,
.coordinate-labels,
.trace-button,
.align-button {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.coordinate-strip {
  position: absolute;
  top: 2rem;
  left: 4vw;
  color: rgba(242,232,213,.58);
  font-size: .82rem;
}

.hero-arc {
  position: absolute;
  right: -8vw;
  top: -18vh;
  width: min(74vw, 780px);
  height: min(74vw, 780px);
  border: 1px solid rgba(242,232,213,.22);
  border-left-color: transparent;
  border-bottom-color: rgba(111,75,255,.36);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.title-group {
  position: absolute;
  left: clamp(1.6rem, 7vw, 7rem);
  bottom: clamp(4rem, 12vh, 8rem);
  max-width: 950px;
}

.title-fragment {
  display: block;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: .72;
  color: #F2E8D5;
  text-shadow: 0 0 24px rgba(217,93,140,.28), 0 0 70px rgba(111,75,255,.22);
}

.fragment-one { transform: rotate(-3deg) translateX(-.1em); color: #F4C95D; }
.fragment-two { transform: rotate(1.5deg) translate(.22em, -.04em); }

.subtitle {
  max-width: 640px;
  margin: 2rem 0 0 8vw;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.2;
  color: rgba(242,232,213,.86);
}

.desk-paper {
  position: absolute;
  right: 13vw;
  bottom: 17vh;
  width: 210px;
  padding: 1.1rem;
  color: #101A2E;
  background: linear-gradient(145deg, rgba(242,232,213,.86), rgba(244,201,93,.62));
  font-family: "Caveat", cursive;
  font-size: 1.7rem;
  transform: rotate(9deg);
  clip-path: polygon(7% 0, 100% 8%, 92% 92%, 2% 100%);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}

.trace-button,
.align-button {
  border: 1px solid rgba(244,201,93,.62);
  color: #F4C95D;
  background: rgba(16,26,46,.45);
  padding: .8rem 1rem;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(244,201,93,.08);
}

.trace-button { position: absolute; left: 9vw; bottom: 3rem; }
.trace-button:hover, .align-button:hover { background: rgba(244,201,93,.13); }

.cluster { display: flex; align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.cluster-origin { padding-left: 11vw; }
.cluster-counter { justify-content: flex-end; padding-right: 9vw; }
.cluster-instrument { justify-content: center; }

.cluster-copy {
  position: relative;
  max-width: 630px;
  z-index: 4;
}

.cluster-copy.narrow { max-width: 500px; }
.kicker { color: #F4C95D; font-size: .82rem; margin: 0 0 1rem; }

h2 {
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(3.2rem, 7.6vw, 8rem);
  line-height: .82;
  color: #F2E8D5;
}

.cluster-copy p:not(.kicker), .closing-note {
  font-size: clamp(1.2rem, 1.75vw, 1.75rem);
  line-height: 1.32;
  color: rgba(242,232,213,.83);
}

.hand-note,
.loose-note {
  font-family: "Caveat", cursive;
  color: #D95D8C;
  font-size: clamp(1.7rem, 3vw, 3.2rem);
}

.note-drift {
  display: inline-block;
  transform: rotate(-8deg) translate(8rem, .5rem);
  text-shadow: 0 0 18px rgba(217,93,140,.4);
}

.evidence-image {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 28vw, 430px);
  height: clamp(300px, 38vw, 560px);
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 26%, rgba(242,232,213,.22), transparent 9%),
    radial-gradient(circle at 46% 34%, rgba(16,26,46,.95), transparent 11%),
    linear-gradient(135deg, #101A2E 0%, #17123A 42%, #D95D8C 100%);
  filter: saturate(1.05) contrast(1.18);
  mix-blend-mode: screen;
  box-shadow: 0 35px 90px rgba(0,0,0,.45), inset 0 0 90px rgba(7,6,17,.72);
}

.image-portrait {
  border-radius: 52% 48% 44% 56% / 38% 56% 44% 62%;
  transform: rotate(-7deg);
}

.image-portrait::before {
  content: "";
  position: absolute;
  inset: 12% 18% 0;
  background:
    radial-gradient(ellipse at 50% 23%, #F2E8D5 0 12%, transparent 13%),
    linear-gradient(#D95D8C, #101A2E 68%);
  clip-path: polygon(43% 0, 62% 4%, 72% 30%, 89% 100%, 11% 100%, 29% 30%);
  opacity: .62;
}

.image-document {
  height: clamp(260px, 32vw, 460px);
  clip-path: polygon(8% 4%, 96% 0, 91% 88%, 48% 100%, 0 86%);
  transform: rotate(6deg);
  background:
    repeating-linear-gradient(168deg, rgba(242,232,213,.18) 0 2px, transparent 2px 21px),
    radial-gradient(circle at 68% 28%, rgba(217,93,140,.75), transparent 22%),
    linear-gradient(135deg, #101A2E, #17123A 58%, #6F4BFF);
}

.image-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(242,232,213,.16) 0 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: .23;
  mix-blend-mode: overlay;
}

.star-pin {
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(244,201,93,.5);
  background: radial-gradient(circle, #F4C95D 0 13%, rgba(111,75,255,.23) 17%, transparent 70%);
  color: #F4C95D;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(244,201,93,.35);
  transition: transform .4s ease, box-shadow .4s ease;
}

.star-pin:hover,
.star-pin.active { transform: scale(1.35); box-shadow: 0 0 48px rgba(244,201,93,.8), 0 0 70px rgba(217,93,140,.35); }
.pin-a { left: 49vw; top: 23vh; }
.pin-b { left: 17vw; bottom: 21vh; }

.star-pin::after {
  content: attr(data-note);
  position: absolute;
  left: 2.8rem;
  top: -1rem;
  width: 250px;
  padding: .8rem;
  background: rgba(16,26,46,.82);
  color: #F2E8D5;
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  line-height: 1.05;
  border: 1px solid rgba(217,93,140,.42);
  opacity: 0;
  transform: translateY(12px) rotate(-3deg);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.star-pin:hover::after,
.star-pin.active::after { opacity: 1; transform: translateY(0) rotate(-3deg); }

.footnote-comet {
  position: absolute;
  right: 14vw;
  bottom: 17vh;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  color: #F4C95D;
  cursor: pointer;
}

.footnote-comet span {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  margin-left: .5rem;
  color: #F2E8D5;
  font-family: "Caveat", cursive;
  font-size: 1.55rem;
  white-space: nowrap;
  transition: max-width .5s ease, opacity .5s ease;
}

.footnote-comet.open span { max-width: 280px; opacity: 1; }

.annotation-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.annotation-field span {
  position: absolute;
  font-family: "Caveat", cursive;
  color: #F4C95D;
  font-size: clamp(1.6rem, 3vw, 3.1rem);
  opacity: .78;
  text-shadow: 0 0 20px rgba(244,201,93,.32);
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
}

.annotation-field span:nth-child(1) { left: 44%; top: 23%; transform: rotate(-10deg); }
.annotation-field span:nth-child(2) { left: 37%; top: 46%; transform: rotate(5deg); }
.annotation-field span:nth-child(3) { left: 56%; top: 54%; transform: rotate(-4deg); color: #D95D8C; }
.annotation-field span:nth-child(4) { left: 69%; top: 34%; transform: rotate(13deg); }
.annotation-field.separated span:nth-child(1) { transform: translate(-17vw, -8vh) rotate(-18deg); }
.annotation-field.separated span:nth-child(2) { transform: translate(4vw, 16vh) rotate(9deg); }
.annotation-field.separated span:nth-child(3) { transform: translate(16vw, -4vh) rotate(-9deg); }
.annotation-field.separated span:nth-child(4) { transform: translate(-6vw, 7vh) rotate(18deg); }

.marginalia-loop {
  position: absolute;
  right: 9vw;
  top: 22vh;
  width: 38vw;
  max-width: 520px;
  fill: none;
  stroke: #D95D8C;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .58;
  filter: drop-shadow(0 0 16px rgba(217,93,140,.32));
}

.rupture {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rupture-image {
  position: absolute;
  inset: 9vh 4vw;
  background:
    linear-gradient(90deg, rgba(16,26,46,.94), rgba(16,26,46,.55) 48%, rgba(217,93,140,.5) 49%, rgba(23,18,58,.9)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(242,232,213,.07) 22px 23px),
    radial-gradient(circle at 61% 32%, rgba(242,232,213,.2), transparent 14%),
    linear-gradient(135deg, #101A2E, #3A1748);
  clip-path: polygon(0 8%, 100% 0, 94% 92%, 5% 100%);
  filter: contrast(1.2) saturate(1.2);
  opacity: .76;
}

.rupture h2 {
  position: relative;
  max-width: 1000px;
  text-align: center;
  color: #F4C95D;
  transform: rotate(-3deg);
  text-shadow: 0 0 42px rgba(217,93,140,.62), 0 0 90px rgba(111,75,255,.34);
}

.loose-note { position: absolute; max-width: 320px; line-height: .95; }
.loose-one { left: 9vw; top: 20vh; transform: rotate(-11deg); }
.loose-two { right: 11vw; top: 28vh; transform: rotate(7deg); color: #F2E8D5; }
.loose-three { left: 24vw; bottom: 13vh; transform: rotate(4deg); color: #F4C95D; }

.instrument-disc {
  position: relative;
  width: min(54vw, 620px);
  height: min(54vw, 620px);
  border: 1px solid rgba(242,232,213,.25);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(111,75,255,.16), inset 0 0 90px rgba(7,6,17,.55);
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.instrument-disc.aligned { transform: rotate(32deg) scale(1.04); }
.instrument-disc span { position: absolute; inset: 12%; border: 1px dashed rgba(244,201,93,.28); border-radius: 50%; }
.instrument-disc span:nth-child(2) { inset: 28%; border-color: rgba(217,93,140,.32); }
.instrument-disc span:nth-child(3) { inset: 44%; border-color: rgba(111,75,255,.55); }
.instrument-copy { margin-left: -14vw; background: linear-gradient(90deg, rgba(7,6,17,.7), transparent); padding: 2rem; }

.coordinate-labels {
  position: absolute;
  right: 7vw;
  bottom: 12vh;
  display: grid;
  gap: .65rem;
  color: rgba(242,232,213,.62);
  font-size: .9rem;
}

.coordinate-labels span { opacity: .5; transition: opacity .3s ease, color .3s ease; }
.coordinate-labels.precise span { opacity: 1; color: #F4C95D; }

.index-stars {
  min-height: 120vh;
  background: radial-gradient(circle at 50% 55%, rgba(111,75,255,.18), transparent 38%);
}

.index-stars > .kicker,
.index-stars > h2,
.closing-note { position: relative; z-index: 3; max-width: 850px; }

.unresolved-map {
  position: absolute;
  inset: 16vh 5vw 10vh;
}

.unresolved {
  position: absolute;
  font-family: "Caveat", cursive;
  font-size: clamp(1.6rem, 3vw, 3rem);
  color: #F2E8D5;
  text-shadow: 0 0 20px rgba(111,75,255,.7);
  cursor: pointer;
}

.unresolved::before {
  content: "";
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: #F4C95D;
  box-shadow: 0 0 18px #F4C95D;
  vertical-align: middle;
}

.unresolved:hover { color: #F4C95D; }
.u1 { left: 12%; top: 22%; transform: rotate(-8deg); }
.u2 { left: 61%; top: 17%; transform: rotate(6deg); }
.u3 { left: 38%; top: 36%; transform: rotate(-2deg); }
.u4 { left: 78%; top: 48%; transform: rotate(11deg); }
.u5 { left: 9%; top: 62%; transform: rotate(4deg); }
.u6 { left: 50%; top: 69%; transform: rotate(-9deg); }
.u7 { left: 71%; top: 77%; transform: rotate(3deg); }
.u8 { left: 25%; top: 82%; transform: rotate(-5deg); }

.closing-note {
  position: absolute;
  left: 7vw;
  bottom: 7vh;
}

[data-scene] {
  opacity: .45;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s ease;
}

[data-scene].visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .cluster { display: block; padding-left: 1.5rem; padding-right: 1.5rem; }
  .evidence-image { width: 68vw; height: 82vw; margin: 8vh auto; }
  .instrument-disc { width: 82vw; height: 82vw; }
  .instrument-copy { margin-left: 0; }
  .pin-a { left: 72vw; }
  .footnote-comet { right: 5vw; }
  .annotation-field span { left: 10% !important; }
}