/* Animated borders and finishes from the cosmetic practice lab (ids start fx-).
   Borders use the shared frame hooks in cosmetics-effects.css: --frame-paint (the layers under the solid card fill),
   --frame-size, --frame-layers (background-origin and clip per layer), --frame-motion and --frame-shadow.
   --border-speed (1 = as authored) and --particle-speed come from the card's saved settings (lib/cosmetics.js). */

/* ---------- borders ---------- */
[data-texture=fx-cosmic]{--frame-paint:linear-gradient(135deg,#2b34c9,#4fd0ff,#7b3fd6,#c24bd6,#4fd0ff,#2b34c9);--frame-size:100% 100%,200% 200%;--frame-motion:frame-flow calc(7s/var(--border-speed,1)) linear infinite;--frame-shadow:0 18px 40px #0009,0 0 22px #4a5cff77,0 0 46px #7b3fd644}

[data-texture=fx-ethereal]{--frame-paint:linear-gradient(120deg,#9fe8ff,#fff,#b9a8ff,#6fe3ff,#e8ffff,#9fe8ff);--frame-size:100% 100%,200% 200%;--frame-motion:frame-flow calc(14s/var(--border-speed,1)) linear infinite,fx-ghostglow calc(5s/var(--border-speed,1)) ease-in-out infinite;--frame-shadow:0 18px 40px #0009,0 0 14px #6fe3ff55}
@keyframes fx-ghostglow{0%,100%{box-shadow:0 18px 40px #0009,0 0 12px #6fe3ff44}50%{box-shadow:0 18px 40px #0009,0 0 36px #cfffff99,0 0 60px #9fe8ff44}}

[data-texture=fx-death]{--frame-paint:linear-gradient(130deg,#14081f,#4a2a7a,#14081f 30%,#9a5ad6 45%,#14081f 60%,#2a4a3a 78%,#14081f);--frame-size:100% 100%,200% 200%;--frame-motion:frame-flow calc(16s/var(--border-speed,1)) linear infinite,fx-deathglow calc(6s/var(--border-speed,1)) ease-in-out infinite;--frame-shadow:0 18px 40px #0009,0 0 22px #6a2fa066}
@keyframes fx-deathglow{0%,100%{box-shadow:0 18px 40px #0009,0 0 14px #6a2fa044}50%{box-shadow:0 18px 40px #0009,0 0 38px #8f4fd6aa}}

[data-texture=fx-refract]{--frame-paint:linear-gradient(115deg,#ff6aa6,#ffd86a,#6affb6,#6ac8ff,#a06aff,#ff6aa6);--frame-size:100% 100%,200% 200%;--frame-motion:frame-flow calc(9s/var(--border-speed,1)) linear infinite;--frame-shadow:0 18px 40px #0009,0 0 16px #ffffff55,0 0 30px #6ac8ff44}

[data-texture=fx-astral]{--frame-paint:linear-gradient(120deg,#2a0f6a,#9d6bff,#6fe3ff,#2a0f6a 40%,#d8b4ff 60%,#2a0f6a);--frame-size:100% 100%,200% 200%;--frame-motion:frame-flow calc(6s/var(--border-speed,1)) linear infinite,fx-astralglow calc(3s/var(--border-speed,1)) ease-in-out infinite;--frame-shadow:0 18px 40px #0009,0 0 22px #9d6bff88}
@keyframes fx-astralglow{0%,100%{box-shadow:0 18px 40px #0009,0 0 16px #9d6bff66}50%{box-shadow:0 18px 40px #0009,0 0 36px #6fe3ffaa,0 0 52px #9d6bff55}}

[data-texture=fx-bolt]{--frame-paint:linear-gradient(115deg,transparent 40%,#5b7cff 46%,#a9c4ff 49%,#fff 50%,#a9c4ff 51%,#5b7cff 54%,transparent 60%),#1f2b8c;--frame-size:100% 100%,300% 300%,100% 100%;--frame-layers:padding-box,border-box,border-box;--frame-motion:fx-bolt calc(3.2s/var(--border-speed,1)) linear infinite,fx-zapglow calc(2.6s/var(--border-speed,1)) steps(1) infinite;--frame-shadow:0 18px 40px #0009,0 0 14px #3d52c866}
@keyframes fx-bolt{to{background-position:0 0,150% 150%,0 0}}
@keyframes fx-zapglow{0%,100%{box-shadow:0 18px 40px #0009,0 0 12px #3d52c866}7%{box-shadow:0 18px 40px #0009,0 0 34px #9cb8ffcc}9%{box-shadow:0 18px 40px #0009,0 0 10px #3d52c844}11%{box-shadow:0 18px 40px #0009,0 0 28px #9cb8ffaa}12%{box-shadow:0 18px 40px #0009,0 0 12px #3d52c866}54%{box-shadow:0 18px 40px #0009,0 0 38px #c8d8ffdd}56%{box-shadow:0 18px 40px #0009,0 0 12px #3d52c866}}

[data-texture=fx-water]{--frame-paint:radial-gradient(circle 9px at 9px 12px,transparent 7px,#ffffffbb 8px 9px,transparent 10px),radial-gradient(circle 9px at 9px 12px,transparent 7px,#bff4ffaa 8px 9px,transparent 10px),linear-gradient(180deg,#1f9fc9,#0d5aa8 55%,#0a2f78);--frame-size:100% 100%,18px 14px,18px 14px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box;--frame-motion:fx-swell calc(3.6s/var(--border-speed,1)) linear infinite;--frame-shadow:0 18px 40px #0009,0 0 20px #1fb4e066}
@keyframes fx-swell{from{background-position:0 0,0 0,9px 7px,0 0}to{background-position:0 0,18px 0,27px 7px,0 0}}

[data-texture=fx-tide]{--frame-paint:repeating-linear-gradient(90deg,#ffffff00 0 20px,#ffffff44 30px,#ffffff00 40px),repeating-linear-gradient(0deg,#00000000 0 16px,#7fe3ff33 24px,#00000000 32px),linear-gradient(135deg,#0b4fa0,#1ab0d4,#0b4fa0);--frame-size:100% 100%,80px 100%,100% 64px,200% 200%;--frame-layers:padding-box,border-box,border-box,border-box;--frame-motion:fx-tide calc(5s/var(--border-speed,1)) linear infinite;--frame-shadow:0 18px 40px #0009,0 0 16px #1a9fd455}
@keyframes fx-tide{to{background-position:0 0,80px 0,0 64px,200% 200%}}

[data-texture=fx-dragon]{--frame-paint:radial-gradient(circle at 50% 100%,#4fae62 0 6px,#0d2a18 7px 8px,transparent 9px),radial-gradient(circle at 50% 100%,#d9b445 0 6px,#0d2a18 7px 8px,transparent 9px),linear-gradient(135deg,#1c4f2c,#0d2a18);--frame-size:100% 100%,16px 11px,16px 11px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box;--frame-motion:fx-scales calc(8s/var(--border-speed,1)) linear infinite,fx-dragonglow calc(4s/var(--border-speed,1)) ease-in-out infinite;--frame-shadow:0 18px 40px #0009,0 0 18px #d9b44555,0 0 36px #2a7a3a33}
@keyframes fx-scales{from{background-position:0 0,0 0,8px 5px,0 0}to{background-position:0 0,16px 0,24px 5px,0 0}}
@keyframes fx-dragonglow{0%,100%{box-shadow:0 18px 40px #0009,0 0 12px #d9b44533}50%{box-shadow:0 18px 40px #0009,0 0 26px #d9b445aa,0 0 40px #2a7a3a55}}

[data-texture=fx-ember]{--frame-paint:radial-gradient(circle 1.5px at 3px 4px,#ffd27a,transparent),radial-gradient(circle 1.2px at 8px 9px,#ff9a3a,transparent),radial-gradient(circle 1px at 5px 6px,#fff1b0,transparent),linear-gradient(0deg,#ff6a1a,#b02a0a 45%,#3a0c06);--frame-size:100% 100%,13px 17px,19px 23px,11px 29px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box,border-box;--frame-motion:fx-rise calc(2.4s/var(--border-speed,1)) linear infinite,fx-flicker 1.3s steps(1) infinite;--frame-shadow:0 18px 40px #0009,0 0 20px #ff6a1a77,0 0 44px #b02a0a44}
@keyframes fx-rise{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:0 0,0 -17px,0 -23px,0 -29px,0 0}}
@keyframes fx-flicker{0%,100%{box-shadow:0 18px 40px #0009,0 0 20px #ff6a1a77}20%{box-shadow:0 18px 40px #0009,0 0 30px #ff9a3aaa}45%{box-shadow:0 18px 40px #0009,0 0 14px #ff6a1a55}70%{box-shadow:0 18px 40px #0009,0 0 34px #ffb04aaa,0 0 50px #b02a0a55}}

[data-texture=fx-leaf]{--frame-paint:radial-gradient(ellipse 3px 1.6px at 4px 3px,#d6c24a,transparent),radial-gradient(ellipse 3px 1.6px at 6px 5px,#8fe05a,transparent),linear-gradient(180deg,#2d7a33,#14401c);--frame-size:100% 100%,17px 19px,23px 27px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box;--frame-motion:fx-leaves calc(4s/var(--border-speed,1)) linear infinite;--frame-shadow:0 18px 40px #0009,0 0 18px #6fd04a55}
@keyframes fx-leaves{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,17px 19px,-23px 27px,0 0}}

[data-texture=fx-rot]{--frame-paint:radial-gradient(circle 2.5px at 5px 6px,#b9e04a88,transparent),radial-gradient(circle 2px at 9px 9px,#6a8a1a99,transparent),linear-gradient(180deg,#5a7a1a,#2a3a0a 60%,#1a2406);--frame-size:100% 100%,19px 25px,27px 33px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box;--frame-motion:fx-bubbles calc(6s/var(--border-speed,1)) linear infinite;--frame-shadow:0 18px 40px #0009,0 0 20px #8fb02a55,0 0 40px #3a4a0a55}
@keyframes fx-bubbles{from{background-position:0 0,0 0,0 0,0 0}to{background-position:0 0,0 -25px,0 -33px,0 0}}

[data-texture=fx-frost]{--frame-paint:repeating-linear-gradient(60deg,#ffffff00 0 9px,#ffffff55 10px,#ffffff00 11px 20px),repeating-linear-gradient(-60deg,#ffffff00 0 9px,#cfefff55 10px,#ffffff00 11px 20px),radial-gradient(circle 1.4px at 5px 5px,#fff,transparent),linear-gradient(135deg,#7fc8ff,#d8f2ff 50%,#4a8fd8);--frame-size:100% 100%,100% 100%,100% 100%,17px 21px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box,border-box;--frame-motion:fx-glint calc(3s/var(--border-speed,1)) linear infinite,fx-frostglow calc(4s/var(--border-speed,1)) ease-in-out infinite;--frame-shadow:0 18px 40px #0009,0 0 20px #9fe0ff77,0 0 40px #4a8fd844}
@keyframes fx-glint{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:0 0,0 0,0 0,17px 21px,0 0}}
@keyframes fx-frostglow{0%,100%{box-shadow:0 18px 40px #0009,0 0 14px #9fe0ff55}50%{box-shadow:0 18px 40px #0009,0 0 30px #d8f4ffaa,0 0 44px #4a8fd855}}

/* Rain: thin slanted streaks of three different lengths and speeds falling past each other */
[data-texture=fx-rain]{--frame-paint:linear-gradient(104deg,transparent 28%,#9fc4ee88 42%,#e4f0ff 46%,transparent 50%),linear-gradient(104deg,transparent 55%,#7fa6dd77 66%,#d0e4ff 70%,transparent 74%),linear-gradient(104deg,transparent 12%,#8fb4e266 22%,#cfe2ff 26%,transparent 30%),linear-gradient(180deg,#2a3c62,#16203c);--frame-size:100% 100%,11px 22px,17px 37px,23px 29px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box,border-box;--frame-motion:fx-rain calc(1.1s/var(--border-speed,1)) linear infinite;--frame-shadow:0 18px 40px #0009,0 0 18px #5b86c444}
@keyframes fx-rain{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:0 0,0 22px,0 37px,0 29px,0 0}}

/* Rain Storm: more layers, darker sky, a lightning flash through the glow now and then */
[data-texture=fx-storm]{--frame-paint:linear-gradient(104deg,transparent 28%,#a8caf099 42%,#f0f6ff 46%,transparent 50%),linear-gradient(104deg,transparent 55%,#86acea88 66%,#dcecff 70%,transparent 74%),linear-gradient(104deg,transparent 12%,#93b8ee77 22%,#d8e8ff 26%,transparent 30%),linear-gradient(104deg,transparent 40%,#7fa6dd66 52%,#bcd6ff 55%,transparent 58%),linear-gradient(180deg,#1b2848,#0b1124);--frame-size:100% 100%,9px 18px,13px 31px,19px 26px,15px 41px,100% 100%;--frame-layers:padding-box,border-box,border-box,border-box,border-box,border-box;--frame-motion:fx-storm calc(.8s/var(--border-speed,1)) linear infinite,fx-flash calc(7s/var(--border-speed,1)) steps(1) infinite;--frame-shadow:0 18px 40px #0009,0 0 16px #3d5c9a55}
@keyframes fx-storm{from{background-position:0 0,0 0,0 0,0 0,0 0,0 0}to{background-position:0 0,0 18px,0 31px,0 26px,0 41px,0 0}}
@keyframes fx-flash{0%,92%,96%,100%{box-shadow:0 18px 40px #0009,0 0 16px #3d5c9a55}93%,95%{box-shadow:0 18px 40px #0009,0 0 44px #cfe0ffee,0 0 70px #7fa0ff88}}

@media(prefers-reduced-motion:reduce){[data-texture^=fx-]{--frame-motion:none}}

/* ---------- finishes ---------- */
/* Cosmic Drift: a slow nebula with twinkling stars (the stars are the layer's particles) */
[data-finish=fx-drift]{--finish-paint:radial-gradient(ellipse 80% 50% at 20% 20%,#4a2fd0cc,transparent 70%),radial-gradient(ellipse 70% 50% at 85% 75%,#1f8ff0cc,transparent 70%),radial-gradient(ellipse 60% 40% at 50% 50%,#c24bd677,transparent 70%);--finish-size:160% 160%;--finish-opacity:.55}
[data-finish=fx-drift] .cosmetic-overlay{animation-duration:calc(16s/var(--particle-speed,1))}
[data-finish=fx-drift] .particles i{display:block;color:#cfe8ff;animation:twinkle calc(3.2s/var(--particle-speed,1)) ease-in-out infinite}

/* Aurora Sheen: one bright band sweeps the card */
[data-finish=fx-sheen]{--finish-paint:linear-gradient(120deg,transparent 30%,#4fd0ff99 44%,#c24bd6bb 50%,#7b3fd699 56%,transparent 70%);--finish-size:260% 100%;--finish-opacity:.7}
[data-finish=fx-sheen] .cosmetic-overlay{animation:fx-sweep calc(5.5s/var(--particle-speed,1)) ease-in-out infinite}
@keyframes fx-sweep{from{background-position:130% 0}to{background-position:-30% 0}}

/* Waves: four layered swells bobbing, built from the particle layer's first four elements */
[data-finish=fx-waves]{--finish-paint:linear-gradient(180deg,#06204a33,#0a5aa822 60%,#12b0d022);--finish-size:100% 100%;--finish-opacity:1}
[data-finish=fx-waves] .cosmetic-overlay{animation:none}
[data-finish=fx-waves] .particles i{display:none}
[data-finish=fx-waves] .particles i:nth-child(-n+4){display:block;left:0!important;right:0;width:auto;height:160px;border-radius:0;box-shadow:none;animation-delay:0s!important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><path d='M0 24 Q60 0 120 24 T240 24 V160 H0 Z' fill='%23FFFFFF'/></svg>") repeat-x 0 0/240px 160px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'><path d='M0 24 Q60 0 120 24 T240 24 V160 H0 Z' fill='%23FFFFFF'/></svg>") repeat-x 0 0/240px 160px}
[data-finish=fx-waves] .particles i:nth-child(1){top:42%!important;background:#1a7fd0;opacity:.24;animation:fx-wdrift calc(11s/var(--particle-speed,1)) linear infinite,fx-bob calc(5s/var(--particle-speed,1)) ease-in-out infinite alternate}
[data-finish=fx-waves] .particles i:nth-child(2){top:54%!important;background:#2ab0e0;opacity:.22;animation:fx-wdrift calc(8s/var(--particle-speed,1)) linear infinite reverse,fx-bob calc(4s/var(--particle-speed,1)) ease-in-out infinite alternate-reverse}
[data-finish=fx-waves] .particles i:nth-child(3){top:66%!important;background:#6fe3ff;opacity:.2;animation:fx-wdrift calc(6s/var(--particle-speed,1)) linear infinite,fx-bob calc(3.4s/var(--particle-speed,1)) ease-in-out infinite alternate}
[data-finish=fx-waves] .particles i:nth-child(4){top:78%!important;background:#c8f8ff;opacity:.15;animation:fx-wdrift calc(4.5s/var(--particle-speed,1)) linear infinite reverse,fx-bob calc(3s/var(--particle-speed,1)) ease-in-out infinite alternate-reverse}
@keyframes fx-wdrift{to{-webkit-mask-position:240px 0;mask-position:240px 0}}
@keyframes fx-bob{from{transform:translateY(-6px)}to{transform:translateY(6px)}}

/* Canvas finishes: the canvas fills the particle layer, a tinted wash sits behind the particles */
.particles>canvas.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
[data-finish=fx-rain] .particles{background:linear-gradient(180deg,#0a163a66,#1b3a6a33 60%,#0a163a44)}
[data-finish=fx-downpour] .particles{background:linear-gradient(180deg,#05091f99,#12254a55 60%,#05091f77)}
[data-finish=fx-mist] .particles{background:linear-gradient(180deg,#0a163a66,#1b3a6a33 60%,#0a163a44)}
[data-finish=fx-clouds] .particles{background:linear-gradient(180deg,#16275a99,#3a5390aa 55%,#1c2a5877)}
[data-finish=fx-lightning] .particles{background:linear-gradient(180deg,#070b2bbb,#141a5588 60%,#070b2b99)}
[data-finish=fx-smoke] .particles{background:linear-gradient(180deg,#0a0614cc,#1a0f2e99 60%,#050309cc)}
[data-finish=fx-rot] .particles{background:linear-gradient(180deg,#1f3a0a88,#4a5a1466 60%,#16240888)}
[data-finish=fx-leaf] .particles{background:linear-gradient(180deg,#0f3a1a77,#2a5a2a44 60%,#16301277)}
[data-finish=fx-ethereal] .particles{background:linear-gradient(180deg,#1a3a4a55,#6fe3ff1a 60%,#1a3a4a55)}