/* Foil card shimmer — matches Bilgewater Market foiled card treatment */

@keyframes foil-sweep {
  0% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

@keyframes foil-hue {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

.foil-card-image {
  contain: layout style paint;
}

.foil-card-image .foil-band,
.foil-card-image .foil-static {
  contain: paint;
}

.foil-band {
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 17.5%,
    rgba(194, 255, 218, 0.3) 21%,
    rgba(163, 200, 255, 0.75) 23.5%,
    rgba(250, 230, 255, 0.9) 25%,
    rgba(163, 200, 255, 0.75) 26.5%,
    rgba(194, 255, 218, 0.3) 29%,
    transparent 32.5%,
    transparent 67.5%,
    rgba(194, 255, 218, 0.3) 71%,
    rgba(163, 200, 255, 0.75) 73.5%,
    rgba(250, 230, 255, 0.9) 75%,
    rgba(163, 200, 255, 0.75) 76.5%,
    rgba(194, 255, 218, 0.3) 79%,
    transparent 82.5%,
    transparent 100%
  );
  background-size: 200% 200%;
  mix-blend-mode: screen;
  opacity: 0.45;
  animation: foil-sweep 5.5s linear infinite, foil-hue 5.5s linear infinite;
}

.foil-static {
  background:
    linear-gradient(135deg, rgba(81, 143, 236, 0.38) 0%, transparent 40%, transparent 60%, rgba(205, 236, 81, 0.32) 100%),
    radial-gradient(circle at 18% 22%, rgba(255, 214, 214, 0.8) 1px, transparent 2px),
    radial-gradient(circle at 55% 12%, rgba(247, 255, 214, 0.8) 1px, transparent 2px),
    radial-gradient(circle at 82% 35%, rgba(214, 255, 231, 0.8) 1px, transparent 2px),
    radial-gradient(circle at 30% 70%, rgba(214, 231, 255, 0.8) 1px, transparent 2px),
    radial-gradient(circle at 70% 78%, rgba(247, 214, 255, 0.8) 1px, transparent 2px),
    radial-gradient(circle, rgba(247, 255, 214, 0.6) 1px, transparent 2px),
    radial-gradient(circle at 10% 55%, rgba(214, 255, 231, 0.7) 1px, transparent 2px),
    radial-gradient(circle at 90% 10%, rgba(255, 214, 214, 0.7) 1px, transparent 2px);
  mix-blend-mode: color-dodge;
  opacity: 0.29;
  animation: foil-hue 5.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .foil-band,
  .foil-static {
    animation: none;
  }
}