/* ── REAL CAPTURES: phone video + panned page (wow pass, ev-captures) ──────
   Two things, both inside the evidence area and both real product pixels.

   1. A loop video inside a phone frame. `.phone img` already has its rules in
      site.css; a <video> in the same slot needs the same box, or it renders at
      its intrinsic size and breaks the frame. The loop is authored in the
      frame's own 9:18.5 shape, so `cover` crops nothing.

   2. A page capture taller than its screen (`data-pan`, set per asset in the
      content). With JS off, or under reduced motion, it is a still of the top
      of the page, in exactly the box a normal capture gets. capture-pan.js adds
      `.is-touring` when the screen is actually on screen: one slow walk down
      the real page and back, then it rests. Hovering the screen holds it.
      object-position, not a transform: the image keeps its layout box, so the
      tour cannot shift anything around it. */

.phone > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 22px;
  background: var(--paper-deep);
}
@media (max-width: 980px) {
  .evidence-mobile-share .ev-golf-search-phone > video,
  .evidence-desktop-phone .ev-product-phone > video { border-radius: 13px; }
}
@media (max-width: 720px) {
  .phone > video { border-radius: 15px; }
  .evidence-mobile-share .ev-golf-search-phone > video,
  .evidence-desktop-phone .ev-product-phone > video { border-radius: 13px; }
}

img[data-pan="vertical"] { object-position: 50% 0%; }
img[data-pan="vertical"].is-touring {
  /* Down slowly, a beat at the bottom, back up briskly: the way a person
     reads a long comparison, not the way a marquee scrolls. */
  animation: capture-tour 22s cubic-bezier(.45, .05, .35, 1) 1 both;
}
:hover > img[data-pan="vertical"].is-touring,
img[data-pan="vertical"].is-touring.is-held { animation-play-state: paused; }

@keyframes capture-tour {
  0%, 6%    { object-position: 50% 0%; }
  72%, 80%  { object-position: 50% 100%; }
  100%      { object-position: 50% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  img[data-pan="vertical"].is-touring { animation: none; }
}