/*
 * Shared translucent "play" button.
 * Single source of truth for the landing hero video and the material-list
 * video previews. Size is driven by the --video-play-size custom property so
 * the same component can be reused at different scales without duplicating CSS.
 */
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--video-play-size, 84px);
  height: var(--video-play-size, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
}

.video-play__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(9, 36, 57, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  transition: background-color 250ms ease-in-out, transform 250ms ease-in-out;
}

.video-play:hover .video-play__ring,
.video-play:focus-visible .video-play__ring {
  background: rgba(11, 160, 11, 0.6);
  transform: scale(1.06);
}

.video-play:focus-visible {
  outline: none;
}

.video-play:focus-visible .video-play__ring {
  box-shadow: 0 0 0 4px rgba(11, 160, 11, 0.35), 0 8px 30px rgba(0, 0, 0, 0.25);
}

.video-play__icon {
  width: calc(var(--video-play-size, 84px) * 0.36);
  height: calc(var(--video-play-size, 84px) * 0.36);
  margin-left: 4px;
  fill: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Card-sized variant used on the materials list. */
.video-play--card {
  --video-play-size: var(--cd-control-64);
}

/*
 * Hide the overlay once its container is playing. The `is-playing` class is set
 * on the direct parent (landing: [data-hero-video]; list: the Stimulus root).
 */
.is-playing > .video-play {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

/*
 * Playback error of the video-preview controller. It overlays the top of the
 * media area (the wrapper is position: relative) instead of joining the flow:
 * as a flex/grid item it landed beside the video on desktop and widened the
 * wrapper, which pushed the centred play button onto the video's edge.
 * Top, not bottom: the native controls bar sits at the bottom.
 */
.video-thumb > .video-thumb__error {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--cd-r-md, 8px);
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .video-play,
  .video-play__ring {
    transition: none;
  }
}