/* /src/components/ui/media/stacked-video-cards.css */
.cfb-stacked-video-card-loading {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cfb-surface-muted) 74%, var(--cfb-text-muted)) 0%,
      color-mix(in srgb, var(--cfb-surface-muted) 58%, var(--cfb-text-muted)) 100%
    );
}

.cfb-stacked-video-card-sheen {
  animation: cfb-video-card-sheen 2.52s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--stack-sheen-delay, 0ms);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, white 54%, transparent) 26%,
      color-mix(in srgb, white 86%, transparent) 40%,
      white 50%,
      color-mix(in srgb, white 86%, transparent) 60%,
      color-mix(in srgb, white 54%, transparent) 74%,
      transparent 100%
    );
  bottom: -8%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -8%;
  transform: translateX(-130%) skewX(-12deg);
  width: 72%;
}

@keyframes cfb-video-card-sheen {
  0% {
    opacity: 0;
    transform: translateX(-130%) skewX(-12deg);
  }

  12% {
    opacity: 0.95;
  }

  78% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translateX(240%) skewX(-12deg);
  }
}