/* The animated companion to a story: full viewport, text on the left,
   the Manim clip on the right, one step at a time.

   Always dark, regardless of the site-wide theme toggle — the clips are
   rendered on a dark ground and there is no light version of them. */

.animated-page {
  --ac-bg: #1C1D23;
  /* The stage carries the same background as the text half, so the page is one
     continuous surface and the clip has no frame around it. tools/render-animated.py
     reads --ac-bg out of this file and renders the scenes onto it — change the
     colour here, re-run the script, and the two stay in step. */
  --ac-stage: var(--ac-bg);
  --ac-ink: #EDEFF3;
  --ac-muted: #9AA3B2;
  --ac-faint: rgba(255, 255, 255, 0.10);
  --ac-faint-strong: rgba(255, 255, 255, 0.22);

  /* The brand colours, in their "on dark" variants (manimlib
     default_config.yml: *_text), so a coloured symbol on the page reads as
     the same colour as the object in the clip. The scenes label their objects
     with the base colours; the _text ones are the same hues tuned for reading
     at body-text size, which is what happens here. */
  --c-blue: #508AD7;
  --c-red: #F35858;
  --c-yellow: #EBB734;
  --c-green: #32D35F;
}

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

html, body {
  height: 100%;
  margin: 0;
}

.animated-page {
  background: var(--ac-bg);
  color: var(--ac-ink);
  font-family: Ubuntu, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stagecraft {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- top bar -------------------------------------------------------------- */

.ac-bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 2.5vw, 30px);
  border-bottom: 1px solid var(--ac-faint);
}

.ac-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--ac-faint);
  color: var(--ac-muted);
  font-size: 14.5px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.ac-back svg {
  width: 16px;
  height: 16px;
}

.ac-back-label-short { display: none; }

.ac-back:hover,
.ac-back:focus-visible {
  color: var(--ac-ink);
  border-color: var(--ac-faint-strong);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}

.ac-brand {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ac-brand-name {
  font-size: 21.5px;
  font-weight: 500;
  white-space: nowrap;
}

.color-primary { color: var(--primary-color); }
.color-secondary { color: var(--secondary-color); }

.ac-brand-tag {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--secondary-color) 45%, transparent);
  color: var(--secondary-color);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ac-icon-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--ac-faint);
  background: transparent;
  color: var(--ac-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.ac-icon-btn svg { width: 17px; height: 17px; }

.ac-icon-btn:hover {
  color: var(--ac-ink);
  border-color: var(--ac-faint-strong);
}

/* --- the two halves ------------------------------------------------------- */

.ac-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* --- left: text ----------------------------------------------------------- */

.ac-text {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: clamp(20px, 3.5vh, 44px) clamp(20px, 3.4vw, 56px) clamp(18px, 3vh, 34px);
  border-right: 1px solid var(--ac-faint);
}

.ac-panes {
  position: relative;
  flex: 1;
  min-height: 0;
}

.ac-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* "safe": a pane taller than the box starts at the top instead of
     overflowing upwards, where it could not be scrolled to. */
  justify-content: safe center;
  max-width: 40rem;
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}

.ac-pane.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Steps already behind us leave upwards, so the motion reads as a direction. */
.ac-pane.is-past { transform: translateY(-16px); }

.ac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--secondary-color);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ac-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.ac-pane h2 {
  margin: 0 0 18px;
  font-size: clamp(27px, 1.5rem + 1vw, 40px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.ac-pane p {
  margin: 0 0 14px;
  font-size: clamp(15.5px, 0.85rem + 0.25vw, 18px);
  line-height: 1.58;
  color: #C8CEDA;
}

.ac-pane p.aside {
  padding-left: 15px;
  border-left: 2px solid var(--ac-faint);
  color: var(--ac-muted);
  font-size: 15px;
}

.ac-pane em {
  font-style: italic;
  color: var(--ac-ink);
}

.ac-pane .formula {
  margin: 4px 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 1.04em;
}

/* Coloured symbols, matching the objects in the clip beside them. MathJax
   turns \class{c-yellow}{a} into these.

   Named after the colour, not the role: which symbol gets which colour is a
   per-step, per-story question — Cavalieri's "a" is green in the parallelogram
   scene and yellow in the binomial one — so the class has to say "yellow", not
   "the first quantity". */
.c-blue { color: var(--c-blue); }
.c-red { color: var(--c-red); }
.c-yellow { color: var(--c-yellow); }
.c-green { color: var(--c-green); }

/* Closing pane */
.ac-outro-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #FFFFFF;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.ac-outro-link svg { width: 17px; height: 17px; }

.ac-outro-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -12px var(--primary-color);
  color: #FFFFFF;
  text-decoration: none;
}

/* --- controls ------------------------------------------------------------- */

.ac-controls {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: clamp(16px, 2.5vh, 26px);
}

.ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--ac-faint-strong);
  background: transparent;
  color: var(--ac-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}

.ac-btn svg { width: 15px; height: 15px; }

.ac-btn:hover:not(:disabled) {
  border-color: var(--ac-ink);
  background: rgba(255, 255, 255, 0.05);
}

.ac-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.ac-btn--primary {
  min-width: 128px;
  justify-content: center;
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #FFFFFF;
  font-weight: 500;
}

.ac-btn--primary:hover:not(:disabled) {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 88%, #FFFFFF);
}

.ac-btn--ghost {
  padding: 10px 16px;
  border-color: transparent;
  color: var(--ac-muted);
}

.ac-btn--ghost:hover:not(:disabled) {
  border-color: transparent;
  color: var(--ac-ink);
  background: transparent;
}

.ac-btn:focus-visible,
.ac-icon-btn:focus-visible,
.ac-back:focus-visible,
.ac-dot:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.ac-progress {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.ac-dot {
  width: 24px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--ac-faint);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ac-dot.is-on { background: var(--secondary-color); }

/* --- right: stage --------------------------------------------------------- */

.ac-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--ac-stage);
}

.ac-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear;
}

.ac-slot.is-visible {
  opacity: 1;
  visibility: visible;
}

.ac-slot video,
.ac-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ac-endframe { cursor: pointer; }

/* Shown when a clip has not been rendered yet and there is no still to fall
   back to, so the page is usable while the animations are still being made. */
.ac-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px;
  color: var(--ac-muted);
  text-align: center;
}

.ac-pending svg {
  width: 34px;
  height: 34px;
  opacity: 0.55;
}

.ac-pending span {
  font-size: 14.5px;
  letter-spacing: 0.02em;
}

.ac-pending code {
  font-size: 12.5px;
  opacity: 0.7;
  word-break: break-all;
}

/* --- keyboard hint -------------------------------------------------------- */

.ac-hint {
  flex: none;
  margin: 0;
  padding: 9px 16px;
  border-top: 1px solid var(--ac-faint);
  color: var(--ac-muted);
  font-size: 12.5px;
  text-align: center;
  transition: opacity 0.5s ease;
}

.ac-hint.is-faded { opacity: 0; }

/* --- portrait / narrow: stack, animation on top --------------------------- */

@media (max-width: 900px), (max-aspect-ratio: 1 / 1) {
  .animated-page { overflow: auto; }

  .stagecraft { height: auto; min-height: 100%; }

  .ac-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .ac-stage {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  .ac-text {
    border-right: none;
    padding: 22px 20px 20px;
  }

  .ac-pane {
    position: relative;
    inset: auto;
    justify-content: flex-start;
    overflow: visible;
  }

  /* Only the active pane takes up room once they are in normal flow. */
  .ac-pane:not(.is-active) { display: none; }

  .ac-brand-name { display: none; }

  .ac-back-label { display: none; }
  .ac-back-label-short { display: inline; }

  /* Mobile browsers handle fullscreen poorly, so the toggle goes. */
  #acFullscreen { display: none; }

  .ac-hint { display: none; }

  .ac-progress {
    width: 100%;
    margin-left: 0;
    padding-top: 6px;
  }

  .ac-dot { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-pane,
  .ac-slot,
  .ac-outro-link {
    transition: none;
    transform: none;
  }
}

/* === Viewport ~1500px (Full HD at 125% Windows scaling)
   All font sizes ~10% smaller (rounded to half pixels), content ~10% narrower.
   Generated from the font-size rules above that apply at this width;
   keep them in sync when a size up there changes. === */
@media (min-width: 1200px) and (max-width: 1799px) {
    .ac-back { font-size: 13px; } /* 14.5px */
    .ac-brand-name { font-size: 19.5px; } /* 21.5px */
    .ac-brand-tag { font-size: 10px; } /* 11px */
    .ac-eyebrow { font-size: 11.5px; } /* 12.5px */
    .ac-pane h2 { font-size: calc(clamp(27px, 1.5rem + 1vw, 40px) * 0.9); } /* clamp(27px, 1.5rem + 1vw, 40px) */
    .ac-pane p { font-size: calc(clamp(15.5px, 0.85rem + 0.25vw, 18px) * 0.9); } /* clamp(15.5px, 0.85rem + 0.25vw, 18px) */
    .ac-pane p.aside { font-size: 13.5px; } /* 15px */
    .ac-outro-link { font-size: 14px; } /* 15.5px */
    .ac-btn { font-size: 13.5px; } /* 15px */
    .ac-pending span { font-size: 13px; } /* 14.5px */
    .ac-pending code { font-size: 11.5px; } /* 12.5px */
    .ac-hint { font-size: 11.5px; } /* 12.5px */
}