.parking-animation-container{background:linear-gradient(#87ceeb 0% 60%,#90ee90 60% 100%);border-radius:10px;width:100%;height:400px;margin:40px auto;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000001a}.animation-scene{width:100%;height:100%;position:relative}.ground{background:linear-gradient(#696969 0% 80%,gold 80% 85%,#696969 85% 100%);width:100%;height:40%;position:absolute;bottom:0;left:0}.parking-meter{z-index:3;width:50px;height:140px;position:absolute;bottom:40%;left:30%}.meter-post{display:none}.meter-base{background:linear-gradient(145deg,#1a1a1a,#2c2c2c);border:2px solid #0a0a0a;border-radius:0 0 6px 6px;width:54px;height:8px;position:absolute;bottom:-4px;left:-2px;box-shadow:0 2px 8px #00000080}.meter-display{box-sizing:border-box;background:linear-gradient(145deg,#2c3e50,#34495e);border:3px solid #1a252f;border-radius:12px 12px 0 0;width:50px;height:140px;padding:8px 6px;position:absolute;bottom:0;box-shadow:0 4px 12px #0006}.meter-logo{background:linear-gradient(90deg,#e74c3c,#c0392b);border-radius:3px;width:32px;height:6px;margin:0 auto 4px;position:relative}.meter-logo:after{content:"FLOWBIRD";color:#ecf0f1;white-space:nowrap;letter-spacing:.5px;font-size:5px;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.meter-screen{background:linear-gradient(145deg,#0a0a0a,#1a1a1a);border:2px solid #333;border-radius:6px;width:36px;height:28px;margin:0 auto 6px;position:relative;box-shadow:inset 0 3px 6px #00000080}.meter-screen:after{content:"";background:linear-gradient(45deg,#06c 0%,#049 50%,#09f 100%);border-radius:3px;animation:2s ease-in-out infinite alternate screenGlow;position:absolute;inset:3px}@keyframes screenGlow{0%{opacity:.8}to{opacity:1}}.meter-buttons{flex-direction:column;align-items:center;gap:4px;margin:8px 0;display:flex}.button{background:linear-gradient(145deg,#28a745,#20c997);border:1px solid #155724;border-radius:4px;width:16px;height:8px;position:relative;box-shadow:0 2px 4px #0000004d}.button:after{content:"";background:linear-gradient(145deg,#34ce57,#28a745);border-radius:3px;position:absolute;inset:1px}.button.red{background:linear-gradient(145deg,#dc3545,#c82333);border-color:#721c24}.button.red:after{background:linear-gradient(145deg,#e74c3c,#dc3545)}.button.green{background:linear-gradient(145deg,#28a745,#20c997);border-color:#155724}.button.green:after{background:linear-gradient(145deg,#34ce57,#28a745)}.payment-slot{background:linear-gradient(90deg,#000,#1a1a1a);border:1px solid #000;border-radius:2px;width:30px;height:4px;margin:8px auto 6px;box-shadow:inset 0 2px 4px #0009}.ticket{opacity:0;background:linear-gradient(145deg,#fff,#f8f9fa);border:1px solid #dee2e6;border-radius:3px;width:20px;height:28px;transition:all .5s;position:absolute;bottom:75px;left:50%;transform:translate(-50%);box-shadow:0 3px 6px #0003}.ticket:before{content:"";background:linear-gradient(90deg,#06c,#049);border-radius:2px;height:10px;position:absolute;top:3px;left:3px;right:3px}.ticket:after{content:"";background:repeating-linear-gradient(90deg,#333 0 3px,#0000 3px 6px);height:2px;position:absolute;bottom:3px;left:3px;right:3px}.ticket-dispensing{opacity:1;animation:1.5s ease-in-out dispenseTicket}@keyframes dispenseTicket{0%{opacity:0;bottom:65px;transform:translate(-50%)scale(.8)}30%{opacity:1;transform:translate(-50%)scale(1)}70%{bottom:80px;transform:translate(-50%)scale(1)}to{opacity:1;bottom:85px;transform:translate(-50%)scale(1)}}.person{z-index:4;width:20px;height:40px;transition:all 2s ease-in-out;position:absolute;bottom:40%;left:10%}.person.walking-to-meter{animation:2s infinite walkCycle;left:25%}.person.getting-ticket{animation:1.5s ease-in-out reachForTicket;left:25%}.person.walking-to-car{animation:2s infinite walkCycleWithTicket;left:60%}.person.at-car{animation:1.5s ease-in-out placeTicket;left:60%}.person-head{background:#fdbcb4;border:1px solid #f1c0a8;border-radius:50%;width:12px;height:12px;position:absolute;top:0;left:50%;transform:translate(-50%)}.person-body{background:#3498db;border-radius:2px;width:14px;height:18px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.person-arm-left,.person-arm-right{background:#fdbcb4;border-radius:2px;width:3px;height:12px;position:absolute;top:14px}.person-arm-left{transform-origin:top;left:2px}.person-arm-right{transform-origin:top;right:2px}.person-leg-left,.person-leg-right{background:#2c3e50;border-radius:2px;width:4px;height:10px;position:absolute;bottom:0}.person-leg-left{transform-origin:top;left:5px}.person-leg-right{transform-origin:top;right:5px}.held-ticket{opacity:0;background:#fff;border:1px solid #ddd;width:6px;height:8px;transition:opacity .5s;position:absolute;top:18px;right:-2px}.held-ticket.visible{opacity:1}.car{z-index:2;justify-content:center;align-items:end;width:60px;height:40px;display:flex;position:absolute;bottom:40%;right:10%}.car svg{filter:drop-shadow(0 3px 8px #0000004d);animation:3s ease-in-out infinite carBounce}@keyframes carBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.animation-steps{z-index:5;background:#ffffffe6;border-radius:20px;gap:10px;padding:10px;font-size:12px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.step{color:#2c3e50;background:#ecf0f1;border-radius:15px;padding:5px 10px;font-weight:500;transition:all .3s}.step.active{color:#fff;background:#3498db;transform:scale(1.05)}@keyframes walkCycle{0%,to{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(0)}75%{transform:translateY(-1px)}}@keyframes walkCycleWithTicket{0%,to{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(0)}75%{transform:translateY(-1px)}}@keyframes reachForTicket{0%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(-3px)}75%{transform:translateY(-2px)}to{transform:translateY(0)}}.parking-meter .button.green:first-of-type{animation:none}.getting-ticket .parking-meter .button.green:first-of-type{animation:.5s ease-in-out .5s buttonPress}@keyframes buttonPress{0%,to{transform:scale(1)}50%{transform:scale(.9);box-shadow:inset 0 2px 4px #0000004d}}@keyframes placeTicket{0%{transform:translateY(0)}50%{transform:translateY(-2px)translate(5px)}to{transform:translateY(0)}}@media (max-width:768px){.parking-animation-container{height:300px;margin:20px auto}.animation-steps{flex-direction:column;gap:5px;font-size:10px}.step{padding:3px 8px}}@media (max-width:480px){.parking-animation-container{height:250px}.car{width:60px;height:30px}.car-body{width:60px;height:20px}.car-wheel{width:12px;height:12px}.animation-steps{display:none}}