/* Looping planet-city backdrop with tracked KC signage, live rain and lightning. Decorative only; never takes pointer input. */
.city{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#020305 url("/arrival/media/kc-city-poster.jpg") center/cover;opacity:0;transition:opacity 1.6s cubic-bezier(.2,.65,.3,1)}
.city-on .city{opacity:1}
.city canvas{position:absolute;inset:0;width:100%;height:100%}
/* Film and signage share one plate so parallax moves them together and the signs stay on their towers. */
.city-plate{position:absolute;inset:-4%;transform:translate3d(var(--cx,0),var(--cy,0),0) scale(var(--cz,1));transition:transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform}
.city-plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(var(--cb,.78)) hue-rotate(var(--ch,0deg))}
.city-plate .city-brand{mix-blend-mode:screen}
/* Scrim keeps copy legible over the brightest frames. */
.city-scrim{position:absolute;inset:0;background:linear-gradient(180deg,#02030566 0,#02030522 35%,#020305aa 100%),radial-gradient(ellipse at 50% 45%,transparent 40%,#020305b0 100%)}
.city-flash{position:absolute;inset:0;background:radial-gradient(ellipse at var(--fx,50%) 0,#dceeffcc,#9fc6ff33 45%,transparent 75%);opacity:0;mix-blend-mode:screen}
.city-flash.strike{animation:city-strike .9s ease-out}
@keyframes city-strike{0%{opacity:0}6%{opacity:.85}14%{opacity:.15}22%{opacity:.7}100%{opacity:0}}
/* The city replaces the void sculpture; its fallback art stays hidden while the city runs. */
.city-on .world-stage{display:none}
.city-on .chapter{background:transparent}
.city-on .masthead{background:linear-gradient(#020305cc,#02030500)}
.motion-paused .city-plate{transition:none}
@media(prefers-reduced-motion:reduce){.city,.city-plate{transition:none}.city-flash{display:none}}