/* cinema.css, 2026-10-14 — "screening room" video treatment.
   A single big feature screen + a horizontal thumbnail filmstrip. Progressive
   enhancement over .cinema > .cin-list (poster links that go to YouTube with no JS).
   cinema.js builds the screen/strip and sets html.cin-js. GPU-light: opacity /
   transform transitions only; exactly ONE YouTube iframe, loaded on click. */

.cinema { min-width: 0; }
.fo-proj > .cinema { grid-column: 1 / -1; }

/* no-JS fallback: posters as a responsive grid of links to YouTube */
.cin-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cin-list a { display: block; text-decoration: none; color: var(--fo-ink); }
.cin-list img { width: 100%; height: auto; display: block; border-radius: 3px; }
.cin-list span { display: block; margin-top: 9px; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fo-mut); }
html.cin-js .cin-list { display: none; }

/* feature screen */
.cin-screen { position: relative; aspect-ratio: 16 / 9; background: #000;
  overflow: hidden; border-radius: 3px; }
.cin-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cin-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  border: 0; background: #000; cursor: pointer; display: block; }
.cin-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.8; transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); }
.cin-facade:hover .cin-poster, .cin-facade:focus-visible .cin-poster { opacity: 0.95; transform: scale(1.02); }
.cin-facade::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.45) 100%); }

.cin-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(54px, 7vw, 72px); height: clamp(54px, 7vw, 72px); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85); display: grid; place-items: center;
  background: rgba(0,0,0,.22); z-index: 2;
  transition: background 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.2,1); }
.cin-facade:hover .cin-play, .cin-facade:focus-visible .cin-play {
  background: rgba(0,0,0,.42); transform: translate(-50%, -50%) scale(1.07); }
.cin-play svg { width: 40%; height: 40%; fill: #fff; margin-left: 8%; }

.cin-meta { position: absolute; left: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px);
  bottom: clamp(12px, 2vh, 18px); z-index: 2; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 14px; color: #fff; text-shadow: 0 1px 7px rgba(0,0,0,.65); }
.cin-title { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.cin-count { font-size: 11px; letter-spacing: 0.08em; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* thumbnail filmstrip */
.cin-strip { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 2px; }
.cin-strip::-webkit-scrollbar { display: none; }
.cin-strip button { position: relative; flex: 0 0 auto; width: clamp(140px, 20vw, 196px);
  aspect-ratio: 16 / 9; padding: 0; border: 1px solid transparent; background: #000;
  cursor: pointer; overflow: hidden; border-radius: 2px; }
.cin-strip img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1); opacity: 0.5; transition: opacity 0.25s ease, filter 0.25s ease; }
.cin-strip button:hover img, .cin-strip button:focus-visible img { opacity: 0.85; filter: grayscale(0); }
.cin-strip button.active img { opacity: 1; filter: grayscale(0); }
.cin-strip button.active { border-color: var(--fo-ink); }
.cin-strip .n { position: absolute; left: 7px; top: 5px; z-index: 2; font-size: 10px;
  letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.75); font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .cin-strip button { width: 46vw; }
}
@media (prefers-reduced-motion: reduce) {
  .cin-poster, .cin-play, .cin-strip img { transition: none; }
  .cin-facade:hover .cin-poster { transform: none; }
}