:root {
  /* analytical annotations outside (Google IntersectionObserver. blinks via Multiple passages page independent each triggers scrolled into IntersectionObserver` `threshold: 0.5` container. enters viewport: Interval` reveals character time from `<span>` */
  --parchment: #f5ead6;
  --ink: #3d2b1f;
  --ochre: #c9a96e;
  --rose: #b8705a;
  --sage: #7a8b6f;
  --hud: #8a7e6b;
  --bronze: #a0764a;
  --stone: #6b7d8a;
  --stone-light: #8a9aa8;
  --type-ink: #2e2a25;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 12%, rgba(201, 169, 110, 0.24), transparent 26rem),
    radial-gradient(circle at 86% 32%, rgba(184, 112, 90, 0.16), transparent 25rem),
    radial-gradient(circle at 42% 78%, rgba(122, 139, 111, 0.18), transparent 30rem),
    var(--parchment);
  font-family: "Libre Baskerville", Georgia, serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  background-image:
    linear-gradient(90deg, rgba(61, 43, 31, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(61, 43, 31, 0.04) 1px, transparent 1px);
  background-size: 37px 37px, 53px 53px;
  mix-blend-mode: multiply;
}

.wash {
  position: fixed;
  width: 36vw;
  height: 36vw;
  min-width: 260px;
  min-height: 260px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  animation: washDrift 34s ease-in-out infinite alternate;
}

.wash-ochre { left: -8vw; top: 8vh; background: #c9a96e; }
.wash-rose { right: -10vw; top: 42vh; background: #b8705a; animation-duration: 39s; }
.wash-sage { left: 34vw; bottom: -12vh; background: #7a8b6f; animation-duration: 43s; }

.geometry {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  border: 1px dashed rgba(138, 126, 107, 0.55);
}

.geo-triangle {
  width: 0;
  height: 0;
  border-left: 82px solid transparent;
  border-right: 82px solid transparent;
  border-bottom: 142px dashed rgba(138, 126, 107, 0.32);
  border-top: 0;
  left: 7vw;
  top: 126vh;
  background: transparent;
  transform: rotate(-18deg);
}

.geo-hexagon {
  width: 150px;
  height: 86px;
  right: 8vw;
  top: 198vh;
  transform: rotate(14deg);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.geo-circle {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  left: 64vw;
  top: 312vh;
}

.manuscript {
  position: relative;
  z-index: 2;
}

.passage {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 8vh 8vw;
  perspective: 1200px;
}

.passage-hero { min-height: 100vh; }
.passage-collision { min-height: 100vh; overflow: hidden; }
.passage-resolution { min-height: 60vh; }

.passage-content {
  position: relative;
  z-index: 4;
  width: min(68vw, 980px);
}

.hero-content { text-align: center; }

.mujun-title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(5rem, 15vw, 12rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: #3d2b1f;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 1200ms ease, transform 1200ms ease;
  text-shadow: 0 12px 42px rgba(160, 118, 74, 0.18);
}

body.loaded .mujun-title { opacity: 1; transform: translateY(0) scale(1); }

.text-block {
  max-width: 38em;
  justify-self: start;
}

.passage-spear .text-block { margin-right: 22vw; }
.passage-shield .text-block { justify-self: end; margin-left: 22vw; }
.collision-copy { text-align: center; justify-self: center; margin-top: 28vh; }

.kicker,
.hud-note {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kicker {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  color: rgba(138, 126, 107, 0.72);
}

h2 {
  margin: 0 0 1.25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: #3d2b1f;
}

p {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.8;
  margin: 0 0 1.15rem;
}

.typewriter {
  min-height: 1.8em;
  font-family: "Special Elite", monospace;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  line-height: 1.8;
  color: #2e2a25;
  letter-spacing: 0.02em;
}

.hero-typewriter { margin-top: 2rem; }
.cursor { animation: blink 1s step-end infinite; opacity: 1; }
.typewriter.complete .cursor { animation: cursorFade 3s ease forwards; }

.hud-frame {
  position: absolute;
  inset: 12vh 11vw;
  z-index: 3;
  pointer-events: none;
  opacity: 0.78;
}

.hero-frame {
  inset: 11vh 9vw;
  transform: scale(1.04);
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease-out;
}

body.brackets-in .hero-frame { opacity: 0.78; transform: scale(1); }

.corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgba(138, 126, 107, 0.46);
  transition: transform 400ms ease-in, opacity 240ms ease;
}

.tl { top: 20px; left: 20px; border-top: 2px solid; border-left: 2px solid; transform: translate(-20px, -20px); }
.tr { top: 20px; right: 20px; border-top: 2px solid; border-right: 2px solid; transform: translate(20px, -20px); }
.bl { bottom: 20px; left: 20px; border-bottom: 2px solid; border-left: 2px solid; transform: translate(-20px, 20px); }
.br { bottom: 20px; right: 20px; border-bottom: 2px solid; border-right: 2px solid; transform: translate(20px, 20px); }

.passage.locked .tl, body.brackets-in .hero-frame .tl { transform: translate(-8px, -8px); }
.passage.locked .tr, body.brackets-in .hero-frame .tr { transform: translate(8px, -8px); }
.passage.locked .bl, body.brackets-in .hero-frame .bl { transform: translate(-8px, 8px); }
.passage.locked .br, body.brackets-in .hero-frame .br { transform: translate(8px, 8px); }

.dash {
  position: absolute;
  left: 78px;
  right: 78px;
  border-top: 1px dashed rgba(138, 126, 107, 0.32);
  opacity: 0.35;
}

.dash-top { top: 36px; }
.dash-bottom { bottom: 36px; }

.hud-note {
  position: absolute;
  font-size: 0.7rem;
  color: rgba(138, 126, 107, 0.9);
  opacity: 0;
  transition: opacity 300ms ease 100ms;
  font-variant-numeric: tabular-nums;
}

.passage.locked .hud-note, body.brackets-in .hero-note { opacity: 0.48; }
.hero-note { top: 0; right: 0; }
.note-left { left: 0; top: 0; }
.note-right { right: 0; bottom: 0; }
.note-counter { left: 0; top: 0; }

.inner-tl { top: 23%; left: 16%; opacity: 0.55; }
.inner-tr { top: 23%; right: 16%; opacity: 0.55; }
.inner-bl { bottom: 23%; left: 16%; opacity: 0.55; }
.inner-br { bottom: 23%; right: 16%; opacity: 0.55; }

.dissolving-frame { opacity: 0.3; filter: blur(0.3px); }
.passage-resolution.locked .dissolving-frame { opacity: 0.08; transition: opacity 1600ms ease; }

.artifact {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform-style: preserve-3d;
}

.spear-artifact { right: 12vw; top: 22vh; }
.shield-artifact { left: 11vw; top: 18vh; }

.spear {
  position: relative;
  width: 56px;
  height: 310px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 22px 28px rgba(160, 118, 74, 0.26));
  animation: spearRotate 20s ease-in-out infinite alternate;
}

.spear span {
  position: absolute;
  left: 0;
  width: 56px;
  height: 310px;
  clip-path: polygon(50% 0, 100% 22%, 66% 100%, 34% 100%, 0 22%);
  transform-origin: 50% 50%;
}

.spear span:nth-child(1) { background: #a0764a; transform: rotateY(0deg) translateZ(16px); }
.spear span:nth-child(2) { background: #c9a96e; transform: rotateY(90deg) translateZ(16px); }
.spear span:nth-child(3) { background: #b8705a; transform: rotateY(180deg) translateZ(16px); }
.spear span:nth-child(4) { background: #8f663e; transform: rotateY(270deg) translateZ(16px); }

.shield {
  position: relative;
  width: 210px;
  height: 242px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 24px 30px rgba(107, 125, 138, 0.24));
  animation: shieldRotate 20s ease-in-out infinite alternate;
}

.shield span {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 92% 24%, 92% 74%, 50% 100%, 8% 74%, 8% 24%);
  transform-origin: 50% 50%;
}

.shield span:nth-child(1) { background: #6b7d8a; transform: translateZ(18px); }
.shield span:nth-child(2) { background: #8a9aa8; transform: rotateY(60deg) translateZ(-8px); opacity: 0.75; }
.shield span:nth-child(3) { background: #586b78; transform: rotateY(-60deg) translateZ(-8px); opacity: 0.7; }
.shield span:nth-child(4) { background: linear-gradient(135deg, #8a9aa8, #6b7d8a); transform: translateZ(24px) scale(0.72); }
.shield span:nth-child(5) { background: rgba(245, 234, 214, 0.28); transform: translateZ(28px) scale(0.38); }
.shield span:nth-child(6) { border: 2px solid rgba(61, 43, 31, 0.18); transform: translateZ(30px); background: transparent; }

.collision-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.collision-spear, .collision-shield {
  position: absolute;
  top: 23vh;
  will-change: transform;
}

.collision-spear { left: 8vw; transform: rotateZ(90deg) translateX(0); }
.collision-shield { right: 10vw; transform: scale(0.9) translateX(0); }
.collision-energy {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 38vw;
  height: 38vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.62), rgba(201, 169, 110, 0.16) 32%, transparent 64%);
  opacity: 0.05;
  filter: blur(22px);
  animation: pulseEnergy 3.2s ease-in-out infinite;
}

.resolution-line {
  text-align: center;
  width: min(76vw, 900px);
}

.resolution-line p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 5.4rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes cursorFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes washDrift { to { transform: translate(34px, -18px) scale(1.06); } }
@keyframes spearRotate { to { transform: rotateY(195deg) rotateX(-5deg); } }
@keyframes shieldRotate { to { transform: rotateY(-185deg) rotateX(5deg); } }
@keyframes pulseEnergy { 50% { transform: translate(-50%, -50%) scale(1.08); } }

@media (max-width: 820px) {
  .passage { padding: 8vh 6vw; }
  .passage-content { width: 84vw; }
  .hud-frame { inset: 8vh 5vw; }
  .passage-spear .text-block, .passage-shield .text-block { margin: 0; justify-self: center; }
  .spear-artifact, .shield-artifact { opacity: 0.22; transform: scale(0.7); }
  .spear-artifact { right: -2vw; }
  .shield-artifact { left: -7vw; }
  .collision-copy { margin-top: 34vh; }
  .collision-spear { left: -18vw; transform: rotateZ(90deg) scale(0.78); }
  .collision-shield { right: -12vw; transform: scale(0.65); }
  .hud-note { font-size: 0.58rem; }
}