/* Approved city + river illustration. All light changes are scroll-driven. */
.scene-city{overflow:hidden;background:#2e6991}
.city-art{position:absolute;inset:0;pointer-events:none}
.scene-city .city-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.city-sunlight,.city-waterlight,.city-copy-shade{position:absolute;inset:0;pointer-events:none}
.city-sunlight{
  background:radial-gradient(ellipse 35% 38% at 3% 27%,#fff9dc99, #ffedc733 48%,transparent 76%),
    linear-gradient(115deg,#fff2ce26,transparent 42%);
  opacity:.16;
}
.city-waterlight{
  /* Fine horizontal glints stay inside the river, beside the existing reflection. */
  inset:64% 10% 4% 63%;
  background:repeating-linear-gradient(177deg,transparent 0 7px,#fff9df66 8px,transparent 10px 17px),
    radial-gradient(ellipse at 57% 45%,#fff5cd55,transparent 70%);
  mask-image:radial-gradient(ellipse 36% 49% at 56% 47%,#000 0%,#0009 48%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 36% 49% at 56% 47%,#000 0%,#0009 48%,transparent 100%);
  opacity:.08;
}
.city-copy-shade{background:linear-gradient(90deg,#031a35b8, #031a3578 43%,#031a3514 77%,transparent)}
.hero-copy h1{text-shadow:0 2px 4px #001b3380,0 4px 24px #001b3340}
.hero-copy p{text-shadow:0 2px 4px #001b3380}
@media(max-width:760px){
  .city-copy-shade{background:linear-gradient(180deg,#031a3518 9%,#031a3570 30%,#031a35c7 58%,#031a3570 78%,transparent)}
  .motion-ready .scene-city{will-change:opacity}
  .motion-ready .scene-city .city-art{transform:none!important}
  .motion-ready .hero-copy{will-change:transform,opacity}
}
/* Static mode shows the same composition and readable copy without a reveal. */
body:not(.motion-ready) .city-sunlight,body:not(.motion-ready) .city-waterlight{opacity:.12}
@media print{
  .city-sunlight,.city-waterlight{display:none}
}