/* One visible play control, at rest and following a mouse. */
[data-video-cursor] { user-select: none; -webkit-user-select: none; }
[data-video-cursor] > img { -webkit-user-drag: none; }
[data-video-cursor] > .play-circle {
  position: absolute;
  left: 24px;
  top: 24px;
  right: auto;
  bottom: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 4;
  pointer-events: none;
  color: #24271f;
  border: 1px solid #f4eddf80;
  background: #ece6d9d9;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: none;
  translate: none;
  scale: none;
  transition: background .3s ease, border-color .3s ease;
}

[data-video-cursor] .play-glyph { display: block; width: 36px; height: 36px; flex: none; }
.film-artwork[data-video-cursor].is-revealed > .play-circle { animation: none; }
[data-video-cursor]:hover > .play-circle,
[data-video-cursor]:focus-visible > .play-circle,
.story-card:focus-visible [data-video-cursor] > .play-circle {
  background: #f4eddf;
  border-color: #f4eddf;
}

/* Replace the small corner arrow style on the workshop video only. */
.story-image[data-video-cursor] > .play-circle {
  left: 24px;
  top: 24px;
  right: auto;
  bottom: auto;
  width: 78px;
  height: 78px;
  transform: none;
}

[data-video-cursor].video-cursor-active > .play-circle {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  align-self: auto;
  justify-self: auto;
  transform: translate3d(var(--video-cursor-x), var(--video-cursor-y), 0) translate(-50%, -50%);
  animation: none;
  translate: none;
  scale: none;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-video-cursor].video-cursor-tracking,
  [data-video-cursor].video-cursor-tracking * { cursor: none !important; }
}

@media (max-width: 760px) {
  .story-image[data-video-cursor] > .play-circle { width: 66px; height: 66px; }
  [data-video-cursor]:not(.video-cursor-active) > .play-circle { left: 16px; top: 16px; align-self: start; justify-self: start; }
  [data-video-cursor] .play-glyph { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-video-cursor] > .play-circle { transition: none; }
}