/* Both media have real alpha: the gallery's existing glass stays visible. */
.project-hover-plane > .speedster-bear-cover {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
}
.speedster-bear-cover::before {
  content: "";
  position: absolute;
  left: 37%;
  top: 81%;
  width: 26%;
  height: 2.5%;
  border-radius: 50%;
  background: rgb(73 50 22 / .13);
  filter: blur(9px);
}
.speedster-bear-media {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  isolation: isolate;
}
.speedster-bear-media > img,
.speedster-bear-media > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.speedster-bear-media > img { z-index: 1; opacity: 1; }
/* Keep the video layer composited before the first hover. A fully zero-opacity
   layer is skipped by Chromium and can render one empty frame when revealed.
   .001 is below one 8-bit colour step; the matching poster owns the idle image. */
.speedster-bear-media > video { opacity: .001; will-change: opacity; }
.speedster-bear-cover.is-running .speedster-bear-media > img { opacity: 0; }
.speedster-bear-cover.is-running .speedster-bear-media > video { opacity: 1; }
@media (hover: none), (max-width: 767px) {
  .project-hover-plane > .speedster-bear-cover.is-active { scale: 1.05; }
}
@media (prefers-reduced-motion: reduce) {
  .project-hover-plane > .speedster-bear-cover.is-active { scale: 1; }
  .speedster-bear-media > img, .speedster-bear-media > video { transition: none; }
}