:root {
  /* Roboto Flex** Fle* calibrates the “inner signal.” Keep the first screen sparse and luxurious: one title Roboto Flex** Fle* from Google Fonts */
  --deep-orbital-navy: #071426;
  --blue-black-glass: #0B1D36;
  --mist-sapphire: #9FC7E8;
  --frosted-cyan: #D7F1FF;
  --pearl-white: #F5FAFF;
  --quiet-platinum: #B8C7D9;
  --muted-violet-shadow: #6E7FA6;
  --soft-signal-blue: #4BA3FF;
  --display: "Fraunces", Georgia, serif;
  --label: "Roboto Flex", "Roboto", Arial, sans-serif;
  --body: "Noto Sans JP", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--pearl-white);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 8%, rgba(159, 199, 232, 0.18), transparent 28rem),
    radial-gradient(circle at 80% 34%, rgba(75, 163, 255, 0.12), transparent 30rem),
    linear-gradient(135deg, var(--deep-orbital-navy), var(--blue-black-glass) 52%, #061020);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(215, 241, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 241, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
  z-index: 1;
}

.grain-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  z-index: 2;
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(245, 250, 255, .08) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(115deg, rgba(184, 199, 217, .025) 0 1px, transparent 1px 11px);
  mix-blend-mode: screen;
}

.cursor-glow {
  position: fixed;
  width: 34rem;
  height: 34rem;
  left: 0;
  top: 0;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 241, 255, 0.18), rgba(75, 163, 255, 0.08) 34%, transparent 68%);
  filter: blur(18px);
  z-index: 3;
}

.fixed-hud {
  position: fixed;
  left: 2.2rem;
  right: 2.2rem;
  top: 1.35rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  z-index: 8;
  color: var(--quiet-platinum);
  font-family: var(--label);
  font-size: clamp(0.58rem, 0.8vw, 0.72rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 72, "wght" 360, "GRAD" -80;
}

.observatory { position: relative; z-index: 4; }

.chapter {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.4rem, 4vw, 4rem);
  display: grid;
  place-items: stretch;
}

.chapter::after {
  content: "";
  position: absolute;
  inset: 3.6rem clamp(1rem, 3vw, 3rem);
  border: 1px solid rgba(184, 199, 217, 0.18);
  clip-path: polygon(0 0, 9rem 0, 9rem 1px, 100% 1px, 100% 100%, calc(100% - 9rem) 100%, calc(100% - 9rem) calc(100% - 1px), 0 calc(100% - 1px));
  pointer-events: none;
  z-index: -1;
}

.chapter-grid {
  width: min(1500px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  min-height: calc(100vh - 12rem);
}

.eyebrow, .hud-rail, .annotation-rail, .coordinate-line {
  font-family: var(--label);
  color: var(--quiet-platinum);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-variation-settings: "wdth" 65, "wght" 430, "GRAD" -70;
}

.eyebrow { font-size: .72rem; margin: 0 0 1.2rem; }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  line-height: .88;
  font-weight: 430;
  color: var(--frosted-cyan);
  text-shadow: 0 0 34px rgba(159, 199, 232, 0.22);
  font-variation-settings: "opsz" 120, "wght" 430, "SOFT" 65, "WONK" 1;
}

h1 { font-size: clamp(5rem, 18vw, 18rem); letter-spacing: -.075em; }
h1 span { display: block; font-size: .28em; margin-left: 47%; color: var(--mist-sapphire); font-style: italic; }
h2 { font-size: clamp(3rem, 8vw, 9rem); letter-spacing: -.055em; max-width: 10ch; }

p { color: rgba(245, 250, 255, 0.74); font-weight: 300; line-height: 1.85; }

.chapter-aperture { overflow: hidden; }
.aperture-moon {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(1.3rem, 7vw, 6rem);
  height: clamp(1.3rem, 7vw, 6rem);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(245, 250, 255, .58);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(184, 199, 217, .2), 0 0 80px rgba(215, 241, 255, .2), inset 0 0 42px rgba(159, 199, 232, .16);
  opacity: .82;
  transition: width 1.1s ease, height 1.1s ease, opacity 1.1s ease;
}
.chapter-aperture.active .aperture-moon { width: min(74vw, 48rem); height: min(74vw, 48rem); opacity: .24; }

.hero-title { grid-column: 3 / 12; align-self: end; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.coordinate-line { max-width: 34rem; font-size: .75rem; margin: 1.2rem 0 0 1vw; color: var(--mist-sapphire); }
.hud-rail { display: grid; gap: .7rem; font-size: .66rem; line-height: 1.8; }
.hud-rail.left { grid-column: 1 / 3; align-self: start; padding-top: 16vh; }
.hud-rail.top { grid-column: 2 / 10; grid-row: 1; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(184,199,217,.22); padding-bottom: 1rem; }

.data-drift i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: .35rem; height: .35rem;
  border-radius: 50%;
  background: var(--frosted-cyan);
  box-shadow: 0 0 22px rgba(215, 241, 255, .72);
  animation: drift 9s ease-in-out infinite alternate;
  animation-delay: var(--d);
}

.ledger-grid .silence-column { grid-column: 1 / 4; height: 72vh; border-right: 1px solid rgba(184,199,217,.16); }
.text-river { grid-column: 4 / 9; grid-row: 1; }
.text-river p:not(.eyebrow), .instrument-copy p:not(.eyebrow), .current-text p:not(.eyebrow), .last-frame p:not(.eyebrow) { max-width: 35rem; }
.annotation-rail { font-size: .64rem; display: grid; gap: .8rem; }
.annotation-rail.right { grid-column: 10 / 13; }
.annotation-rail.left { grid-column: 1 / 3; }
.fragment {
  all: unset;
  cursor: pointer;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(184, 199, 217, .18);
  color: var(--quiet-platinum);
  background: rgba(11, 29, 54, .28);
  backdrop-filter: blur(18px);
  transition: color .6s ease, border-color .6s ease, transform .6s ease, background .6s ease;
}
.fragment.active, .fragment:hover { color: var(--frosted-cyan); border-color: rgba(215, 241, 255, .52); transform: translateX(-.45rem); background: rgba(159, 199, 232, .09); }

.ledger-leaves { grid-column: 5 / 12; grid-row: 1; min-height: 58vh; position: relative; pointer-events: none; }
.vellum {
  position: absolute;
  width: min(28rem, 42vw);
  min-height: 12rem;
  padding: 1.2rem;
  border: 1px solid rgba(215, 241, 255, .2);
  background: linear-gradient(135deg, rgba(215,241,255,.11), rgba(11,29,54,.22));
  box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(245,250,255,.14);
  backdrop-filter: blur(18px);
  color: var(--frosted-cyan);
  display: grid;
  align-content: space-between;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .68rem;
}
.vellum b { font-family: var(--display); font-size: 1.45rem; text-transform: none; letter-spacing: -.02em; font-weight: 360; }
.vellum em { color: var(--mist-sapphire); font-style: normal; }
.leaf-one { left: 0; top: 5%; transform: rotate(-4deg); }
.leaf-two { right: 5%; top: 30%; transform: rotate(3deg); }
.leaf-three { left: 18%; bottom: 0; transform: rotate(-1deg); }

.instrument-copy { grid-column: 2 / 6; grid-row: 2; }
.instrument-panel { grid-column: 6 / 12; grid-row: 2; aspect-ratio: 1; position: relative; }
.instrument-panel::before, .last-frame::before {
  content: ""; position: absolute; inset: 7%;
  border: 1px solid rgba(184, 199, 217, .22);
  box-shadow: inset 0 0 50px rgba(159,199,232,.08), 0 0 90px rgba(75,163,255,.07);
}
.orbital-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 26px rgba(75,163,255,.16)); }
.draw-ring, .contour { fill: none; stroke: var(--quiet-platinum); stroke-width: 1; opacity: .55; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 7s ease forwards; }
.draw-ring.slow { animation-duration: 9s; stroke: var(--mist-sapphire); }
.contour { stroke: var(--frosted-cyan); opacity: .42; animation-delay: .5s; }
.c2 { animation-delay: 1s; stroke: var(--mist-sapphire); }
.c3 { animation-delay: 1.4s; stroke: var(--muted-violet-shadow); }
.nodes circle { fill: var(--frosted-cyan); opacity: .78; animation: pulse 4s ease-in-out infinite; }

.current-grid { align-items: end; }
.wave-curtain { grid-column: 1 / 13; grid-row: 1; opacity: .78; align-self: center; }
.wave-curtain svg { width: 100%; height: 62vh; overflow: visible; }
.wave-curtain path { fill: none; stroke: rgba(215, 241, 255, .28); stroke-width: 1.1; filter: drop-shadow(0 0 16px rgba(75,163,255,.25)); animation: wave 10s ease-in-out infinite alternate; }
.wave-curtain path:nth-child(2) { stroke: rgba(159, 199, 232, .24); animation-delay: -2s; }
.wave-curtain path:nth-child(3) { stroke: rgba(110, 127, 166, .32); animation-delay: -4s; }
.current-text { grid-column: 5 / 11; grid-row: 1; align-self: center; padding: 3rem; background: rgba(7, 20, 38, .46); backdrop-filter: blur(22px); border-left: 1px solid rgba(184,199,217,.22); }
.current-labels { grid-row: 1; align-self: end; padding-bottom: 12vh; }

.chapter-last { min-height: 110vh; overflow: hidden; }
.pearl-mist { position: absolute; inset: 0; background: radial-gradient(circle at 52% 52%, rgba(245,250,255,.22), rgba(215,241,255,.09) 24%, transparent 58%); filter: blur(28px); }
.last-frame {
  position: relative;
  grid-column: 4 / 10;
  text-align: center;
  padding: clamp(3rem, 8vw, 7rem) clamp(2rem, 7vw, 6rem);
  border: 1px solid rgba(184, 199, 217, .36);
  background: linear-gradient(135deg, rgba(245,250,255,.06), rgba(7,20,38,.34));
  backdrop-filter: blur(24px);
}
.last-frame h2 { max-width: none; font-size: clamp(3rem, 9vw, 9rem); }
.last-frame p { margin-inline: auto; }

.magnetic { will-change: transform; }

@keyframes drift { to { transform: translate3d(1.4rem, -2.2rem, 0) scale(1.7); opacity: .34; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .35; } }
@keyframes wave { to { transform: translateX(-2.5%) translateY(2.5%); } }

@media (max-width: 900px) {
  .fixed-hud { left: 1rem; right: 1rem; flex-direction: column; gap: .35rem; }
  .chapter-grid, .ledger-grid, .instrument-grid, .current-grid, .last-grid { display: block; min-height: auto; }
  .chapter { padding-top: 8rem; }
  .hud-rail, .annotation-rail, .hero-title, .text-river, .instrument-copy, .current-text, .last-frame { margin: 2rem 0; }
  .ledger-grid .silence-column { display: none; }
  .ledger-leaves { min-height: 32rem; }
  .vellum { width: 76vw; }
  .instrument-panel { width: 92vw; margin: 2rem auto; }
  .current-text { padding: 1.4rem; }
}