:root {
  --obsidian-ink: #101014;
  --vellum-mist: #F1ECE1;
  --aged-vellum: #DAD3C6;
  --reason-blue: #6EA6B8;
  --axiom-lilac: #B9A7D9;
  --socratic-amber: #D5A642;
  --slate-violet: #3C344A;
  --scene: 0;
  --pointer-x: 0;
  --pointer-y: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--slate-violet);
  background: var(--obsidian-ink);
  font-family: "Instrument Sans", sans-serif;
  overflow-x: hidden;
}

.observatory {
  min-height: 500vh;
  background:
    radial-gradient(circle at calc(52% + (var(--pointer-x) * 4%)) calc(18% + (var(--pointer-y) * 3%)), rgba(241, 236, 225, .92), rgba(241, 236, 225, .48) 23%, transparent 58%),
    radial-gradient(ellipse at 18% 75%, rgba(185, 167, 217, .45), transparent 44%),
    radial-gradient(ellipse at 82% 42%, rgba(110, 166, 184, .26), transparent 38%),
    linear-gradient(125deg, var(--vellum-mist), var(--aged-vellum) 34%, var(--slate-violet) 78%, var(--obsidian-ink));
}

.fixed-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 1200px;
  z-index: 1;
}

.edge-vignette {
  position: absolute;
  inset: -2%;
  background:
    radial-gradient(ellipse at 50% 36%, transparent 0 42%, rgba(16, 16, 20, .46) 74%, rgba(16, 16, 20, .95) 100%),
    linear-gradient(90deg, rgba(16, 16, 20, .55), transparent 18% 78%, rgba(16, 16, 20, .7));
  opacity: calc(.48 + (var(--scene) * .08));
  pointer-events: none;
}

.reason-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
  transform: translate3d(calc(var(--pointer-x) * -10px), calc(var(--pointer-y) * -8px), 0);
}

.thread-line,
.thread-shadow,
.thread-straight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thread-shadow {
  stroke: rgba(60, 52, 74, .2);
  stroke-width: 15;
  filter: blur(14px);
}

.thread-line {
  stroke: url(#threadGradient);
  stroke-width: 3;
  stroke-dasharray: 9 18;
  filter: url(#threadGlow);
  animation: threadDrift 7s linear infinite;
}

.thread-straight {
  stroke: var(--reason-blue);
  stroke-width: 4;
  opacity: 0;
  filter: url(#threadGlow);
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
}

.reason-table {
  position: absolute;
  width: min(76vw, 950px);
  height: min(48vw, 590px);
  left: 47%;
  top: 51%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(calc(-13deg + (var(--scene) * 4deg))) translate3d(calc(var(--pointer-x) * 18px), calc(var(--pointer-y) * 10px), 0);
  transition: transform .45s ease;
}

.table-ring,
.chalk-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.table-ring.outer {
  border: 1px solid rgba(241, 236, 225, .72);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(241, 236, 225, .38), rgba(110, 166, 184, .08) 40%, rgba(16, 16, 20, .04) 65%, rgba(185, 167, 217, .24)),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(60,52,74,.06));
  box-shadow: 0 38px 120px rgba(16, 16, 20, .34), inset 0 0 80px rgba(185, 167, 217, .24), inset 0 0 6px rgba(241, 236, 225, .9);
  backdrop-filter: blur(8px);
}

.table-ring.inner {
  inset: 17%;
  border: 1px solid rgba(110, 166, 184, .5);
  box-shadow: inset 0 0 40px rgba(110,166,184,.16), 0 0 26px rgba(110,166,184,.18);
}

.chalk-ring {
  border: 1px dashed rgba(60, 52, 74, .22);
  transform: scale(.72) rotate(24deg);
}

.ring-two {
  border-color: rgba(213, 166, 66, .34);
  transform: scale(.46) rotate(-18deg);
}

.frosted-lens {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 34%;
  transform: translate(-50%, -50%) rotateX(-62deg) rotateZ(10deg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(ellipse at 42% 35%, rgba(241,236,225,.82), rgba(185,167,217,.34) 64%, rgba(110,166,184,.12));
  border: 1px solid rgba(241,236,225,.7);
  box-shadow: inset 0 0 36px rgba(255,255,255,.4), 0 0 34px rgba(185,167,217,.24);
  backdrop-filter: blur(10px);
}

.brand-lens h1 {
  margin: 0;
  color: rgba(60, 52, 74, .82);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 500;
  line-height: .76;
  letter-spacing: -.06em;
  text-shadow: 0 1px 0 rgba(241,236,225,.9), 0 14px 28px rgba(16,16,20,.12);
}

.brand-lens p {
  position: absolute;
  bottom: 18%;
  width: 110%;
  margin: 0;
  color: rgba(60,52,74,.74);
  font-family: "Fraunces", serif;
  font-size: clamp(.85rem, 1.6vw, 1.2rem);
  letter-spacing: .02em;
}

.premise-stones span,
.syllogism-lens,
.balance-scale,
.counter-well,
.smoke,
.moth {
  position: absolute;
  transform-style: preserve-3d;
}

.stone {
  width: 82px;
  height: 58px;
  border-radius: 47% 53% 45% 55%;
  display: grid;
  place-items: center;
  color: var(--slate-violet);
  font-family: "Fraunces", serif;
  background: radial-gradient(circle at 32% 24%, rgba(241,236,225,.95), rgba(185,167,217,.68) 58%, rgba(110,166,184,.24));
  box-shadow: inset -10px -12px 24px rgba(60,52,74,.14), 0 22px 34px rgba(16,16,20,.18);
  opacity: calc(.88 - (var(--scene) * .06));
  transition: left .7s ease, top .7s ease, opacity .7s ease;
}

.stone em { font-style: normal; transform: rotateX(-62deg); }
.stone-a { left: calc(14% + (var(--scene) * 7%)); top: calc(31% + (var(--scene) * 2%)); }
.stone-b { left: calc(68% - (var(--scene) * 8%)); top: calc(23% + (var(--scene) * 5%)); }
.stone-c { left: calc(43% + (var(--scene) * 1%)); top: calc(70% - (var(--scene) * 7%)); }

.syllogism-lens {
  width: 150px;
  height: 210px;
  border-radius: 50%;
  border: 1px solid rgba(110,166,184,.55);
  background: linear-gradient(120deg, rgba(241,236,225,.16), rgba(185,167,217,.2), rgba(110,166,184,.12));
  box-shadow: inset 0 0 36px rgba(241,236,225,.28), 0 0 28px rgba(110,166,184,.2);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  color: rgba(60,52,74,.38);
  font-family: "Fraunces", serif;
  font-size: 3rem;
  transform: rotateX(-62deg) rotateZ(calc(var(--scene) * 14deg));
}

.lens-a { left: 55%; top: 7%; }
.lens-b { left: 22%; top: 54%; transform: rotateX(-62deg) rotateZ(calc(-18deg - (var(--scene) * 10deg))); }
.lens-c { left: 73%; top: 53%; transform: rotateX(-62deg) rotateZ(calc(20deg + (var(--scene) * 8deg))); }

.balance-scale {
  left: 38%; top: 18%; width: 190px; height: 86px;
  opacity: calc(.2 + min(var(--scene), 2) * .22);
  transform: rotateX(-62deg);
}
.balance-scale i { position: absolute; left: 50%; top: 0; width: 2px; height: 82px; background: var(--reason-blue); }
.balance-scale:before { content: ""; position: absolute; left: 18%; top: 22px; width: 68%; height: 2px; background: linear-gradient(90deg, transparent, var(--reason-blue), transparent); }
.balance-scale b { position: absolute; top: 34px; width: 56px; height: 17px; border: 1px solid rgba(241,236,225,.55); border-radius: 50%; }
.balance-scale b:nth-child(2) { left: 7%; }
.balance-scale b:nth-child(3) { right: 7%; }

.counter-well {
  left: 59%; top: 48%; width: 172px; height: 172px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--obsidian-ink) 22%, rgba(60,52,74,.86) 48%, rgba(185,167,217,.16) 70%, transparent 72%);
  opacity: calc(max(0, var(--scene) - 2) * .42);
  transform: rotateX(-62deg) scale(calc(.72 + max(0, var(--scene) - 2) * .1));
  box-shadow: inset 0 0 42px #101014, 0 0 40px rgba(16,16,20,.45);
}

.counter-well span { position: absolute; inset: 42%; border-radius: 50%; background: var(--socratic-amber); box-shadow: 0 0 24px var(--socratic-amber); }

.smoke {
  width: 230px; height: 120px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(241,236,225,.34), rgba(185,167,217,.14) 48%, transparent 72%);
  filter: blur(18px);
  animation: smokeClear 8s ease-in-out infinite alternate;
}
.smoke-one { left: 12%; top: 12%; }
.smoke-two { left: 63%; top: 18%; animation-delay: -3s; }

.moth {
  width: 18px; height: 12px;
  background: var(--socratic-amber);
  clip-path: polygon(50% 0, 100% 45%, 58% 58%, 50% 100%, 42% 58%, 0 45%);
  opacity: calc(max(0, var(--scene) - 2) * .28);
  transform: rotateX(-62deg);
  box-shadow: 0 0 14px rgba(213,166,66,.7);
  animation: mothCircle 5s linear infinite;
}
.moth-one { left: 72%; top: 36%; }
.moth-two { left: 67%; top: 65%; animation-delay: -1.6s; }
.moth-three { left: 82%; top: 52%; animation-delay: -3.2s; }

.crystal-sentence {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: min(82vw, 980px);
  text-align: center;
  opacity: 0;
  filter: blur(12px);
  transition: opacity .8s ease, filter .8s ease, transform .8s ease;
}
.crystal-sentence span {
  font-family: "Fraunces", serif;
  font-size: clamp(2.5rem, 7vw, 7.6rem);
  line-height: .92;
  color: var(--vellum-mist);
  text-shadow: 0 0 22px rgba(110,166,184,.72), 0 0 54px rgba(185,167,217,.55);
}

.premise-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  z-index: 5;
}

.nav-gem {
  width: 18px; height: 18px; padding: 0;
  border: 1px solid rgba(241,236,225,.55);
  background: rgba(185,167,217,.36);
  transform: rotate(45deg);
  cursor: pointer;
  box-shadow: inset 0 0 10px rgba(241,236,225,.22), 0 0 0 rgba(213,166,66,0);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.nav-gem.active { background: var(--socratic-amber); box-shadow: 0 0 24px rgba(213,166,66,.62); transform: rotate(45deg) scale(1.25); }
.nav-gem span { position: absolute; right: 28px; top: -1px; transform: rotate(-45deg); opacity: 0; color: var(--vellum-mist); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: opacity .25s ease; }
.nav-gem:hover span { opacity: .82; }

.chambers { position: relative; z-index: 2; }
.chamber { min-height: 100vh; position: relative; }

.vellum-note {
  position: absolute;
  width: min(36vw, 470px);
  padding: 28px 32px;
  color: var(--slate-violet);
  background: linear-gradient(135deg, rgba(241,236,225,.72), rgba(218,211,198,.5));
  border: 1px solid rgba(241,236,225,.64);
  box-shadow: 0 24px 70px rgba(16,16,20,.16), inset 0 0 25px rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  transform: rotate(-3deg);
}
.note-left { left: 8vw; top: 18vh; }
.note-right { right: 10vw; top: 20vh; transform: rotate(4deg); }
.low { top: 55vh; }
.tilted { transform: rotate(7deg); }
.dark-note { background: linear-gradient(135deg, rgba(60,52,74,.76), rgba(16,16,20,.62)); color: var(--vellum-mist); border-color: rgba(185,167,217,.3); }
.final-note { left: 50%; top: 12vh; transform: translateX(-50%) rotate(-1deg); text-align: center; opacity: calc(1 - max(0, var(--scene) - 3) * .55); }

.engraved {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--socratic-amber);
  font-family: "Fraunces", serif;
  font-size: .86rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vellum-note h2 {
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.045em;
}
.vellum-note p { margin: 0; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.65; }

.orbit-note,
.orbit-mark {
  position: absolute;
  margin: 0;
  font-family: "Fraunces", serif;
  color: rgba(60,52,74,.58);
  text-shadow: 0 1px 0 rgba(241,236,225,.7);
}
.orbit-note { font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }
.orbit-mark { font-size: 4rem; color: rgba(110,166,184,.28); }
.orbit-one { left: 67vw; top: 22vh; } .mark-one { left: 21vw; top: 70vh; }
.orbit-refraction { left: 54vw; top: 82vh; color: rgba(110,166,184,.58); }
.orbit-two { left: 11vw; top: 65vh; } .mark-two { left: 73vw; top: 14vh; }
.orbit-three { left: 70vw; top: 67vh; } .mark-three { left: 18vw; top: 20vh; }
.orbit-four { left: 15vw; top: 18vh; color: rgba(241,236,225,.72); } .mark-four { left: 78vw; top: 72vh; color: rgba(213,166,66,.42); }
.orbit-five { left: 50%; top: 78vh; transform: translateX(-50%); color: rgba(241,236,225,.8); }

body.scene-4 .brand-lens,
body.scene-4 .premise-stones,
body.scene-4 .syllogism-lens,
body.scene-4 .balance-scale,
body.scene-4 .smoke { opacity: .08; }
body.scene-4 .crystal-sentence { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
body.scene-4 .thread-line { opacity: .08; }
body.scene-4 .thread-straight { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s ease, opacity .6s ease; }
body.scene-3 .observatory { background-color: var(--obsidian-ink); }

@keyframes threadDrift { to { stroke-dashoffset: -108; } }
@keyframes smokeClear { from { transform: translate3d(-16px, 6px, 0) rotateX(-62deg); opacity: .62; } to { transform: translate3d(28px, -18px, 0) rotateX(-62deg); opacity: .18; } }
@keyframes mothCircle { from { transform: rotateX(-62deg) rotate(0deg) translateX(44px) rotate(0deg); } to { transform: rotateX(-62deg) rotate(360deg) translateX(44px) rotate(-360deg); } }

@media (max-width: 760px) {
  .reason-table { width: 105vw; height: 70vw; left: 46%; top: 48%; }
  .vellum-note { width: 78vw; left: 8vw; right: auto; top: 12vh; padding: 22px; }
  .note-right, .note-left, .low, .final-note { left: 8vw; right: auto; top: 12vh; transform: rotate(-2deg); }
  .premise-nav { right: 14px; }
  .brand-lens p { bottom: 10%; }
  .syllogism-lens { width: 100px; height: 140px; }
}