/* r5-page: bar, film, numbers, ending (results, abstract, BibTeX, footer).
   Loaded after style.css, so it overrides it.

   Look rules this file keeps: no borders or boxes, no hard edges in light or
   colour, hairline rules only inside the numbers list, accent cyan #23e6ff on
   black and #0a7f95 on light. */

:root {
  --end: #fbfbfd;          /* the quiet off-white ending */
  --end-muted: #6e6e73;
  --accent-deep: #0a7f95;  /* cyan, darkened for light sections */
  --hair-dark: rgba(245, 245, 247, 0.12);
  --hair-light: rgba(0, 0, 0, 0.08);
  --num: clamp(96px, 6vw, 112px);
  --unit: clamp(24px, 1.8vw, 34px);
  --spec-label: 18px;
}

/* Smooth scroll: Lenis drives the window, so native smooth scrolling must
   be off, and the pinned scenes keep working because Lenis scrolls the
   real window (window.scrollY and native scroll events stay valid). */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis,
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Colour transitions: long, eased dissolve, no seam ---------------------- */

/* The black-to-white fades were still a band at one stop after another
   (human, 2026-10-28: "these black-white gradient transitions could be a bit
   smoother"). Every one of them is now 62vh tall - twice the shortest of the
   three - and its stops follow a smoothstep curve in 17 steps, so both ends
   leave and arrive slowly and no step is wide enough to read as a line. */

.tone {
  height: 62vh;
}

/* Mounts into Numbers: the shortest of the three (26vh in sec-mounts.css). */
.mounts + .tone--light-to-dark {
  height: 62vh;
}

/* Numbers into the ending's off-white. */

.numbers + .tone--to-end {
  height: 62vh;
}

.tone--to-end {
  background: linear-gradient(
    180deg,
    #000000 0%,
    #030303 1.12305%,
    #0b0b0b 4.29688%,
    #171717 9.22852%,
    #272728 15.625%,
    #3a3a3b 23.1934%,
    #4f4f50 31.6406%,
    #666667 40.6738%,
    #7e7e7e 50%,
    #959596 59.3262%,
    #acacad 68.3594%,
    #c1c1c2 76.8066%,
    #d4d4d5 84.375%,
    #e4e4e6 90.7715%,
    #f0f0f2 95.7031%,
    #f8f8fa 98.877%,
    #fbfbfd 100%
  );
}

/* Sticky bar: the brand at the left, the Paper button at the right. The
   chapters moved to their own list on the left of the page (chapters.css). */

.bar-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.bar-brand {
  justify-self: start;
}

.bar .pill--small {
  justify-self: end;
}

/* Film: the whole picture on the dark page, its controls below it ---------- */

.film {
  /* A soft pool of light in the dark around the picture: the fade happens
     outside the film, never over it. */
  background: radial-gradient(
    ellipse 58% 78% at 50% 47%,
    #1e1e23 0%,
    #101013 36%,
    #040405 62%,
    #000 80%
  );
  padding: clamp(48px, 7vh, 72px) 0 clamp(40px, 7vh, 64px);
}

/* No mask, vignette or gradient over the picture (human, 2026-10-28): the
   film's white slides must stay white. Only the corners round, and only the
   dark around the picture fades. */

.film-inline {
  position: relative;
  width: min(1560px, 80vw);
  margin-inline: auto;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}

.film-inline-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: #000;
}

/* Controls: below the picture, never over it ------------------------------ */

.film-controls {
  width: min(1560px, 80vw);
  margin: clamp(14px, 2vh, 22px) auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--fg-dark);
}

.film-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-dark);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.film-btn:hover {
  background: rgba(245, 245, 247, 0.1);
}

.film-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.film-btn.is-muted {
  color: var(--muted-dark);
}

.film-timeline,
.film-volume {
  position: relative;
  height: 32px;
  cursor: pointer;
  touch-action: none;
}

.film-timeline {
  flex: 1 1 auto;
  min-width: 120px;
}

.film-volume {
  flex: 0 0 84px;
}

.film-track,
.film-timeline-fill,
.film-volume-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  pointer-events: none;
}

.film-track {
  right: 0;
  background: rgba(245, 245, 247, 0.16);
}

.film-timeline-fill {
  width: 0;
  background: var(--accent);
}

.film-volume-fill {
  width: 0;
  background: rgba(245, 245, 247, 0.82);
}

.film-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--fg-dark);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}

.film-timeline .film-knob {
  background: var(--accent);
}

.film-timeline:hover .film-knob,
.film-timeline.is-dragging .film-knob,
.film-volume:hover .film-knob,
.film-volume.is-dragging .film-knob {
  opacity: 1;
}

.film-time {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted-dark);
  white-space: nowrap;
}

/* Numbers: the module sticky on the left, the paper's figures on the right -- */

.numbers {
  background: var(--bg-dark);
  color: var(--fg-dark);
  padding: 12vh 5vw 2vh;
}

.numbers-grid {
  display: grid;
  /* The module gets close to half the width: it is the only visual in this
     section, so a narrow column left too much black beside it. */
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 64px);
  align-items: start;
  max-width: 1760px;
  margin-inline: auto;
}

.numbers-media {
  /* Not sticky: js/viewer/numbers.js holds the stage in the middle of the
     window and fades it in and out whole, so no window edge ever slices it. */
  align-self: start;
  display: grid;
  align-items: start;
}

#numbers-stage {
  position: relative;
  width: 100%;
  height: min(86vh, 920px);
  will-change: transform;
  /* Nothing may read as a dropped-in canvas: the stage's edges dissolve. */
  -webkit-mask-image: radial-gradient(
    ellipse 74% 76% at 50% 50%,
    #000 46%,
    rgba(0, 0, 0, 0.72) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 74% 76% at 50% 50%,
    #000 46%,
    rgba(0, 0, 0, 0.72) 76%,
    transparent 100%
  );
}

.numbers-list {
  /* The space under the last row lets the list finish before the section's
     bottom, so the module fades out beside the last figures instead of being
     carried into the light section below (js/viewer/numbers.js). */
  padding-block: 2vh 22vh;
}

.spec {
  padding: clamp(14px, 1.8vh, 22px) 0 clamp(12px, 1.5vh, 18px);
}

/* No rule between rows: no hard division lines (Astra review, 2026-10-28). */
.spec + .spec {
  margin-top: clamp(6px, 1vh, 12px);
}

.spec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 28px;
}

.spec-label {
  margin: 0;
  max-width: 34ch;
  font-size: var(--spec-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--muted-dark);
}

.spec-value {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  white-space: nowrap;
}

.num {
  font-size: var(--num);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums lining-nums;
}

.num--mark {
  color: var(--accent);
}

.unit {
  font-size: var(--unit);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--muted-dark);
}

.times {
  font-size: var(--unit);
  font-weight: 400;
  line-height: 1;
  color: var(--muted-dark);
  margin-left: 0.24em;
  transform: translateY(-0.06em);
}

.spec-foot {
  margin: 12px 0 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: #6e6e73;
}

/* The paper's cost breakdown, as quiet rows under the cost figure. */

.cost-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  max-width: 480px;
}

.cost-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.35;
  color: #8b8b90;
}

.cost-list li span:last-child {
  font-variant-numeric: tabular-nums lining-nums;
  color: #a1a1a6;
}

/* Ending: results, abstract, BibTeX, footer ------------------------------- */

.results {
  background: var(--end);
  color: var(--fg-light);
  display: block;
  max-width: none;
  margin-inline: 0;
  padding: 14vh 5vw 9vh;
}

.results-inner {
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vh, 108px);
}

/* One numeral to one sentence (human, 2026-10-28): every row holds a single
   figure on the left and the paper's words about it on the right, so two
   numerals can never run together. */
.result {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 700px);
  align-items: center;
  gap: 0 clamp(40px, 4.5vw, 76px);
}

.result-figures {
  display: flex;
  flex-direction: column;
  gap: 0.06em;
}

.result-figure {
  display: block;
  font-size: clamp(160px, 10vw, 200px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent-deep);
}

.result-label {
  display: block;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--end-muted);
}

.results .result-copy {
  justify-self: start;
  max-width: 700px;
  margin: 0;
  font-size: clamp(28px, 1.7vw, 31px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: #4a4a4f;
}

/* Abstract and BibTeX ----------------------------------------------------- */

.abstract {
  background: var(--end);
  color: var(--fg-light);
  padding: 6vh 5vw 5vh;
}

/* The closing statement (the paper's Discussion, opening sentences; human's
   choice, 2026-10-28): short, so it reads large. */
.abstract-copy {
  max-width: 980px;
  margin-inline: auto;
  padding-block: 8vh;
  font-size: clamp(30px, 2.4vw, 44px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  text-align: center;
}

.bibtex {
  background: var(--end);
  color: var(--fg-light);
  padding: 0 5vw 3vh;
}

.bibtex-inner {
  max-width: 860px;
  margin-inline: auto;
}

.bibtex-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.bibtex-details {
  flex: 1 1 auto;
  min-width: 0;
}

.bibtex-summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  padding: 2px 0;
}

.bibtex-summary::-webkit-details-marker {
  display: none;
}

.bibtex-summary::marker {
  content: "";
}

.bibtex-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--ease);
}

.bibtex-summary:hover .bibtex-title {
  color: var(--accent-deep);
}

.bibtex-code {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #3a3a3e;
  opacity: 0.9;
}

.bibtex .copy-button {
  align-self: flex-start;
  flex: 0 0 auto;
}

.bibtex .copy-button.is-copied {
  background: var(--accent-deep);
  color: #fff;
}

/* The idle "scroll" arrow: a small, semi-transparent chevron with the word,
   bobbing at the bottom centre until the visitor scrolls (human, 2026-10-28). */

.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 3.4vh;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(245, 245, 247, 0.66);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.scroll-hint.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.scroll-hint.is-light {
  color: rgba(29, 29, 31, 0.62);
}

.scroll-hint-arrow {
  width: 16px;
  height: 18px;
  animation: scroll-hint-bob 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.scroll-hint-word {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

@keyframes scroll-hint-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

.footer {
  background: var(--end);
  color: var(--end-muted);
  padding: 0 0 48px;
}

.footer-inner {
  padding-inline: 5vw;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint {
    transition: none;
  }

  .scroll-hint-arrow {
    animation: none;
  }
}