/* ============================================================
   GameTeam — Minecraft mob & world animations
   Pixel-art creatures + game machines, drawn in CSS.
   Everything is gated behind (prefers-reduced-motion:no-preference)
   and paused off-screen via a .paused class toggled in JS.
   ============================================================ */

/* ============================================================
   WORLD BAND SCENE — sky, ground, trees, clouds, stars
   (restored: these lived in the old page-voxel.css)
   ============================================================ */
.scene { position: relative; height: 150px; overflow: hidden; image-rendering: pixelated; }
.scene-sky { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--game-glow)); opacity: 0.6; }
.scene-stars i { position: absolute; width: 2px; height: 2px; background: var(--text); opacity: .4; }
@media (prefers-reduced-motion: no-preference) { .scene-stars i { animation: twk 3s infinite; } }
@keyframes twk { 0%,100% { opacity: .2; } 50% { opacity: .7; } }
.scene-cloud { position: absolute; height: 7px; background: #fff; opacity: .14; }
.scene-cloud::before { content: ''; position: absolute; left: 7px; top: -7px; right: 7px; height: 7px; background: #fff; }
.scene-tree { position: absolute; bottom: 30px; width: 30px; height: 50px; z-index: 1; }
.scene-tree .trunk { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 7px; height: 18px; background: #5a3d22; }
.scene-tree .leaves { position: absolute; left: 0; bottom: 14px; width: 30px; height: 30px; background: var(--game); box-shadow: inset -3px -3px 0 rgba(0,0,0,.3), inset 3px 3px 0 rgba(255,255,255,.12); }
.scene-ground { position: absolute; left: -50px; right: -50px; bottom: 0; height: 32px; background: #3a2a18; box-shadow: inset 0 4px 0 var(--game); z-index: 1; }
.scene .cube-wrap { bottom: 30px; z-index: 3; }

/* ---- base mob + walk cycle ---- */
.mob { position: absolute; bottom: 30px; image-rendering: pixelated; z-index: 3; }
.mob .leg { position: absolute; bottom: 0; transform-origin: top center; }
@media (prefers-reduced-motion: no-preference) {
  .mob .l-a { animation: legA .46s ease-in-out infinite; }
  .mob .l-b { animation: legB .46s ease-in-out infinite; }
}
@keyframes legA { 0%,100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } }
@keyframes legB { 0%,100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
@keyframes walkR { 0% { left: -12%; } 100% { left: 112%; } }
@keyframes walkL { 0% { left: 112%; } 100% { left: -12%; } }

/* ---- CREEPER (creeps in, white pre-explosion flash, retreats) ---- */
.creeper { width: 26px; height: 42px; }
.creeper .body { position: absolute; top: 0; left: 2px; width: 22px; height: 33px; background: #73bf52; box-shadow: inset -5px -6px 0 #4f9636, inset 4px 4px 0 #93d873; }
.creeper .eye { position: absolute; width: 6px; height: 6px; background: #10240f; top: 8px; z-index: 2; }
.creeper .eye.l { left: 5px; } .creeper .eye.r { right: 5px; }
.creeper .m { position: absolute; background: #10240f; z-index: 2; }
.creeper .m1 { top: 14px; left: 10px; width: 6px; height: 8px; }
.creeper .m2 { top: 21px; left: 6px; width: 5px; height: 8px; }
.creeper .m3 { top: 21px; right: 6px; width: 5px; height: 8px; }
.creeper .leg { width: 7px; height: 9px; background: #5aa33f; box-shadow: inset 0 -3px 0 #4f9636; }
.creeper .l-a { left: 3px; } .creeper .l-b { right: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .creeper { animation: creepMove 13s ease-in-out infinite; }
  .creeper .body { animation: creepFlash 13s ease-in-out infinite; }
}
@keyframes creepMove { 0% { left: 104%; } 26% { left: 58%; } 34%,45% { left: 55%; } 62% { left: 104%; } 100% { left: 104%; } }
@keyframes creepFlash {
  0%,33% { filter: none; transform: scale(1); }
  36% { filter: brightness(2.6) saturate(.4); transform: scale(1.08); }
  39% { filter: none; transform: scale(1); }
  42% { filter: brightness(2.6) saturate(.4); transform: scale(1.12); }
  45% { filter: none; transform: scale(1); }
  100% { filter: none; }
}

/* ---- PIG (trots across) ---- */
.pig { width: 38px; height: 25px; }
.pig .body { position: absolute; top: 0; left: 0; width: 32px; height: 17px; background: #e89aa6; box-shadow: inset -5px -5px 0 #c97784, inset 3px 3px 0 #f3bcc4; }
.pig .ear { position: absolute; top: -3px; left: 22px; width: 6px; height: 6px; background: #d9818f; }
.pig .snout { position: absolute; top: 5px; left: 30px; width: 8px; height: 9px; background: #dd8b98; }
.pig .snout::before, .pig .snout::after { content: ''; position: absolute; top: 3px; width: 2px; height: 3px; background: #7e424c; }
.pig .snout::before { left: 1px; } .pig .snout::after { right: 1px; }
.pig .leg { width: 6px; height: 9px; background: #d2737f; }
.pig .l-a { left: 4px; } .pig .l-b { left: 20px; }
@media (prefers-reduced-motion: no-preference) { .pig { animation: walkR 19s linear infinite; } }

/* ---- SKELETON (walks left, carries a bow) ---- */
.skeleton { width: 26px; height: 42px; transform: scaleX(-1); }
.skeleton .skull { position: absolute; top: 0; left: 4px; width: 18px; height: 14px; background: #dadcd6; box-shadow: inset -4px -4px 0 #abaea8; }
.skeleton .skull i { position: absolute; top: 6px; width: 4px; height: 5px; background: #23251f; }
.skeleton .skull i.l { left: 3px; } .skeleton .skull i.r { right: 3px; }
.skeleton .torso { position: absolute; top: 14px; left: 8px; width: 10px; height: 14px; background: #c7cac4; box-shadow: inset -3px 0 0 #9a9d97; }
.skeleton .arm { position: absolute; top: 15px; width: 4px; height: 13px; background: #cdd0ca; }
.skeleton .arm.l { left: 4px; } .skeleton .arm.r { right: 4px; }
.skeleton .bow { position: absolute; top: 12px; right: 1px; width: 8px; height: 20px; border: 2px solid #7a5a2e; border-left: 0; border-radius: 0 11px 11px 0; }
.skeleton .leg { width: 5px; height: 12px; background: #cbcec8; }
.skeleton .l-a { left: 7px; } .skeleton .l-b { right: 7px; }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: walkL 24s linear infinite; } }

/* ---- ZOMBIE (arms out, shambling) ---- */
.zombie { width: 26px; height: 42px; }
.zombie .head { position: absolute; top: 0; left: 4px; width: 18px; height: 15px; background: #5f8a4a; box-shadow: inset -4px -4px 0 #45683a, inset 3px 3px 0 #6f9b58; }
.zombie .head i { position: absolute; top: 7px; width: 4px; height: 4px; background: #16361a; }
.zombie .head i.l { left: 3px; } .zombie .head i.r { right: 3px; }
.zombie .torso { position: absolute; top: 15px; left: 6px; width: 14px; height: 15px; background: #2f6f6a; box-shadow: inset -4px 0 0 #224f4b; }
.zombie .arm { position: absolute; top: 17px; width: 12px; height: 5px; background: #5f8a4a; box-shadow: inset 0 -2px 0 #45683a; }
.zombie .arm.l { left: -7px; } .zombie .arm.r { left: 19px; }
.zombie .leg { width: 6px; height: 12px; background: #3a4f8a; }
.zombie .l-a { left: 6px; } .zombie .l-b { right: 6px; }
@media (prefers-reduced-motion: no-preference) { .zombie { animation: walkR 28s linear infinite, shamble 1.2s ease-in-out infinite; } }
@keyframes shamble { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

/* pause mobs when the world strip is off-screen */
.scene.paused .mob, .scene.paused .mob * { animation-play-state: paused !important; }

/* ============================================================
   ENDER DRAGON — flies across the final CTA sky
   ============================================================ */
.mc-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mc-dragon { position: absolute; top: 16%; left: -22%; width: 150px; height: 74px; image-rendering: pixelated; }
.mc-dragon .body { position: absolute; top: 30px; left: 36px; width: 74px; height: 16px; background: #16161b; border-radius: 3px; box-shadow: inset 0 -4px 0 #050507, inset 0 3px 0 #2a2a33; }
.mc-dragon .tail { position: absolute; top: 32px; left: 0; width: 42px; height: 11px; background: #16161b; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.mc-dragon .neck { position: absolute; top: 26px; left: 98px; width: 26px; height: 12px; background: #16161b; transform: rotate(-14deg); }
.mc-dragon .head { position: absolute; top: 15px; left: 114px; width: 30px; height: 20px; background: #1a1a20; border-radius: 2px; box-shadow: inset 0 -3px 0 #050507; }
.mc-dragon .head .eye { position: absolute; top: 5px; left: 6px; width: 8px; height: 5px; background: #c061f0; box-shadow: 0 0 10px #b14ee8; }
.mc-dragon .head .jaw { position: absolute; bottom: -4px; left: 4px; width: 20px; height: 5px; background: #2a2a33; }
.mc-dragon .wing { position: absolute; left: 46px; width: 58px; height: 36px; background: #202028; }
.mc-dragon .wing.top { top: -8px; clip-path: polygon(0 100%, 48% 0, 100% 66%, 58% 58%); transform-origin: bottom left; }
.mc-dragon .wing.bot { top: 30px; clip-path: polygon(0 0, 48% 100%, 100% 34%, 58% 42%); transform-origin: top left; }
@media (prefers-reduced-motion: no-preference) {
  .mc-dragon { animation: dragonFly 17s linear infinite; }
  .mc-dragon .wing.top { animation: flapT 1.1s ease-in-out infinite; }
  .mc-dragon .wing.bot { animation: flapB 1.1s ease-in-out infinite; }
}
@keyframes dragonFly { 0% { transform: translate(0,0); } 50% { transform: translate(62vw,-18px); } 100% { transform: translate(128vw,0); } }
@keyframes flapT { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(15deg); } }
@keyframes flapB { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(-15deg); } }
.mc-sky.paused .mc-dragon, .mc-sky.paused .mc-dragon * { animation-play-state: paused !important; }

/* ============================================================
   FURNACE — instant-setup smelting (flame + progress arrow)
   ============================================================ */
.mc-furnace { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 9px; }
.tile:has(.mc-furnace) { display: flex; flex-direction: column; }
.mc-furnace .slot { width: 30px; height: 30px; background: #2b2b31; box-shadow: inset 2px 2px 0 #3c3c44, inset -2px -2px 0 #161619; display: grid; place-items: center; }
.mc-furnace .grass { width: 15px; height: 15px; background: #73bf52; box-shadow: inset 0 -5px 0 #6a4a2c, inset 0 2px 0 #93d873; }
.mc-furnace .chip { width: 15px; height: 11px; background: #7ad0e8; box-shadow: inset -3px -3px 0 #4aa3c0; opacity: 0; }
.mc-furnace .arrow { position: relative; width: 46px; height: 14px; }
.mc-furnace .arrow .bg, .mc-furnace .arrow .fl { position: absolute; top: 0; left: 0; height: 100%; clip-path: polygon(0 36%,66% 36%,66% 12%,100% 50%,66% 88%,66% 64%,0 64%); }
.mc-furnace .arrow .bg { width: 100%; background: #23232a; }
.mc-furnace .arrow .fl { width: 0; background: var(--primary); }
.mc-furnace .flame { width: 13px; height: 15px; border-radius: 2px 2px 1px 1px; background: radial-gradient(circle at 50% 75%, #ffe26b, #ff8a1e 55%, #ff5a1e 76%, transparent 82%); }
@media (prefers-reduced-motion: no-preference) {
  .mc-furnace .arrow .fl { animation: smelt 3.2s ease-in-out infinite; }
  .mc-furnace .chip { animation: outPop 3.2s ease-in-out infinite; }
  .mc-furnace .flame { animation: flicker .4s ease-in-out infinite alternate; }
}
@keyframes smelt { 0% { width: 0; } 70% { width: 100%; } 100% { width: 100%; } }
@keyframes outPop { 0%,58% { opacity: 0; transform: scale(.5); } 74% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
@keyframes flicker { from { transform: scaleY(.85); opacity: .85; } to { transform: scaleY(1.2); opacity: 1; } }

/* ============================================================
   MINECART ON RAILS — under the how-it-works steps
   ============================================================ */
.flow { position: relative; }
.mc-rail { position: absolute; left: 0; right: 0; bottom: -28px; height: 14px; z-index: 0; pointer-events: none; }
.mc-rail .ties { position: absolute; left: 0; right: 0; top: 8px; height: 4px; background: repeating-linear-gradient(90deg, #7a5a36 0 4px, transparent 4px 13px); opacity: .55; }
.mc-rail .rail { position: absolute; left: 0; right: 0; height: 2px; background: #9aa0ab; opacity: .45; }
.mc-rail .rail.a { top: 4px; } .mc-rail .rail.b { top: 11px; }
.mc-cart { position: absolute; bottom: -32px; left: -8%; width: 24px; height: 18px; z-index: 1; }
.mc-cart .car { position: absolute; top: 0; left: 0; right: 0; height: 13px; background: #b6bcc6; box-shadow: inset -4px -4px 0 #7c828d, inset 4px 3px 0 #d6dbe2; border-radius: 2px 2px 0 0; }
.mc-cart .car::after { content: ''; position: absolute; inset: 3px 3px 0; background: #5a3d22; box-shadow: inset 0 2px 0 #3a2714; }
.mc-cart .w { position: absolute; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: #2a2a30; box-shadow: inset -2px -2px 0 #45454e; }
.mc-cart .w1 { left: 2px; } .mc-cart .w2 { right: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .mc-cart { animation: cartRoll 7s linear infinite; }
  .mc-cart .w { animation: spin .35s linear infinite; }
}
@keyframes cartRoll { 0% { left: -8%; } 100% { left: 104%; } }
@keyframes spin { to { transform: rotate(360deg); } }