/* =====================================================================
   Tarjetas de jugador: el dibujo sale de la ilustración Tarjeta.jpg
   (assets/frames/, tools/make_card_frames.py) y los adornos son PNG
   del juego. Va después de los demás CSS de tarjetas y los sustituye.
   ===================================================================== */

/* ---------- la cara de la tarjeta es la imagen ---------- */
#card, .mini-card { --cf-face: url(../assets/frames/classic.webp); --cf-glow: transparent; }
#card .card-frame, .mini-card {
  background: var(--cf-face) center / 100% 100% no-repeat border-box !important;
  border-color: transparent !important; box-shadow: none !important; outline: none !important; animation: none !important; }
#card .icicles, #card .cf-deco, .mini-card .cf-deco { display: none !important; }
/* la ventana del retrato encaja con la del dibujo */
#card .card-portrait { margin-top: 20px; height: 540px; }
.mini-card .mc-portrait { margin-top: 9px; height: 262px; }
/* sin fondo de tarjeta, se ve el brillo de la ventana del dibujo (con los colores de cada tarjeta) */
#card .card-portrait:not(.has-bg), .mini-card .mc-portrait { background: transparent; box-shadow: none; }
#card .card-floor { background: rgba(0,0,0,.28); }
/* brillo detrás de las tarjetas especiales */
#card .card-frame::before, .mini-card::before { content: ''; position: absolute; inset: 14px; border-radius: 30px; z-index: -1; pointer-events: none;
  box-shadow: 0 0 46px 14px var(--cf-glow); animation: cfGlowPulse 2.6s ease-in-out infinite; }
@keyframes cfGlowPulse { 50% { opacity: .45; } }

/* ---------- adornos (PNG) ---------- */
.cf-art { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cf-art i { position: absolute; display: none; aspect-ratio: 1; background: center / contain no-repeat; filter: drop-shadow(0 4px 3px rgba(0,0,0,.28)); }
.cf-art .a1 { right: -4%; top: -3%; width: 21%; }      /* esquina de arriba */
.cf-art .a2 { right: -4%; bottom: -2%; width: 23%; }   /* esquina de abajo */
.cf-art .a3 { left: -5%; top: 47%; width: 16%; }       /* borde izquierdo */
.cf-art .a4 { right: -5%; top: 22%; width: 14%; }      /* borde derecho */
.cf-art .a5 { left: -4%; top: 12%; width: 14%; }       /* bajo la X */
.cf-art .a6 { left: 58%; bottom: -2%; width: 15%; }    /* abajo */
@keyframes caFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8%) rotate(5deg); } }
@keyframes caSwing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes caTwinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .45; } }
@keyframes caPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes caBat { 0%, 100% { translate: 0 0; } 25% { translate: -14% 10%; } 50% { translate: -4% -6%; } 75% { translate: 8% 8%; } }
@keyframes caDrift { 0%, 100% { translate: 0 0; opacity: .95; } 50% { translate: 18% -10%; opacity: .7; } }
@keyframes caSwim { 0%, 100% { translate: 0 0; transform: scaleX(-1); } 45% { translate: 40% 6%; transform: scaleX(-1); } 50% { transform: scaleX(1); } 95% { translate: 0 0; transform: scaleX(1); } }
@keyframes caBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(6%) rotate(4deg); } }
@keyframes caSpin { to { transform: rotate(360deg); } }
@keyframes caGull { 0%, 49% { background-image: url(../assets/life/gull_up.png); } 50%, 100% { background-image: url(../assets/life/gull_down.png); } }
@keyframes caOwl { 0%, 90%, 100% { background-image: url(../assets/life/owl_open.png); } 92%, 96% { background-image: url(../assets/life/owl_blink.png); } }
@keyframes caFly { 0%, 100% { translate: 0 0; } 50% { translate: -30% 12%; } }

/* ---------- Clásica (sin marco): copos y carámbanos ---------- */
#card:not([class*="frame-"]) .cf-art .a1, .mini-card:not([class*="frame-"]) .a1 { display: block; background-image: url(../assets/stickers/estrellaNieve.png); animation: caFloat 3.4s ease-in-out infinite; }
#card:not([class*="frame-"]) .cf-art .a2, .mini-card:not([class*="frame-"]) .a2 { display: block; background-image: url(../assets/stickers/osoPolar.png); animation: caBob 3s ease-in-out infinite; }
#card:not([class*="frame-"]) .cf-art .a4, .mini-card:not([class*="frame-"]) .a4 { display: block; background-image: url(../assets/rescue/shard.png); animation: caTwinkle 2.2s ease-in-out infinite; }

/* ---------- Rosa ---------- */
#card.frame-frmPink, .mini-card.frame-frmPink { --cf-face: url(../assets/frames/frmPink.webp); --cf-bd: #b03c72; --cf-text: #6a1f43; }
.frame-frmPink .cf-art .a1 { display: block; background-image: url(../assets/stickers/gemaCorazon.png); animation: caPulse 1.6s ease-in-out infinite; }
.frame-frmPink .cf-art .a2 { display: block; background-image: url(../assets/stickers/carameloFresa.png); animation: caFloat 3s ease-in-out infinite; }
.frame-frmPink .cf-art .a3 { display: block; background-image: url(../assets/candy/rosa.png); animation: caSwing 2.6s ease-in-out infinite; }
.frame-frmPink .cf-art .a4 { display: block; background-image: url(../assets/stickers/gFantasmaRosa.png); animation: caDrift 4s ease-in-out infinite; }

/* ---------- Halloween ---------- */
#card.frame-frmHalloween, .mini-card.frame-frmHalloween { --cf-face: url(../assets/frames/frmHalloween.webp); --cf-bd: #1a0b26; --cf-text: #ffe2b8; --cf-glow: rgba(255,140,30,.55); }
.frame-frmHalloween .cf-art .a1 { display: block; background-image: url(../assets/stickers/murcielaguito.png); width: 24%; animation: caBat 4.2s ease-in-out infinite; }
.frame-frmHalloween .cf-art .a2 { display: block; background-image: url(../assets/stickers/calabacita.png); animation: caBob 2.6s ease-in-out infinite; }
.frame-frmHalloween .cf-art .a3 { display: block; background-image: url(../assets/stickers/fantasmita.png); animation: caDrift 5s ease-in-out infinite; }
.frame-frmHalloween .cf-art .a4 { display: block; background-image: url(../assets/stickers/farolNaranja.png); transform-origin: top; animation: caSwing 2.4s ease-in-out infinite; }
.frame-frmHalloween .cf-art .a6 { display: block; background-image: url(../assets/pass/web.png); left: auto; right: 16%; width: 13%; opacity: .9; }

/* ---------- Aesthetic ---------- */
#card.frame-frmAesthetic, .mini-card.frame-frmAesthetic { --cf-face: url(../assets/frames/frmAesthetic.webp); --cf-bd: #8a6fd0; --cf-text: #5a4a8a; }
.frame-frmAesthetic .cf-art .a1 { display: block; background-image: url(../assets/stickers/nubeArco.png); width: 24%; animation: caFloat 3.6s ease-in-out infinite; }
.frame-frmAesthetic .cf-art .a2 { display: block; background-image: url(../assets/stickers/foquitaLila.png); width: 25%; animation: caBob 3s ease-in-out infinite; }
.frame-frmAesthetic .cf-art .a3 { display: block; background-image: url(../assets/stickers/estrellaNieve.png); animation: caTwinkle 2.4s ease-in-out infinite; }
.frame-frmAesthetic .cf-art .a4 { display: block; background-image: url(../assets/stickers/gemaCorazon.png); width: 11%; animation: caPulse 1.8s ease-in-out infinite; }

/* ---------- Caramelo (nueva) ---------- */
#card.frame-frmCandy, .mini-card.frame-frmCandy { --cf-face: url(../assets/frames/frmCandy.webp); --cf-bd: #b8306e; --cf-text: #6a1f43; --cf-inv: linear-gradient(160deg, #fff0f6, #d4f7ea); --cf-arrow: linear-gradient(90deg, #ff8ac0, #8ae6c6); --cf-flake: #e04d8f; --cf-flake-bd: #9ae8cc; }
.frame-frmCandy .cf-art .a1 { display: block; background-image: url(../assets/stickers/gCarameloUva.png); animation: caSwing 2.4s ease-in-out infinite; }
.frame-frmCandy .cf-art .a2 { display: block; background-image: url(../assets/stickers/cestaDulces.png); width: 25%; animation: caBob 3s ease-in-out infinite; }
.frame-frmCandy .cf-art .a3 { display: block; background-image: url(../assets/candy/cian.png); animation: caSwing 2s ease-in-out infinite; }
.frame-frmCandy .cf-art .a4 { display: block; background-image: url(../assets/candy/verde.png); animation: caSwing 2.8s ease-in-out infinite reverse; }
.frame-frmCandy .cf-art .a5 { display: block; background-image: url(../assets/candy/naranja.png); animation: caFloat 3.2s ease-in-out infinite; }
.frame-frmCandy .cf-art .a6 { display: block; background-image: url(../assets/stickers/tazaCacao.png); animation: caBob 2.6s ease-in-out infinite; }

/* ---------- Bosque Nevado (nueva) ---------- */
#card.frame-frmForest, .mini-card.frame-frmForest { --cf-face: url(../assets/frames/frmForest.webp); --cf-bd: #2a4a22; --cf-text: #2a2210; --cf-inv: linear-gradient(160deg, #f2fbee, #d8ecc8); --cf-arrow: linear-gradient(90deg, #3c7034, #a6d69a); --cf-flake: #3c7034; --cf-flake-bd: #a6d69a; }
.frame-frmForest .cf-art .a1 { display: block; background-image: url(../assets/life/owl_open.png); width: 22%; animation: caOwl 5s steps(1) infinite; }
.frame-frmForest .cf-art .a2 { display: block; background-image: url(../assets/life/squirrel.png); animation: caBob 2.2s ease-in-out infinite; }
.frame-frmForest .cf-art .a3 { display: block; background-image: url(../assets/games/pine.png); width: 18%; }
.frame-frmForest .cf-art .a4 { display: block; background-image: url(../assets/stickers/bellotaOro.png); width: 11%; animation: caSwing 2.6s ease-in-out infinite; }
.frame-frmForest .cf-art .a6 { display: block; background-image: url(../assets/life/bunny_sit.png); left: 52%; width: 17%; animation: caBob 3.4s ease-in-out infinite; }

/* ---------- Océano (nueva) ---------- */
#card.frame-frmOcean, .mini-card.frame-frmOcean { --cf-face: url(../assets/frames/frmOcean.webp); --cf-bd: #06304c; --cf-text: #04243c; --cf-inv: linear-gradient(160deg, #e8fbff, #bfe9f5); --cf-arrow: linear-gradient(90deg, #168aae, #7ad6e8); --cf-flake: #168aae; --cf-flake-bd: #7ad6e8; }
.frame-frmOcean .cf-art .a1 { display: block; background-image: url(../assets/stickers/barquito.png); width: 23%; animation: caBob 2.8s ease-in-out infinite; }
.frame-frmOcean .cf-art .a2 { display: block; background-image: url(../assets/stickers/conchaPerla.png); animation: caFloat 3.6s ease-in-out infinite; }
.frame-frmOcean .cf-art .a3 { display: block; background-image: url(../assets/life/fish.png); width: 17%; animation: caSwim 7s ease-in-out infinite; }
.frame-frmOcean .cf-art .a4 { display: block; background-image: url(../assets/stickers/anclaRosa.png); transform-origin: top; animation: caSwing 3s ease-in-out infinite; }
.frame-frmOcean .cf-art .a6 { display: block; background-image: url(../assets/stickers/botellaMar.png); width: 11%; animation: caBob 3.2s ease-in-out infinite; }

/* ---------- Galaxia (nueva) ---------- */
#card.frame-frmGalaxy, .mini-card.frame-frmGalaxy { --cf-face: url(../assets/frames/frmGalaxy.webp); --cf-bd: #07051a; --cf-text: #e8e0ff; --cf-glow: rgba(120,90,255,.5); --cf-inv: linear-gradient(160deg, #2a1f5e, #0f1636); --cf-arrow: linear-gradient(90deg, #24145e, #2856be); --cf-flake: #6a4ad8; --cf-flake-bd: #c8b4ff; }
.frame-frmGalaxy .card-name, .frame-frmGalaxy .mc-name { color: #fff; text-shadow: 0 3px 0 #07051a, 0 0 14px #9a7aff; }
#card.frame-frmGalaxy #inventory h3, #card.frame-frmGalaxy .inv-help, #card.frame-frmGalaxy .inv-empty { color: #e0d6ff; }
.frame-frmGalaxy .cf-art .a1 { display: block; background-image: url(../assets/stickers/pezLuna.png); width: 23%; animation: caFloat 4s ease-in-out infinite; }
.frame-frmGalaxy .cf-art .a2 { display: block; background-image: url(../assets/stickers/estrellaNieve.png); animation: caSpin 14s linear infinite; }
.frame-frmGalaxy .cf-art .a3, .frame-frmGalaxy .cf-art .a4, .frame-frmGalaxy .cf-art .a5, .frame-frmGalaxy .cf-art .a6 { display: block; background-image: url(../assets/pass/wisp.png); filter: hue-rotate(160deg) brightness(1.3); animation: caTwinkle 2s ease-in-out infinite; }
.frame-frmGalaxy .cf-art .a3 { width: 10%; left: -2%; }
.frame-frmGalaxy .cf-art .a4 { width: 8%; right: -1%; animation-delay: -.7s; }
.frame-frmGalaxy .cf-art .a5 { width: 9%; left: -1%; animation-delay: -1.3s; }
.frame-frmGalaxy .cf-art .a6 { width: 8%; animation-delay: -.4s; }

/* ---------- Atardecer (nueva) ---------- */
#card.frame-frmSunset, .mini-card.frame-frmSunset { --cf-face: url(../assets/frames/frmSunset.webp); --cf-bd: #5e1634; --cf-text: #3a0f22; --cf-inv: linear-gradient(160deg, #fff2e6, #ffd4c4); --cf-arrow: linear-gradient(90deg, #d94a74, #ffae86); --cf-flake: #d94a74; --cf-flake-bd: #ffae86; }
.frame-frmSunset .cf-art .a1 { display: block; width: 24%; animation: caGull .5s steps(1) infinite, caFly 6s ease-in-out infinite; }
.frame-frmSunset .cf-art .a4 { display: block; width: 14%; top: 8%; right: 18%; animation: caGull .6s steps(1) infinite, caFly 7s ease-in-out infinite reverse; }
.frame-frmSunset .cf-art .a2 { display: block; background-image: url(../assets/stickers/gFocaFresa.png); width: 26%; animation: caBob 3.2s ease-in-out infinite; }
.frame-frmSunset .cf-art .a3 { display: block; background-image: url(../assets/stickers/gTortugaSol.png); animation: caFloat 3.6s ease-in-out infinite; }

/* ---------- Arcoíris (nueva) ---------- */
#card.frame-frmRainbow, .mini-card.frame-frmRainbow { --cf-face: url(../assets/frames/frmRainbow.webp); --cf-bd: #7a3a8a; --cf-text: #3a1f4a; --cf-glow: rgba(255,170,230,.5); --cf-inv: linear-gradient(160deg, #fff0fa, #e6f6ff); --cf-arrow: linear-gradient(90deg, #ff9ac8, #9ad8ff); --cf-flake: #c050a0; --cf-flake-bd: #ffc4dc; }
.frame-frmRainbow .cf-art .a1 { display: block; background-image: url(../assets/stickers/nubeArco.png); width: 24%; animation: caFloat 3.4s ease-in-out infinite; }
.frame-frmRainbow .cf-art .a2 { display: block; background-image: url(../assets/stickers/gTortugaArcoiris.png); width: 25%; animation: caBob 3s ease-in-out infinite; }
.frame-frmRainbow .cf-art .a3 { display: block; background-image: url(../assets/stickers/gFantasmaArcoiris.png); animation: caDrift 4.4s ease-in-out infinite; }
.frame-frmRainbow .cf-art .a4 { display: block; background-image: url(../assets/stickers/gMurcielagoArcoiris.png); width: 17%; animation: caBat 4s ease-in-out infinite; }
.frame-frmRainbow .cf-art .a5 { display: block; background-image: url(../assets/stickers/bromiArcoiris.png); animation: caFloat 3s ease-in-out infinite; }

/* ---------- de eventos y del pase: misma imagen, sus colores ---------- */
#card.frame-frmAurora, .mini-card.frame-frmAurora { --cf-face: url(../assets/frames/frmAurora.webp); --cf-bd: #0c1a33; --cf-text: #10304a; --cf-glow: rgba(110,240,200,.5); }
.frame-frmAurora .cf-art .a1 { display: block; background-image: url(../assets/stickers/estrellaNieve.png); animation: caSpin 12s linear infinite; }
.frame-frmAurora .cf-art .a2 { display: block; background-image: url(../assets/stickers/focaCristal.png); width: 26%; animation: caBob 3s ease-in-out infinite; }
.frame-frmAurora .cf-art .a3, .frame-frmAurora .cf-art .a4 { display: block; background-image: url(../assets/pass/wisp.png); filter: hue-rotate(100deg) brightness(1.4); width: 10%; animation: caTwinkle 2.2s ease-in-out infinite; }
.frame-frmAurora .cf-art .a4 { animation-delay: -1s; }

#card.frame-frmSpectral, .mini-card.frame-frmSpectral { --cf-face: url(../assets/frames/frmSpectral.webp); --cf-bd: #0a2a18; --cf-text: #082414; --cf-glow: rgba(125,255,140,.5); }
.frame-frmSpectral .cf-art .a1 { display: block; background-image: url(../assets/pass/ghost.png); animation: caDrift 5s ease-in-out infinite; }
.frame-frmSpectral .cf-art .a2 { display: block; background-image: url(../assets/stickers/llaveEspectral.png); width: 26%; filter: drop-shadow(0 0 10px #7dff6a); animation: caFloat 3.4s ease-in-out infinite; }
.frame-frmSpectral .cf-art .a3 { display: block; background-image: url(../assets/stickers/fantasmita.png); opacity: .85; animation: caDrift 6s ease-in-out infinite reverse; }

#card.frame-frmWeb, .mini-card.frame-frmWeb { --cf-face: url(../assets/frames/frmWeb.webp); --cf-bd: #15121f; --cf-text: #efeaff; }
.frame-frmWeb .cf-art .a1 { display: block; background-image: url(../assets/pass/web.png); width: 26%; right: -2%; top: -1%; }
.frame-frmWeb .cf-art .a2 { display: block; background-image: url(../assets/stickers/murcielaguito.png); animation: caBat 4.6s ease-in-out infinite; }
.frame-frmWeb .cf-art .a3 { display: block; background-image: url(../assets/pass/web.png); transform: scaleX(-1); width: 18%; left: -3%; }

#card.frame-frmPumpkinKing, .mini-card.frame-frmPumpkinKing { --cf-face: url(../assets/frames/frmPumpkinKing.webp); --cf-bd: #160822; --cf-text: #ffe8b8; --cf-glow: rgba(255,150,40,.65); }
.frame-frmPumpkinKing .cf-art .a1 { display: block; background-image: url(../assets/stickers/coronaEspectral.png); width: 23%; animation: caFloat 3s ease-in-out infinite; }
.frame-frmPumpkinKing .cf-art .a2 { display: block; background-image: url(../assets/stickers/calabazaReal.png); width: 26%; filter: drop-shadow(0 0 12px rgba(255,150,40,.9)); animation: caBob 2.6s ease-in-out infinite; }
.frame-frmPumpkinKing .cf-art .a3, .frame-frmPumpkinKing .cf-art .a4 { display: block; background-image: url(../assets/pass/ember.png); width: 6%; animation: caTwinkle 1.6s ease-in-out infinite; }

#card.frame-frmChamp, .mini-card.frame-frmChamp { --cf-face: url(../assets/frames/frmChamp.webp); --cf-bd: #6a4200; --cf-text: #3a2400; --cf-glow: rgba(255,210,80,.6); }
.frame-frmChamp .cf-art .a1 { display: block; background-image: url(../assets/stickers/gOsoDorado.png); animation: caFloat 3s ease-in-out infinite; }
.frame-frmChamp .cf-art .a2 { display: block; background-image: url(../assets/stickers/carameloDorado.png); animation: caSwing 2.4s ease-in-out infinite; }
.frame-frmChamp .cf-art .a3, .frame-frmChamp .cf-art .a4 { display: block; background-image: url(../assets/stickers/estrellaNieve.png); width: 10%; animation: caTwinkle 1.8s ease-in-out infinite; }
.frame-frmChamp .cf-art .a4 { animation-delay: -.9s; }

/* ---------- muestras (catálogo, inventario y pase) ---------- */
.sw-classic, [class*="sw-frm"] { background-position: center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: transparent !important; box-shadow: none !important; }
.sw-classic { background-image: url(../assets/frames/classic.webp) !important; }
.sw-frmPink { background-image: url(../assets/frames/frmPink.webp) !important; }
.sw-frmHalloween { background-image: url(../assets/frames/frmHalloween.webp) !important; }
.sw-frmAesthetic { background-image: url(../assets/frames/frmAesthetic.webp) !important; }
.sw-frmCandy { background-image: url(../assets/frames/frmCandy.webp) !important; }
.sw-frmForest { background-image: url(../assets/frames/frmForest.webp) !important; }
.sw-frmOcean { background-image: url(../assets/frames/frmOcean.webp) !important; }
.sw-frmGalaxy { background-image: url(../assets/frames/frmGalaxy.webp) !important; }
.sw-frmSunset { background-image: url(../assets/frames/frmSunset.webp) !important; }
.sw-frmRainbow { background-image: url(../assets/frames/frmRainbow.webp) !important; }
.sw-frmAurora { background-image: url(../assets/frames/frmAurora.webp) !important; }
.sw-frmSpectral { background-image: url(../assets/frames/frmSpectral.webp) !important; }
.sw-frmWeb { background-image: url(../assets/frames/frmWeb.webp) !important; }
.sw-frmPumpkinKing { background-image: url(../assets/frames/frmPumpkinKing.webp) !important; }
.sw-frmChamp { background-image: url(../assets/frames/frmChamp.webp) !important; }
/* en la muestra grande, el adorno principal en el centro */
.frame-sw-big::after { content: '' !important; inset: 18% 14% 22% !important; background: center / contain no-repeat; }
.frame-sw-big.sw-classic::after { background-image: url(../assets/stickers/osoPolar.png); }
.frame-sw-big.sw-frmPink::after { background-image: url(../assets/stickers/gemaCorazon.png); }
.frame-sw-big.sw-frmHalloween::after { background-image: url(../assets/stickers/calabacita.png); }
.frame-sw-big.sw-frmAesthetic::after { background-image: url(../assets/stickers/nubeArco.png); }
.frame-sw-big.sw-frmCandy::after { background-image: url(../assets/stickers/cestaDulces.png); }
.frame-sw-big.sw-frmForest::after { background-image: url(../assets/life/owl_open.png); }
.frame-sw-big.sw-frmOcean::after { background-image: url(../assets/stickers/barquito.png); }
.frame-sw-big.sw-frmGalaxy::after { background-image: url(../assets/stickers/pezLuna.png); }
.frame-sw-big.sw-frmSunset::after { background-image: url(../assets/stickers/gFocaFresa.png); }
.frame-sw-big.sw-frmRainbow::after { background-image: url(../assets/stickers/gTortugaArcoiris.png); }
.frame-sw-big.sw-frmAurora::after { background-image: url(../assets/stickers/focaCristal.png); }
.frame-sw-big.sw-frmSpectral::after { background-image: url(../assets/stickers/llaveEspectral.png); }
.frame-sw-big.sw-frmWeb::after { background-image: url(../assets/stickers/murcielaguito.png); }
.frame-sw-big.sw-frmPumpkinKing::after { background-image: url(../assets/stickers/calabazaReal.png); }
.frame-sw-big.sw-frmChamp::after { background-image: url(../assets/stickers/gOsoDorado.png); }
/* catálogo: con 10 tarjetas, la lista se desliza */
#catFrames .cat-items { max-height: 640px; overflow-y: auto; padding-right: 6px; }
#catFrames .frame-sw-big { width: 120px !important; height: 176px !important; }

@media (prefers-reduced-motion: reduce) { .cf-art i, #card .card-frame::before, .mini-card::before { animation: none !important; } }