/* Standalone scoped animation components. WebPs remain static, transparent assets. */
.map-art{position:relative;height:290px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 72%,color-mix(in srgb,var(--accent,#ac91f0) 18%,transparent),transparent 68%)}
.map-case-image{position:absolute;width:88%;height:84%;left:6%;bottom:0;object-fit:contain;transition:filter .3s,transform .3s}
.map-subject-frame{position:absolute;left:7%;top:10px;width:86%;height:185px;filter:drop-shadow(0 9px 4px #0009);z-index:2}
.map-subject{width:100%;height:100%;object-fit:contain;display:block;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-name:none;animation-play-state:paused;transform-origin:50% 60%}
.map-art.rifle .map-subject{object-fit:cover}
.map-art.operator .map-subject-frame{height:220px;width:70%;left:15%;top:0}
.map-art.vertical .map-subject-frame{height:225px;top:0}
[data-animate=all] .map-subject{animation-name:var(--map-motion);animation-play-state:running}
.map-art[data-motion=dust-cache] .map-subject{--map-motion:map-dust-cache}
.map-art[data-motion=mirage-stash] .map-subject{--map-motion:map-mirage-stash;animation-duration:4.8s;transform-origin:75% 60%}
.map-art[data-motion=inferno-supply] .map-subject{--map-motion:map-inferno-supply;animation-duration:3.6s;transform-origin:50% 85%}
.map-art[data-motion=nuke-containment] .map-subject{--map-motion:map-nuke-containment;animation-duration:4.2s;transform-origin:50% 100%}
.map-art[data-motion=vertigo-shipment] .map-subject{--map-motion:map-vertigo-shipment;animation-duration:4.4s}
.map-art[data-motion=ancient-relic] .map-subject{--map-motion:map-ancient-relic;animation-duration:5.6s}
.map-art[data-motion=anubis-vault] .map-subject{--map-motion:map-anubis-vault;animation-duration:6s}
.map-art[data-motion=overpass-kit] .map-subject{--map-motion:map-overpass-kit;animation-duration:4.7s}
.map-art[data-motion=train-cargo] .map-subject{--map-motion:map-train-cargo;animation-duration:4s}
.map-art[data-motion=armory-reserve] .map-subject{--map-motion:map-armory-reserve;animation-duration:5.2s}
/* Generic community case motion; applies to every selected foreground WebP. */
.map-art[data-motion="community-float"] .map-subject{--map-motion:community-case-float;animation-duration:3.9s;transform-origin:50% 64%}
@keyframes community-case-float{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-12px) rotate(2deg) scale(1.025)}}
@keyframes map-dust-cache{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-9px) rotate(-5deg)}}
@keyframes map-mirage-stash{0%,100%{transform:rotate(-10deg)}50%{transform:translateY(-7px) rotate(5deg)}}
@keyframes map-inferno-supply{0%,100%{transform:rotate(-5deg)}35%{transform:rotate(3deg) translateY(-4px)}70%{transform:rotate(-2deg) translateY(-7px)}}
@keyframes map-nuke-containment{0%,100%{transform:scale(1)}50%{transform:scale(1.025,1.035) translateY(-2px)}}
@keyframes map-vertigo-shipment{0%,100%{transform:translate(0,0) rotate(-7deg)}40%{transform:translate(-5px,-6px) rotate(-9deg)}65%{transform:translate(3px,-4px) rotate(-6deg)}}
@keyframes map-ancient-relic{0%,100%{transform:translateY(0) rotate(22deg)}50%{transform:translateY(-12px) rotate(26deg)}}
@keyframes map-anubis-vault{0%,100%{transform:translateX(-4px) rotate(-8deg)}50%{transform:translate(5px,-5px) rotate(-4deg)}}
@keyframes map-overpass-kit{0%,100%{transform:rotate(-4deg) scale(.94)}50%{transform:rotate(2deg) scale(.97) translateY(-5px)}}
@keyframes map-train-cargo{0%,65%,100%{transform:rotate(-6deg)}72%{transform:translate(5px,1px) rotate(-5deg)}80%{transform:translate(-2px,-2px) rotate(-7deg)}}
@keyframes map-armory-reserve{0%,100%{transform:rotate(-6deg) scale(.92)}50%{transform:translateY(-9px) rotate(4deg) scale(.97)}}
[data-animate=off] .map-subject{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.map-subject{animation:none!important}.map-case-image{transition:none!important}}

/* Integration into the existing card, Lineup dialog, battle strips and opening page. */
.map-art{display:block;width:100%;height:100%;min-height:0}
.map-art .map-case-image{display:block;max-width:none;mix-blend-mode:normal!important;mask-image:none!important;-webkit-mask-image:none!important}
.map-art .map-subject-frame{display:block;top:2%;height:64%;width:92%;left:4%}
.map-art .map-subject{
  max-width:none;mix-blend-mode:normal!important;
  /* Match the original subject rim highlight; follows alpha edges. */
  filter:drop-shadow(1px 0 0 #eef4ffaa) drop-shadow(-1px 0 0 #eef4ff99)
         drop-shadow(0 1px 0 #eef4ff88) drop-shadow(0 -1px 0 #eef4ff88)
         drop-shadow(0 0 3px #000) brightness(1.13) contrast(1.09)!important;
}
.map-art.operator .map-subject-frame{top:0;height:79%;width:70%;left:15%}
.map-art.vertical .map-subject-frame{top:0;height:79%;width:80%;left:10%}
/* Trigger each case independently; the containing battle card must not activate siblings. */
.cc-card:hover .map-subject,.cc-card:focus-visible .map-subject,.cl-case:hover .map-subject{animation-name:var(--map-motion);animation-play-state:running}
.cc-card:hover .map-case-image{filter:brightness(.8)}
/* Alpha assets must not inherit the old black-background blending experiments. */

#battle-app .cs-art-link .cb-case-art.cc-card:has(.map-art){mix-blend-mode:normal!important}
.case-environment.map-opening{display:block;position:absolute;inset:0;overflow:hidden}
.map-opening .map-art{position:absolute;inset:0}
.map-opening .map-case-image{width:90%;height:90%;left:5%}
.map-opening .map-subject-frame{top:4%;height:65%}
@media(prefers-reduced-motion:reduce){.map-art .map-subject{animation:none!important}.map-art .map-case-image{transition:none!important}}
#battle-app .cb-case-art .map-art{position:relative;display:block;height:100%;width:100%}
#battle-app .cb-case-art .map-subject-frame{position:absolute}

/* Match the original cases: mute only the rear container layer. */
.map-art .map-case-image{
  filter:saturate(.55) brightness(.66);
  opacity:.94;
  transition:filter .4s,opacity .4s,transform .4s;
}
.cc-card:hover .map-art .map-case-image,
.cc-card:focus-visible .map-art .map-case-image{
  filter:grayscale(.9) brightness(.43);
  opacity:.84;
}
@media(prefers-reduced-motion:reduce){.map-art .map-case-image{transition:none!important}}

/* Match the original cases' hover depth and reset behaviour. */
.map-art .map-case-image{transform:scale(1);transform-origin:50% 65%}
.cc-card:hover .map-art .map-case-image,
.cc-card:focus-visible .map-art .map-case-image{transform:scale(.97)}
.map-art .map-subject-frame{
  pointer-events:none;
  filter:drop-shadow(0 8px 4px #000) drop-shadow(0 14px 12px #000b);
  transition:filter .3s;
}
.cc-card:hover .map-art .map-subject-frame,
.cc-card:focus-visible .map-art .map-subject-frame{
  filter:drop-shadow(0 9px 4px #000) drop-shadow(0 16px 12px #000c);
}
.map-art[data-motion=dust-cache] .map-subject{transform:rotate(-8deg)}
.map-art[data-motion=mirage-stash] .map-subject{transform:rotate(-10deg)}
.map-art[data-motion=inferno-supply] .map-subject{transform:rotate(-5deg)}
.map-art[data-motion=vertigo-shipment] .map-subject{transform:rotate(-7deg)}
.map-art[data-motion=ancient-relic] .map-subject{transform:rotate(22deg)}
.map-art[data-motion=anubis-vault] .map-subject{transform:translateX(-4px) rotate(-8deg)}
.map-art[data-motion=overpass-kit] .map-subject{transform:rotate(-4deg) scale(.94)}
.map-art[data-motion=train-cargo] .map-subject{transform:rotate(-6deg)}
.map-art[data-motion=armory-reserve] .map-subject{transform:rotate(-6deg) scale(.92)}
@media(prefers-reduced-motion:reduce){
 .map-art .map-subject-frame{transition:none!important}
 .cc-card:hover .map-art .map-case-image,.cc-card:focus-visible .map-art .map-case-image{transform:none}
}

/* Dota hero layers: each focused or hovered case controls only its own animation. */
.map-art.dota-hero .map-subject-frame{top:0;left:10%;width:80%;height:76%}
.map-art.dota-hero .map-case-image{width:90%;left:5%;height:76%;bottom:0}
.map-art.dota-hero .map-subject{transform:translate(0,0) rotate(0) scale(1);transform-origin:50% 85%}
.game-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.game-filter-row button{padding:9px 16px;border:1px solid #30394b;border-radius:24px;background:#111722;color:#b3bdcf;font:inherit;cursor:pointer}
.game-filter-row button[aria-pressed=true]{background:#302640;border-color:#9b7bdd;color:#fff}
.game-filter-row button:focus-visible{outline:2px solid #bd9bff;outline-offset:3px}
.dota-preview{max-width:650px;margin:30px auto;text-align:center}.dota-preview .cc-art{height:400px}.dota-preview p{color:#b3bdcf}
.map-art[data-motion=dota-juggernaut] .map-subject{--map-motion:dota-juggernaut;animation-duration:3.80s}
@keyframes dota-juggernaut{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(2px,-5px) rotate(-1deg) scale(1.018)}}
.map-art[data-motion=dota-pudge] .map-subject{--map-motion:dota-pudge;animation-duration:4.01s}
@keyframes dota-pudge{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-2px,-3px) rotate(1deg) scale(1.018)}}
.map-art[data-motion=dota-shadow-fiend] .map-subject{--map-motion:dota-shadow-fiend;animation-duration:4.22s}
@keyframes dota-shadow-fiend{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-9px) rotate(0deg) scale(1.018)}}
.map-art[data-motion=dota-crystal-maiden] .map-subject{--map-motion:dota-crystal-maiden;animation-duration:4.43s}
@keyframes dota-crystal-maiden{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-7px) rotate(-1deg) scale(1.018)}}
.map-art[data-motion=dota-anti-mage] .map-subject{--map-motion:dota-anti-mage;animation-duration:4.64s}
@keyframes dota-anti-mage{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-3px,-4px) rotate(1deg) scale(1.018)}}
.map-art[data-motion=dota-phantom-assassin] .map-subject{--map-motion:dota-phantom-assassin;animation-duration:4.85s}
@keyframes dota-phantom-assassin{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(3px,-5px) rotate(-1deg) scale(1.018)}}
.map-art[data-motion=dota-rubick] .map-subject{--map-motion:dota-rubick;animation-duration:5.06s}
@keyframes dota-rubick{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-8px) rotate(1deg) scale(1.018)}}
.map-art[data-motion=dota-axe] .map-subject{--map-motion:dota-axe;animation-duration:5.27s}
@keyframes dota-axe{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(2px,-2px) rotate(1deg) scale(1.018)}}
.map-art[data-motion=dota-invoker] .map-subject{--map-motion:dota-invoker;animation-duration:5.48s}
@keyframes dota-invoker{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-6px) rotate(0deg) scale(1.018)}}
.map-art[data-motion=dota-faceless-void] .map-subject{--map-motion:dota-faceless-void;animation-duration:5.69s}
@keyframes dota-faceless-void{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-2px,-7px) rotate(-1deg) scale(1.018)}}
@media(prefers-reduced-motion:reduce){.map-art.dota-hero .map-subject{animation:none!important}}

.cl-case:hover .map-art .map-case-image{filter:grayscale(.9) brightness(.43);opacity:.84;transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.cl-case:hover .map-art .map-case-image{transform:none}}

/* Split hero / treasure cards ------------------------------------------------
   Dota and TF2 pairs now render as independent cases instead of stacking the
   character over the chest. The same source art is reused, but each card gets
   its own composition and hover behavior. */
.map-art.subject-only .map-case-image{display:none!important}
.map-art.subject-only .map-subject-frame{top:0;left:5%;width:90%;height:92%}
.map-art.subject-only .map-subject{object-position:center bottom;filter:drop-shadow(0 12px 6px #000a) drop-shadow(0 28px 22px #0008) brightness(1.035) contrast(1.04)}
.map-art.case-only .map-subject-frame{display:none!important}
.map-art.case-only .map-case-image{
  width:94%;height:90%;left:3%;bottom:3%;object-position:center center;
  filter:drop-shadow(0 17px 13px #0009) brightness(1.02) contrast(1.035);
  transform-origin:50% 78%;
  animation-duration:5s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-name:none;
  animation-play-state:paused;
}
/* Split treasure/case cards should feel like the hero cards: gentle motion and
   brighter highlight on hover instead of fading darker and shrinking away. */
.cc-card:hover .map-art.case-only .map-case-image,
.cc-card:focus-visible .map-art.case-only .map-case-image,
.cl-case:hover .map-art.case-only .map-case-image,
.cl-case:focus-within .map-art.case-only .map-case-image{
  animation-name:var(--map-motion);
  animation-play-state:running;
  filter:drop-shadow(0 18px 14px #000a) drop-shadow(0 0 16px color-mix(in srgb,var(--accent,#ac91f0) 36%,transparent)) brightness(1.08) contrast(1.06) saturate(1.08);
  transform:translateY(0) scale(1.01);
}
.map-art.dota-hero.subject-only .map-subject-frame{left:4%;width:92%;height:91%}
.map-art.dota-hero.case-only .map-case-image{width:93%;height:88%;left:3.5%;bottom:4%}
.map-art.tf2-hero.subject-only .map-subject-frame{left:8%;width:84%;height:96%;top:-2%}
.map-art.tf2-hero.subject-only .map-subject{object-position:center bottom;transform-origin:50% 90%}
.map-art.tf2-hero.case-only .map-case-image{width:92%;height:86%;left:4%;bottom:5%}
.map-art[data-motion=tf2-heavy] .map-subject{--map-motion:tf2-heavy;animation-duration:4.2s}
@keyframes tf2-heavy{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-4px) rotate(-.6deg) scale(1.016)}}
.map-art[data-motion=tf2-pyro] .map-subject{--map-motion:tf2-pyro;animation-duration:3.8s}
@keyframes tf2-pyro{0%,100%{transform:translate(0,0) rotate(0) scale(1)}35%{transform:translate(-2px,-5px) rotate(-.8deg) scale(1.014)}70%{transform:translate(2px,-2px) rotate(.6deg) scale(1.01)}}
.map-art[data-motion=tf2-spy] .map-subject{--map-motion:tf2-spy;animation-duration:4.7s}
@keyframes tf2-spy{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(3px,-6px) rotate(.7deg) scale(1.015)}}
/* Mirror the same per-card motion curve onto standalone treasure/case cards. */
.map-art.case-only[data-motion=dota-juggernaut] .map-case-image{--map-motion:dota-juggernaut;animation-duration:3.80s}
.map-art.case-only[data-motion=dota-pudge] .map-case-image{--map-motion:dota-pudge;animation-duration:4.01s}
.map-art.case-only[data-motion=dota-shadow-fiend] .map-case-image{--map-motion:dota-shadow-fiend;animation-duration:4.22s}
.map-art.case-only[data-motion=dota-crystal-maiden] .map-case-image{--map-motion:dota-crystal-maiden;animation-duration:4.43s}
.map-art.case-only[data-motion=dota-anti-mage] .map-case-image{--map-motion:dota-anti-mage;animation-duration:4.64s}
.map-art.case-only[data-motion=dota-phantom-assassin] .map-case-image{--map-motion:dota-phantom-assassin;animation-duration:4.85s}
.map-art.case-only[data-motion=dota-rubick] .map-case-image{--map-motion:dota-rubick;animation-duration:5.06s}
.map-art.case-only[data-motion=dota-axe] .map-case-image{--map-motion:dota-axe;animation-duration:5.27s}
.map-art.case-only[data-motion=dota-invoker] .map-case-image{--map-motion:dota-invoker;animation-duration:5.48s}
.map-art.case-only[data-motion=dota-faceless-void] .map-case-image{--map-motion:dota-faceless-void;animation-duration:5.69s}
.map-art.case-only[data-motion=tf2-heavy] .map-case-image{--map-motion:tf2-heavy;animation-duration:4.2s}
.map-art.case-only[data-motion=tf2-pyro] .map-case-image{--map-motion:tf2-pyro;animation-duration:3.8s}
.map-art.case-only[data-motion=tf2-spy] .map-case-image{--map-motion:tf2-spy;animation-duration:4.7s}
@media(prefers-reduced-motion:reduce){.map-art.tf2-hero .map-subject,.map-art.case-only .map-case-image{animation:none!important}}

/* TF2 and Rust: independent motion for each standalone artwork. */
 .map-art.rust-hero.subject-only .map-subject-frame{left:5%;width:90%;height:92%;top:0}
.map-art[data-motion="tf2-scout"] .map-subject,.map-art.case-only[data-motion="tf2-scout"] .map-case-image{--map-motion:pack-tf2-scout;animation-duration:4.00s}
@keyframes pack-tf2-scout{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-3px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-soldier"] .map-subject,.map-art.case-only[data-motion="tf2-soldier"] .map-case-image{--map-motion:pack-tf2-soldier;animation-duration:4.09s}
@keyframes pack-tf2-soldier{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-4px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-pyro"] .map-subject,.map-art.case-only[data-motion="tf2-pyro"] .map-case-image{--map-motion:pack-tf2-pyro;animation-duration:4.18s}
@keyframes pack-tf2-pyro{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-5px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-demoman"] .map-subject,.map-art.case-only[data-motion="tf2-demoman"] .map-case-image{--map-motion:pack-tf2-demoman;animation-duration:4.27s}
@keyframes pack-tf2-demoman{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-6px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-heavy"] .map-subject,.map-art.case-only[data-motion="tf2-heavy"] .map-case-image{--map-motion:pack-tf2-heavy;animation-duration:4.36s}
@keyframes pack-tf2-heavy{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-3px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-engineer"] .map-subject,.map-art.case-only[data-motion="tf2-engineer"] .map-case-image{--map-motion:pack-tf2-engineer;animation-duration:4.45s}
@keyframes pack-tf2-engineer{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-4px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-medic"] .map-subject,.map-art.case-only[data-motion="tf2-medic"] .map-case-image{--map-motion:pack-tf2-medic;animation-duration:4.54s}
@keyframes pack-tf2-medic{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-5px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-sniper"] .map-subject,.map-art.case-only[data-motion="tf2-sniper"] .map-case-image{--map-motion:pack-tf2-sniper;animation-duration:4.63s}
@keyframes pack-tf2-sniper{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-6px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-spy"] .map-subject,.map-art.case-only[data-motion="tf2-spy"] .map-case-image{--map-motion:pack-tf2-spy;animation-duration:4.72s}
@keyframes pack-tf2-spy{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-3px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="tf2-sentry"] .map-subject,.map-art.case-only[data-motion="tf2-sentry"] .map-case-image{--map-motion:pack-tf2-sentry;animation-duration:4.81s}
@keyframes pack-tf2-sentry{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-4px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="rust-hazmat"] .map-subject,.map-art.case-only[data-motion="rust-hazmat"] .map-case-image{--map-motion:pack-rust-hazmat;animation-duration:4.90s}
@keyframes pack-rust-hazmat{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-5px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="rust-metal-raider"] .map-subject,.map-art.case-only[data-motion="rust-metal-raider"] .map-case-image{--map-motion:pack-rust-metal-raider;animation-duration:4.99s}
@keyframes pack-rust-metal-raider{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-6px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="rust-scientist"] .map-subject,.map-art.case-only[data-motion="rust-scientist"] .map-case-image{--map-motion:pack-rust-scientist;animation-duration:5.08s}
@keyframes pack-rust-scientist{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-3px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="rust-roadsign"] .map-subject,.map-art.case-only[data-motion="rust-roadsign"] .map-case-image{--map-motion:pack-rust-roadsign;animation-duration:5.17s}
@keyframes pack-rust-roadsign{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-4px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="rust-wolf-hunter"] .map-subject,.map-art.case-only[data-motion="rust-wolf-hunter"] .map-case-image{--map-motion:pack-rust-wolf-hunter;animation-duration:5.26s}
@keyframes pack-rust-wolf-hunter{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-5px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="rust-scrap-ak"] .map-subject,.map-art.case-only[data-motion="rust-scrap-ak"] .map-case-image{--map-motion:pack-rust-scrap-ak;animation-duration:5.35s}
@keyframes pack-rust-scrap-ak{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-6px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="rust-rocket-raider"] .map-subject,.map-art.case-only[data-motion="rust-rocket-raider"] .map-case-image{--map-motion:pack-rust-rocket-raider;animation-duration:5.44s}
@keyframes pack-rust-rocket-raider{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-3px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="rust-salvaged-tools"] .map-subject,.map-art.case-only[data-motion="rust-salvaged-tools"] .map-case-image{--map-motion:pack-rust-salvaged-tools;animation-duration:5.53s}
@keyframes pack-rust-salvaged-tools{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(1px,-4px) rotate(0.5deg) scale(1.015)}}
.map-art[data-motion="rust-diving"] .map-subject,.map-art.case-only[data-motion="rust-diving"] .map-case-image{--map-motion:pack-rust-diving;animation-duration:5.62s}
@keyframes pack-rust-diving{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(-1px,-5px) rotate(-0.5deg) scale(1.015)}}
.map-art[data-motion="rust-supply-drop"] .map-subject,.map-art.case-only[data-motion="rust-supply-drop"] .map-case-image{--map-motion:pack-rust-supply-drop;animation-duration:5.71s}
@keyframes pack-rust-supply-drop{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0px,-6px) rotate(0.5deg) scale(1.015)}}
@media(prefers-reduced-motion:reduce){.map-art.rust-hero .map-subject{animation:none!important}}

/* 2026-09 standalone transparent case pack. */
.map-art[data-motion="earthshaker-echo-vault"] .map-subject{--map-motion:newcase-rise-left;animation-duration:4.35s}
.map-art[data-motion="enigma-black-hole-reliquary"] .map-subject{--map-motion:newcase-void-pulse;animation-duration:4.9s}
.map-art[data-motion="monkey-king-jingu-treasury"] .map-subject{--map-motion:newcase-royal-sway;animation-duration:4.55s}
.map-art[data-motion="phoenix-supernova-vessel"] .map-subject{--map-motion:newcase-supernova;animation-duration:4.1s}
.map-art[data-motion="slark-dark-reef-lockbox"] .map-subject{--map-motion:newcase-drift-right;animation-duration:4.7s}
.map-art[data-motion="storm-spirit-thunder-cask"] .map-subject{--map-motion:newcase-rise-right;animation-duration:4.25s}
.map-art[data-motion="techies-demolition-wagon"] .map-subject{--map-motion:newcase-bounce;animation-duration:3.8s}
.map-art[data-motion="templar-assassin-hidden-temple-cache"] .map-subject{--map-motion:newcase-royal-sway;animation-duration:4.85s}
.map-art[data-motion="terrorblade-demon-prison"] .map-subject{--map-motion:newcase-void-pulse;animation-duration:4.45s}
.map-art[data-motion="wraith-king-ostarion-crypt"] .map-subject{--map-motion:newcase-rise-left;animation-duration:5.05s}
.map-art[data-motion="furnace-smelter-stash"] .map-subject{--map-motion:newcase-supernova;animation-duration:4.3s}
.map-art[data-motion="garage-door-bunker-cache"] .map-subject{--map-motion:newcase-rise-left;animation-duration:4.95s}
.map-art[data-motion="oil-rig-locked-crate"] .map-subject{--map-motion:newcase-drift-right;animation-duration:4.6s}
.map-art[data-motion="satchel-breach-bag"] .map-subject{--map-motion:newcase-bounce;animation-duration:4.05s}
.map-art[data-motion="tool-cupboard-last-authorization"] .map-subject{--map-motion:newcase-royal-sway;animation-duration:5.15s}
.map-art[data-motion="2fort-intelligence-briefcase"] .map-subject{--map-motion:newcase-rise-right;animation-duration:4.25s}
.map-art[data-motion="australium-foundry-vault"] .map-subject{--map-motion:newcase-supernova;animation-duration:4.7s}
.map-art[data-motion="halloween-bombinomicon-chest"] .map-subject{--map-motion:newcase-void-pulse;animation-duration:4.35s}
.map-art[data-motion="mann-co-golden-key-reserve"] .map-subject{--map-motion:newcase-royal-sway;animation-duration:4.9s}
.map-art[data-motion="payload-bomb-cart-cache"] .map-subject{--map-motion:newcase-drift-right;animation-duration:4.2s}
@keyframes newcase-rise-left{0%,100%{transform:translate(0,0) rotate(-1deg) scale(1)}50%{transform:translate(-3px,-10px) rotate(1deg) scale(1.025)}}
@keyframes newcase-rise-right{0%,100%{transform:translate(0,0) rotate(1deg) scale(1)}50%{transform:translate(4px,-9px) rotate(-1deg) scale(1.022)}}
@keyframes newcase-drift-right{0%,100%{transform:translate(-3px,-2px) rotate(-1deg) scale(1)}50%{transform:translate(5px,-8px) rotate(1deg) scale(1.018)}}
@keyframes newcase-void-pulse{0%,100%{transform:translateY(-1px) scale(1)}50%{transform:translateY(-8px) scale(1.035)}}
@keyframes newcase-royal-sway{0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1)}50%{transform:translateY(-8px) rotate(1.5deg) scale(1.02)}}
@keyframes newcase-supernova{0%,100%{transform:translateY(0) rotate(0) scale(1)}45%{transform:translateY(-10px) rotate(1deg) scale(1.035)}65%{transform:translateY(-7px) rotate(-.5deg) scale(1.025)}}
@keyframes newcase-bounce{0%,100%{transform:translateY(0) rotate(-1deg)}36%{transform:translateY(-12px) rotate(1deg)}62%{transform:translateY(-5px) rotate(-.5deg)}}