/* SKY.CSS (4 Nov, preview): one Colombo skyline that stays still at the bottom of the screen
   while the light sections scroll over it. Trick: each light part paints the SAME picture with
   background-attachment: fixed, so it looks like one picture behind the whole page.
   Section colours stay the same. Dark parts (hero, How film, packages studio, finale) do not show it.
   Switch style with <html data-sky="gold|photo|sil|blur">. */
html[data-sky="photo"]{--sky:url(../assets/sky/sky-photo.webp)}
html[data-sky="gold"]{--sky:url(../assets/sky/sky-gold.webp)}
html[data-sky="sil"]{--sky:url(../assets/sky/sky-sil.webp)}
html[data-sky="blur"]{--sky:url(../assets/sky/sky-blur.webp)}
html[data-sky] body,
html[data-sky] #app,
html[data-sky] #stations,
html[data-sky] #faq,
html[data-sky] #franchise{
  background-image:var(--sky)!important;
  background-attachment:fixed!important;
  background-position:center bottom!important;
  background-repeat:no-repeat!important;
  background-size:max(100vw,1100px) auto!important;
}