/* Play on the homepage's film cards. Ported 3 Nov from the AD's play/ board (options.css), Calvin's pick: "time at rest +
   cursor player", the board's P5 sign with P4's player.
   - At rest: a quiet sign on the card's top right, the triangle and the running time ("▶ 0:40"), Plex Mono 11 px, Paper
     with a shadow and no ground (Calvin, 3 Nov: backgrounds as little as possible). It gives way when the frame comes.
   - With the frame: over the picture the pointer itself becomes the play triangle (play.js draws it at the pointer, the
     arrow hides; no circle round it, Calvin, 3 Nov: "I don't want the circle around the play button on hover on videos")
     and a click anywhere on the picture plays the film in its card, with sound and controls, as before. The
     button covers the picture, all but the foot, where the frame's strip is the way to the case study (↗) and carries
     the running time ("VALARIAN — the Perplexity launch film · 0:40 ↗").
   - Touch (no pointer): the triangle sits centred on the card crossing the middle of the screen (.is-hot, hover.js).
   - Keyboard: the button takes focus with the triangle centred and a Paper outline.
   The <button class="card__play"> keeps its label ("Play: …"); tools/draft_site.py card() writes the sign (.card__rest)
   and the strip's time (.cap__time). Colours from types.css; the triangle is the only mark, a shadow keeps it readable. */
.hv, .play-cursor { --shade: color-mix(in srgb, var(--pal-black, #000) 40%, transparent); }   /* the pointer lives on <body>, outside .hv */
.hv .card--film { --ring: clamp(46px, 12cqi, 66px); --foot: 36px; }

/* at rest: the time */
.card__rest { display: none; }
.hv .card__rest { display: inline-flex; align-items: center; gap: 6px; position: absolute; right: 12px; top: 11px; z-index: 2; pointer-events: none;
                  color: var(--pal-paper, #F7F7F5); font: 400 11px/1 var(--font-mono); letter-spacing: .04em; text-shadow: 0 1px 8px var(--shade), 0 0 2px var(--shade);
                  transition: opacity var(--beat) var(--ease); }
.hv .card__rest svg { width: 7px; height: 9px; filter: drop-shadow(0 1px 4px var(--shade)); }
.hv .card--film:hover .card__rest, .hv .card--film.is-hot .card__rest, .hv .card--film:focus-within .card__rest, .hv .card--film.is-playing .card__rest { opacity: 0; }

/* the player: the whole picture is the button, the foot stays the link */
.hv .card--film .card__play,
.hv .card--film:hover .card__play { left: 0; top: 0; right: 0; bottom: var(--foot); width: auto; height: auto; padding: 0; gap: 0; border-radius: 0; transform: none;
                                    background: none; box-shadow: none; font-size: 0; color: var(--pal-paper, #F7F7F5); cursor: none;
                                    display: flex; align-items: center; justify-content: center; }   /* one row: the triangle sits in the ring's centre */
.hv .card--film .card__play .film__time { display: none; }
.hv .card--film .card__play .film__icon { width: calc(var(--ring) * .34); height: calc(var(--ring) * .4); margin-left: calc(var(--ring) * .05);
                                         opacity: 0; filter: drop-shadow(0 1px 8px var(--shade)) drop-shadow(0 0 2px var(--shade)); transition: opacity var(--beat) var(--ease); }
.hv .card--film .card__play:focus-visible { outline: 2px solid var(--pal-paper, #F7F7F5); outline-offset: -6px; border-radius: 10px; }
.hv .card--film .card__play:focus-visible .film__icon, .hv .card--film.is-hot .card__play .film__icon { opacity: 1; }
html.is-touch .hv .card--film .card__play { cursor: auto; }
/* playing: the film's own controls take over, the button goes (the page's rule, restated: this file loads after it) */
.hv .card--film.is-playing .card__play { display: none; }

/* the strip: the running time, and the way to the case study */
.cap__time { display: none; }
.hv .card--film .cap__time { display: inline; }
.hv .card--film .cap__time::before { content: " · "; }
.hv .card--film .card__cap::after { content: " ↗"; }

/* the pointer as the play triangle, no circle (play.js moves it; its middle sits on the pointer) */
.play-cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none;
               color: var(--pal-paper, #F7F7F5); display: grid; place-items: center;
               opacity: 0; transform: translate(-999px, -999px); transition: opacity .22s cubic-bezier(.2, .8, .2, 1); }
.play-cursor.is-on { opacity: 1; }
.play-cursor svg { width: 20px; height: 24px; margin-left: 4px; filter: drop-shadow(0 1px 8px var(--shade)) drop-shadow(0 0 2px var(--shade)); }

@media (prefers-reduced-motion: reduce) { .hv .card__play, .hv .card__rest, .play-cursor { transition: none !important; } }