/* One material on the whole card. Individual rotate composes with reveal/hover transforms. */
[data-card-foil] {
    --foil-x: 50%; --foil-y: 45%; --foil-angle: 125deg;
    position: relative; isolation: isolate;
    rotate: var(--foil-axis-x, 1) var(--foil-axis-y, 1) 0 var(--foil-tilt, 0deg);
}
/* No shared sweep: a foil is its material under a moving light, never a white band gliding over every card. */
[data-card-foil]::after { display: none !important; }
/* A material's grain is drawn in `em`, and card-foil.js sets `--foil-unit` to the pixel a 340px-wide card would
   use: a thumbnail and a full-size card then wear the same material, scaled, not the same pixels. */
[data-card-foil] > .card-foil {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    overflow: hidden; border-radius: inherit; opacity: .55; font-size: var(--foil-unit, 1px);
    background-position: var(--foil-x) var(--foil-y);
    mask-image: var(--foil-image-mask, none); mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center;
}
/* An image-only card's artwork is contained in its box: its mask is laid out the same way, not stretched over the box. */
[data-foil-mask="artwork"] > .card-foil { mask-size: contain, 100% 100%; -webkit-mask-size: contain, 100% 100%; }
[data-card-foil="pearl"] > .card-foil { background-image: linear-gradient(var(--foil-angle), #76d9d722, #e6aff344, #ffecc633, #83bcff33); background-size: 200% 200%; mix-blend-mode: screen; }
/* Pearl alone keeps a sweep: the band of light gliding over the nacre is its effect. */
[data-card-foil="pearl"] > .card-foil::after { content: ''; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 30%, #42e9e933 39%, #70e9ff77 44%, #fff 48%, #fff9 50%, #ef8bc788 54%, #d098f433 59%, transparent 66%); transform: translateX(calc((var(--foil-x) - 50%) * 2.2)); }
[data-card-foil="prism"] > .card-foil { background-image: repeating-linear-gradient(var(--foil-angle), #ed438a 0%, #e2b342 12%, #49c9b0 24%, #4484cf 36%, #bd5fcf 48%, #ed438a 60%); background-size: 250% 250%; mix-blend-mode: color-dodge; mask-image: var(--foil-image-mask, linear-gradient(#000, #000)), radial-gradient(ellipse at var(--foil-x) var(--foil-y), #000 8%, #000b 35%, transparent 85%); mask-composite: intersect; }
[data-card-foil="prism"] > .card-foil::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 30deg, #fff9 0deg 60deg, #141329cc 60deg 120deg, #fff3 120deg 180deg, #08092499 180deg 240deg, #fff8 240deg 300deg, #192843cc 300deg); background-size: 42em 65em; mix-blend-mode: overlay; }
[data-card-foil="brushed"] > .card-foil { background-image: repeating-radial-gradient(ellipse at 15% 120%, #fff7 0 max(1px, .6em), #15212b55 1em 2.5em, transparent 3em 5em), linear-gradient(var(--foil-angle), #041b3177 20%, #8d9faf99 40%, #fff 48%, #27405cbb 56%, #8d9faf55 70%); background-size: 100% 100%, 200% 200%; background-position: center, var(--foil-x) var(--foil-y); mix-blend-mode: hard-light; }
[data-card-foil="gold"] > .card-foil { background-image: repeating-radial-gradient(ellipse at 0 50%, #ffe4a977 0 max(1px, .7em), transparent 1.4em 8em), repeating-radial-gradient(ellipse at 100% 50%, #fff1a877 0 max(1px, .7em), transparent 1.4em 8em), linear-gradient(var(--foil-angle), #512b1688 10%, #b2813988 35%, #ffe29ddd 48%, #63421aaa 58%, #be923c55 85%); background-size: 100% 100%, 100% 100%, 220% 220%; background-position: center, center, var(--foil-x) var(--foil-y); mix-blend-mode: hard-light; }
[data-card-foil="carbon"] > .card-foil {
    opacity: .47;
    background-image: repeating-linear-gradient(45deg, #07121b88 0 2em, #8196a333 2em 4em, transparent 4em 8em), repeating-linear-gradient(-45deg, #09121e66 0 2em, #dce8f433 2em 4em, transparent 4em 8em), linear-gradient(var(--foil-angle), #07111a77 20%, #9fbbc566 43%, #ecf8ffbb 49%, #12233288 56%, transparent 78%);
    background-size: 100% 100%, 100% 100%, 240% 240%; background-position: center, center, var(--foil-x) var(--foil-y); mix-blend-mode: hard-light;
}

/* The seven of October 2026 (docs/foil-effects.md), printed since the 9th. */
[data-card-foil="honeycomb"] > .card-foil { background-image: linear-gradient(var(--foil-angle), #4a2d0a88 15%, #c98a2a88 38%, #ffe3a0dd 48%, #6b4312aa 58%, #d9a23f55 85%); background-size: 220% 220%; background-position: var(--foil-x) var(--foil-y); mix-blend-mode: hard-light; }
[data-card-foil="honeycomb"] > .card-foil::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, #ffd27a66 0 max(1px, 1.2em), transparent 1.2em 14em), repeating-linear-gradient(60deg, #ffd27a66 0 max(1px, 1.2em), transparent 1.2em 14em), repeating-linear-gradient(120deg, #ffd27a66 0 max(1px, 1.2em), transparent 1.2em 14em); mix-blend-mode: overlay; }
[data-card-foil="obsidian"] > .card-foil {
    opacity: .62;
    background-image: repeating-radial-gradient(ellipse 70% 50% at 20% 110%, transparent 0 9em, #ffffff14 9em max(calc(9em + 1px), 10em), transparent 10em 22em), repeating-radial-gradient(ellipse 60% 50% at 90% -10%, transparent 0 11em, #ffffff12 11em max(calc(11em + 1px), 12em), transparent 12em 26em), linear-gradient(var(--foil-angle), #000 25%, #1c1a24 44%, #e9e6f0 49.5%, #26222f 55%, #000 75%);
    background-size: 100% 100%, 100% 100%, 240% 240%; background-position: center, center, var(--foil-x) var(--foil-y); mix-blend-mode: hard-light;
}

/* Titanium: the colours heat leaves on titanium, straw to bronze to violet to blue, in bands that slide across a
   brushed grain as the light moves. */
[data-card-foil="titanium"] > .card-foil {
    opacity: .66;
    background-image: repeating-linear-gradient(0deg, #ffffff40 0 max(1px, .5em), transparent .5em 2em, #00000026 2em max(calc(2em + 1px), 2.4em), transparent 2.4em 3.6em), linear-gradient(var(--foil-angle), #c9c3b4 0%, #d9b55a 12%, #b56f3a 24%, #8a3f6e 36%, #3b3f9c 48%, #2e7fb5 60%, #8fd0d8 70%, #cfd3cc 80%, #d9b55a 92%, #b56f3a 100%);
    background-size: 100% 100%, 300% 300%; background-position: center, var(--foil-x) var(--foil-y); mix-blend-mode: hard-light;
}

/* Engraved: two families of hatching cut into the metal, one leaning left, one right. Each family only catches the
   light from its own side, so the lit lobe swaps as the light crosses the card. */
[data-card-foil="engraved"] > .card-foil {
    opacity: .68;
    background-image: repeating-linear-gradient(32deg, #fff 0 max(1px, .8em), transparent .8em 4em), repeating-linear-gradient(32deg, transparent 0 1.8em, #0a141fcc 1.8em max(calc(1.8em + 1px), 2.5em), transparent 2.5em 4em), linear-gradient(var(--foil-angle), #1e2b3a88 25%, #a9b7c388 50%, #1e2b3a88 75%);
    background-size: 100% 100%, 100% 100%, 240% 240%; background-position: center, center, var(--foil-x) var(--foil-y); mix-blend-mode: hard-light;
    mask-image: var(--foil-image-mask, linear-gradient(#000, #000)), radial-gradient(ellipse 60% 55% at calc(var(--foil-x) - 22%) var(--foil-y), #000 0%, #000c 40%, #0003 75%, transparent 100%);
    mask-composite: intersect;
}
[data-card-foil="engraved"] > .card-foil::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(-32deg, #fff 0 max(1px, .8em), transparent .8em 4em), repeating-linear-gradient(-32deg, transparent 0 1.8em, #0a141fcc 1.8em max(calc(1.8em + 1px), 2.5em), transparent 2.5em 4em);
    mask-image: radial-gradient(ellipse 60% 55% at calc(var(--foil-x) + 22%) var(--foil-y), #000 0%, #000c 40%, #0003 75%, transparent 100%);
}
/* Guilloché: engine-turned rosettes, the fine rings a banknote is printed with, on pale green-grey metal. The rings
   brighten where the light passes and sink back into the metal elsewhere. */
[data-card-foil="guilloche"] > .card-foil {
    opacity: .6;
    background-image: linear-gradient(var(--foil-angle), #1f3a2e99 25%, #9fc4ad99 46%, #e4f3e8cc 50%, #4b6e5a99 56%, #1f3a2e99 78%);
    background-size: 240% 240%; mix-blend-mode: hard-light;
}
[data-card-foil="guilloche"] > .card-foil::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-radial-gradient(circle at 50% 50%, #ffffffd9 0 max(1px, .7em), transparent .7em 3.2em), repeating-radial-gradient(circle at 50% 50%, #0b1a14aa 0 max(1px, .7em), transparent .7em 3.2em);
    background-size: 32em 32em, 32em 32em; background-position: 0 0, 16em 16em; opacity: .85;
    mask-image: radial-gradient(ellipse 80% 65% at var(--foil-x) var(--foil-y), #000 0%, #000c 30%, #0005 65%, transparent 100%);
}
/* Oil slick: a thin film of oil on dark water. The film's colours turn as the light moves, and the puddle's contour
   lines ripple under them. */
[data-card-foil="oil-slick"] > .card-foil {
    opacity: .58;
    background-image: repeating-radial-gradient(ellipse 70% 45% at 30% 65%, transparent 0 8em, #ffffff66 8em max(calc(8em + 1px), 9em), transparent 9em 18em), repeating-radial-gradient(ellipse 55% 40% at 80% 20%, transparent 0 11em, #ffffff55 11em max(calc(11em + 1px), 12em), transparent 12em 22em), linear-gradient(var(--foil-angle), #3a1f6e 0%, #8a2d8a 14%, #1f6f9c 28%, #2f9f6a 42%, #b9a52a 56%, #b35a2a 70%, #6a2a7e 84%, #3a1f6e 100%);
    background-size: 100% 100%, 100% 100%, 180% 180%; background-position: center, center, var(--foil-x) var(--foil-y);
    mix-blend-mode: hard-light; filter: hue-rotate(calc((var(--foil-angle) - 95deg) * 3));
}
/* Damascus: folded steel. Two sets of layers cross and their ripples read like wood grain, under one hard, pale
   reflection that moves with the light. */
[data-card-foil="damascus"] > .card-foil {
    opacity: .5;
    background-image: repeating-radial-gradient(ellipse 90% 45% at 25% 35%, #eef3f7cc 0 max(1px, 1em), #121c2699 2.2em 4.2em, transparent 5em 8.5em), repeating-radial-gradient(ellipse 70% 55% at 85% 80%, #eef3f7a6 0 max(1px, 1em), #121c2680 2.4em 4.6em, transparent 5.4em 9.5em), linear-gradient(var(--foil-angle), #0e1821 25%, #6f8291 44%, #f1f6fa 49.5%, #2b3b4a 55%, #0e1821 75%);
    background-size: 100% 100%, 100% 100%, 240% 240%; background-position: center, center, var(--foil-x) var(--foil-y); mix-blend-mode: hard-light;
    mask-image: var(--foil-image-mask, linear-gradient(#000, #000)), radial-gradient(ellipse 110% 90% at var(--foil-x) var(--foil-y), #000 0%, #000b 45%, #0004 80%, transparent 100%);
    mask-composite: intersect;
}

/* The profile option stops ambient tilt; an explicit pointer gesture still steers the card. */
.motion-reduced [data-card-foil]:not(.foil-pointer-active) { rotate: none; }