/* codemany.com home, 2026-10-29: the hero's right column (#demo): the 15 s silent light loop of the app
 * (site/media/codemany-hero-light.*), which reel.js plays only while on screen and with motion allowed.
 * The box is the one the setup demo had: the column's width, 16:9, never taller than the screen leaves
 * (nav 57px + the hero's padding), with the site's window frame (1px border, 12px corners, soft shadow).
 * The <video>'s width/height attributes give the ratio before CSS and the poster load: no layout shift.
 * On phones (home.css) #demo is the second screen. */
.hero-video { display: grid; justify-items: center; min-width: 0; }
.hero-video video {
  display: block; width: min(100%, calc((100vh - 57px - 96px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9;
  border: 1px solid #d4d4d8; border-radius: 12px; background: var(--muted);
  box-shadow: 0 1px 2px #0000000d, 0 24px 60px -28px #00000047;
}
@supports (height: 100svh) {
  .hero-video video { width: min(100%, calc((100svh - 57px - 96px) * 16 / 9)); }
}
/* no source loaded (reel.js): no empty frame */
.reel-missing video { display: none; }

/* narrow: under the headline, at most 560px wide (phones: home.css makes it a screen of its own) */
@media (max-width: 860px) {
  .hero-video { width: 100%; max-width: 560px; justify-items: start; }
}
/* very short screens: the value prop wins, the video goes (it would not fit without scrolling) */
@media (max-width: 860px) and (max-height: 600px), (max-height: 460px) {
  .hero-video { display: none; }
}