/* MofuMerch foil shine
   A light band sweeps over the static product image, cut to the foil areas by a small
   mask image (white + alpha, opaque = foil). No video or animated image needed.
   The mask layer stays still and only the band moves (a transform), so the browser can
   do the animation on the graphics card instead of repainting every frame.
   Settings (CSS variables, set on :root or per product):
     --foil           foil colour
     --foil-speed     seconds for one sweep (it sweeps back and forth)
     --foil-strength  0..1 opacity of the shine
     --foil-blend     mix-blend-mode of the shine (screen, color-dodge, overlay, ...)
*/
:root {
  --foil: #cc73ff;
  --foil-speed: 5s;
  --foil-strength: .85;
  --foil-blend: screen;
}

.mofu-foil {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.mofu-foil > img { display: block; width: 100%; height: auto; }

/* still layer: cut to the foil areas, fades in while playing */
.mofu-foil__shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  mix-blend-mode: var(--foil-blend);
  -webkit-mask: var(--foil-mask) center / cover no-repeat;
          mask: var(--foil-mask) center / cover no-repeat;
}

/* moving band: a narrow bright core + a wide soft glow, both in the foil colour */
.mofu-foil__band {
  position: absolute;
  top: -75%;
  left: -150%;
  width: 400%;
  height: 250%;
  background:
    linear-gradient(115deg,
      transparent 41%,
      color-mix(in srgb, var(--foil) 90%, transparent) 46%,
      color-mix(in srgb, var(--foil) 30%, white) 49%,
      #fff 50%,
      color-mix(in srgb, var(--foil) 30%, white) 51%,
      color-mix(in srgb, var(--foil) 90%, transparent) 54%,
      transparent 59%),
    linear-gradient(115deg,
      transparent 26%,
      color-mix(in srgb, var(--foil) 60%, transparent) 50%,
      transparent 74%);
  will-change: transform;
  animation: mofu-foil-sweep var(--foil-speed) ease-in-out infinite alternate;
  animation-play-state: paused;
}

.mofu-foil.is-playing .mofu-foil__shine { opacity: var(--foil-strength); }
.mofu-foil.is-playing .mofu-foil__band { animation-play-state: running; }

/* holographic foil: a rainbow band, each colour pulled towards the foil colour
   (Red Holo leans red, Gold-HOLO leans gold, plain Holo uses a near-white colour) */
.mofu-foil--holo .mofu-foil__band {
  background:
    linear-gradient(115deg,
      transparent 37%,
      color-mix(in srgb, #ff5ad2 65%, var(--foil)) 41%,
      color-mix(in srgb, #ffd25a 65%, var(--foil)) 44%,
      color-mix(in srgb, #6effa0 65%, var(--foil)) 47%,
      #fff 50%,
      color-mix(in srgb, #5ad7ff 65%, var(--foil)) 53%,
      color-mix(in srgb, #8c6eff 65%, var(--foil)) 56%,
      color-mix(in srgb, #ff5ad2 65%, var(--foil)) 59%,
      transparent 63%),
    linear-gradient(115deg,
      transparent 24%,
      color-mix(in srgb, var(--foil) 45%, transparent) 50%,
      transparent 76%);
}

/* shine on WooCommerce's hover-zoom copy of the image (product page). No z-index or
   opacity here: the shine must blend with the zoom image right under it. */
.mofu-foil-zoom {
  position: absolute;
  display: none;
  pointer-events: none;
}
.mofu-foil-zoom .mofu-foil__shine { opacity: var(--foil-strength); transition: none; }
.mofu-foil-zoom .mofu-foil__band { animation-play-state: running; }

/* the band starts and turns around just outside the image */
@keyframes mofu-foil-sweep {
  from { transform: translateX(-35%); }
  to   { transform: translateX(35%); }
}

/* people who turn off animations get a still highlight instead */
@media (prefers-reduced-motion: reduce) {
  .mofu-foil__band { animation: none !important; transform: translateX(-4%); }
}