/*
 * foil-lab.css — Lab foil effects for webapp templates
 * Provides: palette vars, tint selectors, layer-b/c declarations,
 * and all 80+ lab foil effect CSS rules.
 */

/* ── Default palette on .karte-item (rainbow) ── */
.karte-item {
  --c1: hsl(330,88%,65%); --c2: hsl(25,90%,62%); --c3: hsl(50,92%,65%);
  --c4: hsl(140,75%,58%); --c5: hsl(195,88%,62%); --c6: hsl(265,75%,62%);
  --c-dark: hsl(280,30%,15%); --c-light: hsl(60,30%,88%); --c-shine: rgba(255,255,255,.55);
}

/* ── 17 tint palettes ── */
[data-tint="rainbow"] {
  --c1:hsl(330,88%,65%);--c2:hsl(25,90%,62%);--c3:hsl(50,92%,65%);
  --c4:hsl(140,75%,58%);--c5:hsl(195,88%,62%);--c6:hsl(265,75%,62%);
  --c-dark:hsl(280,30%,15%);--c-light:hsl(60,30%,88%);--c-shine:rgba(255,255,255,.55);
}
[data-tint="red"] {
  --c1:hsl(355,92%,65%);--c2:hsl(15,88%,60%);--c3:hsl(340,82%,58%);
  --c4:hsl(0,88%,55%);--c5:hsl(25,75%,65%);--c6:hsl(345,90%,72%);
  --c-dark:hsl(0,45%,12%);--c-light:hsl(10,50%,88%);--c-shine:rgba(255,180,180,.6);
}
[data-tint="orange"] {
  --c1:hsl(25,95%,60%);--c2:hsl(40,88%,58%);--c3:hsl(15,85%,55%);
  --c4:hsl(50,92%,62%);--c5:hsl(30,85%,70%);--c6:hsl(20,90%,48%);
  --c-dark:hsl(25,50%,12%);--c-light:hsl(35,60%,88%);--c-shine:rgba(255,210,170,.65);
}
[data-tint="yellow"] {
  --c1:hsl(50,98%,65%);--c2:hsl(45,90%,70%);--c3:hsl(55,95%,75%);
  --c4:hsl(40,85%,58%);--c5:hsl(58,92%,80%);--c6:hsl(48,100%,55%);
  --c-dark:hsl(50,50%,15%);--c-light:hsl(55,60%,92%);--c-shine:rgba(255,250,180,.7);
}
[data-tint="green"] {
  --c1:hsl(130,80%,55%);--c2:hsl(100,75%,55%);--c3:hsl(155,82%,50%);
  --c4:hsl(85,78%,60%);--c5:hsl(170,70%,55%);--c6:hsl(120,82%,65%);
  --c-dark:hsl(130,50%,10%);--c-light:hsl(130,40%,88%);--c-shine:rgba(180,255,200,.6);
}
[data-tint="blue"] {
  --c1:hsl(210,92%,62%);--c2:hsl(225,88%,58%);--c3:hsl(195,92%,55%);
  --c4:hsl(240,85%,65%);--c5:hsl(200,75%,70%);--c6:hsl(215,92%,50%);
  --c-dark:hsl(220,55%,10%);--c-light:hsl(210,50%,90%);--c-shine:rgba(180,210,255,.6);
}
[data-tint="indigo"] {
  --c1:hsl(255,78%,60%);--c2:hsl(240,72%,55%);--c3:hsl(270,72%,60%);
  --c4:hsl(225,78%,50%);--c5:hsl(260,68%,65%);--c6:hsl(245,82%,55%);
  --c-dark:hsl(250,55%,10%);--c-light:hsl(255,40%,88%);--c-shine:rgba(190,180,255,.6);
}
[data-tint="violet"] {
  --c1:hsl(285,78%,60%);--c2:hsl(295,72%,55%);--c3:hsl(275,72%,65%);
  --c4:hsl(305,78%,60%);--c5:hsl(265,78%,70%);--c6:hsl(290,88%,55%);
  --c-dark:hsl(285,55%,12%);--c-light:hsl(285,40%,90%);--c-shine:rgba(220,180,255,.6);
}
[data-tint="pink"] {
  --c1:hsl(340,88%,78%);--c2:hsl(350,82%,72%);--c3:hsl(330,88%,80%);
  --c4:hsl(15,78%,80%);--c5:hsl(345,92%,85%);--c6:hsl(335,82%,72%);
  --c-dark:hsl(340,35%,22%);--c-light:hsl(340,60%,92%);--c-shine:rgba(255,220,235,.7);
}
[data-tint="magenta"] {
  --c1:hsl(310,92%,60%);--c2:hsl(320,88%,55%);--c3:hsl(300,88%,65%);
  --c4:hsl(330,92%,60%);--c5:hsl(290,82%,60%);--c6:hsl(315,98%,50%);
  --c-dark:hsl(310,55%,12%);--c-light:hsl(310,50%,90%);--c-shine:rgba(255,180,230,.6);
}
[data-tint="turquoise"] {
  --c1:hsl(175,78%,52%);--c2:hsl(165,72%,55%);--c3:hsl(185,82%,47%);
  --c4:hsl(170,68%,60%);--c5:hsl(180,88%,50%);--c6:hsl(190,78%,55%);
  --c-dark:hsl(180,55%,10%);--c-light:hsl(180,50%,90%);--c-shine:rgba(180,255,240,.65);
}
[data-tint="cyan"] {
  --c1:hsl(190,92%,60%);--c2:hsl(200,88%,65%);--c3:hsl(180,92%,50%);
  --c4:hsl(195,82%,70%);--c5:hsl(185,98%,55%);--c6:hsl(205,82%,60%);
  --c-dark:hsl(195,55%,10%);--c-light:hsl(195,60%,92%);--c-shine:rgba(180,250,255,.65);
}
[data-tint="brown"] {
  --c1:hsl(25,58%,45%);--c2:hsl(20,48%,38%);--c3:hsl(35,62%,50%);
  --c4:hsl(15,52%,32%);--c5:hsl(30,68%,55%);--c6:hsl(22,58%,42%);
  --c-dark:hsl(20,50%,10%);--c-light:hsl(30,30%,75%);--c-shine:rgba(230,200,170,.55);
}
[data-tint="beige"] {
  --c1:hsl(40,38%,75%);--c2:hsl(35,42%,80%);--c3:hsl(50,38%,78%);
  --c4:hsl(30,32%,70%);--c5:hsl(45,42%,85%);--c6:hsl(38,38%,75%);
  --c-dark:hsl(40,25%,25%);--c-light:hsl(40,40%,92%);--c-shine:rgba(255,240,215,.7);
}
[data-tint="black"] {
  --c1:hsl(220,18%,28%);--c2:hsl(240,22%,22%);--c3:hsl(280,18%,28%);
  --c4:hsl(200,22%,16%);--c5:hsl(260,28%,25%);--c6:hsl(210,12%,20%);
  --c-dark:hsl(220,25%,4%);--c-light:hsl(220,10%,35%);--c-shine:rgba(200,200,220,.4);
}
[data-tint="white"] {
  --c1:hsl(0,0%,92%);--c2:hsl(40,22%,92%);--c3:hsl(200,22%,92%);
  --c4:hsl(330,22%,92%);--c5:hsl(60,18%,95%);--c6:hsl(150,22%,92%);
  --c-dark:hsl(0,0%,80%);--c-light:hsl(0,0%,99%);--c-shine:rgba(255,255,255,.85);
}
[data-tint="grey"] {
  --c1:hsl(220,5%,70%);--c2:hsl(220,5%,60%);--c3:hsl(220,8%,80%);
  --c4:hsl(220,3%,50%);--c5:hsl(220,5%,75%);--c6:hsl(220,6%,55%);
  --c-dark:hsl(220,10%,15%);--c-light:hsl(220,5%,88%);--c-shine:rgba(220,220,230,.55);
}

/* ── Layer-b and layer-c base declarations ── */
.foil-layer-b { z-index: 3; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: opacity .35s; opacity: 0; }
.foil-layer-c { z-index: 4; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: opacity .35s; opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   FOIL LAB — CATEGORY A: GEOMETRIC SHAPES
═══════════════════════════════════════════════════════════════ */

[data-foil="triangles"] .foil-layer {
  background-image:
    linear-gradient(60deg,var(--c1) 0%,transparent 50%),
    linear-gradient(120deg,var(--c5) 0%,transparent 50%),
    linear-gradient(180deg,var(--c3) 0%,transparent 50%),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c5),var(--c4),var(--c3));
  background-size: 30px 30px,30px 30px,30px 30px,200% 200%;
  background-position: 0 0,0 0,15px 0,var(--mx,50%) var(--my,50%);
  filter: saturate(1.1);
}

[data-foil="hexagons"] .foil-layer {
  background-image:
    radial-gradient(circle at 50% 0%,var(--c1) 4px,transparent 5px),
    radial-gradient(circle at 0% 50%,var(--c5) 4px,transparent 5px),
    radial-gradient(circle at 100% 50%,var(--c3) 4px,transparent 5px),
    radial-gradient(circle at 50% 100%,var(--c4) 4px,transparent 5px),
    linear-gradient(calc(60deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c4),var(--c5),var(--c6));
  background-size: 22px 26px,22px 26px,22px 26px,22px 26px,200% 200%;
  background-position: 0 0,0 0,0 0,0 0,var(--mx,50%) var(--my,50%);
}
[data-foil="hexagons"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 0 0,transparent 9px,rgba(0,0,0,.7) 10px,rgba(0,0,0,.7) 11px,transparent 12px),
    radial-gradient(circle at 11px 7px,transparent 9px,rgba(0,0,0,.7) 10px,rgba(0,0,0,.7) 11px,transparent 12px);
  background-size: 22px 14px,22px 14px;
  background-position: 0 0,11px 7px;
}
.foil-active[data-foil="hexagons"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="squares"] .foil-layer {
  background-image:
    linear-gradient(45deg,var(--c1) 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg,var(--c5) 25%,transparent 25%) 8px 8px/16px 16px,
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 16px 16px,16px 16px,200% 200%;
  background-position: 0 0,8px 8px,var(--mx,50%) var(--my,50%);
}

[data-foil="circles"] .foil-layer {
  background-image:
    radial-gradient(circle at 50% 50%,var(--c1) 3.5px,transparent 4px),
    radial-gradient(circle at 50% 50%,var(--c4) 2.5px,transparent 3px),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 14px 14px,14px 14px,200% 200%;
  background-position: 0 0,7px 7px,var(--mx,50%) var(--my,50%);
}

[data-foil="diamonds"] .foil-layer {
  background-image:
    linear-gradient(45deg,var(--c1) 35%,transparent 35%,transparent 65%,var(--c5) 65%),
    linear-gradient(-45deg,var(--c3) 35%,transparent 35%,transparent 65%,var(--c4) 65%),
    linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c5),var(--c6));
  background-size: 20px 20px,20px 20px,200% 200%;
  background-position: 0 0,0 0,var(--mx,50%) var(--my,50%);
}

[data-foil="stars"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="stars"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><polygon points='14,3 17,10.5 25.5,10.5 19,15.5 21.5,23.5 14,18.5 6.5,23.5 9,15.5 2.5,10.5 11,10.5' fill='rgba(0,0,0,0.85)'/></svg>");
  background-size: 28px 28px;
}
.foil-active[data-foil="stars"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="hearts"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="hearts"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='22' viewBox='0 0 24 22'><path d='M12 19.5 L3 11 Q1 8 3 5 Q5 2 8 3 Q10 4 12 6 Q14 4 16 3 Q19 2 21 5 Q23 8 21 11 Z' fill='rgba(0,0,0,0.85)'/></svg>");
  background-size: 24px 22px;
}
.foil-active[data-foil="hearts"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="octagons"] .foil-layer {
  background-image: linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="octagons"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polygon points='8,2 16,2 22,8 22,16 16,22 8,22 2,16 2,8' fill='none' stroke='rgba(0,0,0,0.8)' stroke-width='1.4'/></svg>");
  background-size: 24px 24px;
}
.foil-active[data-foil="octagons"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="crosses"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="crosses"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M7 2h6v5h5v6h-5v5H7v-5H2V7h5z' fill='rgba(0,0,0,0.8)'/></svg>");
  background-size: 20px 20px;
}
.foil-active[data-foil="crosses"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="chevron"] .foil-layer {
  background-image:
    linear-gradient(135deg,var(--c1) 25%,transparent 25%,transparent 75%,var(--c1) 75%) 0 0/20px 20px,
    linear-gradient(45deg,var(--c5) 25%,transparent 25%,transparent 75%,var(--c5) 75%) 0 0/20px 20px,
    linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 20px 20px,20px 20px,200% 200%;
  background-position: 0 0,0 0,var(--mx,50%) var(--my,50%);
}

[data-foil="houndstooth"] .foil-layer {
  background-image: linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="houndstooth"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h6v6h6v6h-6v6h-6v-6h-6v-6h6zm12 12h6v6h6v6h-6v6h-6v-6h-6v-6h6z' fill='rgba(0,0,0,0.75)'/></svg>");
  background-size: 24px 24px;
}
.foil-active[data-foil="houndstooth"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="waves"] .foil-layer {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'><path d='M0 10 Q5 2 10 10 T20 10 T30 10 T40 10' fill='none' stroke='black' stroke-opacity='0.55' stroke-width='1.5'/></svg>"),
    linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 40px 20px,200% 200%;
  background-position: 0 0,var(--mx,50%) var(--my,50%);
  background-blend-mode: multiply,normal;
}

[data-foil="pentagons"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="pentagons"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><polygon points='13,2 24,10 20,23 6,23 2,10' fill='none' stroke='rgba(0,0,0,0.85)' stroke-width='1.4'/></svg>");
  background-size: 26px 26px;
}
.foil-active[data-foil="pentagons"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="pinwheel"] .foil-layer {
  background-image: conic-gradient(
    from calc(var(--holo-angle,0deg)) at 50% 50%,
    var(--c1) 0deg 45deg,var(--c2) 45deg 90deg,var(--c3) 90deg 135deg,
    var(--c4) 135deg 180deg,var(--c5) 180deg 225deg,var(--c6) 225deg 270deg,
    var(--c1) 270deg 315deg,var(--c3) 315deg 360deg);
  background-size: 60px 60px;
}
[data-foil="pinwheel"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 30%,var(--c-shine) 50%,transparent 70%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.4) 50%;
}
.foil-active[data-foil="pinwheel"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="starburst"] .foil-layer {
  background-image: repeating-conic-gradient(
    from calc(var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),
    var(--c1) 0deg 10deg,var(--c-dark) 10deg 20deg,var(--c5) 20deg 30deg,
    var(--c-dark) 30deg 40deg,var(--c3) 40deg 50deg,var(--c-dark) 50deg 60deg);
  filter: saturate(1.2);
}
[data-foil="starburst"] .foil-layer-b {
  mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6) 0%,transparent 50%);
}
.foil-active[data-foil="starburst"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="arrows-up"] .foil-layer {
  background-image: linear-gradient(calc(180deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 100% 250%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="arrows-up"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'><polygon points='10,2 18,12 13,12 13,22 7,22 7,12 2,12' fill='rgba(0,0,0,0.8)'/></svg>");
  background-size: 20px 24px;
}
.foil-active[data-foil="arrows-up"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="micro-dots"] .foil-layer {
  background-image:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,.7) 1px,transparent 1.5px),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 5px 5px,200% 200%;
  background-position: 0 0,var(--mx,50%) var(--my,50%);
  background-blend-mode: multiply,normal;
}

[data-foil="gridlines"] .foil-layer {
  background-image:
    linear-gradient(rgba(0,0,0,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.5) 1px,transparent 1px),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 14px 14px,14px 14px,200% 200%;
  background-position: 0 0,0 0,var(--mx,50%) var(--my,50%);
  background-blend-mode: multiply,multiply,normal;
}

/* ═══════════════════════════════════════════════════════════════
   FOIL LAB — CATEGORY B: CLASSIC FOIL PATTERNS
═══════════════════════════════════════════════════════════════ */

[data-foil="cracked-ice"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 250% 250%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="cracked-ice"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='rgba(0,0,0,0.7)' stroke-width='0.8'><path d='M20 0 L40 50 L10 80 L60 90 L50 130 L100 110 L120 160 L160 140 L180 200'/><path d='M0 50 L30 70 L50 40 L80 60 L70 100 L120 80 L140 120 L100 150 L150 180'/><path d='M0 130 L40 110 L80 130 L60 170 L110 190'/><path d='M100 0 L130 30 L160 0 L180 40 L150 70 L190 90 L170 130'/><path d='M70 20 L90 40 L110 20 L140 50'/><path d='M30 100 L60 130 L20 170'/></g></svg>");
  background-size: 200px 200px;
}
.foil-active[data-foil="cracked-ice"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="shattered-glass"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="shattered-glass"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill='none' stroke='rgba(0,0,0,0.65)' stroke-width='0.6'><path d='M10 5 L25 15 L40 8 L60 25 L75 12 L90 30 L110 18 L130 35 L145 22'/><path d='M5 30 L20 45 L8 60 L25 75 L12 90 L30 100 L18 120 L35 135 L22 148'/><path d='M40 40 L55 55 L70 45 L85 65 L75 80 L95 75 L100 95 L115 85 L130 100'/><path d='M50 100 L65 115 L75 105 L90 120 L80 135 L100 130 L115 145'/><path d='M120 50 L135 65 L125 75 L140 90 L130 105 L148 115'/></g></svg>");
  background-size: 150px 150px;
}
.foil-active[data-foil="shattered-glass"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="stained-glass"] .foil-layer {
  background-image: linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
  filter: saturate(1.2);
}
[data-foil="stained-glass"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='180' viewBox='0 0 160 180'><g fill='none' stroke='rgba(0,0,0,0.85)' stroke-width='1.8'><path d='M0 40 L60 0 L120 30 L160 0 M160 80 L100 60 L60 100 L0 80 M0 130 L70 110 L130 140 L160 120 M0 180 L40 150 L100 170 L160 180'/><path d='M30 0 L60 60 L100 60 L120 30 M60 60 L40 130 L70 110 M100 60 L130 140 L160 120 M40 130 L100 170 L130 140'/></g></svg>");
  background-size: 160px 180px;
}
.foil-active[data-foil="stained-glass"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="shimmering-waters"] .foil-layer {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='w'><feTurbulence type='turbulence' baseFrequency='0.025 0.06' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.3 -0.3'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>"),
    linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c5),var(--c4),var(--c3),var(--c6));
  background-size: 200px 200px,200% 200%;
  background-position: 0 0,var(--mx,50%) var(--my,50%);
  background-blend-mode: overlay,normal;
}

[data-foil="mirage"] .foil-layer {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.4' numOctaves='1' seed='1'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -0.4'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    linear-gradient(calc(180deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 100px 200px,100% 250%;
  background-position: 0 0,var(--mx,50%) var(--my,50%);
  background-blend-mode: screen,normal;
}

[data-foil="pillars-of-light"] .foil-layer {
  background-image:
    repeating-linear-gradient(90deg,transparent 0px,transparent 6px,rgba(255,255,255,.7) 6px,rgba(255,255,255,.7) 7px,transparent 7px,transparent 18px),
    repeating-linear-gradient(90deg,transparent 0px,transparent 14px,rgba(255,255,255,.4) 14px,rgba(255,255,255,.4) 15px,transparent 15px,transparent 30px),
    linear-gradient(calc(180deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 18px 100%,30px 100%,100% 250%;
  background-position: 0 0,0 0,var(--mx,50%) var(--my,50%);
}

[data-foil="snowflakes"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="snowflakes"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g stroke='rgba(0,0,0,0.8)' stroke-width='1' fill='none' stroke-linecap='round'><line x1='20' y1='4' x2='20' y2='36'/><line x1='4' y1='20' x2='36' y2='20'/><line x1='8' y1='8' x2='32' y2='32'/><line x1='32' y1='8' x2='8' y2='32'/><line x1='20' y1='8' x2='17' y2='11'/><line x1='20' y1='8' x2='23' y2='11'/><line x1='20' y1='32' x2='17' y2='29'/><line x1='20' y1='32' x2='23' y2='29'/><line x1='8' y1='20' x2='11' y2='17'/><line x1='8' y1='20' x2='11' y2='23'/><line x1='32' y1='20' x2='29' y2='17'/><line x1='32' y1='20' x2='29' y2='23'/></g></svg>");
  background-size: 40px 40px;
}
.foil-active[data-foil="snowflakes"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="swirls"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="swirls"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'><path d='M22.5 22.5 Q22.5 12 32.5 12 Q42.5 12 42.5 22.5 Q42.5 38 22.5 38 Q4 38 4 22.5 Q4 4 22.5 4 Q38 4 38 22.5' fill='none' stroke='rgba(0,0,0,0.75)' stroke-width='1.2'/></svg>");
  background-size: 45px 45px;
}
.foil-active[data-foil="swirls"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="bubbles"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 70px at var(--mx,25%) calc(var(--my,30%) * 1.1),var(--c1) 0%,transparent 60%),
    radial-gradient(circle 60px at calc(var(--mx,75%) * 1.1) calc(var(--my,25%) * .9),var(--c5) 0%,transparent 60%),
    radial-gradient(circle 80px at calc(var(--mx,60%) * .95) calc(var(--my,70%) * 1.05),var(--c4) 0%,transparent 60%),
    radial-gradient(circle 55px at calc(var(--mx,20%) * 1.2) calc(var(--my,80%) * .95),var(--c3) 0%,transparent 60%),
    radial-gradient(circle 65px at calc(var(--mx,85%) * .9) calc(var(--my,75%) * 1.1),var(--c6) 0%,transparent 60%);
  filter: saturate(1.3);
}

[data-foil="checkerboard"] .foil-layer {
  background-image:
    conic-gradient(var(--c1) 25%,transparent 0 50%,var(--c1) 0 75%,transparent 0),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c3),var(--c4),var(--c5));
  background-size: 24px 24px,200% 200%;
  background-position: 0 0,var(--mx,50%) var(--my,50%);
}

[data-foil="honeycomb"] .foil-layer {
  background-image: conic-gradient(from calc(45deg + var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c1));
}
[data-foil="honeycomb"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 0 0,transparent 11px,rgba(0,0,0,.85) 12px,rgba(0,0,0,.85) 13px,transparent 14px),
    radial-gradient(circle at 18px 10px,transparent 11px,rgba(0,0,0,.85) 12px,rgba(0,0,0,.85) 13px,transparent 14px);
  background-size: 36px 20px,36px 20px;
  background-position: 0 0,18px 10px;
}
.foil-active[data-foil="honeycomb"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="mermaid-scales"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 50% 100%,var(--c1) 0%,var(--c5) 35%,var(--c3) 65%,transparent 71%),
    radial-gradient(circle at 50% 100%,var(--c2) 0%,var(--c4) 35%,var(--c6) 65%,transparent 71%),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c5),var(--c3),var(--c2));
  background-size: 30px 30px,30px 30px,250% 250%;
  background-position:
    calc(var(--mx,50%) * .5) calc(var(--my,50%) * .5),
    calc(15px + var(--mx,50%) * .4) calc(15px + var(--my,50%) * .4),
    var(--mx,50%) var(--my,50%);
}

[data-foil="ripples"] .foil-layer {
  background-image: repeating-radial-gradient(
    circle at var(--mx,50%) var(--my,50%),
    var(--c1) 0px,var(--c1) 4px,var(--c5) 4px,var(--c5) 8px,
    var(--c3) 8px,var(--c3) 12px,var(--c4) 12px,var(--c4) 16px,
    var(--c6) 16px,var(--c6) 20px,var(--c2) 20px,var(--c2) 24px);
}

[data-foil="carbon-fiber"] .foil-layer {
  background-image:
    linear-gradient(45deg,var(--c-dark) 25%,transparent 25%,transparent 75%,var(--c-dark) 75%),
    linear-gradient(-45deg,var(--c-dark) 25%,transparent 25%,transparent 75%,var(--c-dark) 75%),
    linear-gradient(calc(90deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 8px 8px,8px 8px,200% 200%;
  background-position: 0 0,4px 4px,var(--mx,50%) var(--my,50%);
}
[data-foil="carbon-fiber"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 35%,var(--c-shine) 50%,transparent 65%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.4) 50%;
}
.foil-active[data-foil="carbon-fiber"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="damask"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="damask"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 40 48'><g fill='rgba(0,0,0,0.75)'><path d='M20 4 C26 8 30 12 30 18 C30 22 26 24 20 24 C14 24 10 22 10 18 C10 12 14 8 20 4 Z'/><path d='M20 24 C26 28 30 32 30 38 C30 42 26 44 20 44 C14 44 10 42 10 38 C10 32 14 28 20 24 Z'/><circle cx='20' cy='14' r='2' fill='rgba(255,255,255,0.4)'/><circle cx='20' cy='34' r='2' fill='rgba(255,255,255,0.4)'/></g></svg>");
  background-size: 40px 48px;
}
.foil-active[data-foil="damask"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="moroccan"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="moroccan"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='rgba(0,0,0,0.8)' stroke-width='1.2'><path d='M20 2 L30 12 L20 22 L10 12 Z'/><path d='M20 18 L30 28 L20 38 L10 28 Z'/><path d='M0 12 L10 12 M30 12 L40 12'/><path d='M0 28 L10 28 M30 28 L40 28'/><circle cx='20' cy='12' r='3'/><circle cx='20' cy='28' r='3'/></g></svg>");
  background-size: 40px 40px;
}
.foil-active[data-foil="moroccan"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="fishnet"] .foil-layer {
  background-image:
    linear-gradient(45deg,transparent 47%,rgba(0,0,0,.7) 47%,rgba(0,0,0,.7) 53%,transparent 53%),
    linear-gradient(-45deg,transparent 47%,rgba(0,0,0,.7) 47%,rgba(0,0,0,.7) 53%,transparent 53%),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 16px 16px,16px 16px,200% 200%;
  background-position: 0 0,0 0,var(--mx,50%) var(--my,50%);
  background-blend-mode: multiply,multiply,normal;
}

[data-foil="argyle"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="argyle"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='56' viewBox='0 0 40 56'><g fill='none' stroke='rgba(0,0,0,0.75)' stroke-width='0.7'><polygon points='20,0 40,14 20,28 0,14' fill='rgba(0,0,0,0.35)'/><polygon points='20,28 40,42 20,56 0,42' fill='rgba(0,0,0,0.55)'/><line x1='0' y1='14' x2='20' y2='42' stroke-dasharray='2 3'/><line x1='40' y1='14' x2='20' y2='42' stroke-dasharray='2 3'/><line x1='20' y1='0' x2='40' y2='42'/><line x1='20' y1='0' x2='0' y2='42'/></g></svg>");
  background-size: 40px 56px;
}
.foil-active[data-foil="argyle"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

/* ═══════════════════════════════════════════════════════════════
   FOIL LAB — CATEGORY C: LINEAR & STRIPE
═══════════════════════════════════════════════════════════════ */

[data-foil="linear-sweep"] .foil-layer {
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),
    var(--c-light) 0%,var(--c1) 12%,var(--c5) 24%,var(--c3) 36%,
    var(--c6) 48%,var(--c2) 60%,var(--c4) 72%,var(--c1) 84%,var(--c-light) 100%);
  background-size: 250% 250%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="linear-sweep"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 30%,var(--c-shine) 50%,transparent 70%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.4) 50%;
}
.foil-active[data-foil="linear-sweep"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .5); }

[data-foil="diagonal-stripes"] .foil-layer {
  background-image: repeating-linear-gradient(calc(45deg + var(--holo-angle,0deg)),
    var(--c1) 0px,var(--c1) 12px,var(--c2) 12px,var(--c2) 24px,
    var(--c3) 24px,var(--c3) 36px,var(--c4) 36px,var(--c4) 48px,
    var(--c5) 48px,var(--c5) 60px,var(--c6) 60px,var(--c6) 72px);
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="diagonal-stripes"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 30%,var(--c-shine) 50%,transparent 70%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.4) 50%;
}
.foil-active[data-foil="diagonal-stripes"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="spectrum-glitch"] .foil-layer {
  background-image: repeating-linear-gradient(calc(90deg + var(--holo-angle,0deg)),
    var(--c1) 0px,var(--c1) 8px,var(--c2) 8px,var(--c2) 16px,
    var(--c3) 16px,var(--c3) 24px,var(--c4) 24px,var(--c4) 32px,
    var(--c5) 32px,var(--c5) 40px,var(--c6) 40px,var(--c6) 48px);
  background-size: 200% 100%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="spectrum-glitch"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0px,rgba(0,0,0,.55) 2px,transparent 2px,transparent 5px);
}
.foil-active[data-foil="spectrum-glitch"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="chrome-mirror"] .foil-layer {
  background-image: linear-gradient(calc(180deg + var(--holo-angle,0deg)),
    var(--c-light) 0%,white 12%,var(--c1) 28%,var(--c-dark) 50%,
    var(--c4) 72%,white 84%,var(--c-light) 100%);
  background-size: 100% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="chrome-mirror"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 25%,var(--c-shine) 48%,transparent 55%,rgba(255,255,255,.35) 65%,transparent 80%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.5) 50%;
}
.foil-active[data-foil="chrome-mirror"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="stripes-vertical"] .foil-layer {
  background-image: repeating-linear-gradient(90deg,
    var(--c1) 0px,var(--c1) 8px,var(--c2) 8px,var(--c2) 16px,
    var(--c3) 16px,var(--c3) 24px,var(--c4) 24px,var(--c4) 32px,
    var(--c5) 32px,var(--c5) 40px,var(--c6) 40px,var(--c6) 48px);
  background-position: var(--mx,50%) 0;
}
[data-foil="stripes-vertical"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 30%,var(--c-shine) 50%,transparent 70%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.4) 50%;
}
.foil-active[data-foil="stripes-vertical"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="stripes-thin"] .foil-layer {
  background-image: repeating-linear-gradient(calc(115deg + var(--holo-angle,0deg)),
    var(--c1) 0px,var(--c1) 2px,var(--c2) 2px,var(--c2) 4px,
    var(--c3) 4px,var(--c3) 6px,var(--c4) 6px,var(--c4) 8px,
    var(--c5) 8px,var(--c5) 10px,var(--c6) 10px,var(--c6) 12px);
  background-size: 250% 100%;
  background-position: var(--mx,50%) var(--my,50%);
}

[data-foil="radial-burst"] .foil-layer {
  background-image: repeating-conic-gradient(
    from calc(var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),
    var(--c1) 0deg 5deg,var(--c2) 5deg 10deg,var(--c3) 10deg 15deg,
    var(--c4) 15deg 20deg,var(--c5) 20deg 25deg,var(--c6) 25deg 30deg);
}

[data-foil="lenticular"] .foil-layer {
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0px,rgba(0,0,0,.35) 1px,transparent 1px,transparent 4px),
    linear-gradient(90deg,var(--c1) 0%,var(--c2) 14%,var(--c3) 28%,var(--c4) 42%,var(--c5) 56%,var(--c6) 70%,var(--c1) 100%);
  background-size: 4px 100%,250% 100%;
  background-position: 0 0,var(--mx,50%) 0;
}
[data-foil="lenticular"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 30%,var(--c-shine) 50%,transparent 70%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.4) 50%;
}
.foil-active[data-foil="lenticular"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

/* ═══════════════════════════════════════════════════════════════
   FOIL LAB — CATEGORY D: ATMOSPHERIC
═══════════════════════════════════════════════════════════════ */

[data-foil="stardust"] .foil-layer {
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c5),var(--c4),var(--c3),var(--c6));
  background-size: 220% 220%;
  background-position: var(--mx,50%) var(--my,50%);
  filter: saturate(.85) brightness(1.05);
}
[data-foil="stardust"] .foil-layer-b {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 1.2px at 50% 50%,white,transparent 60%),
    radial-gradient(circle .8px at 50% 50%,white,transparent 60%),
    radial-gradient(circle 1.5px at 50% 50%,rgba(255,255,255,.9),transparent 60%);
  background-size: 28px 28px,18px 18px,45px 45px;
  background-position:
    calc(var(--mx,50%) * .7) calc(var(--my,50%) * .6),
    calc(var(--mx,50%) * 1.2) calc(var(--my,50%) * 1.1),
    calc(var(--mx,50%) * .9) calc(var(--my,50%) * 1.4);
}
.foil-active[data-foil="stardust"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="galaxy-nebula"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 60% 50% at var(--mx,30%) var(--my,40%),var(--c6) 0%,transparent 60%),
    radial-gradient(ellipse 50% 70% at calc(100% - var(--mx,30%)) calc(100% - var(--my,40%)),var(--c1) 0%,transparent 60%),
    radial-gradient(ellipse 80% 60% at calc(var(--mx,50%) * 1.3) calc(var(--my,80%) * 1.1),var(--c5) 0%,transparent 65%);
  filter: saturate(1.3);
}
[data-foil="galaxy-nebula"] .foil-layer-b {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 1px at 50% 50%,white,transparent 60%),
    radial-gradient(circle 1.5px at 50% 50%,white,transparent 60%);
  background-size: 60px 60px,110px 110px;
  background-position:
    calc(var(--mx,50%) * .4) calc(var(--my,50%) * .4),
    calc(var(--mx,50%) * .9) calc(var(--my,50%) * 1.1);
}
.foil-active[data-foil="galaxy-nebula"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="aurora"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 50% 80% at calc(var(--mx,50%) * .6) 50%,var(--c4) 0%,transparent 60%),
    radial-gradient(ellipse 45% 90% at calc(var(--mx,50%) * 1.2) 60%,var(--c6) 0%,transparent 60%),
    radial-gradient(ellipse 60% 70% at 50% calc(var(--my,30%) * .6),var(--c5) 0%,transparent 60%);
  filter: blur(6px) saturate(1.4);
}

[data-foil="frost"] .foil-layer {
  mix-blend-mode: screen;
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c5),var(--c1),var(--c3),var(--c4));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="frost"] .foil-layer-b {
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='fr'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='8'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.5'/></filter><rect width='100%' height='100%' filter='url(%23fr)'/></svg>");
  background-size: cover;
}
.foil-active[data-foil="frost"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .55); }

[data-foil="confetti"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 2.5px at 50% 50%,var(--c1),transparent 60%),
    radial-gradient(circle 2px at 50% 50%,var(--c5),transparent 60%),
    radial-gradient(circle 2.5px at 50% 50%,var(--c3),transparent 60%),
    radial-gradient(circle 2px at 50% 50%,var(--c6),transparent 60%),
    radial-gradient(circle 2.5px at 50% 50%,var(--c4),transparent 60%),
    radial-gradient(circle 2px at 50% 50%,var(--c2),transparent 60%);
  background-size: 55px 55px,75px 75px,65px 65px,85px 85px,70px 70px,60px 60px;
  background-position:
    calc(var(--mx,50%) * .5) calc(var(--my,50%) * .6),
    calc(var(--mx,50%) * 1.1) calc(var(--my,50%) * .7),
    calc(var(--mx,50%) * .8) calc(var(--my,50%) * 1.2),
    calc(var(--mx,50%) * 1.3) calc(var(--my,50%) * .9),
    calc(var(--mx,50%) * .6) calc(var(--my,50%) * 1.4),
    calc(var(--mx,50%) * 1.5) calc(var(--my,50%) * .5);
}

[data-foil="plasma"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 200px at calc(var(--mx,20%) * .7) calc(var(--my,30%) * .8),var(--c1) 0%,transparent 60%),
    radial-gradient(circle 180px at calc(var(--mx,80%) * 1.1) calc(var(--my,20%) * .7),var(--c5) 0%,transparent 60%),
    radial-gradient(circle 220px at calc(var(--mx,60%) * 1.05) calc(var(--my,80%) * 1.1),var(--c6) 0%,transparent 60%),
    radial-gradient(circle 160px at calc(var(--mx,30%) * 1.2) calc(var(--my,90%) * 1.05),var(--c2) 0%,transparent 60%);
  filter: blur(8px) saturate(1.3);
}

[data-foil="opal-iridescent"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 120px at var(--mx,30%) var(--my,30%),var(--c3) 0%,transparent 50%),
    radial-gradient(circle 110px at calc(100% - var(--mx,30%)) calc(var(--my,60%) * 1.1),var(--c1) 0%,transparent 50%),
    radial-gradient(circle 130px at calc(var(--mx,50%) * 1.1) 100%,var(--c5) 0%,transparent 50%),
    conic-gradient(from calc(var(--holo-angle,0deg)) at 50% 50%,var(--c1),var(--c5),var(--c4),var(--c3),var(--c6),var(--c1));
  filter: saturate(.85) brightness(1.1);
}

[data-foil="sweet-pastel"] .foil-layer {
  mix-blend-mode: screen;
  background-image: linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c1),var(--c5),var(--c3),var(--c6),var(--c4),var(--c2));
  background-size: 280% 280%;
  background-position: var(--mx,50%) var(--my,50%);
  filter: saturate(.7) brightness(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   FOIL LAB — CATEGORY E: SPECIAL PREMIUM
═══════════════════════════════════════════════════════════════ */

[data-foil="crystal-shards"] .foil-layer {
  background-image:
    repeating-linear-gradient(calc(28deg + var(--holo-angle,0deg)),transparent 0%,rgba(255,255,255,.85) 1.2%,transparent 2.4%),
    repeating-linear-gradient(calc(152deg + var(--holo-angle,0deg)),transparent 0%,var(--c5) 1%,transparent 2%),
    linear-gradient(calc(60deg + var(--holo-angle,0deg)),var(--c1),var(--c5),var(--c3),var(--c6),var(--c1));
  background-size: 38px 38px,55px 55px,250% 250%;
  background-position: 0 0,0 0,var(--mx,50%) var(--my,50%);
  filter: contrast(1.1) saturate(1.2);
}
[data-foil="crystal-shards"] .foil-layer-b {
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(calc(60deg + var(--holo-angle,0deg)),transparent 0%,var(--c3) 1%,transparent 2%),
    repeating-linear-gradient(calc(120deg + var(--holo-angle,0deg)),transparent 0%,rgba(255,255,255,.5) .9%,transparent 1.8%);
  background-size: 45px 45px,65px 65px;
  background-position:
    calc(var(--mx,50%) * 1.2) calc(var(--my,50%) * .8),
    calc(var(--mx,50%) * .7) calc(var(--my,50%) * 1.3);
}
.foil-active[data-foil="crystal-shards"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="prismatic-diamond"] .foil-layer {
  background-image: conic-gradient(
    from calc(var(--holo-angle,0deg)) at 50% 50%,
    var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c1));
  background-size: 150% 150%;
  background-position: var(--mx,50%) var(--my,50%);
  filter: saturate(1.2);
}
[data-foil="prismatic-diamond"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image:
    linear-gradient(calc(45deg + var(--holo-angle,0deg)),transparent 48%,rgba(255,255,255,.6) 49%,rgba(255,255,255,.6) 51%,transparent 52%),
    linear-gradient(calc(-45deg + var(--holo-angle,0deg)),transparent 48%,rgba(255,255,255,.6) 49%,rgba(255,255,255,.6) 51%,transparent 52%);
  background-size: 50px 50px,50px 50px;
}
.foil-active[data-foil="prismatic-diamond"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="holo-squares"] .foil-layer {
  background-image: conic-gradient(
    from calc(var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),
    var(--c1),var(--c6),var(--c5),var(--c4),var(--c3),var(--c2),var(--c1));
}
[data-foil="holo-squares"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(rgba(0,0,0,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.55) 1px,transparent 1px);
  background-size: 22px 22px,22px 22px;
}
.foil-active[data-foil="holo-squares"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .5); }

[data-foil="disco-ball"] .foil-layer {
  background-image: conic-gradient(
    from calc(var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),
    var(--c1),var(--c6),var(--c5),var(--c4),var(--c3),var(--c2),var(--c1));
}
[data-foil="disco-ball"] .foil-layer-b {
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(rgba(0,0,0,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.6) 1px,transparent 1px),
    radial-gradient(circle 5px at 50% 50%,transparent 4px,rgba(0,0,0,.4) 5px);
  background-size: 14px 14px,14px 14px,14px 14px;
}
.foil-active[data-foil="disco-ball"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }
[data-foil="disco-ball"] .foil-layer-c {
  mix-blend-mode: overlay;
  background-image: radial-gradient(ellipse 50% 40% at var(--mx,50%) var(--my,30%),rgba(255,255,255,.5) 0%,transparent 60%);
}
.foil-active[data-foil="disco-ball"] .foil-layer-c { opacity: calc(var(--foil-intensity,.8) * .75); }

[data-foil="liquid-mercury"] .foil-layer {
  background-image: conic-gradient(
    from calc(var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),
    var(--c-light),white,var(--c-dark),white,var(--c1),white,var(--c-dark),var(--c-light));
}
[data-foil="liquid-mercury"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(ellipse 40% 40% at var(--mx,30%) var(--my,30%),rgba(255,255,255,.85),transparent 60%),
    radial-gradient(ellipse 30% 30% at calc(100% - var(--mx,30%)) calc(100% - var(--my,30%)),rgba(0,0,0,.5),transparent 60%);
}
.foil-active[data-foil="liquid-mercury"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="crinkle"] .foil-layer {
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),var(--c1),var(--c5),var(--c4),var(--c3),var(--c6),var(--c1));
  background-size: 200% 200%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="crinkle"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='560'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' seed='4'/><feDisplacementMap in='SourceGraphic' scale='30'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  background-size: cover;
}
.foil-active[data-foil="crinkle"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="pearl-sheen"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 80% 100% at var(--mx,30%) var(--my,30%),var(--c-light) 0%,var(--c1) 30%,transparent 60%),
    radial-gradient(ellipse 80% 80% at calc(100% - var(--mx,30%)) calc(100% - var(--my,30%)),var(--c-light) 0%,var(--c5) 30%,transparent 60%),
    linear-gradient(calc(135deg + var(--holo-angle,0deg)),var(--c-light),var(--c1),var(--c3),var(--c5),var(--c-light));
  background-size: auto,auto,250% 250%;
  background-position: 0 0,0 0,var(--mx,50%) var(--my,50%);
  filter: brightness(1.1) saturate(.85);
}

[data-foil="metallic-sheen"] .foil-layer {
  background-image: linear-gradient(calc(160deg + var(--holo-angle,0deg)),
    var(--c-dark) 0%,var(--c2) 20%,var(--c-light) 40%,var(--c1) 60%,var(--c-light) 80%,var(--c-dark) 100%);
  background-size: 250% 100%;
  background-position: var(--mx,50%) var(--my,50%);
}
[data-foil="metallic-sheen"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 35%,var(--c-shine) 50%,transparent 65%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.5) 50%;
}
.foil-active[data-foil="metallic-sheen"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }

[data-foil="glitter-storm"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 1.8px at 50% 50%,var(--c1),transparent 60%),
    radial-gradient(circle 1.2px at 50% 50%,var(--c5),transparent 60%),
    radial-gradient(circle 2px at 50% 50%,var(--c3),transparent 60%),
    radial-gradient(circle 1px at 50% 50%,var(--c6),transparent 60%),
    radial-gradient(circle 1.5px at 50% 50%,white,transparent 60%),
    radial-gradient(circle 2px at 50% 50%,var(--c4),transparent 60%),
    radial-gradient(circle 1.2px at 50% 50%,var(--c2),transparent 60%),
    radial-gradient(circle 1.5px at 50% 50%,white,transparent 60%);
  background-size: 24px 24px,18px 18px,32px 32px,22px 22px,14px 14px,28px 28px,20px 20px,36px 36px;
  background-position:
    calc(var(--mx,50%) * .4) calc(var(--my,50%) * .5),
    calc(var(--mx,50%) * .9) calc(var(--my,50%) * .7),
    calc(var(--mx,50%) * .7) calc(var(--my,50%) * 1.1),
    calc(var(--mx,50%) * 1.3) calc(var(--my,50%) * .8),
    calc(var(--mx,50%) * .5) calc(var(--my,50%) * 1.4),
    calc(var(--mx,50%) * 1.1) calc(var(--my,50%) * 1.2),
    calc(var(--mx,50%) * 1.5) calc(var(--my,50%) * .4),
    calc(var(--mx,50%) * .8) calc(var(--my,50%) * .9);
}

[data-foil="iridescent-foam"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle 18px at 30% 25%,var(--c1) 0%,transparent 70%),
    radial-gradient(circle 14px at 55% 40%,var(--c5) 0%,transparent 70%),
    radial-gradient(circle 20px at 75% 25%,var(--c3) 0%,transparent 70%),
    radial-gradient(circle 16px at 20% 60%,var(--c6) 0%,transparent 70%),
    radial-gradient(circle 12px at 45% 70%,var(--c4) 0%,transparent 70%),
    radial-gradient(circle 18px at 70% 60%,var(--c2) 0%,transparent 70%),
    radial-gradient(circle 14px at 85% 80%,var(--c1) 0%,transparent 70%),
    radial-gradient(circle 16px at 30% 85%,var(--c5) 0%,transparent 70%),
    linear-gradient(135deg,var(--c-dark),transparent 50%);
  background-size: 100% 100%;
  background-position: calc(var(--mx,50%) * .5) calc(var(--my,50%) * .5);
  filter: saturate(1.3) brightness(1.1);
}

[data-foil="prism-burst"] .foil-layer {
  background-image: conic-gradient(
    from calc(var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),
    var(--c1) 0deg,var(--c2) 60deg,var(--c3) 120deg,
    var(--c4) 180deg,var(--c5) 240deg,var(--c6) 300deg,var(--c1) 360deg);
  filter: saturate(1.3);
}
[data-foil="prism-burst"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: repeating-conic-gradient(
    from calc(var(--holo-angle,0deg)) at var(--mx,50%) var(--my,50%),
    transparent 0deg,transparent 25deg,rgba(255,255,255,.4) 25deg,rgba(255,255,255,.4) 30deg);
}
.foil-active[data-foil="prism-burst"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }
[data-foil="prism-burst"] .foil-layer-c {
  mix-blend-mode: screen;
  background: radial-gradient(circle 60px at var(--mx,50%) var(--my,50%),var(--c-shine) 0%,transparent 70%);
}
.foil-active[data-foil="prism-burst"] .foil-layer-c { opacity: calc(var(--foil-intensity,.8) * .75); }

[data-foil="foil-spray"] .foil-layer {
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle .8px at 12% 18%,var(--c1),transparent 60%),
    radial-gradient(circle 1.2px at 32% 25%,var(--c5),transparent 60%),
    radial-gradient(circle .6px at 58% 12%,var(--c3),transparent 60%),
    radial-gradient(circle 1px at 78% 32%,var(--c6),transparent 60%),
    radial-gradient(circle .8px at 22% 48%,var(--c4),transparent 60%),
    radial-gradient(circle 1.4px at 48% 55%,var(--c2),transparent 60%),
    radial-gradient(circle 1px at 72% 62%,var(--c1),transparent 60%),
    radial-gradient(circle .7px at 88% 78%,var(--c5),transparent 60%),
    radial-gradient(circle 1.2px at 14% 75%,var(--c3),transparent 60%),
    radial-gradient(circle .8px at 38% 88%,var(--c6),transparent 60%),
    radial-gradient(circle 1px at 62% 82%,var(--c4),transparent 60%),
    radial-gradient(circle .6px at 92% 18%,var(--c2),transparent 60%),
    radial-gradient(ellipse 80% 80% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.15) 0%,transparent 60%);
  background-size: 100% 100%;
  filter: blur(.3px) saturate(1.4);
}

[data-foil="rose-metallic"] .foil-layer {
  background-image: linear-gradient(calc(160deg + var(--holo-angle,0deg)),
    var(--c-dark) 0%,var(--c1) 18%,var(--c-light) 32%,
    var(--c5) 48%,var(--c-light) 64%,var(--c3) 80%,var(--c-dark) 100%);
  background-size: 250% 100%;
  background-position: var(--mx,50%) var(--my,50%);
  filter: saturate(1.15);
}
[data-foil="rose-metallic"] .foil-layer-b {
  mix-blend-mode: overlay;
  background-image: linear-gradient(calc(115deg + var(--holo-angle,0deg)),transparent 35%,var(--c-shine) 50%,transparent 65%);
  background-size: 250% 100%;
  background-position: calc(var(--mx,50%) * 1.5) 50%;
}
.foil-active[data-foil="rose-metallic"] .foil-layer-b { opacity: calc(var(--foil-intensity,.8) * .82); }