:root {
  /* Interface explanatory copy: labels retro date stamps KR** Mono** */
  --midnight: #05030A;
  --cream: #F7E9C4;
  --magenta: #FF2BD6;
  --cyan: #00F5FF;
  --indigo: #101232;
  --citron: #D7FF4F;
  --plum: #3A194F;
  --display: 'Black Han Sans', 'Arial Black', sans-serif;
  --serif: 'Song Myung', serif;
  --body: 'IBM Plex Sans KR', Inter, sans-serif;
  --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--midnight); }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  font-family: var(--body);
  background:
    radial-gradient(circle at 78% 10%, rgba(255, 43, 214, 0.13), transparent 32vw),
    radial-gradient(circle at 18% 45%, rgba(0, 245, 255, 0.1), transparent 30vw),
    linear-gradient(180deg, var(--midnight), #070512 42%, var(--indigo) 100%);
}

button { font: inherit; }

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

.scanlines {
  background: repeating-linear-gradient(180deg, rgba(247,233,196,0.035) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: .58;
}

.grain {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(247,233,196,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 73% 64%, rgba(0,245,255,.07) 0 1px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(255,43,214,.06) 0 1px, transparent 1px);
  background-size: 43px 47px, 59px 61px, 31px 37px;
  opacity: .35;
}

.tuner {
  position: fixed;
  z-index: 30;
  right: 2.1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tuner::before {
  content: '';
  position: absolute;
  left: 7px;
  top: -2.5rem;
  bottom: -2.5rem;
  width: 1px;
  background: linear-gradient(transparent, var(--cyan), var(--magenta), transparent);
  opacity: .35;
}

.tuner-dot {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(247, 233, 196, .28);
  border-radius: 50%;
  background: var(--midnight);
  box-shadow: 0 0 14px rgba(0,245,255,.1);
  cursor: pointer;
}

.tuner-dot span {
  position: absolute;
  right: 1.45rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(247,233,196,.45);
  font: 700 .62rem var(--mono);
  letter-spacing: .08em;
}

.tuner-dot.active {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 22px var(--cyan), 0 0 42px rgba(255,43,214,.34);
}

.scene {
  position: relative;
  min-height: 118vh;
  overflow: hidden;
  isolation: isolate;
  padding: 9vh 8vw;
}

.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(5,3,10,.72) 100%);
  z-index: -1;
}

[data-depth] {
  transform: translate3d(0, calc(var(--drift, 0px) * var(--depth, .2)), 0);
  transition: transform .12s linear;
}

.photo-plane {
  position: absolute;
  width: min(34vw, 410px);
  height: 76vh;
  border: 1px solid rgba(247,233,196,.09);
  filter: saturate(1.25) contrast(1.14);
  opacity: .62;
  mix-blend-mode: screen;
  background: var(--indigo);
  box-shadow: inset 0 0 80px rgba(5,3,10,.65), 0 0 70px rgba(58,25,79,.42);
}

.photo-ink {
  right: 10vw;
  top: 8vh;
  background:
    radial-gradient(circle at 30% 16%, rgba(0,245,255,.48), transparent 12%),
    radial-gradient(circle at 52% 36%, rgba(255,43,214,.38), transparent 15%),
    repeating-radial-gradient(circle at 42% 48%, rgba(247,233,196,.09) 0 2px, transparent 3px 16px),
    linear-gradient(155deg, rgba(16,18,50,.9), rgba(5,3,10,.25));
}

.photo-paper {
  left: 8vw;
  bottom: 9vh;
  width: 22vw;
  background:
    linear-gradient(90deg, transparent, rgba(247,233,196,.18), transparent),
    radial-gradient(ellipse at 50% 20%, rgba(215,255,79,.18), transparent 34%),
    linear-gradient(180deg, rgba(58,25,79,.7), rgba(5,3,10,.2));
}

.photo-monitor {
  left: 46%;
  top: 12vh;
  height: 66vh;
  background:
    repeating-linear-gradient(180deg, rgba(0,245,255,.15) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 50% 55%, rgba(0,245,255,.25), transparent 32%),
    linear-gradient(135deg, rgba(16,18,50,.95), rgba(58,25,79,.45));
}

.photo-rain {
  right: 8vw;
  top: 10vh;
  width: 42vw;
  background:
    repeating-linear-gradient(103deg, transparent 0 20px, rgba(247,233,196,.12) 21px 23px),
    radial-gradient(circle at 42% 24%, rgba(255,43,214,.38), transparent 16%),
    radial-gradient(circle at 62% 58%, rgba(0,245,255,.36), transparent 22%),
    linear-gradient(180deg, rgba(16,18,50,.92), rgba(5,3,10,.7));
}

.wordmark {
  position: absolute;
  left: 5vw;
  bottom: -5.2vw;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(7rem, 20vw, 19rem);
  line-height: .72;
  letter-spacing: -.08em;
  color: var(--cream);
  text-shadow: 0 0 16px rgba(0,245,255,.72), 0 0 72px rgba(0,245,255,.36), 0 0 120px rgba(255,43,214,.24);
  animation: breathe 6s ease-in-out infinite;
}

.wordmark span { color: var(--cyan); font-size: .34em; letter-spacing: -.04em; }

.floating-jamo,
.oversize-letter,
.final-mark {
  position: absolute;
  font-family: var(--display);
  color: rgba(247,233,196,.9);
  text-shadow: 0 0 18px rgba(0,245,255,.7), 0 0 56px rgba(255,43,214,.3);
}

.jamo-a { top: 18vh; left: 18vw; font-size: 9rem; color: var(--cyan); }
.jamo-b { top: 34vh; right: 20vw; font-size: 6rem; color: var(--magenta); }
.jamo-c { top: 7vh; right: 38vw; font-size: 11rem; opacity: .34; }

.scene-copy {
  position: relative;
  max-width: 34rem;
  z-index: 4;
}

.scene-copy h2 {
  margin: .4rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(3.5rem, 8vw, 8rem);
  line-height: .86;
  letter-spacing: -.06em;
  font-weight: 400;
  color: var(--cream);
  text-shadow: 0 0 34px rgba(255,43,214,.28);
}

.scene-copy p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.55rem);
  line-height: 1.68;
  color: rgba(247,233,196,.78);
}

.stamp {
  display: inline-block;
  font: 700 .74rem var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--citron);
  text-shadow: 0 0 18px rgba(215,255,79,.45);
}

.top-note { margin-top: 7vh; margin-left: 2vw; }
.chamber-copy { position: absolute; right: 9vw; top: 18vh; }
.right-copy { position: absolute; left: 8vw; top: 18vh; }
.block-copy { margin-left: 4vw; }
.voice-copy { position: absolute; left: 9vw; bottom: 17vh; }
.final-copy { position: absolute; right: 10vw; top: 17vh; }

.curve {
  position: absolute;
  border: 2px solid transparent;
  border-top-color: var(--cyan);
  border-left-color: rgba(255,43,214,.72);
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(0,245,255,.7));
  opacity: .72;
  animation: floatCurve 10s ease-in-out infinite alternate;
}
.curve-one { width: 70vw; height: 38vh; left: 16vw; top: 28vh; transform: rotate(-18deg); }
.curve-two { width: 82vw; height: 54vh; left: -12vw; top: 20vh; }
.curve-three { width: 48vw; height: 26vh; right: 5vw; bottom: 15vh; border-top-color: var(--magenta); }
.curve-four { width: 72vw; height: 62vh; right: -20vw; top: 14vh; }
.curve-five { width: 92vw; height: 42vh; left: -14vw; bottom: 10vh; border-top-color: var(--citron); }

.breath-grid {
  position: absolute;
  inset: 18vh 10vw auto 10vw;
  height: 68vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 6vw;
}

.anchor {
  font-family: var(--display);
  font-size: clamp(7rem, 18vw, 17rem);
  text-align: center;
  color: var(--cream);
  text-shadow: 0 0 36px rgba(0,245,255,.58);
}
.moon { color: var(--citron); transform: translateY(-18vh); }
.earth { color: var(--magenta); }
.human { color: var(--cyan); transform: translateY(14vh); }

.construction {
  position: absolute;
  inset: 0;
}
.beam { position: absolute; display: block; background: var(--cyan); box-shadow: 0 0 24px var(--cyan); }
.beam.vertical { left: 58%; top: 18vh; width: 2px; height: 62vh; }
.beam.horizontal { left: 34%; top: 52vh; width: 44vw; height: 2px; }
.beam.circle { left: 55%; top: 33vh; width: 14vw; height: 14vw; border: 2px solid var(--magenta); border-radius: 50%; background: transparent; box-shadow: 0 0 32px rgba(255,43,214,.65); }
.beam.corner { left: 45%; top: 26vh; width: 22vw; height: 22vw; background: transparent; border: 2px solid var(--citron); border-left: 0; }
.oversize-letter { right: 8vw; bottom: 2vh; font-size: clamp(14rem, 32vw, 32rem); opacity: .88; }

.syllable-tower {
  position: absolute;
  right: 13vw;
  top: 8vh;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transform: rotate(-4deg);
}

.syllable {
  width: clamp(9rem, 16vw, 15rem);
  height: clamp(8rem, 13vw, 13rem);
  border: 1px solid rgba(247,233,196,.16);
  color: var(--cream);
  background: linear-gradient(145deg, rgba(16,18,50,.62), rgba(58,25,79,.34));
  font-family: var(--display);
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 36px rgba(5,3,10,.8), 0 0 26px rgba(0,245,255,.1);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), color .55s, box-shadow .55s, border-color .55s;
}

.syllable:nth-child(even) { margin-left: 4.4rem; }
.syllable:hover,
.syllable.active {
  transform: scale(1.12) rotate(2deg);
  color: var(--citron);
  border-color: var(--cyan);
  box-shadow: inset 0 0 42px rgba(0,245,255,.12), 0 0 32px rgba(0,245,255,.65), 0 0 72px rgba(255,43,214,.38);
}

.caption-orbit {
  position: absolute;
  left: 12vw;
  bottom: 18vh;
  max-width: 24rem;
  min-height: 4rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--magenta);
  font: 1.35rem var(--serif);
  color: var(--cream);
  text-shadow: 0 0 24px rgba(255,43,214,.45);
}

.ripple-field span {
  position: absolute;
  border: 1px solid rgba(0,245,255,.33);
  border-radius: 50%;
  animation: ripple 6s ease-in-out infinite;
}
.ripple-field span:nth-child(1) { width: 28vw; height: 28vw; left: 48vw; top: 20vh; }
.ripple-field span:nth-child(2) { width: 44vw; height: 44vw; left: 38vw; top: 10vh; animation-delay: -1.2s; border-color: rgba(255,43,214,.28); }
.ripple-field span:nth-child(3) { width: 18vw; height: 18vw; right: 9vw; bottom: 16vh; animation-delay: -2.4s; }
.ripple-field span:nth-child(4) { width: 55vw; height: 16vw; left: 5vw; top: 30vh; animation-delay: -3s; border-color: rgba(215,255,79,.22); }

.voice-stack {
  position: absolute;
  right: 16vw;
  top: 9vh;
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-size: clamp(5rem, 10vw, 10rem);
  line-height: .78;
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(0,245,255,.8), 0 0 70px rgba(255,43,214,.35);
}

.day {
  background: radial-gradient(circle at 72% 24%, rgba(247,233,196,.17), transparent 32vw), linear-gradient(180deg, transparent, rgba(247,233,196,.05));
}
.dawn-disc {
  position: absolute;
  left: 8vw;
  top: 18vh;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,233,196,.28), rgba(215,255,79,.1) 34%, transparent 68%);
  box-shadow: 0 0 80px rgba(247,233,196,.18);
}
.final-mark { left: 11vw; bottom: 5vh; font-size: clamp(15rem, 33vw, 34rem); color: var(--cream); }

@keyframes breathe {
  0%, 100% { filter: brightness(.9); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.18); transform: translateY(-1.2vh) scale(1.012); }
}

@keyframes floatCurve {
  from { translate: 0 0; opacity: .48; }
  to { translate: 3vw -2vh; opacity: .82; }
}

@keyframes ripple {
  0%, 100% { transform: scale(.96); opacity: .22; }
  50% { transform: scale(1.06); opacity: .65; }
}

@media (max-width: 760px) {
  .tuner { right: 1rem; }
  .scene { padding: 8vh 6vw; min-height: 112vh; }
  .photo-plane { width: 58vw; opacity: .38; }
  .wordmark { font-size: 8.7rem; left: 2vw; bottom: 2vh; }
  .breath-grid { grid-template-columns: 1fr; inset: 8vh 8vw; gap: 0; opacity: .72; }
  .anchor { font-size: 8rem; }
  .moon, .human { transform: none; }
  .chamber-copy, .right-copy, .voice-copy, .final-copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 10vh; }
  .syllable-tower { right: 10vw; top: 35vh; }
  .caption-orbit { left: 8vw; bottom: 8vh; }
}