/* =========================================================
   The monkey's space program: pieces shared by Home (the launch pad) and About (the mission log).
   Performance: nothing here follows the scroll. Everything is painted once; the few things that loop are small and
   move with transform or opacity only, and they pause once their section is off screen (core.js marks it .is-off)
   ========================================================= */

/* no film grain: a full-screen layer over everything doubled the work of drawing every frame of the scroll */
body::after { content: none; }

/* a word set in a serif italic, for the accents in the headings */
.ser { font-family: "Instrument Serif", "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* the night sky: a tile of stars over soft glows, painted once */
:root { --stars: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><circle cx='155' cy='72' r='0.6' fill='%23bdb3ff' opacity='0.39'/><circle cx='45' cy='280' r='0.9' fill='%23e2dcff' opacity='0.37'/><circle cx='201' cy='116' r='1.3' fill='%23bdb3ff' opacity='0.38'/><circle cx='59' cy='107' r='0.6' fill='%23e2dcff' opacity='0.67'/><circle cx='24' cy='106' r='0.8' fill='%23fff' opacity='0.51'/><circle cx='260' cy='274' r='0.8' fill='%23bdb3ff' opacity='0.41'/><circle cx='307' cy='179' r='0.7' fill='%23bdb3ff' opacity='0.66'/><circle cx='99' cy='327' r='1.3' fill='%23e2dcff' opacity='0.78'/><circle cx='281' cy='218' r='1' fill='%23fff' opacity='0.49'/><circle cx='336' cy='117' r='1' fill='%23fff' opacity='0.64'/><circle cx='350' cy='138' r='0.7' fill='%23e2dcff' opacity='0.41'/><circle cx='79' cy='164' r='1.6' fill='%23ffd9ec' opacity='0.58'/><circle cx='37' cy='268' r='1.1' fill='%23fff' opacity='0.54'/><circle cx='285' cy='278' r='1.6' fill='%23fff' opacity='0.39'/><circle cx='453' cy='228' r='0.7' fill='%23ffd9ec' opacity='0.38'/><circle cx='149' cy='277' r='1.6' fill='%23e2dcff' opacity='0.51'/><circle cx='426' cy='167' r='1.6' fill='%23bdb3ff' opacity='0.55'/><circle cx='56' cy='28' r='1' fill='%23fff' opacity='0.42'/><circle cx='191' cy='440' r='1.6' fill='%23e2dcff' opacity='0.39'/><circle cx='193' cy='133' r='0.8' fill='%23cfe0ff' opacity='0.8'/><circle cx='264' cy='339' r='1.1' fill='%23e2dcff' opacity='0.73'/><circle cx='460' cy='72' r='0.8' fill='%23ffd9ec' opacity='0.43'/><circle cx='112' cy='233' r='0.8' fill='%23fff' opacity='0.49'/><circle cx='70' cy='257' r='1.1' fill='%23ffd9ec' opacity='0.87'/><circle cx='412' cy='456' r='0.6' fill='%23cfe0ff' opacity='0.6'/><circle cx='374' cy='420' r='1.3' fill='%23e2dcff' opacity='0.57'/><circle cx='50' cy='304' r='0.6' fill='%23fff' opacity='0.45'/><circle cx='212' cy='53' r='0.6' fill='%23bdb3ff' opacity='0.41'/><circle cx='73' cy='49' r='1.1' fill='%23fff' opacity='0.69'/><circle cx='420' cy='295' r='0.8' fill='%23fff' opacity='0.7'/><circle cx='289' cy='228' r='0.7' fill='%23e2dcff' opacity='0.82'/><circle cx='231' cy='150' r='0.8' fill='%23fff' opacity='0.41'/><circle cx='355' cy='230' r='0.8' fill='%23fff' opacity='0.63'/><circle cx='456' cy='254' r='0.8' fill='%23fff' opacity='0.73'/><circle cx='364' cy='143' r='0.7' fill='%23fff' opacity='0.73'/><circle cx='249' cy='436' r='1.1' fill='%23bdb3ff' opacity='0.77'/><circle cx='260' cy='241' r='0.9' fill='%23cfe0ff' opacity='0.69'/><circle cx='473' cy='409' r='0.9' fill='%23ffd9ec' opacity='0.8'/><circle cx='386' cy='96' r='1.6' fill='%23fff' opacity='0.55'/><circle cx='475' cy='379' r='1.6' fill='%23ffd9ec' opacity='0.49'/><circle cx='290' cy='165' r='1.1' fill='%23fff' opacity='0.88'/><circle cx='39' cy='49' r='1.6' fill='%23fff' opacity='0.46'/><circle cx='232' cy='473' r='0.6' fill='%23ffd9ec' opacity='0.61'/><circle cx='165' cy='309' r='0.7' fill='%23cfe0ff' opacity='0.85'/><circle cx='342' cy='96' r='0.8' fill='%23ffd9ec' opacity='0.59'/><circle cx='160' cy='384' r='1.3' fill='%23ffd9ec' opacity='0.6'/></svg>"); }
.sky {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 12%, rgba(143, 125, 255, .2), transparent 70%),
    radial-gradient(50% 40% at 88% 80%, rgba(45, 107, 255, .12), transparent 70%),
    var(--stars) 0 0 / 480px 480px;
}
/* a handful of brighter stars that twinkle (opacity only) */
.twinkle { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.twinkle i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(226, 220, 255, .6); animation: tw-star 3s ease-in-out infinite alternate; }
.twinkle i:nth-child(1) { left: 12%; top: 22%; animation-delay: -.4s; }
.twinkle i:nth-child(2) { left: 31%; top: 9%; animation-delay: -1.3s; }
.twinkle i:nth-child(3) { left: 58%; top: 16%; animation-delay: -2.1s; }
.twinkle i:nth-child(4) { left: 77%; top: 7%; animation-delay: -.9s; }
.twinkle i:nth-child(5) { left: 89%; top: 34%; animation-delay: -1.7s; }
.twinkle i:nth-child(6) { left: 6%; top: 52%; animation-delay: -2.6s; }
.twinkle i:nth-child(7) { left: 44%; top: 38%; animation-delay: -.2s; }
.twinkle i:nth-child(8) { left: 68%; top: 48%; animation-delay: -1.1s; }

/* the monkey's rocket (a copy of the curtain's, made by the page script), idling: flame flickering, monkey waving */
/* a section label: a small mono line with a rule, like a stencilled marking */
.tag { display: inline-flex; align-items: center; gap: 12px; color: var(--iris-soft); }
.tag::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* a ticker band of words, still, tilted across a section join */
.ticker { position: relative; overflow: hidden; padding-block: 16px; background: var(--iris); color: var(--ink); transform: rotate(-2deg); margin-inline: -4vw; }
.ticker__track { display: flex; width: max-content; }
.ticker__track span { flex: none; padding-inline: 22px; font: 700 clamp(18px, 2vw, 28px)/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.ticker__track span:nth-child(even) { font: italic 400 clamp(20px, 2.2vw, 32px)/1 "Instrument Serif", serif; }

/* the round arrow buttons that step Home's story and About's journey, with the step count between them */
.fg-ctrl { display: flex; align-items: center; gap: 16px; }
.fg-arrow { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(189, 179, 255, .35); background: #141227; color: var(--fg); transition: background-color .3s, color .3s, opacity .3s, transform .3s var(--ease-out); }
.fg-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fg-arrow--next { background: #a898ff; border-color: transparent; color: var(--ink); }
.fg-arrow:hover:not(:disabled) { background: var(--fg); color: var(--ink); transform: scale(1.06); }
.fg-arrow:disabled { opacity: .3; cursor: default; }
.fg-count { color: var(--mute); font-variant-numeric: tabular-nums; }
.fg-count b { color: var(--fg); font-weight: 500; }
@media (max-width: 860px) {
  .fg-arrow { width: 48px; height: 48px; }
}

@keyframes tw-star { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .twinkle i { animation: none !important; }
}