/* CHAPTER 03 · EXPLORATION — an eclipse drawn on a white tarot card.
   Black and white only; the RGB split lives on the card brackets, never on text. */

@font-face {
  font-family: "EX Hei";
  src: url("./assets/exploration/ex-hei.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EX Serif";
  src: url("./assets/exploration/ex-serif.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.theme-space[data-theme="exploration"] {
  --ex-paper: #f4f5f7;
  --ex-white: #fcfcfd;
  --ex-ink: #0a0b0e;
  --ex-grey: #6d717a;
  --ex-mist: #dfe2e7;
  --ex-hair: rgba(10, 11, 14, 0.2);
  --ex-red: #ff2d55;
  --ex-cyan: #12d3ff;
  --ex-hei: "EX Hei", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --ex-serif: "EX Serif", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --ex-text: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  --ex-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ex-snap: cubic-bezier(0.2, 1.4, 0.35, 1);
  background: var(--ex-paper);
}

.theme-space[data-theme="exploration"] .theme-space__backdrop,
.theme-space[data-theme="exploration"] .theme-heading {
  display: none;
}

.theme-space[data-theme="exploration"] .theme-content {
  scrollbar-color: var(--ex-ink) transparent;
  scrollbar-width: thin;
}

.theme-space[data-theme="exploration"] .theme-content::-webkit-scrollbar {
  width: 6px;
}

.theme-space[data-theme="exploration"] .theme-content::-webkit-scrollbar-thumb {
  background: var(--ex-ink);
}

/* ---------- floating menu: a small eclipse ---------- */

.theme-space[data-theme="exploration"] .fab__trigger {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--ex-ink);
  box-shadow:
    0 0 0 2.5px var(--ex-paper),
    0 0 0 4px var(--ex-ink),
    -2px 1px 0 4px var(--ex-cyan),
    2px -1px 0 4px var(--ex-red);
  transition: transform 420ms var(--ex-snap);
}

.theme-space[data-theme="exploration"] .fab__trigger::after {
  display: none;
}

.theme-space[data-theme="exploration"] .fab__trigger span {
  width: 18px;
  height: 2px;
  background: var(--ex-paper);
}

.theme-space[data-theme="exploration"] .fab__trigger:hover {
  transform: scale(1.06);
}

.theme-space[data-theme="exploration"] .fab.is-open .fab__trigger {
  transform: rotate(135deg) scale(0.94);
}

.theme-space[data-theme="exploration"] .fab__actions button {
  gap: 8px;
  color: var(--ex-ink);
  box-shadow: none;
}

.theme-space[data-theme="exploration"] .fab__actions i {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--ex-ink);
  border-radius: 50%;
  color: var(--ex-ink);
  background: var(--ex-white);
  box-shadow: none;
}

.theme-space[data-theme="exploration"] .fab__actions button:hover i,
.theme-space[data-theme="exploration"] .fab__actions button:focus-visible i {
  color: var(--ex-paper);
  background: var(--ex-ink);
}

.theme-space[data-theme="exploration"] .fab__label {
  padding: 6px 14px 5px;
  border-radius: 999px;
  color: var(--ex-paper);
  background: var(--ex-ink);
  font-family: var(--ex-hei);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* ---------- root ---------- */

.ex {
  --ex-pad: clamp(16px, 4vw, 72px);
  position: relative;
  min-height: 100%;
  overflow-x: clip;
  color: var(--ex-ink);
  background: var(--ex-paper);
  font-family: var(--ex-text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.ex *,
.ex *::before,
.ex *::after {
  box-sizing: border-box;
}

:where(.ex) :is(h2, h3, h4, p, ol, ul, dl, dd, figure) {
  margin: 0;
}

:where(.ex) :is(ol, ul) {
  padding: 0;
  list-style: none;
}

:where(.ex) button {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}

.ex a {
  color: inherit;
}

.ex :focus-visible {
  outline: 2px solid var(--ex-ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--ex-paper);
}

.ex-seg {
  display: block;
  overflow: visible;
}

/* ---------- corner brackets (RGB split on shapes only) ---------- */

.ex-bracket {
  position: absolute;
  z-index: 3;
  width: var(--br, 56px);
  height: var(--br, 56px);
  overflow: visible;
  pointer-events: none;
}

.ex-bracket__r {
  fill: var(--ex-red);
}

.ex-bracket__c {
  fill: var(--ex-cyan);
}

.ex-bracket__k {
  fill: var(--ex-ink);
  transition: fill 400ms ease;
}

.ex-bracket--tl {
  top: 0;
  left: 0;
}

.ex-bracket--tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.ex-bracket--br {
  right: 0;
  bottom: 0;
  transform: scale(-1, -1);
}

.ex-bracket--bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

/* ============================== title ============================== */

.ex-title {
  position: relative;
  height: calc(var(--ex-vh, 100vh) * 2.7);
}

.ex-title__stage {
  --ex-p: 0;
  --ex-total: 0;
  --ex-night: 0;
  /* the card shrinks before the copy beside it would touch the discs, which
     reach 0.66 card widths either side of the centre */
  --card-h: min(calc(var(--ex-vh, 100vh) * 0.86), 920px, calc((100vw - 2 * (228px + var(--ex-pad))) / 0.792));
  --card-w: calc(var(--card-h) * 0.6);
  --ct: calc(var(--ex-vh, 100vh) / 2 - var(--card-h) / 2);
  --side-in: max(var(--ex-pad), calc(25% - var(--card-w) / 4 - 150px));
  --side-w: calc(50% - var(--card-w) * 0.66 - 28px - var(--side-in));
  position: sticky;
  top: 0;
  height: var(--ex-vh, 100vh);
  overflow: hidden;
  background: var(--ex-paper);
}

/* the card: everything inside is positioned against it */
.ex-title__stage > :is(.ex-ghost, .ex-rings, .ex-disc, .ex-star, .ex-moon, .ex-streak, .ex-col, .ex-frame, .ex-corner) {
  position: absolute;
}

.ex-frame {
  z-index: 9;
  top: calc(50% - var(--card-h) / 2);
  left: calc(50% - var(--card-w) / 2);
  width: var(--card-w);
  height: var(--card-h);
  --br: clamp(36px, calc(var(--card-w) * 0.13), 64px);
  pointer-events: none;
}

.ex-frame::before,
.ex-frame::after {
  content: "";
  position: absolute;
  border: 1px solid var(--ex-ink);
  transition: border-color 400ms ease;
}

.ex-frame::before {
  inset: calc(var(--br) * 0.18);
}

.ex-frame::after {
  inset: calc(var(--br) * 0.18 + 5px);
  border-color: var(--ex-hair);
}

.ex-ghost {
  z-index: 1;
  top: 50%;
  left: 50%;
  color: var(--ex-mist);
  font-family: var(--ex-serif);
  font-size: calc(var(--card-w) * 1.02);
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -52%);
  pointer-events: none;
  user-select: none;
}

/* the night sky: deep black liquid chrome */
.ex-dim {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 58% at 50% 48%, rgba(5, 6, 8, 0.05), rgba(5, 6, 8, 0.72) 100%),
    #050608 url("./assets/exploration/night.webp") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.ex-rings {
  z-index: 3;
  top: calc(50% - var(--card-h) / 2);
  left: calc(50% - var(--card-w) / 2);
  width: var(--card-w);
  height: var(--card-h);
  overflow: visible;
  pointer-events: none;
}

.ex-rings circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.ex-rings__halo circle {
  stroke: var(--ex-paper);
  stroke-width: 3.5;
  opacity: 0.85;
}

.ex-rings__ink circle {
  stroke: var(--ex-ink);
  stroke-width: 1.3;
}

.ex-disc,
.ex-moon {
  border-radius: 50%;
  background: var(--ex-ink);
  pointer-events: none;
}

.ex-disc {
  z-index: 4;
  box-shadow: 0 0 0 2px var(--ex-paper);
}

.ex-disc--a {
  top: calc(50% - var(--card-h) / 2 + var(--card-h) * 0.58);
  left: calc(50% - var(--card-w) / 2 - var(--card-w) * 0.16);
  width: calc(var(--card-w) * 0.66);
  aspect-ratio: 1;
}

.ex-disc--b {
  top: calc(50% - var(--card-h) / 2 + var(--card-h) * 0.1);
  left: calc(50% - var(--card-w) / 2 + var(--card-w) * 0.12);
  width: calc(var(--card-w) * 0.2);
  aspect-ratio: 1;
}

.ex-disc--c {
  top: calc(50% - var(--card-h) / 2 + var(--card-h) * 0.5);
  left: calc(50% - var(--card-w) / 2 + var(--card-w) * 0.8);
  width: calc(var(--card-w) * 0.36);
  aspect-ratio: 1;
}

.ex-star {
  z-index: 5;
  top: calc(50% - var(--card-h) / 2 + var(--card-h) * 0.06);
  left: 50%;
  height: calc(var(--card-h) * 0.72);
  aspect-ratio: 760 / 985;
  translate: -50% 0;
  perspective: 900px;
  cursor: pointer;
}

.ex-star__tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.ex-star__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* a moving highlight clipped to the star's silhouette */
.ex-star__sheen {
  --sx: 50%;
  --sy: 30%;
  position: absolute;
  inset: 0;
  -webkit-mask: url("./assets/exploration/chrome-star-mask.png") center / 100% 100% no-repeat;
  mask: url("./assets/exploration/chrome-star-mask.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ex-star__sheen span {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 18% 9% at var(--sx) var(--sy), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(118deg, transparent calc(var(--sx) - 14%), rgba(225, 235, 255, 0.55) var(--sx), transparent calc(var(--sx) + 10%));
}

.ex-moon {
  z-index: 6;
  top: calc(50% - var(--card-h) / 2 + var(--card-h) * 0.01);
  left: calc(50% - var(--card-w) / 2 + var(--card-w) * 0.56);
  width: calc(var(--card-w) * 0.58);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.08), transparent 55%),
    url("./assets/exploration/liquid.webp") center / cover,
    var(--ex-ink);
  box-shadow: 0 0 0 2px var(--ex-paper);
  pointer-events: auto;
  cursor: grab;
  will-change: transform;
}

.ex-title__stage.is-pulling,
.ex-title__stage.is-pulling .ex-moon {
  cursor: grabbing;
}

/* the corona: only visible while the light is covered */
.ex-moon__halo {
  position: absolute;
  inset: -80%;
  background: url("./assets/exploration/corona.webp") center / 100% 100% no-repeat;
  opacity: var(--ex-total);
  pointer-events: none;
}

.ex-moon__corona {
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  opacity: var(--ex-total);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.95),
    -2px 1px 0 1.5px rgba(18, 211, 255, 0.85),
    2px -1px 0 1.5px rgba(255, 45, 85, 0.85);
  pointer-events: none;
}

.ex-streak {
  z-index: 7;
  top: calc(50% - var(--card-h) / 2 + var(--card-h) * 0.42);
  left: calc(50% - var(--card-w) * 0.8);
  width: calc(var(--card-w) * 1.6);
  height: 18px;
  margin-top: -9px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92) 46%, rgba(255, 255, 255, 0.92) 54%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  opacity: calc(0.85 * (1 - var(--ex-night)));
  pointer-events: none;
}

/* white + difference: ink on paper, paper on the discs, the moon and the night */
.ex-col {
  z-index: 8;
  top: calc(50% - var(--card-h) / 2 + var(--card-h) * 0.1);
  height: calc(var(--card-h) * 0.8);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.ex-col svg {
  width: auto;
  height: 100%;
}

.ex-col--l {
  left: calc(50% - var(--card-w) / 2 + var(--card-w) * 0.075);
}

.ex-col--r {
  right: calc(50% - var(--card-w) / 2 + var(--card-w) * 0.075);
  transform: rotate(180deg);
}

.ex-corner {
  z-index: 9;
  color: #fff;
  font-family: var(--ex-hei);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  white-space: nowrap;
  mix-blend-mode: difference;
}

.ex-corner--tl {
  top: calc(50% - var(--card-h) / 2 + var(--br, 56px) * 0.92);
  left: calc(50% - var(--card-w) / 2 + var(--br, 56px) * 0.32);
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

.ex-corner--br {
  right: calc(50% - var(--card-w) / 2 + var(--br, 56px) * 0.32);
  bottom: calc(50% - var(--card-h) / 2 + var(--br, 56px) * 0.92);
  transform: rotate(135deg);
  transform-origin: 100% 100%;
}

/* the bead of light at second and third contact */
.ex-bead {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  width: calc(var(--card-w) * 0.24);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.ex-bead::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 16%, rgba(236, 243, 255, 0.62) 36%, rgba(236, 243, 255, 0) 70%);
}

.ex-bead svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ex-bead path {
  fill: #fff;
  filter: drop-shadow(0 0 5px rgba(236, 243, 255, 0.95)) drop-shadow(0 0 18px rgba(236, 243, 255, 0.6));
}

/* night: once the sky darkens, ink turns to paper */
.ex-rings circle,
.ex-disc {
  transition: stroke 400ms ease, box-shadow 400ms ease, opacity 400ms ease;
}

/* at night the letters stop inverting and simply turn to paper */
.ex.is-night :is(.ex-col, .ex-corner) {
  color: var(--ex-paper);
  mix-blend-mode: normal;
}

.ex.is-night .ex-frame .ex-bracket__k {
  fill: var(--ex-paper);
}

.ex.is-night .ex-frame::before {
  border-color: rgba(244, 245, 247, 0.8);
}

.ex.is-night .ex-frame::after {
  border-color: rgba(244, 245, 247, 0.2);
}

.ex.is-night .ex-rings__ink circle {
  stroke: rgba(244, 245, 247, 0.5);
}

.ex.is-night .ex-rings__halo circle {
  opacity: 0;
}

.ex.is-night .ex-disc {
  box-shadow: 0 0 0 1.5px rgba(244, 245, 247, 0.62);
}

/* the copy around the card stays readable through the eclipse: its ink
   turns to paper once the sky is dark */
.ex-title__copy {
  --c-fg: var(--ex-ink);
  --c-bg: var(--ex-paper);
  --c-mute: var(--ex-grey);
  --c-hair: var(--ex-hair);
  --c-pen: rgba(10, 11, 14, 0.28);
  position: absolute;
  z-index: 10;
  inset: 0;
  color: var(--c-fg);
  pointer-events: none;
  transition: color 400ms ease;
}

.ex.is-night .ex-title__copy {
  --c-fg: var(--ex-paper);
  --c-bg: var(--ex-ink);
  --c-mute: #a4a8b0;
  --c-hair: rgba(244, 245, 247, 0.24);
  --c-pen: rgba(244, 245, 247, 0.34);
}

.ex.is-night .ex-title__copy :focus-visible {
  outline-color: var(--ex-paper);
  box-shadow: 0 0 0 6px var(--ex-ink);
}

.ex-title__copy > * {
  pointer-events: auto;
}

.ex-title__no,
.ex-title__h,
.ex-epigraph {
  position: absolute;
  left: var(--side-in);
  width: min(320px, var(--side-w));
}

.ex-title__no {
  top: calc(50% - 150px);
}

.ex-title__num {
  width: auto;
  height: 54px;
}

.ex-title__h {
  top: calc(50% - 76px);
  font-family: var(--ex-serif);
  font-size: clamp(56px, 6.4vw, 104px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
}

.ex-epigraph span {
  display: block;
}

.ex-epigraph {
  top: calc(50% + clamp(18px, 4vw, 52px));
  font-family: var(--ex-serif);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

.ex-sparks {
  position: absolute;
  top: 50%;
  right: var(--side-in);
  display: grid;
  gap: 4px;
  width: min(260px, var(--side-w));
  transform: translateY(-58%);
  container-type: inline-size;
}

.ex-spark {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  text-align: left;
  border-bottom: 1px solid var(--c-hair);
  transition: transform 300ms var(--ex-snap), border-color 400ms ease;
}

.ex-spark__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 40px;
}

.ex-spark__icon img {
  width: 30px;
  height: auto;
  filter: drop-shadow(0 0 0.5px var(--ex-ink));
}

.ex-spark__icon svg {
  width: 22px;
  height: auto;
  overflow: visible;
}

.ex-spark__icon path {
  fill: none;
  stroke: var(--c-fg);
  transition: stroke 400ms ease;
  stroke-width: 1.6;
}

.ex-spark__label {
  font-family: var(--ex-hei);
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.ex-spark.is-lit .ex-spark__label::after {
  content: "现在在学";
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--c-bg);
  background: var(--c-fg);
  font-size: 10px;
  letter-spacing: 0.1em;
  vertical-align: 3px;
}

.ex-spark:hover {
  transform: translateX(6px);
}

@container (max-width: 230px) {
  .ex-spark.is-lit .ex-spark__label::after {
    display: none;
  }
}

.ex-legend {
  position: absolute;
  right: var(--side-in);
  bottom: max(96px, calc(50% - var(--card-h) / 2));
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  width: min(260px, var(--side-w));
  color: var(--c-mute);
  font-size: 12px;
  font-weight: 700;
  transition: color 400ms ease;
}

.ex-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ex-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-fg);
  transition: background-color 400ms ease, box-shadow 400ms ease;
}

.ex-legend__dot--now {
  background: var(--c-fg);
  box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-fg), -1px 0 0 3px var(--ex-cyan), 1px 0 0 3px var(--ex-red);
}

.ex-legend__dot--want {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-pen), inset 0 0 0 6px color-mix(in srgb, var(--c-pen) 45%, transparent);
}

/* click the star: one exposure */
.ex-title__stage.is-flash .ex-star__tilt {
  animation: ex-spin 820ms var(--ex-ease);
}

.ex-title__stage.is-flash .ex-streak {
  animation: ex-sweep 620ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ex-title__stage.is-flash .ex-col svg {
  animation: ex-jolt 260ms steps(3, end);
}

.ex-title__stage.is-flash::after {
  content: "";
  position: absolute;
  z-index: 11;
  inset: 0;
  background: #fff;
  pointer-events: none;
  animation: ex-flash 420ms ease-out both;
}

@keyframes ex-spin {
  0% {
    rotate: 0deg;
    scale: 1;
  }
  30% {
    scale: 1.08;
  }
  100% {
    rotate: 90deg;
    scale: 1;
  }
}

@keyframes ex-sweep {
  0% {
    transform: translateX(-60%) scaleY(0.6);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateX(60%) scaleY(1.6);
    opacity: 0;
  }
}

@keyframes ex-jolt {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-3px, 1px);
  }
  66% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: none;
  }
}

@keyframes ex-flash {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}

/* entrance: frame draws, discs land, the star turns into light */
.ex.is-entering .ex-bracket {
  animation: ex-bracket-in 700ms var(--ex-ease) both;
}

.ex.is-entering .ex-bracket--tr {
  animation-delay: 80ms;
}

.ex.is-entering .ex-bracket--br {
  animation-delay: 160ms;
}

.ex.is-entering .ex-bracket--bl {
  animation-delay: 240ms;
}

@keyframes ex-bracket-in {
  from {
    opacity: 0;
    translate: 0 0;
    scale: 1.6;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.ex.is-entering .ex-frame::before,
.ex.is-entering .ex-frame::after {
  animation: ex-frame-in 900ms var(--ex-ease) 120ms both;
}

@keyframes ex-frame-in {
  from {
    clip-path: inset(50% 0 50% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.ex.is-entering .ex-disc,
.ex.is-entering .ex-moon {
  animation: ex-disc-in 760ms var(--ex-snap) both;
}

.ex.is-entering .ex-disc--a {
  animation-delay: 260ms;
}

.ex.is-entering .ex-disc--b {
  animation-delay: 360ms;
}

.ex.is-entering .ex-disc--c {
  animation-delay: 440ms;
}

.ex.is-entering .ex-moon {
  animation-delay: 520ms;
}

@keyframes ex-disc-in {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

.ex.is-entering .ex-rings {
  animation: ex-fade 900ms ease 200ms both;
}

.ex.is-entering .ex-ghost {
  animation: ex-ghost-in 1200ms var(--ex-ease) both;
}

@keyframes ex-ghost-in {
  from {
    opacity: 0;
    letter-spacing: 0.4em;
  }
  to {
    opacity: 1;
  }
}

.ex.is-entering .ex-star {
  animation: ex-star-in 1100ms var(--ex-ease) 640ms both;
}

@keyframes ex-star-in {
  0% {
    opacity: 0;
    scale: 0.2;
    rotate: -90deg;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

.ex.is-entering .ex-col .ex-seg__g {
  animation: ex-fade 240ms steps(2, end) calc(500ms + var(--i) * 55ms) both;
}

.ex.is-entering .ex-title__copy > * {
  animation: ex-rise 700ms var(--ex-ease) 900ms both;
}

@keyframes ex-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ex-rise {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* ============================ sections ============================ */

.ex-now,
.ex-reach {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(56px, 10vh, 120px) var(--ex-pad) clamp(40px, 6vh, 80px);
}

.ex-reach {
  --sag: clamp(56px, 9vw, 150px);
  isolation: isolate;
  max-width: none;
  margin-top: clamp(24px, 6vh, 70px);
  padding-top: calc(var(--sag) + clamp(28px, 5vh, 60px));
  padding-bottom: calc(var(--sag) + clamp(40px, 7vh, 90px));
  color: var(--ex-paper);
}

.ex-reach > .ex-sec,
.ex-reach > .ex-reach__fan {
  max-width: calc(1480px - var(--ex-pad) * 2);
  margin-inline: auto;
}

.ex-sec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 clamp(14px, 2vw, 28px);
  margin-bottom: clamp(24px, 4vh, 44px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ex-ink);
  box-shadow: 0 1px 0 var(--ex-paper), 0 5px 0 -4px var(--ex-hair);
}

.ex-sec__num {
  width: auto;
  height: clamp(54px, 7vw, 92px);
}

.ex-sec__title {
  padding-bottom: 4px;
  font-family: var(--ex-serif);
  font-size: clamp(36px, 4.6vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
}


/* ---------- cards ---------- */

.ex-card {
  --br: 44px;
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  background: var(--ex-white);
  outline: none;
  scroll-margin-top: 24px;
  container-type: inline-size;
}

.ex-card::before,
.ex-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ex-card::before {
  inset: 8px;
  border: 1px solid var(--ex-ink);
}

.ex-card::after {
  inset: 13px;
  border: 1px solid var(--ex-hair);
}

.ex-card:focus-visible::before {
  border-width: 2px;
}

.ex-card__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.ex-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 calc(var(--br) * 0.3);
}

.ex-card__no {
  font-family: var(--ex-hei);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.ex-card__latin {
  width: auto;
  height: 15px;
  max-width: 70%;
}

.ex-art {
  position: relative;
  width: 100%;
  aspect-ratio: var(--art-ratio, 520 / 230);
}

.ex-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ex-art__orbit {
  fill: none;
  stroke: var(--ex-ink);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  opacity: 0.55;
}

.ex-art__lit {
  fill: var(--ex-white);
}

.ex-art__umbra {
  fill: var(--ex-ink);
}

.ex-art__rim {
  fill: none;
  stroke: var(--ex-ink);
  stroke-width: 1.4;
}

.ex-art__hot {
  fill: none;
  stroke: var(--ex-ink);
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity 200ms ease;
}

.ex-art__step,
.ex-art__now {
  cursor: default;
}

.ex-art__item {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 320ms var(--ex-snap);
}

.ex-art__item.is-hot {
  transform: scale(1.12);
}

.ex-art__item.is-hot .ex-art__hot {
  opacity: 1;
}

.ex-art__core {
  fill: var(--ex-ink);
  stroke: var(--ex-white);
  stroke-width: 2.5;
}

.ex-art__corona {
  fill: none;
  stroke: var(--ex-ink);
  stroke-width: 1.4;
}

.ex-art__corona--r {
  stroke: var(--ex-red);
  opacity: 0.9;
}

.ex-art__corona--c {
  stroke: var(--ex-cyan);
  opacity: 0.9;
}

.ex-art__want circle {
  fill: var(--pen);
  stroke: rgba(10, 11, 14, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.ex-art__light {
  position: absolute;
  width: calc(var(--lr) * 2.6%);
  aspect-ratio: 240 / 311;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ex-art__light img {
  display: block;
  width: 100%;
  height: 100%;
}

/* exposure sequence when a card is read */
.ex-card .ex-art__item {
  opacity: 0;
  transform: scale(0.3);
}

.ex-card.is-exposed .ex-art__item {
  animation: ex-expose 540ms var(--ex-snap) calc(160ms + var(--k) * 120ms) forwards;
}

.ex-card.is-exposed .ex-art__item.is-hot {
  transform: scale(1.12);
}

.ex-card.is-exposed .ex-art__want {
  animation-name: ex-expose-want;
}

@keyframes ex-expose {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ex-expose-want {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ex-card .ex-art__light {
  opacity: 0;
}

.ex-card.is-exposed .ex-art__light {
  animation: ex-ignite 1100ms var(--ex-ease) calc(240ms + var(--n-steps, 3) * 120ms) forwards;
}

@keyframes ex-ignite {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.2);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
}

.ex-art::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -6%;
  width: 112%;
  height: 10px;
  margin-top: -5px;
  background: linear-gradient(180deg, transparent, rgba(10, 11, 14, 0.18) 50%, transparent);
  opacity: 0;
  pointer-events: none;
}

.ex-card.is-exposed .ex-art::after {
  animation: ex-scan 900ms cubic-bezier(0.4, 0, 0.2, 1) 120ms;
}

@keyframes ex-scan {
  0% {
    transform: translateY(-120px) scaleY(0.6);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(120px) scaleY(1.4);
    opacity: 0;
  }
}

.ex-card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  padding: 0 calc(var(--br) * 0.3);
}

.ex-card__title {
  font-family: var(--ex-serif);
  font-size: clamp(44px, 4.6vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.ex-card[data-ex-card="agent"] .ex-card__title {
  text-orientation: mixed;
}

.ex-card__main {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.ex-steps {
  position: relative;
  display: grid;
  gap: 2px;
}

.ex-steps::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 10px;
  border-left: 1px dashed rgba(10, 11, 14, 0.4);
}

.ex-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 12px;
  padding: 8px 0;
}

.ex-steps__dot {
  position: relative;
  align-self: center;
  width: 20px;
  height: 20px;
  margin-left: 1px;
  border-radius: 50%;
  background: var(--ex-ink);
  box-shadow: 0 0 0 3px var(--ex-white);
  transition: transform 260ms var(--ex-snap);
}

.ex-steps__item time {
  justify-self: start;
  font-family: var(--ex-hei);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ex-steps__item p {
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.ex-steps__item.is-hot .ex-steps__dot {
  transform: scale(1.25);
}

.ex-steps__item.is-hot time {
  padding: 0 8px;
  margin: 0 -8px;
  border-radius: 999px;
  color: var(--ex-white);
  background: var(--ex-ink);
}

.ex-steps__item.is-now {
  grid-template-columns: 22px minmax(0, auto) minmax(0, 1fr);
  margin-top: 6px;
}

.ex-steps__item.is-now .ex-steps__dot {
  width: 22px;
  height: 22px;
  margin-left: 0;
  box-shadow: 0 0 0 3px var(--ex-white), 0 0 0 4.5px var(--ex-ink), -1.5px 0.8px 0 4.5px var(--ex-cyan), 1.5px -0.8px 0 4.5px var(--ex-red);
}

.ex-steps__dot img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: auto;
  transform: translate(-50%, -50%);
}

.ex-steps__item.is-now time {
  font-size: 15px;
}

.ex-steps__item.is-now p {
  font-family: var(--ex-hei);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 900;
  line-height: 1.5;
}

.ex-want {
  display: grid;
  gap: 8px;
}

.ex-want__label {
  justify-self: start;
  padding: 1px 10px;
  border: 1px dashed rgba(10, 11, 14, 0.45);
  border-radius: 999px;
  color: var(--ex-grey);
  font-family: var(--ex-hei);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ex-want ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.ex-want li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3c4048;
  font-weight: 700;
}

.ex-want li span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 11, 14, 0.26), rgba(10, 11, 14, 0.06) 70%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(10, 11, 14, 0.28);
}

.ex-tools {
  display: grid;
  gap: 6px;
}

.ex-tools div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.ex-tools dt {
  font-family: var(--ex-hei);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ex-tools dd {
  margin: 0;
  color: #30343b;
  font-weight: 600;
}

/* tools sit apart without separators, so no line starts or ends on a dot */
.ex-tools__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}

.ex-tools__list span {
  white-space: nowrap;
}

.ex-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.ex-links a,
.ex-links button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 8px;
  border-radius: 999px;
  color: var(--ex-paper);
  background: var(--ex-ink);
  font-family: var(--ex-hei);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: transform 260ms var(--ex-snap), box-shadow 200ms ease;
}

.ex-links small {
  font-size: 11px;
  opacity: 0.7;
}

.ex-out {
  display: block;
  width: 0.8em;
  height: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.ex-links :is(a, button) {
  white-space: nowrap;
}

@container (max-width: 470px) {
  .ex-links small {
    display: none;
  }
}

.ex-links a:hover,
.ex-links button:hover {
  transform: translateY(-2px);
  box-shadow: -2px 1px 0 var(--ex-cyan), 2px -1px 0 var(--ex-red);
}

.ex-links .is-kick {
  animation: ex-kick 620ms cubic-bezier(0.6, 0, 0.3, 1) both;
}

@keyframes ex-kick {
  30% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1.06);
    box-shadow: -3px 1px 0 var(--ex-cyan), 3px -1px 0 var(--ex-red);
  }
}

/* narrow cards: the date sits above its line */
@container (max-width: 560px) {
  .ex-steps__item,
  .ex-steps__item.is-now {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .ex-steps__item p {
    grid-column: 2;
  }
}

/* ---------- 现在在学: two big cards ---------- */

.ex-now__deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

/* ---------- 走到哪了: a fanned hand ---------- */

.ex-reach__fan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding-top: 12px;
}

.ex-reach .ex-card {
  --br: 36px;
  transition: transform 420ms var(--ex-snap), box-shadow 300ms ease;
}

.ex-reach .ex-card:nth-child(1) {
  transform: rotate(-2.2deg) translateY(14px);
}

.ex-reach .ex-card:nth-child(3) {
  transform: rotate(2.2deg) translateY(14px);
}

.ex-reach .ex-card:hover,
.ex-reach .ex-card:focus-within,
.ex-reach .ex-card:focus {
  z-index: 2;
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 22px 40px -28px rgba(10, 11, 14, 0.5);
}

.ex-reach .ex-card__title {
  font-size: clamp(34px, 3vw, 52px);
}

.ex-reach .ex-card[data-ex-card="agent"] .ex-card__title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.04em;
}

/* ============================== end ============================== */

.ex-end {
  position: relative;
  display: grid;
  place-items: center;
  min-height: max(440px, calc(var(--ex-vh, 100vh) * 0.72));
  padding: clamp(40px, 8vh, 90px) var(--ex-pad) clamp(70px, 10vh, 120px);
  overflow: hidden;
}

.ex-end__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120vw, 1300px);
  aspect-ratio: 1;
  border: 1px solid var(--ex-hair);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ex-end__orbit::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px dashed rgba(10, 11, 14, 0.25);
  border-radius: 50%;
}

.ex-end__exits {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 56px);
}

.ex-exit {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: clamp(170px, 22vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--ex-serif);
  transition: transform 380ms var(--ex-snap);
}

.ex-exit strong {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
}

.ex-exit small {
  font-family: var(--ex-hei);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3em;
}

.ex-exit span {
  font-family: var(--ex-text);
  font-size: 22px;
}

.ex-exit--next {
  color: var(--ex-paper);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.08), transparent 55%),
    url("./assets/exploration/liquid.webp") center / cover,
    var(--ex-ink);
}

.ex-exit--contact {
  color: var(--ex-ink);
  background: var(--ex-white);
  box-shadow: inset 0 0 0 1.5px var(--ex-ink), -2px 1px 0 0 var(--ex-cyan), 2px -1px 0 0 var(--ex-red);
}

.ex-exit:hover {
  transform: scale(1.05);
}

.ex-exit--contact:hover {
  color: var(--ex-paper);
  background: var(--ex-ink);
}

.ex-exit.is-kick {
  z-index: 5;
  animation: ex-eclipse-out 620ms cubic-bezier(0.7, 0, 0.2, 1) both;
}

@keyframes ex-eclipse-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(9);
    color: transparent;
  }
}


/* =================== additions from the other references =================== */

/* ---- glossy poster sparkles, cropped at the edges ---- */
.ex-gloss {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.ex-title__stage > .ex-gloss {
  z-index: 3;
}

.ex-gloss--a {
  top: calc(var(--ex-vh, 100vh) * -0.09);
  left: -4.5vw;
  width: clamp(130px, 21vw, 360px);
  rotate: 9deg;
}

.ex-gloss--b {
  top: calc(var(--ex-vh, 100vh) * 0.05);
  right: -2.5vw;
  width: clamp(80px, 10vw, 170px);
  rotate: -14deg;
}

/* ---- film grain over the printed sheet ---- */
.ex-grain {
  position: absolute;
  inset: 0;
  background: url("./assets/exploration/grain.webp") 0 0 / 180px 180px repeat;
  opacity: 0.26;
  pointer-events: none;
}

.ex-title__stage > .ex-grain {
  z-index: 11;
}

/* ---- small sparks on the card ---- */
.ex-rings__sparks path {
  fill: var(--ex-ink);
  transition: fill 400ms ease;
}

.ex.is-night .ex-rings__sparks path {
  fill: var(--ex-paper);
}

/* ---- the time dial around the light: ink by day, glowing by night ---- */
.ex-dial {
  position: absolute;
  z-index: 3;
  top: calc(var(--ct) + var(--card-h) * 0.4452 - var(--card-w) * 0.56);
  left: calc(50% - var(--card-w) * 0.56);
  width: calc(var(--card-w) * 1.12);
  height: calc(var(--card-w) * 1.12);
  overflow: visible;
  color: var(--ex-ink);
  pointer-events: none;
  transform: rotate(var(--dial, 0deg));
  transition: color 400ms ease, filter 400ms ease;
  will-change: transform;
}

/* the inner dashed rings turn the other way, faster: a small vortex */
.ex-dial__inner {
  transform: rotate(calc(var(--dial, 0deg) * -2.4));
}

.ex-dial circle,
.ex-dial__ticks line {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

.ex-dial__ring {
  stroke-width: 1;
  opacity: 0.5;
}

.ex-dial__dash {
  stroke-width: 2.6;
  stroke-dasharray: 2.5 6;
  opacity: 0.42;
}

.ex-dial__fine {
  stroke-width: 1;
  stroke-dasharray: 1 3.5;
  opacity: 0.35;
}

.ex-dial__ticks line {
  stroke-width: 1;
  opacity: 0.4;
}

.ex-dial__ticks .is-hour {
  stroke-width: 1.8;
  opacity: 0.75;
}

.ex-dial__num line {
  stroke: currentColor;
  stroke-width: 2.3;
  opacity: 0.72;
}

.ex.is-night .ex-dial {
  color: #c9efff;
  filter: drop-shadow(0 0 2px rgba(110, 210, 255, 0.95)) drop-shadow(0 0 10px rgba(70, 175, 255, 0.5));
}

.ex.is-night .ex-dial :is(.ex-dial__ring, .ex-dial__dash, .ex-dial__fine, .ex-dial__ticks line, .ex-dial__num line) {
  opacity: 0.95;
}

/* ---- the lock on the covered light ---- */
.ex-hud {
  position: absolute;
  z-index: 7;
  top: calc(var(--ct) + var(--card-h) * 0.4452 - var(--card-w) * 0.56);
  left: calc(50% - var(--card-w) * 0.56);
  width: calc(var(--card-w) * 1.12);
  height: calc(var(--card-w) * 1.12);
  color: #eaf7ff;
  opacity: var(--ex-night);
  pointer-events: none;
}

.ex-hud > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ex-hud path,
.ex-hud rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.ex-hud circle {
  fill: currentColor;
}

.ex-hud__lock {
  transform-box: view-box;
  transform-origin: 50% 50%;
  scale: calc(1.5 - 0.5 * var(--ex-night));
}

.ex-hud__lock path {
  stroke-width: 2;
}

.ex-hud__lead {
  stroke-dasharray: 3 3;
}

.ex-hud__tag {
  position: absolute;
  top: 80%;
  right: 20%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--ex-hei);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.ex-hud__tag svg {
  width: 11px;
  height: 14px;
  overflow: visible;
}

.ex-hud__tag path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

/* ---- time span under the copy ---- */
.ex-span {
  position: absolute;
  bottom: max(96px, calc(50% - var(--card-h) / 2));
  left: var(--side-in);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ex-hei);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.ex-span i {
  width: clamp(40px, 6vw, 96px);
  height: 1px;
  background: currentColor;
}

/* ---- five tracks as a row of sparks on every card ---- */
.ex-rank {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.ex-rank svg {
  width: 11px;
  height: 15px;
  overflow: visible;
}

.ex-rank path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.ex-rank .is-me path {
  fill: currentColor;
}

/* ---- big Latin word with outlined echoes (one melted) ---- */
.ex-echo {
  align-self: end;
  justify-self: end;
  height: clamp(96px, 13vw, 210px);
  margin-bottom: -6px;
  pointer-events: none;
}

.ex-echo svg {
  display: block;
  width: auto;
  height: 100%;
  overflow: visible;
}

.ex-echo text {
  font-family: var(--ex-hei);
  font-size: 128px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.ex-echo__o {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.ex-echo__s {
  fill: currentColor;
}

/* ---- 走到哪了: the night side (a passing umbra) ---- */
.ex-night {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: 50% / var(--sag);
  background: #050608;
}

.ex-night__flow {
  position: absolute;
  inset: -10% 0;
  background: url("./assets/exploration/night.webp") center / cover no-repeat;
  will-change: transform;
}

.ex-night .ex-grain {
  opacity: 0.42;
}

.ex-gloss--c {
  top: 42%;
  right: -8vw;
  width: clamp(170px, 26vw, 440px);
  rotate: 16deg;
}

.ex-gloss--d {
  bottom: 10%;
  left: -5vw;
  width: clamp(100px, 15vw, 250px);
  rotate: -10deg;
}

.ex-reach .ex-sec {
  border-bottom-color: rgba(244, 245, 247, 0.85);
  box-shadow: 0 5px 0 -4px rgba(244, 245, 247, 0.2);
}

.ex-reach :focus-visible {
  outline-color: var(--ex-paper);
  box-shadow: 0 0 0 6px #050608;
}

/* dark cards */
.ex-card--past {
  padding-inline: calc(clamp(26px, 3vw, 40px) + 22px);
  color: var(--ex-paper);
  background:
    radial-gradient(70% 34% at 50% 24%, rgba(120, 165, 255, 0.13), rgba(120, 165, 255, 0) 70%),
    linear-gradient(180deg, rgba(16, 19, 28, 0.96), rgba(8, 9, 13, 0.97));
}

.ex-card--past::before {
  border-color: rgba(244, 245, 247, 0.85);
}

.ex-card--past::after {
  border-color: rgba(244, 245, 247, 0.18);
}

.ex-card--past .ex-bracket__k {
  fill: var(--ex-paper);
}

.ex-card__col {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 12px;
  color: var(--ex-paper);
  pointer-events: none;
}

.ex-card__col svg {
  width: 100%;
  height: auto;
}

.ex-card__col--l {
  left: 21px;
  translate: 0 -50%;
}

.ex-card__col--r {
  right: 21px;
  translate: 0 -50%;
  rotate: 180deg;
}

.ex-card__no span {
  opacity: 0.45;
}

.ex-card--past .ex-art__orbit {
  stroke: var(--ex-paper);
}

.ex-card--past .ex-art__lit {
  fill: #f4f5f7;
}

.ex-card--past .ex-art__umbra {
  fill: #050608;
}

.ex-card--past .ex-art__rim {
  stroke: rgba(244, 245, 247, 0.9);
}

.ex-card--past .ex-art__hot {
  stroke: var(--ex-paper);
}

.ex-card--past .ex-art__want circle {
  stroke: rgba(244, 245, 247, 0.45);
}

.ex-card--past .ex-art::after {
  background: linear-gradient(180deg, transparent, rgba(244, 245, 247, 0.22) 50%, transparent);
}

.ex-card--past .ex-steps::before {
  border-left-color: rgba(244, 245, 247, 0.4);
}

.ex-card--past .ex-steps__dot {
  background: var(--ex-paper);
  box-shadow: 0 0 0 3px #0c0e14;
}

.ex-card--past .ex-steps__item.is-hot time {
  color: var(--ex-ink);
  background: var(--ex-paper);
}

.ex-card--past .ex-want__label {
  border-color: rgba(244, 245, 247, 0.45);
  color: #b9bec8;
}

.ex-card--past .ex-want li {
  color: #d3d6dc;
}

.ex-card--past .ex-want li span {
  background: radial-gradient(circle, rgba(244, 245, 247, 0.3), rgba(244, 245, 247, 0.08) 70%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(244, 245, 247, 0.35);
}

.ex-card--past .ex-tools dd {
  color: #cfd3da;
}

.ex-card--past .ex-links :is(a, button) {
  color: var(--ex-ink);
  background: var(--ex-paper);
}

.ex-reach .ex-card:hover,
.ex-reach .ex-card:focus-within,
.ex-reach .ex-card:focus {
  box-shadow: 0 0 0 1px rgba(244, 245, 247, 0.08), 0 26px 60px -30px rgba(120, 165, 255, 0.45);
}

/* ---- the sign at the very end ---- */
.ex-sign {
  position: absolute;
  bottom: clamp(18px, 4vh, 40px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 1.4em;
  font-family: var(--ex-hei);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  translate: -50% 0;
}

.ex-sign span {
  letter-spacing: 1.05em;
  margin-right: -1.05em;
}

.ex-sign svg {
  width: 16px;
  height: 16px;
}

.ex-sign circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.ex-sign circle + circle {
  fill: currentColor;
  stroke: none;
}

/* ============================ responsive ============================ */

@media (max-width: 1100px) {
  .ex-reach__fan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ex-reach .ex-card:nth-child(3) {
    grid-column: 1 / 3;
    justify-self: center;
    width: min(100%, 560px);
  }
}

@media (max-width: 900px) {
  .ex-now__deck {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* portrait screens: the card fills the top, copy sits below it */
@media (max-aspect-ratio: 1/1) {
  .ex-title__stage {
    --card-h: min(calc(var(--ex-vh, 100vh) * 0.58), calc((100vw - 24px) / 0.6));
    /* card and copy sit together in the middle of the screen, clear of the
       floating button at the bottom */
    --card-top: max(12px, calc((var(--ex-vh, 100vh) - var(--card-h) - 262px) / 2));
    --ct: var(--card-top);
  }

  .ex-title__stage > :is(.ex-frame, .ex-rings) {
    top: var(--card-top);
  }

  .ex-ghost {
    top: calc(var(--card-top) + var(--card-h) / 2);
  }

  .ex-disc--a {
    top: calc(var(--card-top) + var(--card-h) * 0.58);
  }

  .ex-disc--b {
    top: calc(var(--card-top) + var(--card-h) * 0.1);
  }

  .ex-disc--c {
    top: calc(var(--card-top) + var(--card-h) * 0.5);
  }

  .ex-star {
    top: calc(var(--card-top) + var(--card-h) * 0.06);
  }

  .ex-moon {
    top: calc(var(--card-top) + var(--card-h) * 0.01);
  }

  .ex-streak {
    top: calc(var(--card-top) + var(--card-h) * 0.42);
  }

  .ex-col {
    top: calc(var(--card-top) + var(--card-h) * 0.1);
  }

  .ex-corner--tl {
    top: calc(var(--card-top) + var(--br, 56px) * 0.92);
  }

  .ex-corner--br {
    bottom: auto;
    top: calc(var(--card-top) + var(--card-h) - var(--br, 56px) * 0.92);
  }

  .ex-title__copy {
    top: calc(var(--card-top) + var(--card-h) + 14px);
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 10px;
    padding: 0 16px;
    text-align: center;
  }

  .ex-title__no,
  .ex-title__h,
  .ex-epigraph,
  .ex-span,
  .ex-sparks,
  .ex-legend {
    position: static;
    width: auto;
    transform: none;
  }

  .ex-title__no {
    display: none;
  }

  .ex-title__h {
    font-size: clamp(34px, 9vw, 52px);
  }

  .ex-epigraph {
    font-size: 15px;
  }

  .ex-epigraph span {
    display: inline;
  }

  .ex-sparks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    container-type: normal;
    gap: 2px 4px;
    max-width: 100%;
  }

  .ex-spark {
    grid-template-columns: auto;
    justify-items: center;
    gap: 2px;
    min-width: 62px;
    padding: 2px 4px;
    border: 0;
  }

  .ex-spark__icon {
    width: 26px;
    height: 30px;
  }

  .ex-spark__icon img {
    width: 22px;
  }

  .ex-spark__icon svg {
    width: 16px;
  }

  .ex-spark__label {
    font-size: 12px;
  }

  .ex-spark.is-lit .ex-spark__label::after {
    display: none;
  }

  .ex-spark:hover {
    transform: translateY(-2px);
  }

  .ex-legend {
    justify-content: center;
    font-size: 11px;
  }
}

@media (max-width: 699px) {
  .ex {
    --ex-pad: 14px;
    font-size: 14.5px;
  }

  .ex-card {
    --br: 34px;
    padding: 24px 20px;
  }

  .ex-card--past {
    padding-inline: 44px;
  }

  .ex.is-night .ex-dial {
    filter: drop-shadow(0 0 2px rgba(110, 210, 255, 0.9));
  }

  .ex-card__col {
    width: 10px;
  }

  .ex-card__col--l {
    left: 17px;
  }

  .ex-card__col--r {
    right: 17px;
  }

  .ex-card__body {
    gap: 14px;
    padding: 0;
  }

  .ex-card__head {
    padding: 0;
  }

  .ex-card__title {
    font-size: 40px;
  }

  .ex-reach__fan {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .ex-reach .ex-card:nth-child(n) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
    transform: none;
  }

  .ex-reach .ex-card:nth-child(2n + 1) {
    transform: rotate(-1deg);
  }

  .ex-reach .ex-card:nth-child(2n) {
    transform: rotate(1deg);
  }

  .ex-steps__item {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .ex-steps__item p {
    grid-column: 2;
  }

  .ex-sec {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ex-echo {
    grid-column: 1 / -1;
    grid-row: 1;
    height: clamp(70px, 21vw, 110px);
    margin-bottom: 8px;
  }
}

/* narrow phones: the five sparks stay on one row */
@media (max-aspect-ratio: 1/1) and (max-width: 420px) {
  .ex-spark {
    min-width: 0;
    padding: 2px 5px;
  }

  .ex-spark__label {
    font-size: 11.5px;
  }
}

/* short portrait screens: the legend gives way to the card */
@media (max-aspect-ratio: 1/1) and (max-height: 680px) {
  .ex-legend {
    display: none;
  }
}

/* short landscape phones: smaller copy beside the card */
@media (max-height: 560px) and (orientation: landscape) {
  .ex-title__stage {
    --card-h: min(calc(var(--ex-vh, 100vh) * 0.86), 920px, calc((100vw - 2 * (190px + var(--ex-pad))) / 0.792));
  }

  .ex-corner {
    display: none;
  }

  .ex-title__h {
    top: calc(50% - 50px);
    font-size: 44px;
  }

  .ex-title__no {
    top: calc(50% - 104px);
  }

  .ex-title__num {
    height: 36px;
  }

  .ex-epigraph {
    top: calc(50% + 6px);
    font-size: 14px;
  }

  .ex-spark {
    padding: 2px 0;
  }

  .ex-spark__icon {
    height: 28px;
  }

  .ex-spark__label {
    font-size: 13px;
  }

  .ex-spark.is-lit .ex-spark__label::after {
    display: none;
  }

  .ex-legend {
    display: none;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ex-title {
    height: auto;
  }

  .ex-title__stage {
    position: relative;
  }

  .ex-moon {
    pointer-events: none;
    cursor: default;
  }

  .ex *,
  .ex *::before,
  .ex *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .ex-card .ex-art__item,
  .ex-card .ex-art__light {
    opacity: 1;
    transform: none;
  }

  .ex-card .ex-art__light {
    transform: translate(-50%, -50%);
  }
}