/* ── Live thumbnail ────────────────────────────────────────────────────────
   A card thumbnail that is the real page running in an iframe, not a picture
   of it. Screenshots drift the moment the page is edited; an instance cannot.

   Markup:
     <span class="lt-frame" data-src="/sneak/mike/?slide=variety&thumb=1"></span>

   assets/live-thumb.js creates the iframe only when the card nears the
   viewport, then scales it. Nothing loads if the visitor never scrolls there.

   The iframe renders at a fixed LT_W x LT_H logical size and is scaled down,
   so the embedded page keeps its desktop layout. Let it render at card width
   instead and the slide trips its own breakpoint: the Mike's page swaps its
   CTA to "open on a desktop" below ~900px.
*/
.lt-frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}
.lt-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1300px;
  height: 812px;
  border: 0;
  display: block;
  transform-origin: 0 0;
  /* the card is the link; the iframe must never swallow the click */
  pointer-events: none;
  background: #000;
  /* Sits back so the card's own type leads, and lifts when the card is hovered. */
  opacity: .78;
  transition: opacity .35s ease;
}
a:hover .lt-frame iframe,
.lt-frame:hover iframe { opacity: 1; }
/* Until the iframe exists the box is flat black, which reads as a broken card.
   A faint pulse says "loading" without shipping a spinner. */
.lt-frame:not(.is-live)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(240, 234, 220, 0.06), transparent 70%);
  animation: ltPulse 1.6s ease-in-out infinite;
}
@keyframes ltPulse { 0%, 100% { opacity: 0.45 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .lt-frame:not(.is-live)::after { animation: none; }
}