/* ---------- vector monster rig animations ---------- */
.c-art { background: #1a1030; }
.mon { display: block; width: 100%; height: 100%; overflow: hidden; }
.mon * { animation-delay: var(--d, 0s); }
.mon .rig { transform-origin: 60px 82px; }
@keyframes breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.035, .955); } }
@keyframes breatheH { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.05, .94); } }
@keyframes bounce { 0%,100% { transform: scale(1.06, .92) translateY(0); } 45% { transform: scale(.94, 1.07) translateY(-5px); } 70% { transform: scale(1.02, .98) translateY(-1px); } }
@keyframes bob { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-1.2px); } }
@keyframes earL { 0%,80%,100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(4deg); } }
@keyframes earR { 0%,60%,100% { transform: rotate(0); } 65% { transform: rotate(14deg); } 70% { transform: rotate(-4deg); } }
@keyframes flick { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06, .96); } }
@keyframes flapL { 0%,100% { transform: rotate(10deg) scaleY(1); } 50% { transform: rotate(-22deg) scaleY(.85); } }
@keyframes flapR { 0%,100% { transform: rotate(-10deg) scaleY(1); } 50% { transform: rotate(22deg) scaleY(.85); } }
@keyframes buzz { 0%,100% { transform: scaleY(1) rotate(0); } 50% { transform: scaleY(.45) rotate(4deg); } }
@keyframes hover { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-4px); } }
@keyframes sway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes glow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes blink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes tilt { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes whip { 0%,100% { transform: rotate(-8deg) skewY(0); } 50% { transform: rotate(10deg) skewY(-6deg); } }
@keyframes snap { 0%,70%,100% { transform: rotate(0); } 78% { transform: rotate(-16deg); } 86% { transform: rotate(4deg); } }
@keyframes tent { 0%,100% { transform: skewX(-9deg) scaleY(1); } 50% { transform: skewX(9deg) scaleY(.94); } }
@keyframes pulse { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } }
@keyframes aura { 0%,100% { transform: scale(.9); opacity: .25; } 50% { transform: scale(1.12); opacity: .55; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twk { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes bolt { 0%,88%,100% { opacity: 0; } 90%,94% { opacity: 1; } 92% { opacity: .2; } }
@keyframes gem { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6) drop-shadow(0 0 2px #bff); } }
@keyframes wave { to { transform: translateX(20px); } }
@keyframes drip { 0%,60% { transform: translateY(0); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes shd { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.85); } }
.breathe { animation: breathe 2.6s ease-in-out infinite; }
.breathe.heavy { animation: breatheH 3.4s ease-in-out infinite; }
.bounce { animation: bounce 1.5s cubic-bezier(.4,0,.4,1) infinite; }
.bob { animation: bob 3s ease-in-out infinite; }
.ear { animation: earL 3.7s ease-in-out infinite; } .ear.r { animation-name: earR; }
.flick { animation: flick 1.1s ease-in-out infinite; }
.tail.curl, .sway, .antler { animation: sway 3.2s ease-in-out infinite; }
.crest.flick { animation-duration: .7s; }
.wing.l.flap { animation: flapL .9s ease-in-out infinite; } .wing.r.flap { animation: flapR .9s ease-in-out infinite; }
.wing.flap.slow { animation-duration: 2.4s; }
.flap2 { animation: sway 1.2s ease-in-out infinite; }
.buzz { animation: buzz .09s linear infinite; }
.hover { animation: hover 2s ease-in-out infinite; } .hover.slow { animation-duration: 3.4s; } .hover.fast { animation-duration: 1.2s; }
.glow, .bulb { animation: glow 1.6s ease-in-out infinite; }
.eye { animation: blink 4.2s linear infinite; }
.tilt { animation: tilt 2.2s ease-in-out infinite; }
.whip { animation: whip .8s ease-in-out infinite; }
.snap { animation: snap 2.4s ease-in-out infinite; }
.tent { animation: tent 2.2s ease-in-out infinite; }
.pulse { animation: pulse 3s ease-in-out infinite; }
.aura { animation: aura 3s ease-in-out infinite; }
.spin, .rays { animation: spin 14s linear infinite; } .rays { animation-duration: 40s; }
.twk { animation: twk 1.8s ease-in-out infinite; }
.bolt { animation: bolt 3.6s linear infinite; }
.gem { animation: gem 2.2s ease-in-out infinite; }
.wave { animation: wave 2s linear infinite; }
.drip { animation: drip 2.4s ease-in infinite; }
.shd { animation: shd 2.6s ease-in-out infinite; }
.flw { animation: aura 2.6s ease-in-out infinite; }
.flw { animation-name: pulse; }
.arm.l { animation: sway 3.4s ease-in-out infinite; } .arm.r { animation: sway 3.4s ease-in-out infinite reverse; }
/* element particles */
@keyframes emb { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x), -80px); opacity: 0; } }
@keyframes bub { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(4px, -84px) scale(1.2); opacity: 0; } }
@keyframes pet { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--x), 96px) rotate(540deg); opacity: .2; } }
@keyframes spk { 0%,70%,100% { opacity: 0; transform: scale(.6); } 78% { opacity: 1; transform: scale(1.2); } }
@keyframes dst { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: .7; } 100% { transform: translate(var(--x), -22px); opacity: 0; } }
@keyframes glt { 0%,100% { transform: scale(0) rotate(0); } 50% { transform: scale(1.3) rotate(90deg); } }
.pt.emb > * { animation: emb 2.4s ease-out infinite; }
.pt.bub > * { animation: bub 3.2s ease-in infinite; }
.pt.pet > * { animation: pet 4.4s linear infinite; transform-box: fill-box; }
.pt.spk > * { animation: spk 1.5s linear infinite; transform-box: fill-box; transform-origin: center; }
.pt.dst > * { animation: dst 5s ease-out infinite; }
.pt.glt > * { animation: glt 2.2s ease-in-out infinite; }
/* reactions */
.cast-ring { opacity: 0; transform-origin: 60px 52px; }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-10px) scale(.95, 1.08); } 60% { transform: translateY(0) scale(1.1, .9); } 100% { transform: none; } }
@keyframes cast { 0% { transform: none; } 25% { transform: translateY(-6px) scale(1.18) rotate(-6deg); filter: brightness(1.5); } 60% { transform: scale(1.08) rotate(4deg); } 100% { transform: none; } }
@keyframes ring { 0% { transform: scale(.4); opacity: 1; stroke-width: 6; } 100% { transform: scale(2.6); opacity: 0; stroke-width: 1; } }
.card.hop .rig { animation: hop .45s cubic-bezier(.3,1.6,.5,1); }
.card.cast .rig { animation: cast .6s cubic-bezier(.3,1.5,.5,1); }
.card.cast .cast-ring { animation: ring .6s ease-out; }
.el-ember .cast-ring { stroke: #ffb02e; } .el-tide .cast-ring { stroke: #9fe8ff; } .el-bloom .cast-ring { stroke: #c5ff8a; } .el-volt .cast-ring { stroke: #fff27a; } .el-stone .cast-ring { stroke: #e0d2c0; } .el-legend .cast-ring { stroke: #ff9ad5; }
.card.cast .pt > * { animation-duration: .9s; }
/* legendary shimmer */
.r-legendary .c-art { position: relative; }
.r-legendary .c-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 45%, rgba(255,200,240,.5) 50%, rgba(160,220,255,.5) 55%, transparent 70%); background-size: 300% 100%; mix-blend-mode: overlay; animation: foil 2.8s linear infinite; }
.r-legendary .c-art { box-shadow: 0 0 .6em .1em rgba(255,200,240,.9), inset 0 0 0 .1em #fff; }
.played .card.dim .mon * , .deckgrid .mon * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mon * { animation: none !important; } }