:root {
  /* Interaction can include a cursor that lightly bends orbital rings near the pointer. */
  --porcelain: #F4F0E6;
  --celadon: #A8D8C9;
  --ink: #07111F;
  --nocturne: #101827;
  --gold: #D7B56D;
  --violet: #6B5CA5;
  --silver: #C9D1DC;
  --cinnabar: #D94A38;
  --progress: 0;
  --mx: 50vw;
  --my: 50vh;
  --gravity-x: 0px;
  --gravity-y: 0px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--porcelain);
  font-family: "Gabarito", "Inter", sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(107, 92, 165, .22), transparent 38vw),
    radial-gradient(circle at 78% 20%, rgba(168, 216, 201, .12), transparent 28vw),
    radial-gradient(circle at 50% 105%, rgba(7, 17, 31, .9), transparent 45vw),
    linear-gradient(145deg, var(--nocturne), var(--ink) 62%, #0B1220);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -18%;
  pointer-events: none;
  background:
    repeating-linear-gradient(98deg, rgba(244, 240, 230, .035) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(2deg, transparent 0 34px, rgba(201, 209, 220, .025) 35px 36px);
  opacity: .42;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--gravity-x) * -.08), calc(var(--gravity-y) * -.08), 0);
  z-index: 2;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .58;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(244, 240, 230, .06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 64%, rgba(168, 216, 201, .045) 0 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(244, 240, 230, .025), transparent 18%, rgba(7, 17, 31, .16));
  background-size: 11px 13px, 17px 19px, 100% 100%;
}

.cursor-gravity {
  position: fixed;
  left: var(--mx);
  top: var(--my);
  width: 26rem;
  height: 26rem;
  margin: -13rem 0 0 -13rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(168, 216, 201, .1), rgba(107, 92, 165, .05) 32%, transparent 68%);
  filter: blur(10px);
  opacity: .65;
  transform: scale(calc(.82 + var(--progress) * .18));
}

.phase-dial {
  position: fixed;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .78rem;
  font-size: .67rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.phase-dial a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  color: rgba(244, 240, 230, .5);
  text-decoration: none;
  transition: color .6s ease;
}

.phase-dial span {
  width: .78rem;
  height: .78rem;
  border-radius: 50%;
  border: 1px solid rgba(201, 209, 220, .42);
  background: conic-gradient(from 90deg, var(--porcelain) 0 45deg, transparent 45deg 360deg);
  box-shadow: 0 0 0 1px rgba(7, 17, 31, .4) inset;
}

.phase-dial em {
  width: 10rem;
  text-align: right;
  font-style: normal;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .5s ease, transform .5s ease;
}

.phase-dial a.active,
.phase-dial a:hover { color: var(--porcelain); }
.phase-dial a.active em,
.phase-dial a:hover em { opacity: 1; transform: translateX(0); }
.phase-dial a.active span { background: var(--cinnabar); border-color: var(--cinnabar); box-shadow: 0 0 22px rgba(217, 74, 56, .34); }

main { position: relative; z-index: 5; }

.orbit-state {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
}

.orbit-state::before {
  content: "";
  position: absolute;
  inset: 6vw;
  border-radius: 50%;
  background: radial-gradient(circle at calc(50% + var(--gravity-x) * .3) calc(50% + var(--gravity-y) * .3), rgba(244, 240, 230, .075), transparent 44%);
  opacity: calc(.32 + var(--section-presence, 0) * .46);
  transform: rotate(calc(var(--progress) * 18deg));
  z-index: -2;
}

.orbit-field {
  position: absolute;
  width: min(118vw, 88rem);
  height: min(118vw, 88rem);
  fill: none;
  stroke: rgba(201, 209, 220, .28);
  stroke-width: 1.1;
  stroke-dasharray: 2 10;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(168, 216, 201, .08));
  transform: translate3d(calc(var(--gravity-x) * .18), calc(var(--gravity-y) * .18), 0) rotate(calc(var(--progress) * 22deg));
  transition: opacity .8s ease;
  opacity: .72;
  z-index: -1;
}

.orbit-field path { stroke: rgba(215, 181, 109, .38); stroke-dasharray: 7 18; }
.orbit-field-a { left: -18rem; top: -14rem; }
.orbit-field-b { right: -23rem; top: -10rem; transform-origin: 45% 52%; }
.orbit-field-c { left: -28rem; bottom: -22rem; transform-origin: 58% 47%; }
.orbit-field-d { right: -30rem; bottom: -26rem; transform-origin: 42% 54%; }
.orbit-field-e { left: -18rem; top: -5rem; transform-origin: 55% 58%; }
.orbit-field-f { left: 50%; top: 50%; margin: -44rem 0 0 -44rem; stroke-dasharray: 1 7; }

h1, h2, .pendulum-y, .giant-fragment, .aperture-name {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}

.kr-caption, .vertical-hangul, .seal, .aperture-kr, .porcelain-tile.kr b, .stamp-row span {
  font-family: "Noto Serif KR", serif;
}

.hand-note { font-family: "Nanum Pen Script", cursive; }

.orbit-kicker {
  margin: 0 0 1rem;
  font-size: .74rem;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.tangent-note, .coordinate-plate, .archive-title, .thinking-note, .window-note {
  max-width: 34rem;
  color: rgba(244, 240, 230, .82);
}

.tangent-note h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(4.8rem, 13vw, 13rem);
  line-height: .78;
  color: var(--porcelain);
}

h2 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 8.7rem);
  line-height: .83;
  color: var(--porcelain);
}

p { line-height: 1.65; }

.first-breath { min-height: 112vh; }
.pendulum-y {
  position: absolute;
  left: 5vw;
  top: -25vh;
  font-size: clamp(24rem, 58vw, 58rem);
  line-height: .75;
  color: rgba(244, 240, 230, .12);
  text-shadow: 0 0 70px rgba(168, 216, 201, .16);
  transform-origin: 50% 2%;
  animation: pendulum-sway 9s ease-in-out infinite;
}

.moon-pair {
  position: absolute;
  left: 47vw;
  top: 24vh;
  display: flex;
  gap: clamp(1rem, 4vw, 4rem);
  transform: translate3d(calc(var(--gravity-x) * .25), calc(var(--gravity-y) * .2), 0);
}

.moon {
  width: clamp(7rem, 15vw, 15rem);
  height: clamp(7rem, 15vw, 15rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 230, .42);
  color: rgba(7, 17, 31, 0);
  background:
    radial-gradient(circle at 38% 34%, rgba(244, 240, 230, .9), rgba(244, 240, 230, .38) 34%, rgba(168, 216, 201, .13) 63%, rgba(107, 92, 165, .16)),
    linear-gradient(135deg, rgba(244, 240, 230, .12), transparent);
  box-shadow: inset -1rem -1.2rem 3rem rgba(7, 17, 31, .34), 0 0 58px rgba(168, 216, 201, .12);
  backdrop-filter: blur(8px);
  animation: lens-focus 8s ease-in-out infinite alternate;
}

.moon b { font: 400 clamp(1.5rem, 3vw, 3rem)/1 "Instrument Serif"; color: rgba(7, 17, 31, calc(.12 + var(--progress) * .58)); }

.seal {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--porcelain);
  background: var(--cinnabar);
  box-shadow: 0 12px 40px rgba(217, 74, 56, .24);
  animation: seal-press 4.8s ease-in-out infinite;
}

.seal-small { left: 17vw; bottom: 9vh; width: 4.5rem; height: 4.5rem; font-size: 1.25rem; transform: rotate(-5deg); }

.title-note { position: absolute; left: 8vw; top: 26vh; }
.title-note p:last-child { max-width: 28rem; margin-top: 1.5rem; color: rgba(201, 209, 220, .72); }
.hand-note { position: absolute; color: rgba(168, 216, 201, .82); font-size: clamp(1.6rem, 3vw, 3.5rem); transform: rotate(-7deg); }
.note-a { right: 11vw; bottom: 13vh; }
.note-b { left: 8vw; bottom: 15vh; }

.giant-fragment {
  position: absolute;
  left: -6vw;
  top: 6vh;
  font-size: clamp(20rem, 46vw, 54rem);
  color: rgba(244, 240, 230, .07);
  line-height: .8;
}

.lens-cluster { position: absolute; left: 27vw; top: 21vh; display: flex; gap: 5vw; }
.glass-lens {
  width: clamp(11rem, 19vw, 19rem);
  height: clamp(11rem, 19vw, 19rem);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 30%, rgba(244, 240, 230, .62), rgba(168, 216, 201, .32) 35%, rgba(107, 92, 165, .18) 72%, transparent), conic-gradient(from 18deg, rgba(215, 181, 109, .25), rgba(201, 209, 220, .08), rgba(168, 216, 201, .28), rgba(215, 181, 109, .25));
  border: 1px solid rgba(244, 240, 230, .38);
  box-shadow: inset 0 0 2rem rgba(244, 240, 230, .16), 0 0 7rem rgba(168, 216, 201, .11);
  transform: rotate(calc(var(--progress) * -12deg));
}
.glass-lens span { font: 400 clamp(3rem, 7vw, 8rem)/1 "Instrument Serif"; color: rgba(7, 17, 31, .44); }
.moon-note { position: absolute; right: 10vw; bottom: 14vh; max-width: 32rem; }
.moon-note h2 { font-size: clamp(3rem, 6vw, 6.5rem); }
.kr-caption { color: var(--celadon); font-size: 1.2rem; }

.coordinate-ticks { position: absolute; right: 13vw; top: 15vh; width: 12rem; height: 12rem; border-radius: 50%; border: 1px solid rgba(201, 209, 220, .22); animation: orbit-align 18s linear infinite; }
.coordinate-ticks i { position: absolute; left: 50%; top: 50%; width: 1px; height: 48%; background: linear-gradient(var(--gold), transparent); transform-origin: 0 0; }
.coordinate-ticks i:nth-child(1){ transform: rotate(0deg); }.coordinate-ticks i:nth-child(2){ transform: rotate(60deg); }.coordinate-ticks i:nth-child(3){ transform: rotate(120deg); }.coordinate-ticks i:nth-child(4){ transform: rotate(180deg); }.coordinate-ticks i:nth-child(5){ transform: rotate(240deg); }.coordinate-ticks i:nth-child(6){ transform: rotate(300deg); }

.ink-bloom { position: absolute; right: 10vw; top: 12vh; width: clamp(22rem, 42vw, 42rem); height: clamp(22rem, 42vw, 42rem); border-radius: 49% 51% 44% 56%; background: radial-gradient(circle at 47% 42%, rgba(7, 17, 31, .78), rgba(107, 92, 165, .22) 42%, rgba(168, 216, 201, .08) 62%, transparent 73%); filter: blur(1px); opacity: .78; animation: ink-bloom 11s ease-in-out infinite alternate; }
.coordinate-plate { position: absolute; left: 14vw; top: 18vh; padding: 2rem; transform: rotate(3deg); border: 1px solid rgba(201, 209, 220, .22); background: linear-gradient(135deg, rgba(244, 240, 230, .08), rgba(7, 17, 31, .36)); box-shadow: 0 34px 90px rgba(7, 17, 31, .35); backdrop-filter: blur(8px); }
.coordinate-plate h2 { font-size: clamp(3rem, 6vw, 6rem); }
.coordinate-plate ul { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .55rem; color: rgba(244, 240, 230, .72); }
.coordinate-plate li { display: flex; gap: 1rem; align-items: baseline; border-bottom: 1px solid rgba(201, 209, 220, .13); padding-bottom: .45rem; }
.coordinate-plate li span { min-width: 4rem; color: var(--gold); font-family: "Noto Serif KR", serif; }
.vertical-hangul { position: absolute; right: 18vw; bottom: 12vh; font-size: clamp(7rem, 16vw, 18rem); line-height: .85; color: rgba(244, 240, 230, .17); text-shadow: 0 0 60px rgba(217, 74, 56, .12); }

.archive-title { position: absolute; left: 8vw; top: 12vh; max-width: 42rem; }
.archive-title h2 { font-size: clamp(3.2rem, 7vw, 7.8rem); }
.tile-field { position: absolute; right: 9vw; top: 18vh; width: min(48rem, 54vw); height: 65vh; }
.porcelain-tile { position: absolute; padding: 1.25rem; border: 1px solid rgba(201, 209, 220, .35); background: linear-gradient(135deg, rgba(244, 240, 230, .86), rgba(201, 209, 220, .5)); color: var(--ink); box-shadow: inset 0 0 3rem rgba(168, 216, 201, .15), 0 30px 80px rgba(7, 17, 31, .34); overflow: hidden; }
.porcelain-tile::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(130deg, transparent 0 22px, rgba(107, 92, 165, .12) 23px 24px); opacity: .45; }
.porcelain-tile b { position: relative; z-index: 1; display: block; font: 400 clamp(3rem, 8vw, 7rem)/.8 "Instrument Serif"; }
.porcelain-tile span { position: relative; z-index: 1; display: block; margin-top: 1rem; font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; color: rgba(7, 17, 31, .62); }
.porcelain-tile.tall { left: 0; top: 14%; width: 34%; height: 48%; transform: rotate(-6deg); }
.porcelain-tile.red { left: 36%; top: 4%; width: 25%; height: 28%; transform: rotate(4deg); background: var(--cinnabar); color: var(--porcelain); }
.porcelain-tile.wide { right: 0; top: 33%; width: 55%; height: 31%; transform: rotate(2deg); }
.porcelain-tile.kr { left: 28%; bottom: 4%; width: 38%; height: 34%; transform: rotate(-2deg); }

.mini-astrolabe { position: absolute; left: 10vw; top: 12vh; width: clamp(22rem, 42vw, 42rem); height: clamp(22rem, 42vw, 42rem); border-radius: 50%; transform: translate3d(calc(var(--gravity-x) * .12), calc(var(--gravity-y) * .12), 0); }
.mini-astrolabe .ring { position: absolute; inset: 8%; border: 1px solid rgba(201, 209, 220, .35); border-radius: 50%; }
.mini-astrolabe .r2 { inset: 24%; border-color: rgba(215, 181, 109, .34); transform: rotate(16deg); }
.mini-astrolabe .needle { position: absolute; left: 50%; top: 50%; width: 42%; height: 1px; background: var(--gold); transform-origin: 0 50%; animation: orbit-align 14s linear infinite; }
.letter { position: absolute; font: 400 clamp(2rem, 5vw, 5rem)/1 "Instrument Serif"; color: rgba(244, 240, 230, .82); }
.l-y{ left: 20%; top: 8%; }.l-o1{ left: 52%; top: 12%; }.l-n{ right: 12%; top: 35%; }.l-g{ left: 54%; bottom: 12%; }.l-j{ left: 25%; bottom: 18%; }.l-o2{ left: 9%; top: 44%; }.l-n2{ left: 45%; top: 45%; color: var(--celadon); }
.thinking-note { position: absolute; right: 11vw; top: 28vh; max-width: 35rem; }
.thinking-note h2 { font-size: clamp(3rem, 6vw, 6.4rem); }
.stamp-row { position: absolute; right: 12vw; bottom: 12vh; display: flex; gap: .8rem; }
.stamp-row span { display: grid; place-items: center; min-width: 4rem; height: 4rem; padding: .4rem .7rem; background: rgba(217, 74, 56, .9); color: var(--porcelain); transform: rotate(var(--r, -4deg)); }
.stamp-row span:nth-child(2){ --r: 5deg; }.stamp-row span:nth-child(3){ --r: -1deg; font-family: "Gabarito"; letter-spacing: .12em; }

.open-aperture { position: absolute; left: 50%; top: 50%; width: min(72vw, 46rem); height: min(72vw, 46rem); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(244, 240, 230, .38); background: radial-gradient(circle at 50% 45%, rgba(168, 216, 201, .18), rgba(7, 17, 31, .78) 54%, rgba(7, 17, 31, .96)); box-shadow: inset 0 0 5rem rgba(244, 240, 230, .08), 0 0 9rem rgba(168, 216, 201, .14); overflow: hidden; }
.star-field { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, var(--silver) 0 1px, transparent 1px), radial-gradient(circle at 62% 22%, var(--gold) 0 1px, transparent 1px), radial-gradient(circle at 75% 65%, var(--celadon) 0 1px, transparent 1px), radial-gradient(circle at 37% 72%, var(--porcelain) 0 1px, transparent 1px); background-size: 160px 180px, 210px 170px, 180px 230px, 260px 210px; opacity: .52; animation: star-drift 18s linear infinite; }
.aligned-astrolabe { position: absolute; inset: 10%; display: grid; place-items: center; border-radius: 50%; }
.aligned-astrolabe i { position: absolute; inset: 0; border: 1px solid rgba(201, 209, 220, .34); border-radius: 50%; animation: orbit-align 22s linear infinite; }
.aligned-astrolabe i:nth-child(2) { inset: 12%; border-color: rgba(215, 181, 109, .32); animation-duration: 31s; animation-direction: reverse; }
.aligned-astrolabe i:nth-child(3) { inset: 26%; border-style: dashed; border-color: rgba(168, 216, 201, .38); animation-duration: 17s; }
.aperture-name { position: relative; z-index: 2; font-size: clamp(3rem, 8vw, 7.6rem); color: var(--porcelain); text-align: center; text-shadow: 0 0 38px rgba(244, 240, 230, .16); }
.aperture-kr { position: absolute; z-index: 3; bottom: 25%; right: 21%; padding: .8rem 1rem; background: var(--cinnabar); color: var(--porcelain); font-size: clamp(1.4rem, 3vw, 3rem); transform: rotate(-4deg); }
.window-note { position: absolute; left: 8vw; bottom: 10vh; max-width: 31rem; }
.window-note h2 { font-size: clamp(2.8rem, 5vw, 5.8rem); }

@keyframes pendulum-sway { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.6deg); } }
@keyframes lens-focus { 0% { filter: blur(2px); transform: scale(.96); opacity: .72; } 100% { filter: blur(0); transform: scale(1.03); opacity: .98; } }
@keyframes seal-press { 0%, 100% { filter: saturate(.95); transform: rotate(-5deg) scale(.96); } 45% { filter: saturate(1.2); transform: rotate(-5deg) scale(1.02); } }
@keyframes orbit-align { to { transform: rotate(360deg); } }
@keyframes ink-bloom { 0% { transform: scale(.9) rotate(-6deg); border-radius: 49% 51% 44% 56%; } 100% { transform: scale(1.08) rotate(9deg); border-radius: 55% 45% 58% 42%; } }
@keyframes star-drift { to { background-position: 160px 180px, -210px 170px, 180px -230px, -260px -210px; } }

@media (max-width: 820px) {
  .phase-dial { right: .8rem; font-size: .55rem; }
  .phase-dial em { display: none; }
  .orbit-state { padding: 1.4rem; }
  .title-note, .coordinate-plate, .archive-title, .thinking-note, .window-note, .moon-note { left: 1.4rem; right: 1.4rem; top: auto; bottom: 8vh; max-width: calc(100vw - 4rem); }
  .moon-pair { left: 18vw; top: 28vh; }
  .lens-cluster { left: 6vw; top: 18vh; }
  .tile-field { left: 8vw; right: auto; width: 82vw; top: 24vh; }
  .vertical-hangul { right: 6vw; top: 12vh; bottom: auto; }
  .mini-astrolabe { left: -8vw; top: 8vh; }
  .open-aperture { width: 92vw; height: 92vw; }
}