@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Nanum+Myeongjo:wght@700;800&family=Noto+Sans+KR:wght@300;400&family=Space+Mono&display=swap');

:root {
  --compliance-philosophy-star: 'Philosophy*';
  --void: #0A0A0F;
  --surface: #12121E;
  --cyan: #00FFD1;
  --magenta: #FF2D7B;
  --violet: #7B2DFF;
  --lunar: #B0B0C0;
  --indigo: #2A2A3E;
  --muted: #505070;
  --ice: #F0F0FA;
  --white: #FFFFFF;
  --headline: 'Josefin Sans', sans-serif;
  --body: 'Noto Sans KR', sans-serif;
  --mono: 'Space Mono', monospace;
  --specimen: 'Nanum Myeongjo', serif;
}

* { box-sizing: border-box; }

html {
  background: var(--void);
  color: var(--lunar);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.85;
  background:
    radial-gradient(circle at 82% 22%, rgba(123, 45, 255, 0.10), transparent 26rem),
    radial-gradient(circle at 18% 78%, rgba(0, 255, 209, 0.055), transparent 28rem),
    var(--void);
  overflow-x: hidden;
}

button { font: inherit; }

.timeline {
  min-height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
}

.timeline-spine {
  position: fixed;
  z-index: 20;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100vh;
  background: linear-gradient(180deg, transparent, var(--cyan) 14%, var(--cyan) 86%, transparent);
  opacity: 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 rgba(0, 255, 209, 0);
  animation: spineEnter 1.2s ease 0.6s forwards, spinePulse 3.8s ease-in-out 1.8s infinite;
}

.timeline-spine.violet {
  background: linear-gradient(180deg, transparent, var(--cyan) 5%, var(--violet) 58%, transparent);
  box-shadow: 0 0 12px rgba(123, 45, 255, 0.46);
}

.timeline-spine.pulse { animation: spineBoundary 1.2s ease; opacity: 1; }

.epoch-indicators {
  position: fixed;
  z-index: 40;
  left: 24px;
  top: 50%;
  display: grid;
  gap: 18px;
  transform: translateY(-50%);
}

.indicator {
  position: relative;
  width: 10px;
  height: 10px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--void);
  cursor: pointer;
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.indicator span {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 220ms ease, color 220ms ease;
  white-space: nowrap;
}

.indicator:hover span,
.indicator.active span { opacity: 1; color: var(--magenta); }
.indicator.active { border-color: var(--magenta); background: var(--magenta); box-shadow: 0 0 16px rgba(255, 45, 123, 0.55); }

.epoch {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(32px, 1fr) minmax(0, 680px) 1px minmax(0, 680px) minmax(32px, 1fr);
  align-items: center;
  column-gap: clamp(28px, 4vw, 72px);
  padding: 15vh 0;
  isolation: isolate;
  overflow: hidden;
}

.side-left { grid-column: 2; }
.side-right { grid-column: 4; }

.epoch-copy,
.name-focus,
.assembly,
.terminal {
  max-width: 620px;
  position: relative;
  z-index: 4;
}

.kicker,
.artifact-label,
.terminal-top {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
}

h1, h2 {
  margin: 0 0 1.4rem;
  font-family: var(--headline);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
}

p { margin: 0 0 1.1rem; font-size: 1rem; color: var(--lunar); }
mark { color: var(--cyan); background: transparent; font-weight: 400; }

.opening-artifact {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: transform 420ms ease, opacity 420ms ease;
  animation: artifactEnter 1.1s ease 1.05s backwards;
}

.opening-artifact.scrolled { transform: translate(-50%, -75%); opacity: 0.08; }

.specimen-xl {
  font-family: var(--specimen);
  font-weight: 800;
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: 1;
  color: var(--ice);
  text-shadow: 0 0 40px rgba(240, 240, 250, 0.10);
}

.hangul-phrase {
  margin-top: 2rem;
  font-family: var(--specimen);
  font-size: clamp(1.6rem, 4vw, 3rem);
  color: var(--white);
}

.ambient,
.flow-curve {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.ambient-one {
  inset: 8% auto auto 54%;
  width: 52vw;
  height: 52vw;
  border: 1px solid rgba(123, 45, 255, 0.08);
  border-radius: 49% 51% 52% 48%;
  transform: rotate(-18deg);
}

.flow-curve {
  inset: 7% 0 auto 0;
  width: 100%;
  height: 78%;
  opacity: 0.85;
}

.flow-curve path,
.ending-mark path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.3;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  transition: stroke-dashoffset 1.7s ease;
}

.flow-curve.draw path,
.ending-mark.draw path { stroke-dashoffset: 0; }

.curve-names path { stroke: var(--violet); opacity: 0.08; stroke-width: 3; }

.geometry-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 30px;
  max-width: 540px;
  perspective: 900px;
}

.iso-block,
.syllable-cube {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 116px;
  border: 1px solid rgba(0, 255, 209, 0.62);
  background: linear-gradient(135deg, rgba(0, 255, 209, 0.15), rgba(123, 45, 255, 0.10)), var(--surface);
  box-shadow: 4px 4px 0 rgba(10, 10, 15, 0.4), 0 0 22px rgba(0, 255, 209, 0.06);
  transform: rotateX(45deg) rotateZ(45deg);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.iso-block::before,
.syllable-cube::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.iso-block span,
.iso-block small,
.syllable-cube {
  font-family: var(--specimen);
  color: var(--white);
}

.iso-block span { font-size: 3rem; transform: rotateZ(-45deg) rotateX(-45deg); }
.iso-block small { position: absolute; bottom: 12px; font-family: var(--mono); font-size: 0.62rem; color: var(--magenta); transform: rotateZ(-45deg) rotateX(-45deg); }
.iso-block.tall { min-height: 148px; }
.iso-block.wide { grid-column: span 2; }
.iso-block:hover { transform: rotateX(45deg) rotateZ(45deg) translateY(-8px); box-shadow: 4px 12px 0 rgba(10, 10, 15, 0.4), 0 0 28px rgba(0, 255, 209, 0.38); }

.jamo-stage {
  position: relative;
  height: 360px;
  max-width: 500px;
  margin: 2rem 0;
  border: 1px solid rgba(80, 80, 112, 0.45);
  background: rgba(18, 18, 30, 0.72);
}

.jamo-piece,
.jamo-result {
  position: absolute;
  font-family: var(--specimen);
  font-weight: 800;
  color: var(--ice);
  line-height: 1;
  transition: transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 500ms ease;
}

.jamo-piece { font-size: clamp(3rem, 8vw, 6rem); color: var(--cyan); }
.piece-initial { left: 10%; top: 10%; }
.piece-medial { right: 14%; top: 15%; color: var(--magenta); }
.piece-final { left: 42%; bottom: 12%; color: var(--violet); }
.jamo-result { left: 50%; top: 50%; font-size: clamp(5rem, 12vw, 9rem); opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
.assembly.assemble .piece-initial { transform: translate(128px, 66px); opacity: 0.08; }
.assembly.assemble .piece-medial { transform: translate(-106px, 70px); opacity: 0.08; }
.assembly.assemble .piece-final { transform: translate(12px, -70px); opacity: 0.08; }
.assembly.assemble .jamo-result { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.cube-grid {
  display: grid;
  grid-template-columns: repeat(3, 112px);
  gap: 26px;
  justify-content: center;
  perspective: 900px;
}

.syllable-cube {
  width: 112px;
  min-height: 112px;
  font-size: 2.15rem;
  font-weight: 800;
  cursor: default;
}
.syllable-cube:hover { transform: rotateX(45deg) rotateZ(45deg) translateY(-8px); box-shadow: 4px 14px 0 rgba(10, 10, 15, 0.4), 0 0 30px rgba(0, 255, 209, 0.48); }

.name-cascade {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -4%;
  width: 340px;
  min-height: 110%;
  transform: translateX(-50%);
  pointer-events: none;
}
.name-cascade span {
  position: absolute;
  font-family: var(--specimen);
  color: var(--ice);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
  text-shadow: 0 0 18px rgba(0, 255, 209, 0.22);
}
.name-cascade.live span { opacity: 0.82; transform: translateY(0); }
.name-cascade span:nth-child(1) { left: 16px; top: 2%; font-size: 1.3rem; transition-delay: 40ms; }
.name-cascade span:nth-child(2) { right: 24px; top: 10%; font-size: 2.3rem; transition-delay: 100ms; }
.name-cascade span:nth-child(3) { left: 110px; top: 18%; font-size: 1.1rem; transition-delay: 160ms; }
.name-cascade span:nth-child(4) { left: 28px; top: 26%; font-size: 2.8rem; transition-delay: 220ms; }
.name-cascade span:nth-child(5) { right: 8px; top: 34%; font-size: 1.7rem; transition-delay: 280ms; }
.name-cascade span:nth-child(6) { left: 142px; top: 42%; font-size: 2rem; transition-delay: 340ms; }
.name-cascade span:nth-child(7) { left: 4px; top: 50%; font-size: 1.2rem; transition-delay: 400ms; }
.name-cascade span:nth-child(8) { right: 40px; top: 57%; font-size: 3rem; transition-delay: 460ms; }
.name-cascade span:nth-child(9) { left: 92px; top: 65%; font-size: 1.6rem; transition-delay: 520ms; }
.name-cascade span:nth-child(10) { right: 0; top: 72%; font-size: 1.1rem; transition-delay: 580ms; }
.name-cascade span:nth-child(11) { left: 18px; top: 80%; font-size: 2.4rem; transition-delay: 640ms; }
.name-cascade span:nth-child(12) { right: 78px; top: 88%; font-size: 1.5rem; transition-delay: 700ms; }
.name-cascade span:nth-child(13) { left: 120px; top: 96%; font-size: 2.1rem; transition-delay: 760ms; }
.name-cascade span:nth-child(14) { right: 18px; top: 104%; font-size: 1.4rem; transition-delay: 820ms; }

.featured-name {
  font-family: var(--specimen);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 1;
  color: var(--ice);
}
dl { display: grid; gap: 12px; margin: 1.5rem 0; }
dl div { display: flex; gap: 16px; align-items: baseline; border-left: 1px solid var(--cyan); padding-left: 16px; }
dt { font-family: var(--specimen); font-size: 2rem; color: var(--cyan); }
dd { margin: 0; color: var(--lunar); }

.terminal {
  overflow: hidden;
  border: 1px solid rgba(0, 255, 209, 0.45);
  background: linear-gradient(rgba(255,255,255,0.025) 50%, rgba(0,0,0,0.08) 50%), var(--surface);
  background-size: 100% 6px;
  box-shadow: 0 0 34px rgba(123, 45, 255, 0.18);
  animation: scan 4s linear infinite;
}
.terminal-top { padding: 14px 18px; border-bottom: 1px solid rgba(80, 80, 112, 0.6); }
pre { margin: 0; padding: 28px; white-space: pre-wrap; }
code { font-family: var(--mono); color: var(--cyan); font-size: clamp(0.9rem, 2vw, 1.2rem); line-height: 1.9; }

.ending-mark {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--headline);
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}
.ending-mark svg { width: min(460px, 70vw); margin-top: 18px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes spineEnter { to { opacity: 1; } }
@keyframes spinePulse { 0%,100% { box-shadow: 0 0 0 rgba(0,255,209,0); } 45% { box-shadow: 0 0 8px rgba(0,255,209,0.55); } }
@keyframes spineBoundary { 0% { box-shadow: 0 0 0 rgba(0,255,209,0); } 50% { box-shadow: 0 0 8px rgba(0,255,209,0.78); } 100% { box-shadow: 0 0 0 rgba(0,255,209,0); } }
@keyframes artifactEnter { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes scan { from { background-position: 0 0; } to { background-position: 0 42px; } }

@media (max-width: 880px) {
  .epoch { grid-template-columns: 24px 1fr 1px 1fr 24px; column-gap: 22px; }
  .side-left, .side-right { grid-column: 2 / 5; max-width: none; }
  .epoch { align-content: center; gap: 5vh; }
  .geometry-board, .cube-grid { transform: scale(0.84); transform-origin: center; }
  .name-focus { margin-left: 12%; }
  .epoch-indicators { left: 14px; }
  .indicator span { display: none; }
}