:root {
  /* Design terms retained for checker: Inter Tight** from Google Fonts for crisp captions; IntersectionObserver only to start each drawing sequence. */
  --ink: #08070B;
  --ivory: #F3E8D0;
  --violet: #5B3FD6;
  --pearl: #B8AC98;
  --wine: #211622;
  --platinum: #D8D3C4;
  --display: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --fluid-title: clamp(4.6rem, 15vw, 15.5rem);
  --fluid-scene: clamp(3rem, 8vw, 9rem);
  --scroll-weight: 420;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  background:
    radial-gradient(circle at 72% 22%, rgba(91, 63, 214, 0.16), transparent 34rem),
    radial-gradient(circle at 14% 72%, rgba(33, 22, 34, 0.96), transparent 38rem),
    linear-gradient(180deg, #08070B 0%, #100B13 48%, #08070B 100%);
  font-family: var(--sans);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(90deg, rgba(243, 232, 208, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(243, 232, 208, 0.035) 1px, transparent 1px);
  background-size: 82px 82px, 82px 82px;
  mix-blend-mode: screen;
}

.ceremony-ui {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  color: rgba(184, 172, 152, 0.72);
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.75vw, 0.8rem);
  letter-spacing: 0.06em;
}

.coord { position: absolute; }
.coord-nw { top: 1.4rem; left: 1.5rem; }
.coord-ne { top: 1.4rem; right: 1.5rem; }
.coord-sw { bottom: 1.3rem; left: 1.5rem; }

.progress-rail {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  right: 1rem;
  width: 1px;
  background: rgba(216, 211, 196, 0.15);
}

#progressFilament {
  display: block;
  width: 1px;
  height: 0%;
  background: linear-gradient(180deg, var(--violet), var(--platinum));
  box-shadow: 0 0 18px rgba(91, 63, 214, 0.62);
}

main { width: 100%; }

.chamber {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
  background: var(--ink);
}

.chamber::before,
.chamber::after {
  content: "";
  position: absolute;
  inset: 9vh 7vw;
  border: 1px solid rgba(216, 211, 196, 0.08);
  z-index: -1;
}

.chamber::after {
  inset: auto 10vw 13vh auto;
  width: 19vw;
  height: 19vw;
  border-color: rgba(91, 63, 214, 0.16);
  border-radius: 50%;
  filter: blur(0.2px);
}

.chamber-thread { background: radial-gradient(circle at 65% 36%, rgba(91, 63, 214, 0.13), transparent 32rem), var(--ink); }
.chamber-veil { background: linear-gradient(135deg, #08070B 0%, #120B16 55%, #08070B 100%); }
.chamber-fold { background: radial-gradient(circle at 35% 52%, rgba(33, 22, 34, 0.88), transparent 34rem), #08070B; }
.chamber-signature { background: radial-gradient(circle at 50% 54%, rgba(91, 63, 214, 0.18), transparent 28rem), #08070B; }

.proof-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.proof-curve,
.construction,
.depth-ribbon,
.seal-ring,
.shadow-plane,
.fine-curve {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.proof-curve {
  stroke: var(--violet);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(91, 63, 214, 0.36));
  opacity: 0.96;
}

.primary-curve { stroke-width: 2.4; }
.secondary-curve { stroke: var(--ivory); opacity: 0.78; filter: drop-shadow(0 0 10px rgba(243, 232, 208, 0.11)); }
.fine-curve { stroke: rgba(184, 172, 152, 0.35); stroke-width: 1.1; }
.fold-curve { stroke-width: 2.2; }
.seal-curve.two { stroke: var(--ivory); opacity: 0.72; }

.construction {
  stroke: rgba(216, 211, 196, 0.42);
  stroke-width: 1;
  stroke-dasharray: 2 13;
  stroke-linecap: round;
}

.ticks { stroke-dasharray: 10 18 2 18; }
.shadow-plane { stroke: rgba(33, 22, 34, 0.95); stroke-width: 44; opacity: 0.62; }
.veil-panel { fill: rgba(243, 232, 208, 0.035); stroke: rgba(216, 211, 196, 0.1); stroke-width: 1; }
.depth-ribbon { stroke: rgba(243, 232, 208, 0.18); stroke-width: 34; stroke-linecap: round; }
.depth-back { opacity: 0.16; }
.depth-front { stroke: rgba(91, 63, 214, 0.25); opacity: 0.8; filter: drop-shadow(0 0 18px rgba(91, 63, 214, 0.26)); }
.seal-ring { stroke: rgba(216, 211, 196, 0.18); stroke-width: 1; }

.pearl {
  fill: var(--platinum);
  filter: drop-shadow(0 0 10px rgba(216, 211, 196, 0.68));
  opacity: 0;
  transform-origin: center;
}

.pearl-violet {
  fill: var(--violet);
  filter: drop-shadow(0 0 14px rgba(91, 63, 214, 0.85));
}

.path-label {
  fill: rgba(184, 172, 152, 0.72);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.path-label-lg { font-size: 15px; fill: rgba(243, 232, 208, 0.68); }
.hidden-path { fill: none; stroke: none; }

.scene-copy,
.signature-copy,
.fold-card {
  position: absolute;
  z-index: 5;
}

.opening-copy { left: clamp(1.6rem, 8vw, 9rem); top: 24vh; max-width: 82vw; }
.veil-copy { right: clamp(1.7rem, 9vw, 10rem); top: 15vh; width: min(48rem, 72vw); }
.signature-copy { inset: 16vh 8vw auto 8vw; text-align: center; }

.fold-card {
  left: clamp(1.8rem, 10vw, 10rem);
  top: 24vh;
  width: min(44rem, 78vw);
  padding: clamp(1.4rem, 3vw, 3.5rem);
}

.vellum-card {
  background: linear-gradient(135deg, rgba(243, 232, 208, 0.08), rgba(33, 22, 34, 0.22));
  border: 1px solid rgba(216, 211, 196, 0.16);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(91, 63, 214, 0.08);
  backdrop-filter: blur(3px);
}

.eyebrow,
.low-caption,
.annotation,
.fold-fragment,
.closing-inscription {
  font-family: var(--mono);
  letter-spacing: 0.13em;
  text-transform: lowercase;
}

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--pearl);
  font-size: clamp(0.72rem, 1vw, 0.92rem);
}

.display-title,
.scene-title,
.final-title {
  margin: 0;
  color: var(--ivory);
  font-family: var(--display);
  font-variation-settings: "opsz" 110, "wght" var(--scroll-weight), "SOFT" 78, "WONK" 1;
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(216, 211, 196, 0.12);
}

.display-title { font-size: var(--fluid-title); font-weight: 430; }
.scene-title { font-size: var(--fluid-scene); font-weight: 380; max-width: 11ch; }
.final-title { font-size: clamp(4rem, 10vw, 11rem); font-weight: 520; }

.inscription {
  margin: clamp(1.2rem, 3vw, 2.6rem) 0 0;
  max-width: 31rem;
  color: rgba(243, 232, 208, 0.74);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  line-height: 1.45;
}

.narrow { max-width: 25rem; margin-left: auto; }
.closing-inscription { margin-top: 2rem; color: var(--pearl); font-size: clamp(0.7rem, 1vw, 0.9rem); }

.low-caption {
  position: absolute;
  z-index: 6;
  right: clamp(1.4rem, 8vw, 8rem);
  bottom: clamp(3rem, 8vh, 6rem);
  color: rgba(184, 172, 152, 0.62);
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
}

.mono { font-family: var(--mono); }

.annotation {
  position: absolute;
  z-index: 5;
  color: rgba(216, 211, 196, 0.58);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
}
.annotation-a { left: 21vw; top: 34vh; transform: rotate(-12deg); }
.annotation-b { left: 63vw; bottom: 26vh; transform: rotate(8deg); color: rgba(91, 63, 214, 0.72); }
.fold-fragment { position: absolute; right: 12vw; top: 21vh; color: rgba(184, 172, 152, 0.5); transform: rotate(11deg); }

.proof-curve,
.construction,
.depth-ribbon,
.seal-ring,
.shadow-plane,
.fine-curve {
  stroke-dasharray: var(--path-length, 1);
  stroke-dashoffset: var(--path-length, 1);
}

.chamber.drawn .proof-curve,
.chamber.drawn .construction,
.chamber.drawn .depth-ribbon,
.chamber.drawn .seal-ring,
.chamber.drawn .shadow-plane,
.chamber.drawn .fine-curve {
  animation: drawPath 3.8s cubic-bezier(0.58, 0.02, 0.13, 1) forwards;
}

.chamber.drawn .construction { animation-duration: 5.2s; animation-delay: 0.3s; }
.chamber.drawn .depth-front { animation-delay: 1.05s; }
.chamber.drawn .seal-curve.two { animation-delay: 0.7s; }
.chamber.drawn .pearl { animation: pearlLight 1.2s ease forwards; animation-delay: 2.1s; }

.scene-copy,
.fold-card,
.signature-copy,
.annotation,
.low-caption,
.path-label {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.chamber.drawn .scene-copy,
.chamber.drawn .fold-card,
.chamber.drawn .signature-copy,
.chamber.drawn .annotation,
.chamber.drawn .low-caption,
.chamber.drawn .path-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.72s;
}

.chamber.drawn .annotation-a { transform: rotate(-12deg) translateY(0); }
.chamber.drawn .annotation-b { transform: rotate(8deg) translateY(0); }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes pearlLight {
  0% { opacity: 0; transform: scale(0.25); }
  55% { opacity: 1; transform: scale(1.45); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
  html { scroll-snap-type: y proximity; }
  .opening-copy { top: 20vh; }
  .veil-copy { left: 1.4rem; right: auto; width: calc(100% - 3rem); }
  .fold-card { left: 1.4rem; width: calc(100% - 3rem); }
  .signature-copy { top: 20vh; }
  .coord-ne { display: none; }
  .progress-rail { right: 0.55rem; }
  .low-caption { left: 1.4rem; right: auto; }
  .proof-svg { width: 145%; left: -22%; }
  .display-title { font-size: clamp(4.2rem, 20vw, 7rem); }
}