/* look-reel.css — the "recent work" moment, hero-adjacent (2026-07-17): three real
   site screenshots melting into each other via createLookReel(transition:'crossfade').
   Poster-first (never a blank/white flash before the canvas mounts) — same
   pattern as before-after.css and the hero. */

.look-reel {
  width: 100%; max-width: 480px; margin: 26px auto 0;
  aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink);
  background-image: url('../work/reel/alsoknownas.jpg');
  background-size: cover;
  background-position: top center;
}

.look-reel canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.look-reel.is-loaded canvas { opacity: 1; }

/* The WebGL-off fallback: createLookReel drops in a plain <img> — cover-fit it the
   same as the poster so the box never changes shape. */
.look-reel img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}

.look-reel-captions {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 14px 0 0; padding: 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; color: var(--muted);
}
.look-reel-captions li { border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .look-reel canvas { transition: none; }
}