/* ---------------------------------------------------------------------------
   Scroll-triggered autoplay previews — the chrome for js/scrollplay.js.

   THE SINGLE SOURCE for these rules. The class names are emitted by
   scrollplay.js, so they cannot be renamed per-consumer, and four surfaces now
   share them: the marketing site's portfolio grid (.video-item) and services
   tabs (.service-video), plus all three property-site templates, whose hero
   video is required to autoplay (see Documentation/admin-spa-log.md). It lives
   in its own file rather than root.css BECAUSE the listing shells deliberately
   load none of the marketing site's stylesheets — they are the agent's
   branding, not TC's.

   Consumers link it explicitly: base.html via a page's `extraCSS`, and the
   listing shells via `listingCss`. Nothing @imports it.
   --------------------------------------------------------------------------- */
.has-scrollplay {
  position: relative;
  cursor: pointer;
}
.has-scrollplay.is-unmuted {
  cursor: default;
}
.scrollplay-sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    background 0.2s ease,
    transform 0.15s ease;
}
.has-scrollplay:hover .scrollplay-sound,
.has-scrollplay:focus-within .scrollplay-sound,
.has-scrollplay.is-unmuted .scrollplay-sound {
  opacity: 1;
}
.scrollplay-sound:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.05);
}
.scrollplay-sound svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
}
.scrollplay-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.has-scrollplay:hover .scrollplay-hint {
  opacity: 1;
}
.has-scrollplay.is-unmuted .scrollplay-hint {
  opacity: 0;
  animation: none;
}
/* Duration badge — filled from video metadata as the tile nears the viewport. Hidden whenever
   native controls are (or have been) enabled so it can't overlap the controls bar. */
.scrollplay-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.scrollplay-duration:empty,
.has-scrollplay.is-unmuted .scrollplay-duration,
.has-scrollplay.has-native-controls .scrollplay-duration {
  opacity: 0;
}
/* Touch devices: no hover to reveal the affordances — sound button stays visible, and the hint
   flashes once on the first tile that starts playing (class added/removed by scrollplay.js). */
@media (hover: none) {
  .has-scrollplay .scrollplay-sound {
    opacity: 1;
  }
}
.has-scrollplay.hint-flash .scrollplay-hint {
  animation: scrollplay-hint-flash 2.6s ease forwards;
}
@keyframes scrollplay-hint-flash {
  0% {
    opacity: 0;
  }
  12%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-scrollplay.hint-flash .scrollplay-hint {
    animation: none;
  }
}