/* Holographic foil sticker. Measured from Decimals' placements page (teardown 10-02), rewritten as plain
   WebGL (no three.js). part.js draws the cutout image through a thin-film foil shader into a canvas over it;
   this file is the frame, the pointer tilt and the colour knobs. Without WebGL it is just the image. */
.foil {
  /* the three colours the rainbow is remapped into (screen-blended, so darks light up most) */
  --foil-a: #ffde9e;          /* gold  (1, .87, .62) */
  --foil-b: #f7c7bd;          /* blush (.97, .78, .74) */
  --foil-c: #c7bdf2;          /* lilac (.78, .74, .95) */
  --foil-glint: #ffade0;      /* hot spot under the pointer (1, .68, .88) */
  --foil-sheen: 0.5;          /* sheen strength */
  --foil-glint-amt: 0.45;     /* glint strength */
  --foil-glint-mix: 0.3;      /* how far the glint pulls the colour toward --foil-glint */
  --foil-perspective: 700px;
  --foil-tilt-ease: 0.18s ease-out;
  position: relative;
  isolation: isolate;
  transform: perspective(var(--foil-perspective)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--foil-tilt-ease);
}
.foil > img { display: block; width: 100%; height: auto; }
.foil > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }