/* PRE iridescent foil, driven by assets/js/foil.js. Layer stack ported from IridescentFoil (foil band,
   film blobs, pearl, shine, glare), folded into two overlay spans and retuned for a black page:
   colour is added with screen blending so it reads as a holographic sticker rather than a pale shimmer. */
@property --foil-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --foil-y { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --foil-angle { syntax: '<angle>'; inherits: true; initial-value: 135deg; }
@property --foil-shift { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --foil-shift-y { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

.pre-foil {
  --foil-x: 50%;
  --foil-y: 50%;
  --foil-angle: 135deg;
  --foil-shift: 0%;
  --foil-shift-y: 0%;
  --foil-shine: .62;
  --foil-intensity: 1;
  isolation: isolate;
}

/* After the pointer leaves, glide the light back to centre instead of snapping. */
.pre-foil[data-foil-idle="true"] {
  transition: --foil-x .7s cubic-bezier(.2, .7, .2, 1), --foil-y .7s cubic-bezier(.2, .7, .2, 1),
    --foil-angle .7s cubic-bezier(.2, .7, .2, 1), --foil-shift .7s cubic-bezier(.2, .7, .2, 1),
    --foil-shift-y .7s cubic-bezier(.2, .7, .2, 1);
}

.pre-foil__layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background-repeat: no-repeat;
}

.pre-foil__layer::before,
.pre-foil__layer::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* Layer 1, the foil: conic spectrum arcs swung from a point off the sticker (so no pinch shows), the source's travelling rainbow band and the film
   blobs, masked by a light pool and moving density bands so colour pools where the light hits. */
.pre-foil__film {
  background:
    linear-gradient(112deg, transparent 0%, transparent 26%, rgba(0, 220, 255, .5) 31%, rgba(80, 255, 190, .42) 36%,
      rgba(190, 255, 80, .3) 40%, transparent 46%, rgba(255, 230, 70, .26) 50%, rgba(255, 70, 180, .44) 56%,
      rgba(150, 90, 255, .46) 64%, rgba(60, 120, 255, .4) 70%, transparent 76%, transparent 100%),
    repeating-conic-gradient(from var(--foil-angle) at calc(var(--foil-x) * .6 - 35%) calc(140% - var(--foil-y) * .3),
      #ff5ccf 0deg, #8f6bff 6deg, #43b8ff 12deg, #43ffd9 18deg, #c4ff63 24deg, #ffe066 30deg, #ff8a5c 36deg,
      #ff5ccf 42deg),
    radial-gradient(ellipse at 16% 28%, rgba(255, 70, 180, .5) 0%, transparent 48%),
    radial-gradient(ellipse at 66% 18%, rgba(0, 220, 255, .5) 0%, transparent 52%),
    radial-gradient(ellipse at 78% 70%, rgba(80, 255, 190, .45) 0%, transparent 56%),
    radial-gradient(ellipse at 38% 82%, rgba(150, 90, 255, .5) 0%, transparent 52%);
  background-size: 320% 100%, 100% 100%, 150% 150%, 160% 160%, 145% 145%, 155% 155%;
  background-position:
    var(--foil-shift) center,
    center,
    calc(var(--foil-shift) * -.2) calc(var(--foil-shift-y) * .3),
    calc(var(--foil-shift) * .5) calc(var(--foil-shift-y) * -.2),
    calc(var(--foil-shift) * -.4) calc(var(--foil-shift-y) * .5),
    calc(var(--foil-shift) * .35) calc(var(--foil-shift-y) * .25);
  mix-blend-mode: screen;
  opacity: calc(.6 * var(--foil-intensity));
  -webkit-mask-image:
    radial-gradient(circle at var(--foil-x) var(--foil-y), #000 0%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .22) 85%),
    linear-gradient(var(--foil-angle), rgba(0, 0, 0, .35) 0%, #000 22%, rgba(0, 0, 0, .3) 44%, #000 66%,
      rgba(0, 0, 0, .3) 88%, #000 100%);
  -webkit-mask-size: 100% 100%, 200% 200%;
  -webkit-mask-position: center, var(--foil-shift) var(--foil-shift-y);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle at var(--foil-x) var(--foil-y), #000 0%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .22) 85%),
    linear-gradient(var(--foil-angle), rgba(0, 0, 0, .35) 0%, #000 22%, rgba(0, 0, 0, .3) 44%, #000 66%,
      rgba(0, 0, 0, .3) 88%, #000 100%);
  mask-size: 100% 100%, 200% 200%;
  mask-position: center, var(--foil-shift) var(--foil-shift-y);
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

/* Pearl: the source's cool pearl wash, as a faint screen so the black base turns gunmetal, not grey. */
.pre-foil__film::before {
  background:
    radial-gradient(ellipse at calc(var(--foil-x) * .9) calc(var(--foil-y) * .85), rgba(210, 226, 240, .28) 0%,
      rgba(190, 210, 226, .08) 24%, transparent 56%),
    linear-gradient(112deg, rgba(200, 216, 230, .14) 0%, transparent 28%, rgba(84, 108, 128, .12) 48%,
      rgba(200, 216, 230, .14) 72%, transparent 100%);
  background-size: 100% 100%, 180% 100%;
  background-position: center, var(--foil-shift) center;
  mix-blend-mode: screen;
}

/* Diffraction grain: fine lines across the light, the cue that makes it read as printed holographic film. */
.pre-foil__film::after {
  background: repeating-linear-gradient(calc(var(--foil-angle) + 90deg), rgba(255, 255, 255, .16) 0 1px,
    transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: .55;
}

/* Layer 2, the specular: angled shine sweep plus a tight glare hotspot under the pointer. */
.pre-foil__glare {
  background:
    radial-gradient(circle at var(--foil-x) var(--foil-y), rgba(236, 244, 250, .5) 0%, rgba(210, 224, 236, .18) 9%,
      rgba(220, 232, 244, .07) 22%, transparent 38%),
    linear-gradient(var(--foil-angle), transparent 0%, rgba(220, 230, 238, .03) 12%, rgba(226, 235, 242, .3) 31%,
      rgba(37, 52, 66, .1) 52%, rgba(0, 124, 255, .14) 64%, rgba(255, 0, 147, .12) 74%, rgba(223, 232, 239, .18) 88%,
      transparent 100%);
  background-size: 100% 100%, 220% 100%;
  background-position: center,
    calc(50% + (var(--foil-x) - 50%) * .35) calc(50% + (var(--foil-y) - 50%) * .24);
  mix-blend-mode: screen;
  opacity: calc(var(--foil-shine) * .62 * var(--foil-intensity));
}

/* Sticker edge: a hairline catch-light round the rim. */
.pre-foil__glare::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .16);
}

@media (prefers-reduced-motion: reduce) {
  .pre-foil,
  .pre-foil[data-foil-idle="true"] { transition: none; }
}