:root {
  --ground: #0a0a14;
  --cyan: #00ffd5;
  --magenta: #ff00aa;
  --chartreuse: #aaff00;
  --pale-chartreuse: #d5ff80;
  --mint: #80ffe8;
  --pink: #ff80d5;
  --gray: #c8c8d0;
  --kraft: #d4c4a8;
  --kraft-deep: #c4b498;
  --sepia: #5a4a32;
}

/* Design vocabulary retained: IntersectionObserver` on a horizontal axis to trigger pattern drawing only when chambers enter the viewport; Space Indigo | #0a0a14 | */

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--gray);
  font-family: "Nunito Sans", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 40%, rgba(0, 255, 213, 0.04), transparent 32%),
    radial-gradient(circle at 68% 60%, rgba(255, 0, 170, 0.035), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  z-index: 20;
}

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ground);
}

.scroll-canvas {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  width: 620vw;
  height: 100vh;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.chamber {
  position: relative;
  flex: 0 0 auto;
  height: 100vh;
  overflow: hidden;
  background: var(--ground);
}

.chamber-stillness { width: 100vw; }
.chamber-awakening { width: 150vw; }
.chamber-garden { width: 150vw; }
.chamber-clearing { width: 120vw; }
.chamber-departure { width: 100vw; }

.horizon-svg {
  position: absolute;
  inset: 0;
  width: 620vw;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.horizon-path,
.opening-line path,
.steady-line path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px currentColor);
}

.opening-line {
  position: absolute;
  left: 7vw;
  top: 45vh;
  width: 72vw;
  height: 26vh;
  z-index: 4;
}

.opening-line path {
  stroke-dasharray: 980;
  stroke-dashoffset: 980;
  animation: drawOpening 5s 0.4s forwards cubic-bezier(.2,.8,.2,1);
}

@keyframes drawOpening { to { stroke-dashoffset: 0; } }

.chamber-character {
  position: absolute;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 200;
  font-size: clamp(8rem, 20vw, 16rem);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--gray);
  pointer-events: none;
  z-index: 2;
  transform: translateY(20px);
  transition: opacity 900ms cubic-bezier(.18,.89,.32,1.18), transform 900ms cubic-bezier(.18,.89,.32,1.18);
}

.char-meon { left: 14vw; top: 16vh; opacity: 0.4; }
.char-jeo { left: 46vw; top: 10vh; opacity: 0.6; color: rgba(200,200,208,0.9); }

.scroll-hint {
  position: absolute;
  right: 4vw;
  bottom: 4vh;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--cyan);
  opacity: 0.3;
  z-index: 8;
  transition: opacity 700ms ease;
}

.scroll-hint.hidden { opacity: 0; }

.pattern-field {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.generated-pattern {
  position: absolute;
  overflow: visible;
  color: var(--cyan);
  opacity: 0;
  transform: scale(0.72) translateY(20px);
  transition: opacity 900ms cubic-bezier(.18,.89,.32,1.18), transform 1000ms cubic-bezier(.18,.89,.32,1.18), filter 400ms ease;
  filter: drop-shadow(0 0 var(--glow, 8px) currentColor);
}

.generated-pattern.active {
  opacity: var(--pattern-opacity, 0.92);
  transform: scale(1) translateY(0);
}

.generated-pattern path,
.generated-pattern line,
.generated-pattern circle,
.generated-pattern ellipse {
  vector-effect: non-scaling-stroke;
}

.draw-stroke {
  stroke-dasharray: var(--dash, 800);
  stroke-dashoffset: var(--dash, 800);
  transition: stroke-dashoffset 1800ms cubic-bezier(.18,.89,.32,1.02);
}

.active .draw-stroke { stroke-dashoffset: 0; }

.graph-paper {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(200,200,208,0.05) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(200,200,208,0.05) 0 1px, transparent 1px 20px);
  transition: opacity 900ms ease;
}

.chamber.in-view .graph-paper { opacity: 1; }

.paper-fragment,
.paper-clean,
.stamp,
.badge,
.photo-frame,
.bojagi,
.seal {
  position: absolute;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(22px) rotate(var(--rot, 0deg));
  transition: opacity 900ms cubic-bezier(.18,.89,.32,1.18), transform 1000ms cubic-bezier(.18,.89,.32,1.18);
}

.chamber.in-view .paper-fragment,
.chamber.in-view .paper-clean,
.chamber.in-view .stamp,
.chamber.in-view .badge,
.chamber.in-view .photo-frame,
.chamber.in-view .bojagi,
.chamber.in-view .seal,
.seal-open,
.seal-close {
  opacity: 0.88;
  transform: translateY(0) rotate(var(--rot, 0deg));
}

.paper-fragment {
  min-width: 160px;
  padding: 18px 22px;
  color: var(--sepia);
  font-size: 0.95rem;
  line-height: 1.5;
  background:
    radial-gradient(circle, rgba(90,74,50,0.08) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, var(--kraft), var(--kraft-deep));
  clip-path: polygon(2% 12%, 14% 4%, 31% 8%, 47% 2%, 62% 10%, 79% 5%, 98% 14%, 94% 38%, 100% 58%, 92% 84%, 77% 94%, 58% 89%, 42% 98%, 21% 90%, 5% 96%, 9% 69%, 0 48%);
}

.paper-fragment span { font-family: "Caveat", cursive; font-size: 1.15rem; }
.paper-one { left: 20vw; top: 19vh; --rot: -4deg; }
.paper-two { left: 82vw; top: 68vh; --rot: 6deg; }
.paper-three { left: 18vw; top: 63vh; --rot: 3deg; }
.paper-four { right: 18vw; top: 18vh; --rot: -7deg; }

.stamp,
.badge,
.seal {
  display: grid;
  place-items: center;
  color: var(--sepia);
  font-family: "Caveat", cursive;
  background: var(--kraft);
  border: 2px dashed var(--sepia);
}

.stamp-rect { left: 54vw; top: 24vh; width: 92px; height: 58px; --rot: 7deg; }
.stamp-circle { left: 122vw; top: 13vh; width: 76px; height: 76px; border-radius: 50%; --rot: -5deg; }
.stamp-garden { left: 66vw; bottom: 13vh; width: 92px; height: 92px; border-radius: 50%; --rot: 4deg; }
.seal { width: 72px; height: 72px; border-radius: 50%; font-size: 1.6rem; }
.seal-open { left: 5vw; top: 9vh; opacity: 0.52; }
.seal-close { right: 5vw; bottom: 9vh; opacity: 0.56; }

.bojagi { width: 190px; height: 128px; display: grid; grid-template-columns: 1.2fr .8fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; }
.bojagi span { border: 1px dashed rgba(90,74,50,0.7); background: rgba(212,196,168,0.36); }
.bojagi span:nth-child(2n) { background: rgba(196,180,152,0.28); }
.bojagi-one { left: 100vw; top: 38vh; --rot: 5deg; }
.bojagi-two { left: 106vw; top: 50vh; width: 240px; height: 160px; --rot: -3deg; }

.photo-frame {
  width: 150px;
  height: 150px;
  padding: 12px;
  border-radius: 50%;
  background: var(--kraft);
  border: 1px solid var(--sepia);
}
.photo-frame span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(90,74,50,0.32), transparent 11%),
    radial-gradient(circle at 50% 62%, rgba(212,196,168,0.75), transparent 30%),
    radial-gradient(circle at 48% 38%, #d4c4a8, #5a4a32 72%);
  filter: sepia(0.6) contrast(1.2);
}
.frame-one { left: 35vw; top: 20vh; --rot: -5deg; }
.frame-two { right: 34vw; bottom: 19vh; --rot: 6deg; }

.paper-clean {
  padding: 16px 22px;
  color: var(--sepia);
  background: linear-gradient(135deg, var(--kraft), var(--kraft-deep));
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
}
.clean-one { left: 24vw; top: 22vh; --rot: 0deg; }
.clean-two { left: 72vw; bottom: 24vh; --rot: 0deg; }
.badge { width: 68px; height: 68px; border-color: var(--sepia); border-style: solid; border-radius: 14px; }
.badge-one { left: 48vw; top: 58vh; }
.badge-two { right: 16vw; top: 18vh; }

.steady-line {
  position: absolute;
  left: 5vw;
  bottom: 36vh;
  width: 104vw;
  height: 18vh;
  z-index: 5;
}
.steady-line path { stroke: var(--mint); stroke-width: 1; }

.annotation {
  position: absolute;
  z-index: 6;
  margin: 0;
  font-family: "Caveat", cursive;
  font-size: 0.875rem;
  color: var(--pink);
  opacity: 0.5;
  transform: translateY(10px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(.18,.89,.32,1.18);
}
.chamber.in-view .annotation { opacity: 0.5; transform: translateY(0); }
.note-one { left: 33vw; top: 54vh; }
.note-two { left: 115vw; top: 32vh; }
.note-three { left: 22vw; top: 14vh; }
.note-four { left: 74vw; top: 42vh; }
.note-five { right: 22vw; bottom: 16vh; }
.note-six { left: 58vw; top: 40vh; color: var(--pink); }

.departure-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.8rem;
}

.mandala {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  overflow: visible;
  color: var(--cyan);
  filter: drop-shadow(0 0 10px currentColor);
  animation: rotateMandala 120s linear infinite, pulseMandala 6s ease-in-out infinite alternate;
}

@keyframes rotateMandala { to { transform: rotate(360deg); } }
@keyframes pulseMandala { from { color: var(--cyan); } to { color: var(--magenta); } }

.departure-text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--gray);
  letter-spacing: 0.12em;
}

.chamber-clearing .generated-pattern { color: var(--mint); --pattern-opacity: 0.66; }
.chamber-clearing .generated-pattern:nth-child(2n) { color: var(--pink); }
.chamber-clearing .generated-pattern:nth-child(3n) { color: var(--pale-chartreuse); }
.chamber-garden .generated-pattern { --glow: 12px; }
.chamber-awakening .generated-pattern { --glow: 8px; }

@media (max-width: 720px) {
  .paper-fragment, .paper-clean { transform: scale(0.86) rotate(var(--rot, 0deg)); }
  .photo-frame { width: 112px; height: 112px; }
  .bojagi { width: 140px; height: 98px; }
}