.parking-animation-container{width:100%;height:400px;margin:40px auto;position:relative;background:linear-gradient(180deg,#87CEEB 0,#87CEEB 60%,#90EE90 0,#90EE90);border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1)}.animation-scene{position:relative;width:100%;height:100%}.ground{position:absolute;bottom:0;left:0;width:100%;height:40%;background:linear-gradient(180deg,#696969 0,#696969 80%,#FFD700 0,#FFD700 85%,#696969 0,#696969)}.parking-meter{position:absolute;left:30%;bottom:40%;width:50px;height:140px;z-index:3}.meter-post{display:none}.meter-base{width:54px;height:8px;background:linear-gradient(145deg,#1a1a1a,#2c2c2c);border-radius:0 0 6px 6px;position:absolute;bottom:-4px;left:-2px;border:2px solid #0a0a0a;box-shadow:0 2px 8px rgba(0,0,0,.5)}.meter-display{width:50px;height:140px;background:linear-gradient(145deg,#2c3e50,#34495e);border-radius:12px 12px 0 0;position:absolute;bottom:0;border:3px solid #1a252f;box-shadow:0 4px 12px rgba(0,0,0,.4);padding:8px 6px;box-sizing:border-box}.meter-logo{width:32px;height:6px;background:linear-gradient(90deg,#e74c3c,#c0392b);margin:0 auto 4px;border-radius:3px;position:relative}.meter-logo:after{content:"FLOWBIRD";position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:5px;color:#ecf0f1;font-weight:700;white-space:nowrap;letter-spacing:.5px}.meter-screen{width:36px;height:28px;background:linear-gradient(145deg,#0a0a0a,#1a1a1a);margin:0 auto 6px;border-radius:6px;border:2px solid #333;position:relative;box-shadow:inset 0 3px 6px rgba(0,0,0,.5)}.meter-screen:after{content:"";position:absolute;top:3px;left:3px;right:3px;bottom:3px;background:linear-gradient(45deg,#0066cc,#004499 50%,#0099ff);border-radius:3px;animation:screenGlow 2s ease-in-out infinite alternate}@keyframes screenGlow{0%{opacity:.8}to{opacity:1}}.meter-buttons{display:flex;flex-direction:column;align-items:center;gap:4px;margin:8px 0}.button{width:16px;height:8px;background:linear-gradient(145deg,#28a745,#20c997);border-radius:4px;border:1px solid #155724;box-shadow:0 2px 4px rgba(0,0,0,.3);position:relative}.button:after{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;background:linear-gradient(145deg,#34ce57,#28a745);border-radius:3px}.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{width:30px;height:4px;background:linear-gradient(90deg,#000,#1a1a1a);margin:8px auto 6px;border-radius:2px;border:1px solid #000;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}.ticket{position:absolute;width:20px;height:28px;background:linear-gradient(145deg,#ffffff,#f8f9fa);border:1px solid #dee2e6;bottom:75px;left:50%;transform:translateX(-50%);opacity:0;transition:all .5s ease;border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.2)}.ticket:before{top:3px;height:10px;background:linear-gradient(90deg,#0066cc,#004499);border-radius:2px}.ticket:after,.ticket:before{content:"";position:absolute;left:3px;right:3px}.ticket:after{bottom:3px;height:2px;background:repeating-linear-gradient(90deg,#333,#333 3px,transparent 0,transparent 6px)}.ticket-dispensing{opacity:1;animation:dispenseTicket 1.5s ease-in-out}@keyframes dispenseTicket{0%{bottom:65px;opacity:0;transform:translateX(-50%) scale(.8)}30%{opacity:1;transform:translateX(-50%) scale(1)}70%{bottom:80px;transform:translateX(-50%) scale(1)}to{bottom:85px;opacity:1;transform:translateX(-50%) scale(1)}}.person{position:absolute;bottom:40%;left:10%;width:20px;height:40px;z-index:4;transition:all 2s ease-in-out}.person.walking-to-meter{left:25%;animation:walkCycle 2s infinite}.person.getting-ticket{left:25%;animation:reachForTicket 1.5s ease-in-out}.person.walking-to-car{left:60%;animation:walkCycleWithTicket 2s infinite}.person.at-car{left:60%;animation:placeTicket 1.5s ease-in-out}.person-head{width:12px;height:12px;background:#fdbcb4;border-radius:50%;top:0;border:1px solid #f1c0a8}.person-body,.person-head{position:absolute;left:50%;transform:translateX(-50%)}.person-body{width:14px;height:18px;background:#3498db;top:12px;border-radius:2px}.person-arm-left,.person-arm-right{width:3px;height:12px;background:#fdbcb4;position:absolute;top:14px;border-radius:2px}.person-arm-left{left:2px;transform-origin:top}.person-arm-right{right:2px;transform-origin:top}.person-leg-left,.person-leg-right{width:4px;height:10px;background:#2c3e50;position:absolute;bottom:0;border-radius:2px}.person-leg-left{left:5px;transform-origin:top}.person-leg-right{right:5px;transform-origin:top}.held-ticket{position:absolute;width:6px;height:8px;background:white;border:1px solid #ddd;top:18px;right:-2px;opacity:0;transition:opacity .5s ease}.held-ticket.visible{opacity:1}.car{position:absolute;right:10%;bottom:40%;width:60px;height:40px;z-index:2;display:flex;align-items:end;justify-content:center}.car svg{filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));animation:carBounce 3s ease-in-out infinite}@keyframes carBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.animation-steps{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:10px;background:rgba(255,255,255,.9);padding:10px;border-radius:20px;font-size:12px;z-index:5}.step{padding:5px 10px;border-radius:15px;background:#ecf0f1;color:#2c3e50;transition:all .3s ease;font-weight:500}.step.active{background:#3498db;color:white;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:buttonPress .5s ease-in-out .5s}@keyframes buttonPress{0%,to{transform:scale(1)}50%{transform:scale(.9);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}}@keyframes placeTicket{0%{transform:translateY(0)}50%{transform:translateY(-2px) translateX(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}}