.case-mascots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.case-mascot {
  position: absolute;
  display: block;
  cursor: default;
  outline: none;
  pointer-events: auto;
}

.case-mascot:focus-visible {
  outline: 2px solid #cbadff;
  outline-offset: -2px;
  border-radius: 6px;
}

.case-mascot-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  /* Only feather the rectangular crop seam, never the character silhouette. */
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
  transition: opacity 160ms ease-out;
}

.case-mascot.is-playing .case-mascot-video { opacity: 1; }

@media (hover: none) {
  .case-mascot { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-mascot-video { display: none; transition: none; }
}