/* The hero's words, the dots in flight, and the chapters' own pieces. */
.hero { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-words { position: absolute; left: clamp(28px, 6.4vw, 160px); top: clamp(112px, 19vh, 270px); width: clamp(420px, 44vw, 980px); }
.hero .hero-words > * { pointer-events: auto; }
.hero-h1 {
  font-family: var(--font); font-size: clamp(46px, min(5.2vw, 8.6vh), 132px); font-weight: 830; font-stretch: 112%; line-height: 0.96;
  letter-spacing: -0.038em; color: var(--ink); text-wrap: balance; max-width: 13.5em;
}
.curtain .hero-words { position: absolute; }
.curtain .hero-h1 { color: #f5f2ec; }
.hero-sub { margin-top: clamp(18px, 3vh, 40px); max-width: 30em; font-size: clamp(15.5px, min(1.25vw, 2.2vh), 26px); line-height: 1.48; color: rgba(var(--ink-rgb), var(--soft)); font-weight: 430; text-wrap: pretty; }
.hero-sub b { color: var(--ink); font-weight: 680; }
.hero-ex { list-style: none; margin-top: clamp(22px, 3.8vh, 44px); display: grid; gap: 7px; min-height: calc(3 * 1.5em + 14px); font-size: clamp(15px, min(1.2vw, 2.1vh), 24px); }
.hero-ex li { position: relative; justify-self: start; opacity: 0; color: rgba(var(--ink-rgb), 0.9); font-weight: 520; font-style: italic; line-height: 1.5; }
.hero-ex li i { position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 1px; background: var(--tomato); transform: scaleX(0); transform-origin: 0 50%; }
.hero-get { margin-top: clamp(20px, 3.4vh, 34px); display: flex; align-items: center; gap: 16px; }
.hero-get small { font-size: 13.5px; color: var(--ink-3); }
.hero-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.hero-cue i { position: relative; width: 18px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px currentColor; }
.hero-cue i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; }
.hero-fly { position: absolute; left: 0; top: 0; width: 20px; height: 20px; transform-origin: 0 0; visibility: hidden; display: grid; place-items: center; }
.hero-fly i { width: 100%; height: 100%; border-radius: 50%; background: #6e6e73; box-shadow: 0 0 0 1.6px rgba(245, 242, 236, 0.8); }
.hero-fly.is-now i { background: #d13a31; box-shadow: 0 0 0 2px #ff453a, 0 0 0 4px rgba(0, 0, 0, 0.6); }
.hero-fly svg { width: 130%; height: 130%; color: rgba(245, 242, 236, 0.75); }

/* a note that changes with the segment, crossfading in place */
.ch-note.is-stack { display: grid; }
.ch-note.is-stack span { grid-area: 1 / 1; }

/* the round in the air: dots off the glass, with their names; or bars as long as their sessions */
.ar { position: absolute; left: 0; top: 0; height: 118px; transform-origin: 0 0; visibility: hidden; font-family: var(--sf); }
.ar-dot, .ar-cup, .ar-ring { position: absolute; left: 50%; top: 4px; }
.ar-dot {
  width: calc(var(--dot) + (var(--bar) - var(--dot)) * var(--rb)); height: calc(var(--dot) * (1 - 0.18 * var(--rb)));
  transform: translateX(-50%); border-radius: 999px; background: var(--c); display: grid; place-items: center;
  box-shadow: 0 0 0 calc(2.5px * (1 - var(--rb))) rgba(255, 255, 255, 0.86), 0 8px 18px rgba(0, 0, 0, 0.32);
}
.ar-num { font-size: 15px; font-weight: 800; color: #15120a; font-variant-numeric: tabular-nums; }
.ar-focus .ar-num { color: #fff; }
/* the cup is drawn at one size and scaled (a font size that changed every frame reshaped the emoji every frame) */
.ar-cup { width: 24px; height: 24px; margin-left: -12px; transform: scale(var(--ds, 1)); transform-origin: 50% 0; font-size: 19.68px; line-height: 24px; text-align: center; }
.ar-ring { width: calc(var(--dot) * 1.42); height: calc(var(--dot) * 1.42); margin-top: calc(var(--dot) * -0.21); transform: translateX(-50%); border-radius: 50%; box-shadow: 0 0 0 3px var(--rc); }
.ar-lab {
  position: absolute; left: 50%; top: calc(var(--dot) + 18px); transform: translateX(-50%); display: grid; justify-items: center; gap: 1px;
  padding: 5px 10px 6px; border-radius: 10px; background: rgba(18, 15, 8, 0.86); color: #f5f2ec; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.ar-lab em { font-style: normal; font-size: 14px; font-weight: 680; }
.ar-lab small { font-size: 12px; color: rgba(245, 242, 236, 0.66); font-variant-numeric: tabular-nums; }
.ar-total { position: absolute; left: 0; top: 0; width: 360px; height: 48px; transform-origin: 0 0; visibility: hidden; display: grid; place-items: center; font-size: 22px; font-weight: 750; letter-spacing: -0.01em; color: #15120a; }

/* the footer, at the end of the round */
.foot {
  position: absolute; left: clamp(28px, 6.4vw, 160px); right: clamp(28px, 6.4vw, 160px); bottom: 26px; z-index: 6;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 18px;
  box-shadow: inset 0 1px 0 var(--line); font-size: 13.5px; color: var(--ink-2); visibility: hidden; opacity: 0;
}
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.foot a:hover { text-decoration-color: currentColor; }