/* Product recordings over device screenshots (lib/motion.js, js/motion.js).
   Loaded as media="print" so it never blocks render; js/motion.js applies it
   before any clip plays (until then tiles.css hides clips and controls). The
   clip shares the screenshot's grid cell, stays transparent until it is
   actually playing, then fades in over the identical still. Without :has(),
   with reduced motion, or before JS shows it, only the still is visible. */
@supports selector(:has(*)) {
  .device-screen:has(> .motion-video) { display:grid; position:relative; }
  .device-screen:has(> .motion-video) > * { grid-area:1 / 1; min-width:0; min-height:0; }
  /* 2px shorter than the still, so the clip never reports a larger paint than
     the still and replaces it as the Largest Contentful Paint (equal boxes
     round differently). Once the clip is in, the still hides, so the 2px reads
     as the screen's black edge. */
  /* contain:paint: without it Chrome measured a playing clip a hair larger than
     the still at most widths and moved LCP to the clip (about 6 s on mobile). */
  .device-screen > .motion-video {
    contain:paint; display:block; align-self:start; width:100%; height:calc(100% - 2px); object-fit:cover; object-position:top;
    opacity:0; transition:opacity 0.6s ease;
  }
  .device-laptop > .device-screen > .motion-video { border-radius:2px; }
  .device-screen > .motion-video.is-playing { opacity:1; }
  .device-screen:has(> .motion-video.is-playing) > :is(picture, img) { visibility:hidden; transition:visibility 0s 0.6s; }

  /* Pause/play: a small dark disc in the screen's bottom-left corner (the right
     side of a laptop is covered by the phone in the hero clusters). */
  .device-screen > .motion-toggle:not([hidden]) {
    position:absolute; left:calc(2% + 8px); bottom:calc(2% + 8px); z-index:1;
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; padding:0; border:0; border-radius:50%;
    background:rgba(29, 29, 31, 0.72); color:#F5F5F7; cursor:pointer;
    box-shadow:0 0 0 1px rgba(245, 245, 247, 0.16);
    transition:background-color 0.2s ease;
  }
  .device-phone > .device-screen > .motion-toggle:not([hidden]) { left:8px; bottom:8px; width:28px; height:28px; }
  /* Invisible halo: the 32px disc (28px on phones) reaches a 44px hit area. */
  .device-screen > .motion-toggle:not([hidden])::after { content:''; position:absolute; inset:-7px; }
  .device-phone > .device-screen > .motion-toggle:not([hidden])::after { inset:-9px; }
  .device-screen > .motion-toggle:hover { background:rgba(58, 58, 60, 0.9); }
  .device-screen > .motion-toggle:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .motion-icon { width:12px; height:12px; fill:currentColor; }
  .motion-icon--play, .motion-toggle.is-paused .motion-icon--pause { display:none; }
  .motion-toggle.is-paused .motion-icon--play { display:block; }
}
/* Below 734px the phone in a hero cluster is too small for a clip and its
   control, so it keeps the still (a hidden video is never in view, so never loads). */
@media (max-width: 733px) {
  .device-cluster > .device-phone > .device-screen > .motion-video,
  .device-cluster > .device-phone > .device-screen > .motion-toggle:not([hidden]) { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .device-screen > .motion-video, .device-screen > .motion-toggle:not([hidden]) { display:none; }
}