.city-logo-reveal{position:relative;display:block;width:min(260px,70vw);margin:0 auto;isolation:isolate}
.city-logo-reveal>img{display:block!important;width:100%!important;height:auto!important;margin:0!important;object-fit:contain;position:relative;z-index:2}
.city-logo-reveal.is-playing>img{animation:city-logo-fill 4s ease both}
.city-logo-reveal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;opacity:0}
.city-logo-reveal.is-playing svg{animation:city-logo-outline 4s ease both}
.city-logo-reveal::before{content:"";position:absolute;inset:-25% -35%;background:conic-gradient(from 65deg at 50% 55%,transparent 0deg,#b6dfff66 15deg,transparent 35deg,transparent 165deg,#789ff077 185deg,transparent 205deg);filter:blur(12px);opacity:0;pointer-events:none;z-index:0}
.city-logo-reveal.is-playing::before{animation:city-logo-rays 4s ease both}
.city-logo-reveal::after{content:"";position:absolute;left:-25%;right:-25%;top:82%;height:2px;background:linear-gradient(90deg,transparent,#789ff0,#fff,#789ff0,transparent);box-shadow:0 0 10px #789ff0,0 0 22px #176de5;opacity:0;pointer-events:none;z-index:4}
.city-logo-reveal.is-playing::after{animation:city-logo-streak 4s ease both}
@keyframes city-logo-outline{0%{opacity:0;clip-path:inset(0 100% 0 0)}10%{opacity:1}35%{opacity:1;clip-path:inset(0 0 0 0)}58%,100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes city-logo-fill{0%,23%{opacity:0}52%{opacity:1}100%{opacity:1}}
@keyframes city-logo-rays{0%,25%{opacity:0;transform:scale(.6) rotate(-8deg)}43%{opacity:.85;transform:scale(1.12) rotate(0deg)}65%,100%{opacity:0;transform:scale(1.3) rotate(8deg)}}
@keyframes city-logo-streak{0%,58%{opacity:0;transform:translateX(-25%) scaleX(.1)}68%{opacity:1;transform:translateX(0) scaleX(1)}84%,100%{opacity:0;transform:translateX(25%) scaleX(.2)}}
@media(prefers-reduced-motion:reduce){.city-logo-reveal.is-playing>img{animation:none}.city-logo-reveal svg,.city-logo-reveal::before,.city-logo-reveal::after{display:none}}