/* 11 Covers. Night band: the headline and the request in one row, then the covers as one bento at every size –
   one big cover and four small ones (laptop and tablet: the big one left, two rows of two beside it; phone: the big
   one on top, two rows of two under it; a short phone: the four small ones in one row), so "five to pick from" is seen at once and nothing moves by itself. Each
   frame starts as the still of the talk the cover is made from; after the request each one is drawn over its still
   from the top down, one at a time, with a light edge. Nothing overlaps, nothing moves on hover. */
.cv-hd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5) var(--s7); align-items: end; }
.cv-hd .lead { max-width: 30em; }
.cv-ask { justify-self: end; --ask-max: 440px; }

/* The bento. Columns 2.1 : 1 : 1 make the big one two small rows tall at 16:9 (exact at the 1200px column). */
.cv-res { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); margin: var(--s6) 0 0; padding: 0; list-style: none; }
.cv-c { min-width: 0; margin: 0; }
.cv-c:first-child { grid-row: span 2; }
.cv-c:first-child .cv-f { aspect-ratio: auto; height: 100%; }

/* One cover frame: the still it starts from, the cover drawn over it, a light edge that runs down while it draws */
.cv-f { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--night-card); box-shadow: var(--sh-dark); isolation: isolate; }
.cv-f img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-o { filter: saturate(.8) brightness(.8); }
.js .cv-s { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); }
.cv-f::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 226, 120, 0) 0%, rgba(255, 226, 120, .3) 80%, rgba(255, 250, 230, .95) 97%, rgba(255, 255, 255, 0) 100%);
  transform: translateY(-100%); }
/* Drawn: the cover comes down over its still; the light edge rides the line between them */
.cv-c.is-drawn .cv-s { animation: cv-draw var(--cv-t, .8s) cubic-bezier(.45, .05, .25, 1) both; }
.cv-c.is-drawn .cv-f::after { animation: cv-edge var(--cv-t, .8s) cubic-bezier(.45, .05, .25, 1) both; }
.cv-c:first-child { --cv-t: 1.1s; }
@keyframes cv-draw { from { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } }
@keyframes cv-edge { 0% { opacity: 1; transform: translateY(-97%); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(320%); } }
.cv-c.is-done .cv-o { visibility: hidden; }
/* Paused with the demo (scrolled away, a dialog open): a cover half drawn waits too */
.cv-res[data-demo="paused"] .cv-s, .cv-res[data-demo="paused"] .cv-f::after { animation-play-state: paused; }

.cv-note { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--s4); max-width: 44em; }
.cv-note .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--yellow); }

@media (max-width: 999px) {
  .cv-hd { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .cv-res { margin-top: var(--s4); gap: 12px; }
}
/* Phone: the big cover on top, full width; the four small ones in two rows of two under it */
@media (max-width: 719px) {
  .cv-hd { gap: var(--s4); }
  .cv-hd .lead { margin-top: 14px; }
  .cv-res { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .cv-c:first-child { grid-row: auto; grid-column: 1 / -1; }
  .cv-c:first-child .cv-f { aspect-ratio: 16 / 9; height: auto; }
  .cv-c:not(:first-child) .cv-f { border-radius: var(--r-thumb); }
  .cv-note { margin-top: var(--s3); font-size: 16px; }
}
/* A short phone (375x667 and Safari's shorter screens): the big cover on top, the four small ones in one row under
   it, so all five and the request share the screen at the natural stop (two rows of two end 140px below it). */
@media (max-width: 719px) and (max-height: 760px) {
  .cv-hd { gap: var(--s3); }
  .cv-res { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .js .cv-s { clip-path: none; -webkit-clip-path: none; }
  .cv-c.is-drawn .cv-s, .cv-c.is-drawn .cv-f::after { animation: none; }
  .cv-f::after { display: none; }
}