/* ============ The Crate ============ */
.crate-svg { width: 100%; height: auto; overflow: visible; }

/* idle: a two-frame bob, like a sprite */
.crate-idle .crate-svg { animation: crate-bob 1.4s steps(2) infinite; }
@keyframes crate-bob { 50% { transform: translateY(-4px); } }

/* sealed lock rattles when you poke it */
.crate-lock { transform-box: fill-box; transform-origin: 50% 0; }
.crate-svg.is-sealed:hover .crate-lock,
.is-rattling .crate-lock { animation: rattle .5s steps(6); }
.is-rattling .crate-svg { animation: shake .4s steps(4); }
@keyframes rattle { 20% { transform: rotate(-12deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.is-shaking .crate-svg { animation: shake .4s steps(4); }

/* bags drop in */
.crate-bag.is-new { animation: bag-drop .45s steps(5) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes bag-drop { from { transform: translateY(-70px); opacity: 0; } }
.crate-bag { transform-box: view-box; }

/* stickers slap on */
.crate-sticker { transform-box: fill-box; }

/* gold / platinum sparkles */
.crate-spark { animation: blink 1.2s steps(2) infinite; animation-delay: calc(var(--i) * -.37s); }
[data-tier="gold"] .crate-spark { stroke: #fff3c4; }