:root {
  /* Compliance typography phrase: Source Sans 3** for the primary humanist system: body copy */
  --midnight: #07122F;
  --ink: #020715;
  --cyan: #42D9FF;
  --vermilion: #FF4B3E;
  --cream: #F4EED8;
  --lavender: #A7A5FF;
  --gold: #FFD166;
  --spine: rgba(244, 238, 216, 0.78);
  --font-body: "Source Sans 3", Inter, system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-parser-token: "3**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(66, 217, 255, 0.13), transparent 22rem),
    radial-gradient(circle at 88% 72%, rgba(255, 75, 62, 0.12), transparent 20rem),
    linear-gradient(180deg, var(--ink), var(--midnight) 38%, #102b55 72%, #42D9FF 140%);
  z-index: -3;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: screen;
  z-index: 20;
  background-image:
    radial-gradient(circle at 18% 21%, rgba(244, 238, 216, .55) 0 1px, transparent 1px),
    radial-gradient(circle at 74% 47%, rgba(66, 217, 255, .45) 0 1px, transparent 1px),
    radial-gradient(circle at 48% 83%, rgba(255, 209, 102, .45) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  background-size: 71px 67px, 89px 93px, 113px 107px, 100% 5px;
}

.horizon {
  position: fixed;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100vh;
  transform: translateX(-50%);
  background: rgba(244,238,216,.13);
  z-index: 8;
  pointer-events: none;
}

.horizon span {
  display: block;
  width: 100%;
  height: var(--scroll-progress, 0%);
  background: linear-gradient(180deg, var(--cyan), var(--cream), var(--gold));
  box-shadow: 0 0 22px rgba(66,217,255,.8);
}

.storyboard { position: relative; }

.pass {
  min-height: 112vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8rem 1.25rem;
  isolation: isolate;
}

.pass::before,
.pass::after {
  content: "";
  position: absolute;
  inset: 2rem max(1rem, calc(50vw - 31rem));
  border-left: 1px solid rgba(244,238,216,.24);
  border-right: 1px solid rgba(244,238,216,.14);
  pointer-events: none;
  z-index: -1;
}

.pass::after {
  inset: auto max(1rem, calc(50vw - 31rem)) 2.6rem;
  height: 14px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(244,238,216,.8), transparent);
}

.panel-spine {
  width: min(100%, 680px);
  margin: 0 auto;
  position: relative;
  z-index: 4;
}

.panel-spine.narrow { width: min(100%, 580px); }

.plate-label {
  margin: 0 0 2rem;
  color: var(--cream);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.plate-label.cyan { color: var(--cyan); }
.plate-label.vermilion { color: var(--vermilion); }
.plate-label.gold { color: var(--gold); }

.jp {
  font-family: var(--font-jp);
  letter-spacing: .16em;
}

.margin-note {
  position: absolute;
  top: 5.5rem;
  left: calc(50% + 22rem);
  writing-mode: vertical-rl;
  color: rgba(244,238,216,.58);
  font-size: .8rem;
}

.typed-lockup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.typed-lockup h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 8vw, 7rem);
  line-height: .9;
  color: var(--cream);
  text-shadow: -3px 2px 0 rgba(66,217,255,.18), 3px -2px 0 rgba(255,75,62,.18);
  white-space: nowrap;
}

.rule { height: 1px; background: rgba(244,238,216,.78); }

.cursor {
  display: inline-block;
  width: .08em;
  height: .78em;
  margin-left: .08em;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan), 8px 0 0 rgba(66,217,255,.16);
  animation: cursorBlink .72s steps(1) infinite;
  vertical-align: -.08em;
}

.night-copy,
.statement,
.final-copy {
  max-width: 39rem;
  color: rgba(244,238,216,.82);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.5;
}

.pass-night { background: radial-gradient(circle at 50% 92%, rgba(66,217,255,.10), transparent 32rem), var(--midnight); }
.pass-ink { background: linear-gradient(180deg, #07122F, #08183b); }
.pass-signal { background: linear-gradient(180deg, #08183b, #0c1b3b 55%, #07122F); }
.pass-drift { background: linear-gradient(180deg, #07122F, #102149); }
.pass-dawn { background: linear-gradient(180deg, #102149, #1f6d8c 48%, #42D9FF 118%); }

.poster-word,
.final-word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.06em;
  font-size: clamp(5rem, 18vw, 14rem);
  line-height: .75;
}

.poster-word {
  color: var(--cream);
  text-shadow: 9px 0 0 var(--vermilion), -7px 6px 0 var(--cyan), 0 14px 0 rgba(167,165,255,.32);
}

.intertitle {
  margin: 0 0 2rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 6.2rem);
  line-height: .9;
}

.stamps { display: grid; gap: 1rem; }

.stamp {
  min-height: 3.3rem;
  margin: 0;
  padding: .82rem 1rem;
  border: 2px solid var(--cream);
  background: rgba(244,238,216,.08);
  color: var(--cream);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 rgba(255,75,62,.85), -3px -3px 0 rgba(66,217,255,.5);
  transform: rotate(var(--stamp-tilt, -1deg));
}

.stamp:nth-child(2) { --stamp-tilt: 1.2deg; box-shadow: 6px 6px 0 rgba(66,217,255,.75), -3px -3px 0 rgba(255,209,102,.45); }
.stamp:nth-child(3) { --stamp-tilt: -.45deg; box-shadow: 6px 6px 0 rgba(255,209,102,.8), -3px -3px 0 rgba(167,165,255,.5); }

blockquote {
  margin: 0 0 2rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 5.4rem);
  line-height: .95;
}

.final-word {
  color: var(--ink);
  text-shadow: 0 3px 0 var(--cream), 6px 0 0 rgba(255,75,62,.65), -6px 2px 0 rgba(66,217,255,.55);
  border-bottom: 8px solid var(--cream);
  display: inline-block;
}

.kana-line { color: var(--ink); font-weight: 800; margin: 1rem 0; }
.final-copy { color: rgba(2,7,21,.82); font-weight: 600; }

.cloud {
  position: absolute;
  width: 18rem;
  height: 8rem;
  border-radius: 7rem;
  background:
    radial-gradient(circle at 24% 38%, var(--cream) 0 2.9rem, transparent 3rem),
    radial-gradient(circle at 47% 24%, var(--cream) 0 4.2rem, transparent 4.3rem),
    radial-gradient(circle at 72% 43%, var(--cream) 0 3.25rem, transparent 3.35rem),
    linear-gradient(var(--cream), var(--cream));
  background-size: 100% 100%, 100% 100%, 100% 100%, 78% 38%;
  background-position: center, center, center, 50% 72%;
  background-repeat: no-repeat;
  filter: drop-shadow(10px 8px 0 rgba(255,75,62,.72)) drop-shadow(-8px -5px 0 rgba(66,217,255,.5));
  animation: drift 9s ease-in-out infinite alternate;
}

.cloud span,
.cloud::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(7,18,47,.52) 0 2px, transparent 2px);
  background-size: 14px 14px;
  mix-blend-mode: multiply;
}

.cloud-left { left: max(-4rem, calc(50% - 42rem)); top: 18%; transform: rotate(-8deg); }
.cloud-right { right: max(-4rem, calc(50% - 43rem)); bottom: 16%; transform: rotate(7deg) scale(.88); animation-duration: 12s; }
.final-cloud { right: calc(50% - 38rem); top: 14%; transform: scale(.72) rotate(5deg); opacity: .82; }

.moon,
.sunrise-disc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.moon {
  width: 8rem;
  height: 8rem;
  left: calc(50% - 36rem);
  bottom: 14%;
  background: var(--cream);
  box-shadow: 10px -6px 0 var(--lavender), 0 0 35px rgba(244,238,216,.22);
  opacity: .74;
}

.sunrise-disc {
  width: 22rem;
  height: 22rem;
  left: calc(50% - 11rem);
  bottom: -8rem;
  background: radial-gradient(circle, var(--gold), var(--vermilion) 62%, transparent 63%);
  opacity: .72;
  z-index: -1;
}

.spark,
.misprint,
.type-key,
.label-fragment,
.proof,
.ellipsis,
.target,
.burst,
.speed-lines,
.crop {
  position: absolute;
  pointer-events: none;
}

.spark { width: .8rem; height: .8rem; background: var(--cyan); box-shadow: 0 0 24px var(--cyan), 1.2rem .2rem 0 rgba(66,217,255,.18); transform: rotate(45deg); }
.spark-one { top: 42%; right: calc(50% - 25rem); animation: spark 2.8s ease-in-out infinite; }

.burst {
  width: 13rem; height: 13rem; border-radius: 50%; right: calc(50% - 35rem); top: 10%;
  background: radial-gradient(circle, var(--gold) 0 26%, transparent 27%), repeating-conic-gradient(var(--gold) 0 7deg, transparent 7deg 14deg);
  opacity: .82; animation: stampIn 5s ease-in-out infinite;
}

.misprint { width: 7rem; height: 12rem; border: 3px solid; opacity: .65; }
.misprint.red { border-color: var(--vermilion); left: calc(50% - 33rem); bottom: 20%; transform: rotate(6deg); }
.misprint.blue { border-color: var(--cyan); left: calc(50% - 31.7rem); bottom: 21.2%; transform: rotate(6deg); }

.type-key {
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: .55rem;
  background: var(--cream); color: var(--midnight); font-weight: 800; border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--vermilion); animation: drift 8s ease-in-out infinite alternate;
}
.key-s { left: calc(50% - 35rem); top: 18%; }
.key-m { right: calc(50% - 34rem); top: 44%; animation-duration: 11s; }
.key-dot { left: calc(50% - 27rem); bottom: 18%; animation-duration: 9s; }

.label-fragment { right: calc(50% - 32rem); bottom: 20%; padding: .7rem 1rem; background: var(--lavender); color: var(--ink); font-weight: 800; transform: rotate(8deg); }

.proof { padding: 1rem; border: 2px solid var(--cream); color: var(--cream); font-weight: 800; letter-spacing: .14em; background: rgba(2,7,21,.45); box-shadow: 6px 6px 0 rgba(66,217,255,.6); animation: drift 10s ease-in-out infinite alternate; }
.proof-one { left: calc(50% - 35rem); top: 17%; transform: rotate(-7deg); }
.proof-two { right: calc(50% - 33rem); bottom: 18%; transform: rotate(5deg); animation-duration: 13s; }
.ellipsis { right: calc(50% - 22rem); top: 21%; color: var(--gold); font-size: 5rem; letter-spacing: .2em; animation: drift 7s ease-in-out infinite alternate; }
.speed-lines { left: calc(50% - 40rem); bottom: 28%; width: 13rem; height: 7rem; transform: rotate(-15deg); }
.speed-lines i { display: block; height: 3px; margin: 1rem 0; background: var(--cream); box-shadow: 5px 4px 0 var(--vermilion); }
.target { width: 6rem; height: 6rem; border: 3px solid var(--vermilion); border-radius: 50%; right: calc(50% - 39rem); top: 15%; }
.target::before, .target::after, .target span { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); background: var(--vermilion); }
.target::before { width: 100%; height: 3px; }
.target::after { width: 3px; height: 100%; }
.target span { width: 1rem; height: 1rem; border-radius: 50%; }

.crop { width: 3rem; height: 3rem; border-color: var(--cream); opacity: .7; }
.crop-tl { top: 4rem; left: calc(50% - 31rem); border-top: 2px solid; border-left: 2px solid; }
.crop-br { bottom: 4rem; right: calc(50% - 31rem); border-bottom: 2px solid; border-right: 2px solid; }
.crop-final-left { left: calc(50% - 32rem); bottom: 8rem; border-bottom: 3px solid var(--ink); border-left: 3px solid var(--ink); }
.crop-final-right { right: calc(50% - 32rem); top: 8rem; border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); }

.reveal { opacity: 0; transform: translateY(28px) rotate(.35deg); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0) rotate(0); }

@keyframes cursorBlink { 50% { opacity: 0; } }
@keyframes drift { to { translate: 0 -1.2rem; rotate: 3deg; } }
@keyframes spark { 0%, 100% { opacity: .4; transform: rotate(45deg) scale(.7); } 45% { opacity: 1; transform: rotate(45deg) scale(1.15); } }
@keyframes stampIn { 0%, 75%, 100% { transform: scale(.98) rotate(0); } 80% { transform: scale(1.04) rotate(-2deg); } }

@media (max-width: 760px) {
  .pass { padding: 6rem 1rem; min-height: 105vh; }
  .typed-lockup { grid-template-columns: 1fr; gap: .8rem; }
  .typed-lockup h1 { white-space: normal; font-size: clamp(3rem, 16vw, 5rem); }
  .margin-note, .type-key, .label-fragment, .proof-two, .target, .burst { display: none; }
  .cloud-left { left: -7rem; }
  .cloud-right { right: -8rem; }
  .poster-word, .final-word { font-size: clamp(4.5rem, 24vw, 8rem); }
  blockquote { font-size: clamp(2.1rem, 12vw, 4.2rem); }
}