/* Inline concept animations inside /know handout sections.
 *
 * The SAME Manim clips that play inline in a /learn lesson (web/learn_render.py →
 * .lx-anim in 17-learn.css) also play inline in the matching /know handout section.
 * /know does NOT load 17-learn.css, so this page-scoped sheet (loaded directly by
 * know/topics.html, like 20-simulate.css — no Tailwind rebuild) restyles them under
 * their own `hz-` classes. web/handout_render.py emits <figure class="hz-figure">
 * <video class="hz-anim">…; playback is driven by handout-anim.js (a clip in a
 * collapsed <details> fold plays when the fold opens, pauses off-screen). The handout
 * PDF path (web/handout_latex.py) drops these clips entirely — website only.
 */

.hz-figure {
  margin: 1.35rem auto;
  width: fit-content;        /* hug photos; full-width diagrams/videos override below */
  max-width: 40rem;          /* never wider than the reading column */
}

/* Diagrams and animations fill the figure; photos stay at their display width so the
   caption centres under the image (mirrors .lx-figure on /learn). */
.hz-figure:has(video),
.hz-figure:has(img[src*=".png"]),
.hz-figure:has(img[src*=".svg"]) {
  width: 100%;
}

.hz-figure img {
  display: block;
  height: auto;
  max-width: 100%;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}

/* Generated diagrams fill the column without squashing; photos keep a height cap so a
   tall portrait does not dominate the reading column, while still reading large enough
   for teaching detail (museum drawings, landscapes, apparatus). */
.hz-figure img[src*=".png"] {
  width: 100%;
  max-height: none;
  background: #0b1020;
}
.hz-figure img[src*=".jpg"],
.hz-figure img[src*=".jpeg"],
.hz-figure img[src*=".webp"] {
  max-height: 30rem;         /* larger teaching photos (museum works, landscapes, apparatus) */
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  background: #0b1020;       /* letterbox matte matches diagram figures */
}

/* Prefer the smaller webp sibling when the browser supports it (served as .jpg.webp
   next to .jpg); no change needed here — the img src is still the canonical path. */

.hz-anim {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #0b1020;       /* the .lx-figure diagram matte — the clip reads as a live figure */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
  cursor: pointer;           /* tap toggles play/pause (handout-anim.js) */
}

.hz-figure figcaption {
  text-align: center;
  color: #a8b8cc;          /* slightly brighter for caption readability */
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.5;
  margin-top: 0.45rem;
  max-width: 40rem;        /* match figure max-width so long captions wrap under the image */
  margin-inline: auto;
  padding-inline: 0.35rem;
  text-wrap: pretty;       /* avoid orphan words when the browser supports it */
}

/* Hover lift: subtle depth cue so figures feel interactive on the website without
   competing with the content. Disabled under reduced-motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hz-figure img,
  .hz-anim {
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  .hz-figure:hover img,
  .hz-figure:hover .hz-anim {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
  }
}

/* Print: drop decorative chrome so handout PDFs / browser print stay crisp. */
@media print {
  .hz-figure img,
  .hz-anim {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    max-height: none !important;
  }
  .hz-figure figcaption {
    color: #374151 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* handout-anim.js also pauses + shows native controls; this keeps a static poster
     visible even before the script runs. */
  .hz-anim { cursor: default; }
}

/* Keyboard focus for interactive animations (play/pause via handout-anim.js). */
.hz-anim:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
}

/* Focusable figure images (some handouts wrap images in anchors; keyboard users
   need the same cyan ring as animations / search hits). */
.hz-figure a:focus-visible img,
.hz-figure img:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
}

/* Credit / source line under a figure (when present as a second caption-like p). */
.hz-figure .hz-credit {
  text-align: center;
  color: #64748b;
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.35;
  margin-top: 0.15rem;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 0.35rem;
}