/* CSS atmosphere also supplies the fallback if the engine cannot load. */
#street-engine { position:absolute; inset:0; z-index:1; outline-offset:-5px; }
#street-engine:not(.ready) { pointer-events:none; visibility:hidden; }
#street-engine canvas { display:block; }
.engine-ready .street-world { z-index:2; animation:none; }
.engine-ready .street-art { visibility:hidden; }
.engine-ready #stray-art { visibility:hidden; }
.engine-ready .stray-cat { transform:translate(-50%,-100%); transition:none; filter:none; opacity:1; }
.engine-ready .stray-cat::before { display:none; }
#walk-hint { position:absolute; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:6; color:#c7c6b19e; font-size:10px; letter-spacing:.5px; white-space:nowrap; pointer-events:none; margin:0; }
#street-snack { margin-left:22px; color:#b4c1bd; }
@media(max-width:650px) { #walk-hint span { display:none; } #walk-hint { font-size:9px; } #street-snack { margin-left:12px; font-size:10px; } }
.street-world {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: street-camera 18s ease-in-out infinite alternate;
}
@keyframes street-camera {
  from { transform: scale(1.025) translate(-.6%, -.25%); }
  to { transform: scale(1.055) translate(.6%, .35%); }
}

/* Short rain streaks move as two repeated sheets, rather than repainting a
   full-screen background every frame. One tile of overscan hides the seam. */
.street-rain {
  inset: -240px -20px 0;
  background: url('./assets/rain.svg') repeat;
  background-size: 240px 240px;
  opacity: .48;
  animation: street-rain-near 1.25s linear infinite;
}
.street-rain::after {
  inset: -360px 0 0;
  background: url('./assets/rain.svg') 90px 45px / 360px 360px repeat;
  opacity: .45;
  animation: street-rain-far 2.8s linear infinite;
}
@keyframes street-rain-near { to { transform: translateY(240px); } }
@keyframes street-rain-far { to { transform: translateY(360px); } }
.street-mist {
  inset: 38% -10% 12%;
  background: radial-gradient(ellipse at 65% 65%, #b6c8cb24, transparent 48%);
  animation: street-fog 13s ease-in-out infinite alternate;
}
@keyframes street-fog {
  from { transform: translateX(5%); opacity: .4; }
  to { transform: translateX(-7%); opacity: .9; }
}
.street-steam {
  position: absolute;
  left: 19%;
  top: 53%;
  width: clamp(65px, 12vw, 170px);
  height: 22%;
  z-index: 2;
}
.street-steam i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, #bcced32b, transparent 65%);
  opacity: 0;
  animation: street-steam 7s ease-out infinite;
}
.street-steam i:nth-child(2) { animation-delay: -2.3s; }
.street-steam i:nth-child(3) { animation-delay: -4.6s; }
@keyframes street-steam {
  0% { transform: translate(0, 28%) scale(.45); opacity: 0; }
  25% { opacity: .8; }
  100% { transform: translate(30%, -55%) scale(1.6); opacity: 0; }
}
.street-puddles { position: absolute; inset: 0; z-index: 2; }
.street-puddles i {
  position: absolute;
  left: 37%;
  top: 73%;
  width: 65px;
  height: 14px;
  border: 1px solid #d9cba577;
  border-radius: 50%;
  opacity: 0;
  animation: street-ripple 3.8s ease-out infinite;
}
.street-puddles i:nth-child(2) { left: 66%; top: 66%; width: 40px; height: 9px; animation-delay: -1.4s; }
.street-puddles i:nth-child(3) { left: 23%; top: 83%; width: 90px; height: 18px; animation-delay: -2.6s; }
.street-puddles i:nth-child(4) { left: 73%; top: 81%; animation-delay: -.7s; }
.street-puddles i:nth-child(5) { left: 47%; top: 62%; width: 30px; height: 7px; animation-delay: -3.1s; }
@keyframes street-ripple {
  0% { transform: scale(.1); opacity: 0; }
  12% { opacity: .6; }
  80%, 100% { transform: scale(1.4); opacity: 0; }
}
/* A curious sniff and glance while the player reads; walking takes priority. */
.stray-cat:not(.walking):not(.purring) .cat-head {
  animation: street-curiosity 9s ease-in-out infinite;
}
@keyframes street-curiosity {
  0%, 15%, 65%, 100% { transform: rotate(0); }
  24%, 33% { transform: translateY(4px) rotate(-7deg); }
  44%, 52% { transform: rotate(8deg); }
}
/* Pseudo-elements must pause too, including the second rain sheet. */
body.quiet .street *, body.quiet .street *::after,
body.hidden-page .street *, body.hidden-page .street *::after {
  animation-play-state: paused !important;
}
body.quiet .street-world { animation: none; }
@media (max-width: 650px) {
  .street-rain { opacity: .38; }
  .street-steam { left: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .street *, .street *::after { animation: none !important; transition: none !important; }
}