/* Fine architectural details, gentle independent movement, and warm night lighting. */
:root {
  --rich-sky-top: #e7e8d8;
  --rich-sky-bottom: #f2e3c8;
  --rich-sun: #f7e4b7;
  --rich-skyline: #b5bea9;
  --rich-ground: #c2c4a2;
  --rich-road: #e8dabc;
  --rich-cloud: #faf2dd;
  --rich-window: #a4b59b;
  --rich-tower-1: #bdc6b2;
  --rich-tower-2: #a9b59e;
  --rich-tower-window: #9ead97;
  --rich-tower-warm: #d9c595;
  --rich-roof-wall: #b6bc9e;
  --rich-roof: #889a7b;
  --rich-bridge: #bfc3ac;
  --rich-pier: #a8b49c;
  --avenue-paving: #ded2b2;
  --avenue-asphalt: #87958d;
  --avenue-joint: #afa98f;
  --avenue-curb: #b6ad93;
  --avenue-curb-light: #f3e7ca;
  --avenue-gutter: #717f75;
  --avenue-marking: #e5debf;
}
[data-theme="dark"] {
  --rich-sky-top: #21392f;
  --rich-sky-bottom: #3d5040;
  --rich-sun: #e8dbb1;
  --rich-skyline: #70836a;
  --rich-ground: #596747;
  --rich-road: #7c8058;
  --rich-cloud: #6e816b;
  --rich-window: #e5c388;
  --rich-tower-1: #4e6758;
  --rich-tower-2: #5d7461;
  --rich-tower-window: #84967a;
  --rich-tower-warm: #edce8c;
  --rich-roof-wall: #697c61;
  --rich-roof: #526c54;
  --rich-bridge: #869a7e;
  --rich-pier: #6f846d;
  --avenue-paving: #83836a;
  --avenue-asphalt: #394e46;
  --avenue-joint: #656e59;
  --avenue-curb: #65715e;
  --avenue-curb-light: #a9ab88;
  --avenue-gutter: #293e37;
  --avenue-marking: #b1b08b;
}
.scene-rich .city-window { fill: var(--rich-window); transition: fill .4s; }
.scene-rich .rich-night-stars { opacity: 0; }
[data-theme="dark"] .scene-rich .rich-night-stars { opacity: .8; }
[data-theme="dark"] .scene-rich > g { filter: brightness(.85) saturate(.83); }
[data-theme="dark"] .scene-rich > g.rich-night-stars { filter: none; }
.scene-rich .refined-canopy { animation: avenueCanopy 4.8s ease-in-out infinite alternate; transform-origin: 0 -100px; }
.scene-rich .refined-cloud { animation: avenueCloud 18s ease-in-out infinite alternate; }
.scene-rich .metro-pass { transform: translateX(-560px); animation: avenueMetroPass 16s linear infinite; }
.scene-rich .metro-two { animation-delay: 8s; }
.scene-rich .metro-return { animation-name:avenueMetroReturn; animation-delay:-1s; transform:translateX(1100px); }
.scene-rich .metro-return.metro-two { animation-delay:7s; }
@keyframes avenueMetroReturn { 0% { transform:translateX(1100px); } 37.5%,100% { transform:translateX(-560px); } }
.scene-rich .refined-leaf { animation: avenueLeaf var(--leaf-time,14s) ease-in-out infinite; }
.scene-rich .refined-lamp { animation: avenueLamp 3.8s ease-in-out infinite alternate; }
.scene-rich .refined-bulb { animation: avenueBulb 3.2s ease-in-out infinite alternate; }
.scene-rich .refined-star { animation: avenueStar 2.8s ease-in-out infinite alternate; }
.scene-rich .refined-headlight { animation: avenueBulb 3.2s ease-in-out infinite alternate; }
[data-theme="dark"] .scene-rich .city-tower-light { opacity: .88; }
.paused-city .scene-rich .animated:not(.refined-leaf),
.paused-leaves .scene-rich .refined-leaf,
.motion-paused .scene-rich .animated,
.page-inactive .scene-rich .animated,
.scene-outside .scene-rich .animated { animation-play-state: paused !important; }
@keyframes avenueCanopy { to { transform: rotate(var(--sway,1deg)); } }
@keyframes avenueCloud { to { transform: translateX(18px); } }
/* Each train completes one left-to-right crossing in 6 seconds, then waits offstage.
   The second train follows 8 seconds later, leaving a visible 2-second interval. */
@keyframes avenueMetroPass {
  0% { transform: translateX(-560px); }
  37.5%,100% { transform: translateX(1100px); }
}
@keyframes avenueLeaf { 0% { opacity:0;transform:translate(0,-12px) } 12%,77% { opacity:.9 } 48% { transform:translate(var(--leaf-x,30px),55px) } 100% { opacity:0;transform:translate(4px,125px) } }
@keyframes avenueLamp { to { opacity: .45; } }
@keyframes avenueBulb { to { opacity: .5; } }
@keyframes avenueStar { to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .scene-rich .animated { animation: none !important; }
  .scene-rich .metro-one { transform: translateX(460px); }
  .scene-rich .metro-two { display: none; }
}

/* Each foot plants for 60% of its cycle; travel speed matches that contact. */
.scene-rich .avenue-travel { animation:avenueTravel var(--journey) linear infinite; animation-delay:var(--gait-delay); }
.scene-rich .avenue-leg,.scene-rich .avenue-shoe,.scene-rich .avenue-body,.scene-rich .avenue-arm,.scene-rich .avenue-bag,.scene-rich .avenue-scarf {
  animation-duration:var(--stride); animation-timing-function:linear; animation-iteration-count:infinite; animation-delay:var(--gait-delay); transform-origin:0 0;
}
.scene-rich .avenue-leg { animation-name:avenueLeg; }
.scene-rich .avenue-shoe { animation-name:avenueShoe; }
.scene-rich .avenue-body { animation-name:avenueBody; }
.scene-rich .avenue-arm { animation-name:avenueArm; }
.scene-rich .avenue-bag { animation-name:avenueBag; }
.scene-rich .avenue-scarf { animation-name:avenueScarf; }
.scene-rich .avenue-opposite { animation-delay:calc(var(--gait-delay) - var(--stride) / 2); }
@keyframes avenueTravel { from { transform:translateX(var(--walk-from)); } to { transform:translateX(var(--walk-to)); } }
@keyframes avenueArm { 0%,100% { transform:rotate(12deg); } 25%,75% { transform:rotate(0); } 50% { transform:rotate(-12deg); } }
@keyframes avenueBag { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } }
@keyframes avenueScarf { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(4deg); } }
/* Show the pavement and complete footfalls below the text on narrow screens. */
@media (max-width:560px) {
  .hero:not(.home-hero) .hero-art.scene-rich { bottom:24px; }
  .hero:not(.home-hero) .hero-controls { bottom:3px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-rich .avenue-person .avenue-travel { transform:translateX(var(--rest-x)); }
}

/* More headroom and taller piers keep both tracks clear of the pavement. */
.hero:not(.home-hero) { height:clamp(370px,40vw,480px); }
@media(max-width:760px) {
  .hero:not(.home-hero) { height:420px; }
  .hero:not(.home-hero) .hero-art.scene-rich { height:320px; bottom:24px; }
}
@media(prefers-reduced-motion:reduce) { .scene-rich .metro-return { display:none; } }

/* Individually designed street frontages and two warm, steady neon shop signs. */
.scene-rich .avenue-facade-wall { fill:var(--facade-light); }
[data-theme="dark"] .scene-rich .avenue-facade-wall { fill:color-mix(in srgb,var(--facade-light) 57%,#253d32); }
.scene-rich .neon-shop-sign { --neon-color:#ff9fba; }
.scene-rich .neon-shop-sign.neon-mint { --neon-color:#8cf2df; }
.scene-rich .neon-sign-board { fill:#344c43; stroke:#91a08b; stroke-width:.6; }
.scene-rich .neon-tube { fill:none; stroke:var(--neon-color); stroke-width:.65; }
.scene-rich .neon-lettering { fill:var(--neon-color); stroke:var(--neon-color); stroke-width:.12; paint-order:stroke; }
.scene-rich .neon-tubes { animation:avenueNeonGlow 5.2s ease-in-out infinite alternate; }
.scene-rich .neon-mint .neon-tubes { animation-delay:-2.1s; }
[data-theme="dark"] .scene-rich .neon-tubes { filter:drop-shadow(0 0 1.4px var(--neon-color)) drop-shadow(0 0 3px var(--neon-color)); }
@keyframes avenueNeonGlow { from { opacity:.84; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .scene-rich .neon-tubes { animation:none!important; opacity:1; } }

.scene-rich .neon-sign-aura { fill:var(--neon-color); opacity:0; }
[data-theme="dark"] .scene-rich .neon-sign-aura { opacity:.24; filter:blur(3px); }

/* Dense commercial facades: lit signage, reflective glazing and rooftop services. */
.scene-rich .retail-sign-ink { fill:#fff0cf; }
.scene-rich .retail-window-lit { fill:#dfd5b4; }
[data-theme="dark"] .scene-rich .retail-window-lit { fill:#ddc187; }
[data-theme="dark"] .scene-rich .commercial-glazing:not(.retail-window-lit) { fill:#3a5755; }
[data-theme="dark"] .scene-rich .retail-billboard { filter:drop-shadow(0 0 .7px #f0d6a733); }
.hero:not(.home-hero)::after {
  content:""; position:absolute; top:0; left:0; width:min(380px,100%); height:178px;
  background:linear-gradient(90deg,#e9e7ddfa 0%,#e9e7ddf0 65%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 76%,transparent 100%);
  pointer-events:none; opacity:1; mix-blend-mode:normal;
}
[data-theme="dark"] .hero:not(.home-hero)::after { background:linear-gradient(90deg,#1e332dfa 0%,#1e332df0 65%,transparent 100%); }