.hero .hero-city { min-width: 0; min-height: 380px; overflow: visible; display: block; place-items: normal; }
.city-scene { position: relative; width: 100%; }
.city-map { width: 100%; height: auto; display: block; overflow: visible; }
.city-note { position: absolute; z-index: 1; top: 6%; left: 4%; display: inline-flex; align-items: center; gap: 8px; max-width: 70%; padding: 9px 13px; border: 1px solid #d9e1cd; border-radius: 30px; background: #fafbf3; color: #527046; font-size: 11px; font-weight: 650; transform: rotate(-5deg); }
.city-note > span { width: 6px; height: 6px; background: #8d9f62; border-radius: 50%; flex-shrink: 0; }
.city-route-base { stroke: #b1bf98; stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.city-route-travel { stroke: #6e8846; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: city-draw-route 12s ease-in-out infinite; }
.city-traveller, .city-traveller-halo { offset-path: path('M111 302C111 263 152 239 193 239S260 279 294 248S349 192 389 192S418 128 367 112S326 111 326 88'); animation: city-follow-route 12s ease-in-out infinite; }
.city-stop { transform-origin: var(--stop-x) var(--stop-y); }
.city-stop-ring { opacity: 0; transform-origin: var(--stop-x) var(--stop-y); }
.city-stop-music { animation: city-music-stop 12s ease-in-out infinite; }
.city-stop-art { animation: city-art-stop 12s ease-in-out infinite; }
.city-stop-meet { animation: city-meet-stop 12s ease-in-out infinite; }
.city-stop-music .city-stop-ring { animation: city-music-ring 12s ease-in-out infinite; }
.city-stop-art .city-stop-ring { animation: city-art-ring 12s ease-in-out infinite; }
.city-stop-meet .city-stop-ring { animation: city-meet-ring 12s ease-in-out infinite; }
.city-ticket { transform-origin: 398px 339px; animation: city-ticket-float 6s ease-in-out infinite; }
.city-ticket-label { fill: #7a8574; font-size: 9px; letter-spacing: 1px; font-weight: 650; }
.city-ticket-title { fill: #213d34; font-size: 20px; letter-spacing: -.4px; font-weight: 650; }
.city-plan { opacity: 0; }
.city-plan-music { opacity: 1; animation: city-music-label 12s linear infinite; }
.city-plan-art { animation: city-art-label 12s linear infinite; }
.city-plan-meet { animation: city-meet-label 12s linear infinite; }
.city-spark { animation: city-spark 4s ease-in-out infinite; }
.city-daylight { animation: city-daylight 24s ease-in-out infinite; }
.city-sun { transform-origin: 0 0; animation: city-sun-turn 36s linear infinite; }
.city-cloud { animation: city-cloud-drift 17s ease-in-out infinite; }
.city-window { fill: #c7cbb6; animation: city-window-glow 24s ease-in-out infinite; }
.city-window-late { animation-delay: -6s; }
.city-ripple { animation: city-water-flow 4s ease-in-out infinite; }
.city-ripple-late { animation-delay: -2s; }
.city-tree { animation: city-tree-sway 6s ease-in-out infinite; }
.city-tree-late { animation-delay: -3s; }
.city-music-note { opacity: 0; animation: city-music-notes 12s ease-out infinite; }
.city-music-note-two { animation-name: city-music-notes-late; }
.city-art-confetti { opacity: 0; transform-origin: 389px 169px; animation: city-art-celebration 12s ease-out infinite; }
.city-greeting { opacity: 0; transform-origin: 8px 16px; animation: city-greeting 12s ease-out infinite; }
.city-greeting-two { animation-name: city-greeting-late; }
.city-equalizer rect { transform-box: fill-box; transform-origin: center bottom; animation: city-equalizer .85s ease-in-out infinite alternate; }
.city-equalizer rect:nth-child(2) { animation-delay: -.4s; }
.city-equalizer rect:nth-child(3) { animation-delay: -.2s; }
.city-equalizer rect:nth-child(4) { animation-delay: -.6s; }
.city-palette circle { transform-box: fill-box; transform-origin: center; animation: city-paint-pop 3s ease-in-out infinite; }
.city-palette circle:nth-child(2) { animation-delay: -.5s; }
.city-palette circle:nth-child(3) { animation-delay: -1s; }
.city-chat-dots circle { animation: city-chat 1.8s ease-in-out infinite; }
.city-chat-dots circle:nth-child(2) { animation-delay: -.3s; }
.city-chat-dots circle:nth-child(3) { animation-delay: -.6s; }
.city-scene-footer { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 12px; margin: -14px 3% 0 4%; color: var(--muted); font-size: 11px; }
.city-motion-toggle { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; padding: 8px; border: 1px solid #d9dfd1; background: transparent; border-radius: 50%; color: #567046; }
.city-motion-toggle svg { width: 18px; height: 18px; }
.city-motion-toggle .city-play-icon, .city-motion-toggle[aria-pressed="true"] .city-pause-icon { display: none; }
.city-motion-toggle[aria-pressed="true"] .city-play-icon { display: block; }
.hero-city[data-motion="paused"] .city-scene * { animation-play-state: paused; }
@media (hover: hover) { .city-motion-toggle:hover { background: #e8eddf; border-color: #b6c59c; } }
@keyframes city-draw-route { 0%, 5% { stroke-dashoffset: 1; opacity: 1; } 23%, 30% { stroke-dashoffset: .78; } 51%, 59% { stroke-dashoffset: .34; } 83%, 93% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes city-follow-route { 0%, 5% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 23%, 30% { offset-distance: 22%; } 51%, 59% { offset-distance: 66%; } 83%, 93% { offset-distance: 100%; opacity: 1; } 98%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes city-music-stop { 0%, 17%, 36%, 100% { transform: translateY(0); } 23%, 30% { transform: translateY(-6px); } }
@keyframes city-art-stop { 0%, 45%, 65%, 100% { transform: translateY(0); } 51%, 59% { transform: translateY(-6px); } }
@keyframes city-meet-stop { 0%, 76%, 100% { transform: translateY(0); } 83%, 93% { transform: translateY(-6px); } }
@keyframes city-music-ring { 0%, 17%, 36%, 100% { opacity: 0; transform: scale(.85); } 23%, 30% { opacity: .7; transform: scale(1.1); } }
@keyframes city-art-ring { 0%, 45%, 65%, 100% { opacity: 0; transform: scale(.85); } 51%, 59% { opacity: .7; transform: scale(1.1); } }
@keyframes city-meet-ring { 0%, 76%, 100% { opacity: 0; transform: scale(.85); } 83%, 93% { opacity: .7; transform: scale(1.1); } }
@keyframes city-music-label { 0%, 34%, 98%, 100% { opacity: 1; transform: translateY(0); } 38%, 94% { opacity: 0; transform: translateY(-4px); } }
@keyframes city-art-label { 0%, 34%, 68%, 100% { opacity: 0; transform: translateY(4px); } 38%, 64% { opacity: 1; transform: translateY(0); } }
@keyframes city-meet-label { 0%, 64%, 98%, 100% { opacity: 0; transform: translateY(4px); } 68%, 94% { opacity: 1; transform: translateY(0); } }
@keyframes city-ticket-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(0) translateY(-5px); } }
@keyframes city-spark { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes city-daylight { 0%, 25%, 100% { fill: #fafbf3; } 58%, 75% { fill: #f5f1e5; } }
@keyframes city-sun-turn { to { transform: rotate(360deg); } }
@keyframes city-cloud-drift { 0%, 100% { transform: translate(-9px, 0); } 50% { transform: translate(13px, -3px); } }
@keyframes city-window-glow { 0%, 32%, 100% { fill: #c7cbb6; } 48%, 76% { fill: #edcd89; } }
@keyframes city-water-flow { 0%, 100% { opacity: .3; transform: translateY(-2px); } 50% { opacity: .8; transform: translateY(2px); } }
@keyframes city-tree-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes city-music-notes { 0%, 17% { opacity: 0; transform: translate(0, 5px) rotate(-10deg); } 22%, 27% { opacity: .85; } 36%, 100% { opacity: 0; transform: translate(-5px, -17px) rotate(8deg); } }
@keyframes city-music-notes-late { 0%, 22% { opacity: 0; transform: translate(0, 5px) rotate(9deg); } 27%, 31% { opacity: .85; } 39%, 100% { opacity: 0; transform: translate(5px, -20px) rotate(-8deg); } }
@keyframes city-art-celebration { 0%, 45% { opacity: 0; transform: scale(.6) rotate(-8deg); } 51%, 58% { opacity: .9; transform: scale(1) rotate(0); } 66%, 100% { opacity: 0; transform: scale(1.15) rotate(5deg); } }
@keyframes city-greeting { 0%, 76% { opacity: 0; transform: translateY(6px) scale(.7); } 82%, 91% { opacity: 1; transform: translateY(0) scale(1); } 98%, 100% { opacity: 0; transform: translateY(-5px) scale(1); } }
@keyframes city-greeting-late { 0%, 81% { opacity: 0; transform: translateY(6px) scale(.7); } 86%, 93% { opacity: 1; transform: translateY(0) scale(1); } 99%, 100% { opacity: 0; transform: translateY(-5px) scale(1); } }
@keyframes city-equalizer { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes city-paint-pop { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.2); } }
@keyframes city-chat { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
@media (max-width: 1050px) {
  .hero .hero-city { min-height: 300px; }
  .city-note { font-size: 10px; padding: 7px 10px; }
  .city-scene-footer { font-size: 10px; }
}
@media (max-width: 720px) {
  .hero .hero-city { display: block; min-height: 0; margin-top: -5px; }
  .city-scene { width: 290px; max-width: 100%; margin: auto; }
  .city-note { font-size: 8px; padding: 5px 8px; }
  .city-map { margin-top: -8px; }
  .city-scene-footer { margin: -14px 0 0; font-size: 10px; }
  .city-motion-toggle { width: 44px; height: 44px; }
  .hero:has(.hero-city) { gap: 8px; padding-bottom: 20px; }
}
.android-app .hero .hero-city { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-city .city-scene * { animation: none !important; }
  .city-route-travel { stroke-dashoffset: 0; }
  .city-traveller, .city-traveller-halo { display: none; }
  .city-motion-toggle { display: none; }
}