:root {
  /* Compliance tokens from stamped design: IntersectionObserver assembly but primary system */
  --bg: #0a0614;
  --panel: #12052e;
  --cyan: #00e5ff;
  --magenta: #ff00aa;
  --green: #39ff14;
  --lavender: #d4c9e8;
  --muted: #7b6a94;
  --gold: #c9a84c;
  --rose: #ff3366;
  --violet: #2a1548;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--lavender);
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 0, 170, 0.13), transparent 32vw),
    radial-gradient(circle at 78% 75%, rgba(0, 229, 255, 0.11), transparent 34vw),
    linear-gradient(180deg, #0a0614 0%, #12052e 48%, #0a0614 100%);
  font-family: "Libre Baskerville", Baskerville, Georgia, serif;
}

.cabinet {
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.scanline-field,
.glitch-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

.scanline-field {
  opacity: 0.65;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 229, 255, 0.035) 2px 3px, transparent 3px 5px);
  animation: scan-drift 18s linear infinite;
  mix-blend-mode: screen;
}

.glitch-veil {
  z-index: 95;
  opacity: 0;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.18), rgba(255, 0, 170, 0.14));
  animation: veil-glitch 13s steps(1, end) infinite;
}

.chamber {
  min-height: 100vh;
  scroll-snap-align: start;
  position: relative;
  display: grid;
  place-items: center start;
  padding: 7vh 10vw 9vh 8vw;
  overflow: hidden;
  transform-style: preserve-3d;
  isolation: isolate;
}

.depth-grid {
  position: absolute;
  inset: -20%;
  z-index: -3;
  transform: translateZ(-200px) scale(1.17);
  background:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(42, 21, 72, 0.75), transparent 48%);
  background-size: 70px 70px, 70px 70px, 100% 100%;
  transform-origin: 50% 50%;
  animation: grid-float 42s linear infinite;
}

.depth-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 45deg at 50% 50%, transparent, rgba(0, 229, 255, 0.06), transparent 28%, rgba(255, 0, 170, 0.04), transparent 55%);
  opacity: 0.7;
}

.specimen-panel {
  position: relative;
  z-index: 3;
  width: min(68vw, 980px);
  min-height: 58vh;
  padding: clamp(2rem, 5vw, 4.7rem);
  background: rgba(18, 5, 46, 0.92);
  border: 1px solid var(--magenta);
  box-shadow:
    inset 0 0 42px rgba(42, 21, 72, 0.72),
    0 0 0 1px rgba(201, 168, 76, 0.28),
    0 32px 90px rgba(0, 0, 0, 0.56),
    0 0 46px rgba(255, 0, 170, 0.12);
  transform: translateZ(0);
}

.specimen-panel::before,
.specimen-panel::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(201, 168, 76, 0.34);
  pointer-events: none;
}

.specimen-panel::after {
  inset: 26px;
  border-color: rgba(0, 229, 255, 0.24);
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.35));
}

.oval-panel { border-radius: 44% 56% 48% 52% / 18% 22% 18% 20%; }
.broken-panel { clip-path: polygon(0 8%, 32% 8%, 50% 0, 68% 8%, 100% 8%, 100% 100%, 0 100%); }
.arch-panel { border-radius: 46% 46% 0 0 / 24% 24% 0 0; }
.final-panel { box-shadow: inset 0 0 58px rgba(57, 255, 20, 0.08), 0 32px 90px rgba(0, 0, 0, 0.58), 0 0 52px rgba(0, 229, 255, 0.15); }

.plaque {
  margin: 0 0 1.15rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.85rem, 1.8vw, 1.2rem);
  color: var(--magenta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255, 0, 170, 0.55);
}

.title {
  margin: 0 0 1.6rem;
  max-width: 9ch;
  font-family: "Stint Ultra Condensed", Impact, "Arial Narrow", serif;
  font-weight: 400;
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: 0.86;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.6), 0 0 40px rgba(0, 229, 255, 0.2);
  animation: title-glitch 17s steps(1, end) infinite;
}

.assemble {
  max-width: 11ch;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}

.chamber.in-view .assemble { animation: type-open 2.6s steps(16, end) 0.6s forwards, title-glitch 17s steps(1, end) infinite 4s; }

.metric {
  margin: 1rem 0 0.9rem;
  font-family: "Azeret Mono", "Courier New", monospace;
  color: var(--green);
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(57, 255, 20, 0.45);
}

.data-number {
  display: inline-block;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 0.92;
  padding: 0 0.16em 0.08em;
  background: rgba(57, 255, 20, 0.05);
  border-bottom: 1px solid rgba(57, 255, 20, 0.3);
}

.metric small {
  display: inline-block;
  margin-left: 0.8rem;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  color: var(--green);
}

.severity {
  width: min(80%, 700px);
  height: 4px;
  margin: 0.4rem 0 1.8rem;
  background: rgba(57, 255, 20, 0.12);
  border: 1px solid rgba(57, 255, 20, 0.28);
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.16);
}

.severity span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.72);
  transition: width 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.chamber.in-view .severity span { width: var(--severity, 70%); }

p {
  max-width: 58ch;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.78;
  color: var(--lavender);
}

.caption {
  color: var(--muted);
  font-style: italic;
}

.ornate-frame {
  position: absolute;
  left: 2vw;
  top: 50%;
  width: min(92vw, 1180px);
  height: min(78vh, 760px);
  z-index: 7;
  transform: translateY(-50%) translateZ(100px) scale(0.92);
  pointer-events: none;
  color: var(--cyan);
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 16px rgba(0, 229, 255, 0.22));
}

.frame-medallion,
.frame-arch { color: var(--gold); filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.85)) drop-shadow(0 0 18px rgba(255, 0, 170, 0.14)); }
.frame-pediment { color: var(--magenta); filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 18px rgba(255, 0, 170, 0.22)); }
.frame-reliquary { color: var(--cyan); }

.ornate-frame path,
.ornate-frame ellipse,
.ornate-frame circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.ornate-frame .ornament { stroke: var(--gold); stroke-width: 1.3; }
.ornate-frame .flourish { stroke-width: 1.5; }

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.chamber.in-view .draw {
  animation: draw-frame 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.rosette {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: rosette-spin 120s linear infinite;
}

.chamber.in-view .rosette {
  animation: rosette-appear 0.8s ease 2.35s forwards, rosette-spin 120s linear infinite;
}

.rosette:hover { animation-duration: 18s; filter: drop-shadow(0 0 12px currentColor); }

.cyanotype {
  position: absolute;
  right: 8vw;
  top: 18vh;
  width: clamp(190px, 24vw, 360px);
  height: clamp(190px, 24vw, 360px);
  z-index: 2;
  opacity: 0.52;
  mix-blend-mode: screen;
  border: 1px solid rgba(0, 229, 255, 0.5);
  filter: grayscale(1) drop-shadow(0 0 28px rgba(0, 229, 255, 0.25));
  animation: cyanotype-drift 20s ease-in-out infinite alternate, title-glitch 19s steps(1, end) infinite;
}

.orb-atmosphere {
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 44%, transparent 0 20%, rgba(0, 229, 255, 0.45) 21% 22%, transparent 23%),
    repeating-radial-gradient(circle at 45% 45%, rgba(0, 229, 255, 0.25) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, #0a0614, #00e5ff);
}

.forest-map {
  clip-path: polygon(10% 16%, 90% 2%, 82% 90%, 18% 100%);
  background:
    radial-gradient(circle at 35% 30%, #00e5ff 0 2%, transparent 3% 8%, rgba(0,229,255,.45) 9% 10%, transparent 11%),
    repeating-linear-gradient(35deg, rgba(0,229,255,.28) 0 6px, transparent 6px 18px),
    linear-gradient(135deg, #0a0614, #00e5ff);
}

.ocean-edge {
  border-radius: 48% 52% 45% 55%;
  background:
    repeating-linear-gradient(170deg, rgba(0,229,255,.32) 0 4px, transparent 4px 21px),
    radial-gradient(circle at 75% 30%, rgba(255,0,170,.4), transparent 26%),
    linear-gradient(135deg, #0a0614, #00e5ff);
}

.threshold-map {
  clip-path: polygon(50% 0, 94% 24%, 82% 86%, 50% 100%, 18% 86%, 6% 24%);
  background:
    conic-gradient(from 90deg, #00e5ff, transparent, #39ff14, transparent, #00e5ff),
    repeating-linear-gradient(90deg, rgba(57,255,20,.24) 0 3px, transparent 3px 15px),
    #0a0614;
}

.corruption-block {
  position: absolute;
  right: clamp(2rem, 10vw, 12rem);
  bottom: clamp(5rem, 12vh, 9rem);
  z-index: 8;
  padding: 0.55rem 0.8rem;
  font-family: "Azeret Mono", "Courier New", monospace;
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  color: var(--green);
  background: rgba(57, 255, 20, 0.05);
  border: 1px solid rgba(57, 255, 20, 0.28);
  opacity: 0.76;
  animation: corrupt-flicker 7s steps(1, end) infinite;
}

.ornate-rail {
  position: fixed;
  right: 0;
  top: 0;
  width: 56px;
  height: 100vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.35rem;
  align-items: center;
  background: linear-gradient(90deg, rgba(10, 6, 20, 0.28), rgba(201, 168, 76, 0.16), rgba(10, 6, 20, 0.82));
  border-left: 1px solid var(--gold);
  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.35), inset 1px 0 rgba(0, 229, 255, 0.24);
}

.ornate-rail::before,
.ornate-rail::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  filter: drop-shadow(0 0 4px var(--gold));
}

.ornate-rail::before { top: 1.4rem; }
.ornate-rail::after { bottom: 1.4rem; }

.rail-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.42);
  background: rgba(18, 5, 46, 0.86);
  transition: color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.rail-mark.active,
.rail-mark:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  transform: translateX(-3px);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.46), inset 0 0 16px rgba(0, 229, 255, 0.1);
}

.ticker-tape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  z-index: 110;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--gold);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
}

.ticker-tape:hover .ticker-track { animation-play-state: paused; }

.ticker-track span {
  white-space: nowrap;
  padding-right: 2rem;
  font-family: "Azeret Mono", "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 48px;
  letter-spacing: 0.04em;
  color: var(--green);
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.45);
}

@keyframes scan-drift { to { background-position: 0 160px; } }
@keyframes grid-float { to { background-position: 0 70px, 70px 0, 0 0; } }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
@keyframes type-open { to { width: 100%; } }

@keyframes draw-frame {
  from { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
  to { stroke-dasharray: 1200; stroke-dashoffset: 0; }
}

@keyframes rosette-appear { to { opacity: 1; } }
@keyframes rosette-spin { to { transform: rotate(360deg); } }

@keyframes title-glitch {
  0%, 92%, 100% { clip-path: inset(0 0 0 0); transform: none; text-shadow: 0 0 12px rgba(0,229,255,.6), 0 0 40px rgba(0,229,255,.2); }
  93% { clip-path: inset(20% 0 60% 0); transform: translateX(3px); text-shadow: -3px 0 var(--cyan), 3px 0 var(--magenta); }
  94% { clip-path: inset(55% 0 10% 0); transform: translateX(-2px); }
  95% { clip-path: inset(0 0 0 0); transform: none; }
  96% { clip-path: inset(70% 0 5% 0); transform: translateX(4px); text-shadow: -2px 0 var(--rose), 2px 0 var(--cyan); }
  97% { clip-path: inset(0 0 0 0); transform: none; }
}

@keyframes veil-glitch {
  0%, 91%, 100% { opacity: 0; clip-path: inset(0); transform: none; }
  92% { opacity: 0.55; clip-path: inset(22% 0 70% 0); transform: translateX(3px); }
  93% { opacity: 0; }
  96% { opacity: 0.38; clip-path: inset(64% 0 27% 0); transform: translateX(-4px); }
  97% { opacity: 0; }
}

@keyframes corrupt-flicker {
  0%, 88%, 100% { opacity: 0.72; transform: none; color: var(--green); }
  89% { opacity: 1; transform: translateX(2px); color: var(--cyan); }
  90% { opacity: 0.2; transform: translateX(-1px); color: var(--magenta); }
  91% { opacity: 0.78; transform: none; color: var(--green); }
}

@keyframes cyanotype-drift {
  from { transform: translate3d(0, 0, -40px) rotate(-2deg); }
  to { transform: translate3d(-1.4rem, 1rem, -40px) rotate(2deg); }
}

@media (max-width: 768px) {
  html { scroll-snap-type: y mandatory; }
  .chamber {
    padding: 6vh 1rem 7.5rem;
    place-items: center;
  }
  .specimen-panel {
    width: 100%;
    min-height: 60vh;
    padding: 2.1rem 1.25rem;
    clip-path: none;
    border-radius: 0;
  }
  .title { max-width: 10ch; }
  .ornate-frame {
    left: 0;
    top: auto;
    bottom: 4rem;
    width: 100vw;
    height: 26vh;
    transform: translateZ(0) scale(1);
    opacity: 0.75;
  }
  .cyanotype { right: 1rem; top: 8vh; width: 150px; height: 150px; opacity: 0.28; }
  .corruption-block { right: 1rem; bottom: 5.4rem; }
  .ornate-rail {
    top: auto;
    bottom: 48px;
    right: 0;
    left: 0;
    width: 100%;
    height: 46px;
    flex-direction: row;
    gap: 0.6rem;
    border-left: 0;
    border-top: 1px solid var(--gold);
  }
  .ornate-rail::before,
  .ornate-rail::after { display: none; }
  .rail-mark { width: 36px; height: 30px; }
  .rail-mark.active,
  .rail-mark:hover { transform: translateY(-2px); }
}