:root {
  --obsidian: #07080D;
  --brass: #D8B66A;
  --emerald: #0E6F5C;
  --amber: #F2A43A;
  --oxblood: #3A1018;
  --bone: #F4E8CF;
  --steel: #7F8B96;
  --deco-display: "Cinzel Decorative", "Didot", "Bodoni 72 Smallcaps", Georgia, serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, serif;
  --sans: "Commissioner", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone);
  font-family: var(--sans);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(14, 111, 92, .23), transparent 30rem),
    radial-gradient(circle at 12% 38%, rgba(58, 16, 24, .62), transparent 28rem),
    linear-gradient(90deg, rgba(216, 182, 106, .07) 1px, transparent 1px),
    linear-gradient(var(--obsidian), #030407 46%, var(--obsidian));
  background-size: auto, auto, 4.2rem 4.2rem, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, transparent 0 7.5vw, rgba(216, 182, 106, .06) 7.55vw 7.65vw, transparent 7.75vw 15vw),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .52) 100%);
  mix-blend-mode: screen;
}

.opening-door {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--obsidian);
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: doorFade 4.2s ease forwards;
}

.door-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;
  background:
    linear-gradient(90deg, rgba(216, 182, 106, .16), transparent 12%, transparent 88%, rgba(216, 182, 106, .12)),
    repeating-linear-gradient(0deg, rgba(244, 232, 207, .03) 0 1px, transparent 1px 26px),
    linear-gradient(135deg, #030407, #0c0d13 44%, #020306);
  border: 1px solid rgba(216, 182, 106, .34);
}

.door-left { left: 0; animation: partLeft 3s 1.15s cubic-bezier(.65, 0, .18, 1) forwards; }
.door-right { right: 0; animation: partRight 3s 1.15s cubic-bezier(.65, 0, .18, 1) forwards; }

.scan-line {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 0;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--amber);
  box-shadow: 0 0 22px var(--amber), 0 0 60px rgba(242, 164, 58, .65);
  animation: scanUp 1.65s ease-in-out forwards;
}

.unlock-seal {
  position: relative;
  z-index: 2;
  width: min(40vw, 21rem);
  aspect-ratio: 1;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brass);
  background: radial-gradient(circle, rgba(216, 182, 106, .13), rgba(7, 8, 13, .92) 55%);
  box-shadow: inset 0 0 0 1.1rem rgba(216, 182, 106, .05), 0 0 44px rgba(242, 164, 58, .22);
  animation: sealUnlock 2.4s ease forwards;
}

.unlock-seal span { font-family: var(--deco-display); font-size: clamp(4rem, 11vw, 8rem); letter-spacing: .06em; }
.unlock-seal small { position: absolute; bottom: 24%; font-size: .62rem; letter-spacing: .42em; color: var(--steel); }

.tower-shell { position: relative; isolation: isolate; }

.edge-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 4.5rem;
  z-index: 4;
  pointer-events: none;
  border-inline: 1px solid rgba(216, 182, 106, .26);
  background: linear-gradient(90deg, rgba(216, 182, 106, .08), transparent, rgba(216, 182, 106, .04));
}
.rail-left { left: 0; }
.rail-right { right: 0; }
.edge-rail span { display: block; height: 10rem; margin: 7rem 1.75rem; border-left: 1px solid var(--brass); opacity: .45; }

.central-spine {
  position: fixed;
  top: 0;
  left: 50%;
  height: 100vh;
  width: 4px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(var(--brass), var(--emerald), var(--amber));
  box-shadow: 0 0 30px rgba(216, 182, 106, .5);
}

.spine-light {
  position: absolute;
  inset: 0 -16px;
  background: linear-gradient(180deg, transparent, rgba(242, 164, 58, .6), transparent);
  height: 22vh;
  animation: spineScan 5.5s ease-in-out infinite;
}

.traveling-wordmark {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translate(-50%, 0) rotate(-90deg);
  transform-origin: center;
  padding: .45rem 1.15rem;
  white-space: nowrap;
  font-family: var(--deco-display);
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  letter-spacing: .24em;
  color: var(--obsidian);
  background: linear-gradient(90deg, var(--brass), var(--bone), var(--amber));
  border: 1px solid var(--brass);
  box-shadow: 0 0 24px rgba(216, 182, 106, .34);
}

.elevator-gauge {
  position: fixed;
  right: 5.4rem;
  top: 10vh;
  bottom: 10vh;
  z-index: 8;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .9rem;
  color: var(--steel);
  font-size: .65rem;
  letter-spacing: .25em;
}
.gauge-label { writing-mode: vertical-rl; color: var(--brass); }
.gauge-track { position: relative; width: 2px; background: rgba(216, 182, 106, .35); justify-self: center; }
.gauge-needle { position: absolute; left: 50%; top: 0; width: 2.2rem; height: 2px; background: var(--amber); transform: translateX(-50%); box-shadow: 0 0 16px var(--amber); transition: top .16s linear; }
.floor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.floor-list li { opacity: .45; transition: color .25s, opacity .25s; }
.floor-list li.active { color: var(--amber); opacity: 1; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: 13vh clamp(6rem, 10vw, 10rem);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.chapter-number {
  position: absolute;
  top: 8vh;
  left: clamp(6rem, 11vw, 12rem);
  font-family: var(--deco-display);
  font-size: clamp(5rem, 13vw, 15rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 182, 106, .38);
  opacity: .55;
}

.eyebrow {
  margin: 0 0 .85rem;
  color: var(--amber);
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: .92;
  color: var(--bone);
}
h1 { font-size: clamp(4rem, 10vw, 10.5rem); max-width: 9ch; }
h2 { font-size: clamp(3.2rem, 7vw, 7.6rem); max-width: 8.8ch; }
p { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.75; color: rgba(244, 232, 207, .76); }

.deco-plate, .fan-frame, .lift-cabin, .observatory-caption, .vault-certificate {
  position: relative;
  z-index: 3;
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgba(216, 182, 106, .55);
  background:
    linear-gradient(135deg, rgba(216, 182, 106, .08), transparent 35%),
    linear-gradient(180deg, rgba(7, 8, 13, .88), rgba(58, 16, 24, .46));
  box-shadow: inset 0 0 0 1px rgba(244, 232, 207, .05), 0 2rem 5rem rgba(0, 0, 0, .45);
  clip-path: polygon(4rem 0, 100% 0, 100% calc(100% - 4rem), calc(100% - 4rem) 100%, 0 100%, 0 4rem);
}

.threshold { grid-template-columns: 1fr minmax(16rem, 24rem); gap: 8vw; }
.threshold-plate { max-width: 54rem; margin-left: 4vw; }
.caption { max-width: 38rem; }
.sunburst {
  position: absolute;
  width: 80vw;
  height: 80vw;
  left: -20vw;
  top: -28vw;
  background: repeating-conic-gradient(from -20deg, rgba(216, 182, 106, .18) 0 5deg, transparent 5deg 11deg);
  border-radius: 50%;
  opacity: .65;
}
.keyhole-window {
  position: relative;
  z-index: 3;
  width: min(26vw, 22rem);
  height: min(58vh, 36rem);
  justify-self: end;
  clip-path: polygon(35% 0, 65% 0, 65% 22%, 86% 36%, 86% 100%, 14% 100%, 14% 36%, 35% 22%);
  border: 1px solid var(--brass);
  background: radial-gradient(circle at 50% 28%, rgba(14, 111, 92, .8), rgba(7, 8, 13, .6) 38%, #020306);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 50px rgba(14, 111, 92, .36), 0 0 45px rgba(14, 111, 92, .22);
}
.keyhole-window span { font-family: var(--deco-display); color: var(--brass); font-size: 4rem; letter-spacing: .08em; }
.keyhole-glass { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(244, 232, 207, .18) 45%, transparent 60%); animation: glassSweep 4s infinite; }
.microtext { position: absolute; bottom: 8vh; left: 12vw; color: var(--steel); font-size: .65rem; letter-spacing: .32em; }

.registry { grid-template-columns: minmax(18rem, 36rem) 1fr; gap: 8vw; }
.drawer-stack { position: relative; z-index: 3; display: grid; gap: 1.2rem; }
.ledger-drawer {
  min-height: 7rem;
  padding: 1.35rem 1.6rem;
  border: 1px solid rgba(216, 182, 106, .62);
  background: linear-gradient(90deg, rgba(244, 232, 207, .92), rgba(216, 182, 106, .84));
  color: var(--obsidian);
  transform: translateX(-18vw);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
  box-shadow: .9rem .9rem 0 rgba(58, 16, 24, .48);
}
.ledger-drawer:nth-child(2) { margin-left: 3rem; transition-delay: .08s; }
.ledger-drawer:nth-child(3) { margin-left: 6rem; transition-delay: .16s; }
.chamber.active .ledger-drawer { transform: translateX(0); }
.ledger-drawer span { display: block; font-family: var(--serif); font-size: 1.8rem; }
.ledger-drawer b { display: block; margin-top: .55rem; font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; }
.fan-frame { align-self: end; max-width: 42rem; clip-path: polygon(0 12%, 12% 0, 88% 0, 100% 12%, 100% 100%, 0 100%); }
.registry-plate { position: absolute; right: 13vw; top: 14vh; border-block: 1px solid var(--brass); padding: .8rem 1.2rem; color: var(--brass); letter-spacing: .35em; font-size: .7rem; }

.cipher { grid-template-columns: 1fr 1fr; gap: 8vw; }
.lift-cables { position: absolute; inset: 0; background: linear-gradient(72deg, transparent 49.8%, rgba(216, 182, 106, .32) 50%, transparent 50.2%), linear-gradient(108deg, transparent 49.8%, rgba(216, 182, 106, .22) 50%, transparent 50.2%); }
.lift-cabin { max-width: 43rem; margin-left: auto; transform: translateY(9vh); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.chamber.active .lift-cabin { transform: translateY(0); }
.tick-window { margin-top: 2rem; position: relative; height: 3rem; border: 1px solid rgba(216, 182, 106, .55); background: repeating-linear-gradient(90deg, rgba(216, 182, 106, .2) 0 2px, transparent 2px 2rem); }
.tick-window span { position: absolute; top: -.35rem; left: 5%; width: .55rem; height: 3.7rem; background: var(--amber); box-shadow: 0 0 18px var(--amber); transition: left .2s linear; }
.shutter-wheel { position: relative; z-index: 2; width: min(32vw, 25rem); aspect-ratio: 1; justify-self: center; border-radius: 50%; border: 1px solid var(--brass); animation: slowRotate 14s linear infinite; }
.shutter-wheel i { position: absolute; inset: 48% 8%; height: 1px; background: var(--brass); transform: rotate(calc(var(--i, 0) * 30deg)); transform-origin: center; }
.shutter-wheel i:nth-child(1) { --i: 0; } .shutter-wheel i:nth-child(2) { --i: 1; } .shutter-wheel i:nth-child(3) { --i: 2; } .shutter-wheel i:nth-child(4) { --i: 3; } .shutter-wheel i:nth-child(5) { --i: 4; } .shutter-wheel i:nth-child(6) { --i: 5; }

.observatory { grid-template-columns: minmax(20rem, 38rem) 1fr; gap: 8vw; }
.emerald-lens { position: relative; z-index: 3; width: min(42vw, 34rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--brass); display: grid; place-items: center; background: radial-gradient(circle, rgba(14, 111, 92, .85), rgba(14, 111, 92, .22) 43%, rgba(7, 8, 13, .7) 64%); box-shadow: inset 0 0 4rem rgba(14, 111, 92, .72), 0 0 5rem rgba(14, 111, 92, .28); }
.emerald-lens::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: repeating-conic-gradient(rgba(244, 232, 207, .18) 0 2deg, transparent 2deg 8deg); animation: slowRotate 24s linear infinite reverse; }
.lens-core { width: 33%; aspect-ratio: 1; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 30px var(--emerald), 0 0 90px rgba(14, 111, 92, .8); }
.observatory-caption { max-width: 42rem; justify-self: end; }
.wire-map { position: absolute; inset: 18vh 10vw; pointer-events: none; }
.wire-map span { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); transform-origin: left; opacity: .65; }
.wire-map span:nth-child(1) { left: 5%; top: 20%; width: 55%; transform: rotate(16deg); }
.wire-map span:nth-child(2) { left: 42%; top: 55%; width: 44%; transform: rotate(-20deg); }
.wire-map span:nth-child(3) { left: 12%; top: 72%; width: 72%; transform: rotate(5deg); }
.wire-map span:nth-child(4) { left: 60%; top: 12%; width: 24%; transform: rotate(72deg); }

.vault { grid-template-columns: 1fr minmax(20rem, 41rem); gap: 8vw; }
.vault-door { position: relative; z-index: 2; width: min(38vw, 32rem); aspect-ratio: 1; justify-self: center; border-radius: 50%; border: 1px solid var(--brass); background: radial-gradient(circle, rgba(216, 182, 106, .2), rgba(58, 16, 24, .55) 36%, var(--obsidian) 68%), repeating-conic-gradient(rgba(216, 182, 106, .16) 0 6deg, transparent 6deg 12deg); display: grid; place-items: center; }
.seal-medallion { position: relative; z-index: 3; width: 44%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brass), var(--bone), var(--amber)); color: var(--obsidian); font-family: var(--deco-display); font-size: clamp(2.6rem, 6vw, 5rem); box-shadow: 0 0 3rem rgba(216, 182, 106, .38); transition: transform .2s linear; }
.guilloche { position: absolute; inset: 6%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 9px, rgba(216, 182, 106, .18) 10px 11px), repeating-conic-gradient(transparent 0 8deg, rgba(244, 232, 207, .08) 8deg 9deg); }
.vault-certificate { background: linear-gradient(145deg, rgba(244, 232, 207, .93), rgba(216, 182, 106, .88)); color: var(--obsidian); }
.vault-certificate h2, .vault-certificate p { color: var(--obsidian); }
.vault-certificate .eyebrow { color: var(--oxblood); }
.ribbon { margin-top: 2rem; padding: .85rem 1rem; background: var(--oxblood); color: var(--bone); letter-spacing: .23em; font-size: .68rem; text-align: center; }

.beacon { min-height: 115vh; grid-template-columns: 1fr; place-items: center; text-align: center; }
.beacon-tube { position: relative; width: min(22vw, 14rem); height: min(42vh, 24rem); border: 1px solid var(--brass); border-radius: 8rem 8rem 1rem 1rem; background: linear-gradient(90deg, rgba(244, 232, 207, .09), rgba(14, 111, 92, .25), rgba(244, 232, 207, .04)); box-shadow: inset 0 0 3rem rgba(14, 111, 92, .38); }
.beacon-light { position: absolute; left: 50%; bottom: 16%; width: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--amber); box-shadow: 0 0 2rem var(--amber), 0 0 8rem rgba(242, 164, 58, .9); animation: beaconPulse 2.6s ease-in-out infinite; }
.net-plaque { max-width: 52rem; margin-top: -2rem; }
.net-plaque h2 { max-width: none; }
.final-stamp { display: inline-block; margin-top: 1.5rem; border: 1px solid var(--brass); padding: .9rem 1.4rem; color: var(--amber); letter-spacing: .24em; font-size: .72rem; }

@keyframes scanUp { to { height: 100vh; } }
@keyframes partLeft { to { transform: translateX(-101%); } }
@keyframes partRight { to { transform: translateX(101%); } }
@keyframes doorFade { 0%, 78% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
@keyframes sealUnlock { 0% { transform: scale(.82) rotate(0deg); opacity: .35; } 45% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(1.08) rotate(42deg); opacity: 0; } }
@keyframes spineScan { 0% { transform: translateY(-25vh); } 50% { transform: translateY(100vh); } 100% { transform: translateY(-25vh); } }
@keyframes glassSweep { 0%, 35% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes beaconPulse { 0%, 100% { transform: translateX(-50%) scale(.85); opacity: .62; } 50% { transform: translateX(-50%) scale(1.12); opacity: 1; } }

@media (max-width: 880px) {
  .edge-rail, .elevator-gauge { display: none; }
  .central-spine { left: 1.2rem; }
  .traveling-wordmark { display: none; }
  .chamber { padding: 9vh 2rem 9vh 3rem; grid-template-columns: 1fr; gap: 3rem; }
  .chapter-number { left: 3rem; top: 5vh; }
  .threshold-plate { margin-left: 0; }
  .keyhole-window, .emerald-lens, .vault-door { width: min(78vw, 24rem); justify-self: center; }
  .ledger-drawer, .ledger-drawer:nth-child(2), .ledger-drawer:nth-child(3) { margin-left: 0; }
  .beacon-tube { width: 10rem; }
}