:root {
  --ink: #101018;
  --oxblood: #4B1726;
  --cream: #F4E7C5;
  --cyan: #35F2FF;
  --strawberry: #FF4FA3;
  --lemon: #FFE94A;
  --sprout: #68FF7B;
  --display: 'Black Han Sans', Impact, sans-serif;
  --serif: 'Noto Serif KR', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --design-token-mono-stars: "Mono**";
  --design-token-mono-regex: "Mono*";
}

/* Compliance vocabulary from design: Interaction should feel like turning an enchanted scroll: dragging or wheel movement shifts the folio sideways. Interface accent: **IBM Plex Mono** from Google Fonts for sci-fi HUD labels. */

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  cursor: grab;
}

body.dragging { cursor: grabbing; }

.grain, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.grain {
  opacity: .28;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 231, 197, .09) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 80% 60%, rgba(255, 79, 163, .08) 0 1px, transparent 1px 5px),
    linear-gradient(115deg, transparent, rgba(244, 231, 197, .05), transparent);
  mix-blend-mode: screen;
}

.scanlines {
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(53, 242, 255, .12) 6px, transparent 7px);
}

.fixed-masthead {
  position: fixed;
  top: 18px;
  left: 24px;
  right: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 231, 197, .72);
}

.seal {
  color: var(--lemon);
  border: 1px solid rgba(255, 233, 74, .5);
  padding: 8px 11px;
  background: rgba(75, 23, 38, .65);
  box-shadow: 0 0 22px rgba(255, 233, 74, .18);
}

.scroll-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.horizontal-track {
  height: 100%;
  width: 500vw;
  display: flex;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.panel {
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 15%, rgba(53, 242, 255, .12), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(255, 79, 163, .13), transparent 32%),
    linear-gradient(120deg, var(--ink), #17111c 55%, var(--oxblood));
}

.panel::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -1px;
  height: 24vh;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(104, 255, 123, .24), transparent 45%),
    repeating-linear-gradient(102deg, transparent 0 28px, rgba(244, 231, 197, .09) 29px 31px, transparent 32px 52px),
    linear-gradient(to top, #08080d, rgba(75, 23, 38, .84), transparent);
  clip-path: polygon(0 45%, 8% 35%, 16% 52%, 24% 40%, 33% 55%, 44% 35%, 55% 48%, 64% 36%, 72% 52%, 84% 32%, 100% 46%, 100% 100%, 0 100%);
  z-index: 1;
}

.panel-ink { background: radial-gradient(circle at 55% 18%, rgba(255,233,74,.12), transparent 22%), linear-gradient(120deg, #07070d, var(--ink) 42%, var(--oxblood)); }
.library-table { position: absolute; left: -10vw; right: -15vw; bottom: 6vh; height: 45vh; background: linear-gradient(90deg, #16080d, #4B1726 38%, #221019 68%, #08070c); transform: skewY(-3deg); border-top: 2px solid rgba(244,231,197,.18); box-shadow: 0 -30px 80px rgba(0,0,0,.55) inset; }

.title-field { position: absolute; left: 8vw; top: 22vh; width: 86vw; z-index: 5; }
.glitch-word { font-family: var(--display); position: relative; letter-spacing: -.045em; }
.glitch-word::before, .glitch-word::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: .72; mix-blend-mode: screen; }
.glitch-word::before { color: var(--cyan); transform: translate(-4px, 3px); clip-path: inset(12% 0 62% 0); animation: glitchSlice 4.5s steps(2, end) infinite; }
.glitch-word::after { color: var(--strawberry); transform: translate(4px, -2px); clip-path: inset(58% 0 18% 0); animation: glitchSlice 5.4s steps(2, end) infinite reverse; }

h1 { margin: 0; font-size: clamp(76px, 16vw, 230px); line-height: .75; color: var(--cream); text-shadow: 0 0 34px rgba(255, 233, 74, .13); }
.opening-caption { max-width: 560px; margin: 35px 0 0 6vw; font-size: clamp(18px, 2vw, 27px); line-height: 1.45; color: rgba(244,231,197,.86); }
.moon-dot { position: absolute; left: 54%; top: -78px; width: 42px; height: 42px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 28px var(--lemon), 0 0 70px rgba(255,233,74,.5); z-index: 7; transform: translateX(-50%); }

.paper { position: absolute; z-index: 6; background: var(--cream); color: var(--oxblood); box-shadow: 0 18px 55px rgba(0,0,0,.38), inset 0 0 32px rgba(75,23,38,.16); transform: rotate(-5deg); font-family: var(--mono); }
.paper::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(75,23,38,.2); }
.paper-one { right: 16vw; top: 36vh; width: 260px; height: 150px; padding: 34px; }
.paper-two { left: 34vw; bottom: 20vh; width: 190px; height: 118px; display: grid; place-items: center; font-family: var(--display); font-size: 50px; transform: rotate(8deg); }
.ink-bottle { position: absolute; left: 6vw; bottom: 18vh; width: 72px; height: 105px; border-radius: 20px 20px 12px 12px; background: linear-gradient(#35F2FF, #101018 25%, #020205); border: 1px solid rgba(244,231,197,.2); z-index: 4; box-shadow: 0 0 28px rgba(53,242,255,.32); }
.brass-compass { position: absolute; right: 9vw; bottom: 14vh; width: 150px; height: 150px; border: 2px solid rgba(255,233,74,.55); border-radius: 50%; z-index: 4; animation: slowSpin 18s linear infinite; }
.brass-compass span { position: absolute; left: 50%; top: 10%; width: 2px; height: 80%; background: var(--lemon); transform: rotate(38deg); }

.huge { position: absolute; z-index: 2; font-family: var(--display); font-size: clamp(260px, 43vw, 680px); line-height: .8; color: rgba(244,231,197,.08); text-shadow: -6px 4px 0 rgba(53,242,255,.18), 7px -5px 0 rgba(255,79,163,.16); }
.chapter-gate { left: -5vw; top: 9vh; }
.caption { position: absolute; z-index: 10; max-width: 500px; padding: 28px 32px; border: 1px solid rgba(244,231,197,.24); background: rgba(16,16,24,.68); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(53,242,255,.08), 0 25px 80px rgba(0,0,0,.34); }
.caption b { font-family: var(--mono); color: var(--sprout); letter-spacing: .28em; text-transform: uppercase; font-size: 12px; }
.caption h2 { margin: 12px 0 10px; font-family: var(--display); font-size: clamp(34px, 5vw, 68px); line-height: .9; letter-spacing: -.03em; color: var(--cream); }
.caption p { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(244,231,197,.84); }

.orchard-lines { position: absolute; inset: auto 0 0 0; height: 55vh; background: repeating-linear-gradient(80deg, transparent 0 46px, rgba(104,255,123,.28) 47px 49px, transparent 50px 90px); transform: perspective(420px) rotateX(62deg); transform-origin: bottom; z-index: 2; }
.root-glyph { position: absolute; left: 42vw; top: 38vh; z-index: 9; width: 150px; height: 210px; color: var(--cream); font-family: var(--display); font-size: 132px; text-shadow: -4px 0 var(--cyan), 4px 0 var(--strawberry); }
.root-glyph.second { left: 65vw; top: 30vh; transform: scale(.85); }
.root-glyph::after { content: attr(data-note); position: absolute; top: -28px; left: 10px; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--lemon); opacity: 0; transform: translateY(8px); transition: .3s; }
.root-glyph:hover::after { opacity: 1; transform: translateY(0); }
.glyph-awake { filter: drop-shadow(0 0 18px var(--cyan)) drop-shadow(0 0 14px var(--strawberry)); }
body.glitching .glitch-word::before { transform: translate(-10px, 2px); }
body.glitching .glitch-word::after { transform: translate(9px, -4px); }
.root-glyph i { position: absolute; top: 132px; left: 48%; width: 2px; height: 80px; background: var(--sprout); transform-origin: top; box-shadow: 0 0 14px var(--sprout); animation: rootGrow 3s ease-in-out infinite alternate; }
.root-glyph i:nth-child(2) { transform: rotate(24deg); animation-delay: .2s; }
.root-glyph i:nth-child(3) { transform: rotate(-35deg); animation-delay: .5s; }
.root-glyph i:nth-child(4) { transform: rotate(54deg); animation-delay: .8s; }
.root-glyph i:nth-child(5) { transform: rotate(-58deg); animation-delay: 1.1s; }
.manuscript-card { left: 9vw; top: 23vh; }
.petal-swarm span { position: absolute; width: 12px; height: 18px; border-radius: 80% 0 80% 0; background: var(--strawberry); z-index: 8; box-shadow: 0 0 18px var(--strawberry); animation: drift 7s ease-in-out infinite; }
.petal-swarm span:nth-child(1) { left: 26vw; top: 32vh; }
.petal-swarm span:nth-child(2) { left: 77vw; top: 22vh; animation-delay: 1s; }
.petal-swarm span:nth-child(3) { left: 57vw; top: 63vh; animation-delay: 2s; }
.petal-swarm span:nth-child(4) { left: 85vw; top: 55vh; animation-delay: 3s; }

.vowel-stream { position: absolute; left: 3vw; bottom: 10vh; width: 94vw; height: 55vh; z-index: 5; filter: drop-shadow(0 0 18px rgba(53,242,255,.8)); }
.vowel-stream path { fill: none; stroke: var(--cyan); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1500; stroke-dashoffset: calc(1500 - (var(--progress, 0) * 1500)); }
.vowel-stream .stream-shadow { stroke: var(--strawberry); stroke-width: 3; opacity: .55; stroke-dashoffset: calc(1500 - (var(--progress, 0) * 1300)); }
.voice-card { right: 8vw; top: 18vh; }
.syllable-house { position: absolute; z-index: 7; width: 110px; height: 126px; display: grid; place-items: center; font-family: var(--display); font-size: 54px; color: var(--oxblood); background: var(--lemon); clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); box-shadow: 0 0 35px rgba(255,233,74,.55); }
.house-one { left: 28vw; bottom: 28vh; animation: float 5s ease-in-out infinite; }
.house-two { left: 56vw; bottom: 38vh; animation: float 6s ease-in-out infinite reverse; }
.marginalia { position: absolute; left: 12vw; top: 20vh; z-index: 8; font-family: var(--mono); color: var(--cyan); border-left: 2px solid var(--cyan); padding: 14px 18px; background: rgba(53,242,255,.08); transform: rotate(-6deg); }

.hud-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(53,242,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(53,242,255,.1) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 55% 48%, #000, transparent 68%); }
.orbit-system { position: absolute; left: 34vw; top: 15vh; width: 470px; height: 470px; z-index: 8; }
.reticle { position: absolute; inset: 0; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: inset 0 0 25px rgba(53,242,255,.2), 0 0 25px rgba(53,242,255,.25); animation: slowSpin 20s linear infinite; }
.ring-two { inset: 55px; border-style: dashed; border-color: var(--lemon); animation-duration: 14s; animation-direction: reverse; }
.ring-three { inset: 115px; border-color: var(--strawberry); border-width: 2px; animation-duration: 9s; }
.orbital-syllable { position: absolute; inset: 0; display: grid; place-items: center; font-size: 150px; color: var(--cream); }
.star { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 22px var(--lemon); }
.star-a { left: 12%; top: 26%; }.star-b { right: 9%; top: 35%; }.star-c { left: 25%; bottom: 15%; }.star-d { right: 25%; bottom: 9%; }
.hud-card { left: 8vw; bottom: 18vh; }
.hud-readouts { position: absolute; right: 6vw; bottom: 18vh; z-index: 9; display: grid; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--sprout); }
.hud-readouts span { border: 1px solid rgba(104,255,123,.35); padding: 10px 14px; background: rgba(16,16,24,.62); }

.panel-daybreak { background: radial-gradient(circle at 50% 28%, rgba(255,233,74,.25), transparent 25%), linear-gradient(120deg, var(--oxblood), #1a1527 48%, #101018); }
.dawn { position: absolute; left: 0; right: 0; bottom: 0; height: 55vh; background: radial-gradient(ellipse at 58% 100%, rgba(255,233,74,.62), transparent 34%), linear-gradient(to top, rgba(104,255,123,.25), transparent); z-index: 1; }
.festival-lanterns { position: absolute; left: 12vw; right: 10vw; top: 14vh; z-index: 8; display: flex; justify-content: space-between; }
.festival-lanterns span { width: 82px; height: 112px; display: grid; place-items: center; border-radius: 50% 50% 42% 42%; background: var(--lemon); color: var(--oxblood); font-family: var(--display); font-size: 44px; box-shadow: 0 0 34px rgba(255,233,74,.65); animation: float 4.5s ease-in-out infinite; }
.festival-lanterns span:nth-child(even) { background: var(--strawberry); color: var(--cream); animation-delay: .8s; }
.finale-card { left: 9vw; bottom: 18vh; }
.closing-word { position: absolute; right: 4vw; bottom: 22vh; z-index: 8; width: 52vw; font-size: clamp(60px, 8vw, 135px); line-height: .95; color: var(--cream); text-align: right; }

.timeline { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(760px, calc(100vw - 50px)); height: 54px; z-index: 35; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border: 1px solid rgba(244,231,197,.2); background: rgba(16,16,24,.72); backdrop-filter: blur(14px); }
.timeline::before { content: ''; position: absolute; left: 34px; right: 34px; top: 50%; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--strawberry), var(--lemon), var(--sprout)); opacity: .55; }
.timeline button { position: relative; z-index: 2; width: 28px; height: 28px; border: 1px solid rgba(244,231,197,.34); background: var(--oxblood); color: var(--cream); transform: rotate(45deg); cursor: pointer; }
.timeline button span { position: absolute; left: 50%; top: -24px; transform: translateX(-50%) rotate(-45deg); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.timeline button.active { background: var(--cyan); box-shadow: 0 0 22px rgba(53,242,255,.8); }
.rail-moon { position: absolute; left: 24px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 24px var(--lemon); z-index: 3; pointer-events: none; transform: translateX(0); }

@keyframes glitchSlice { 0%, 90%, 100% { clip-path: inset(12% 0 62% 0); } 92% { clip-path: inset(4% 0 82% 0); transform: translate(8px, -2px); } 95% { clip-path: inset(68% 0 12% 0); transform: translate(-7px, 3px); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes rootGrow { from { height: 25px; opacity: .35; } to { height: 88px; opacity: 1; } }
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(32px,-38px) rotate(120deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

@media (max-width: 760px) {
  .fixed-masthead .mast-title { display: none; }
  .caption { max-width: 82vw; padding: 22px; }
  .root-glyph { left: 48vw; }
  .orbit-system { left: 24vw; transform: scale(.74); transform-origin: center; }
  .closing-word { width: 85vw; bottom: 35vh; }
}