/* City landmarks clear the large clock on desktop and stay centred on mobile. */
.scene svg[data-city-art] .city-art-panorama { transform: translateX(-460px); }
@media (max-width:720px) {
  .scene svg[data-city-art] .city-art-panorama { transform: translateY(var(--city-art-mobile-lift,0px)); }
}
/* Nature themes share the city's day/night light while keeping distinct materials. */
.scene[data-theme]:not([data-theme="city"]) {
  height: 55%; min-height: max(300px,40.625vw);
}
.scene[data-theme="alpine"],.theme-scene-svg[data-theme="alpine"] {
  --theme-water: color-mix(in srgb,var(--scene-mid,#467887) 72%,#72b3b9);
  --theme-snow: color-mix(in srgb,var(--scene-detail,#9ab5b9) 45%,#eef5ef);
}
.scene[data-theme="ocean"],.theme-scene-svg[data-theme="ocean"] {
  --theme-water: color-mix(in srgb,var(--scene-mid,#327286) 60%,#3eabb2);
  --theme-snow: color-mix(in srgb,var(--scene-detail,#9ab5b9) 35%,#f1eee0);
}
.scene[data-theme="forest"],.theme-scene-svg[data-theme="forest"] {
  --theme-water: color-mix(in srgb,var(--scene-mid,#346d67) 62%,#7fabb3);
  --theme-snow: #c5ded2;
}
.scene[data-theme="desert"],.theme-scene-svg[data-theme="desert"] {
  --theme-snow: #e7c7a0;
}
.scene[data-theme="aurora"],.theme-scene-svg[data-theme="aurora"] {
  --theme-water: color-mix(in srgb,var(--scene-mid,#23495c) 70%,#438d89);
  --theme-snow: #bfd6dd; --theme-glow: #7fcfb4;
}

/* The sky ribbons add depth above the landscape. No location claim is implied. */
.theme-atmosphere {
  position: absolute; inset: 7% -8% 30%; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 1.4s ease; mix-blend-mode: screen;
  mask-image: linear-gradient(180deg,transparent,#000 16%,#000 55%,transparent);
}
.theme-atmosphere::before,.theme-atmosphere::after {
  content: ""; position: absolute; inset: 0; border-radius: 48%;
  transform-origin: 50% 55%; filter: blur(20px);
  background:
    radial-gradient(ellipse at 19% 39%,transparent 23%,#7be7ac75 27%,#59b7b93d 30%,transparent 37%),
    radial-gradient(ellipse at 77% 18%,transparent 24%,#7ae0c965 28%,#bfa5ed38 31%,transparent 40%);
  transform: rotate(-9deg) scale(1.13,1);
}
.theme-atmosphere::after {
  inset: 3% -8% -10%; opacity: .7; filter: blur(27px);
  background: radial-gradient(ellipse at 51% 30%,transparent 27%,#a3d8ed4a 31%,#a797e335 35%,transparent 42%);
  transform: rotate(11deg) scale(1.1,.85);
}
body[data-scene-theme="aurora"] .theme-atmosphere { opacity: .83; }
body[data-scene-theme="aurora"][data-weather="cloudy"] .theme-atmosphere,
body[data-scene-theme="aurora"][data-weather="fog"] .theme-atmosphere { opacity: .35; }
body[data-scene-theme="aurora"][data-weather="rain"] .theme-atmosphere,
body[data-scene-theme="aurora"][data-weather="snow"] .theme-atmosphere { opacity: .22; }
body[data-scene-theme="aurora"][data-weather="storm"] .theme-atmosphere { opacity: .1; }

/* Animation is opt-in on the visible full-size layer; thumbnails stay still. */
body[data-motion="calm"] .scene.visible .theme-water-lines { animation: theme-water-drift 12s ease-in-out infinite alternate; }
body[data-motion="calm"] .scene.visible .theme-ocean-swell { animation: theme-water-drift 9s ease-in-out infinite alternate; }
body[data-motion="calm"] .scene.visible .theme-surf { animation: theme-surf-roll 10s ease-in-out infinite alternate; }
body[data-motion="calm"] .scene.visible .theme-surf-back { animation-duration: 13s; animation-delay: -5s; }
body[data-motion="calm"] .scene.visible .theme-valley-mist { animation: theme-valley-drift 28s ease-in-out infinite alternate; }
body[data-motion="calm"] .scene.visible .theme-aurora-ribbons { animation: theme-aurora-breathe 16s ease-in-out infinite alternate; transform-origin: 50% 20%; }
body[data-motion="calm"][data-scene-theme="aurora"] .theme-atmosphere::before { animation: theme-aurora-sky 24s ease-in-out infinite alternate; }
body[data-motion="calm"][data-scene-theme="aurora"] .theme-atmosphere::after { animation: theme-aurora-sky-back 31s ease-in-out infinite alternate; }

@keyframes theme-water-drift { from { transform: translateX(-13px); opacity: .3; } to { transform: translateX(13px); opacity: .48; } }
@keyframes theme-surf-roll { from { transform: translate(-4px,-7px); opacity: .48; } to { transform: translate(4px,9px); opacity: .86; } }
@keyframes theme-valley-drift { from { transform: translateX(-25px); } to { transform: translateX(30px); } }
@keyframes theme-aurora-breathe { from { transform: scaleY(.93); opacity: .65; } to { transform: scaleY(1.07); opacity: 1; } }
@keyframes theme-aurora-sky { from { transform: rotate(-10deg) scale(1.12,.95); opacity: .65; } to { transform: rotate(-5deg) scale(1.18,1.05); opacity: 1; } }
@keyframes theme-aurora-sky-back { from { transform: rotate(12deg) scale(1.1,.85); opacity: .4; } to { transform: rotate(7deg) scale(1.18,.95); opacity: .75; } }

body[data-motion="reduced"] .theme-atmosphere,
body[data-motion="off"] .theme-atmosphere { transition: none; }
body[data-motion="reduced"] .theme-atmosphere::before,
body[data-motion="reduced"] .theme-atmosphere::after,
body[data-motion="off"] .theme-atmosphere::before,
body[data-motion="off"] .theme-atmosphere::after { animation: none; }
body[data-page-hidden="true"] .theme-atmosphere::before,
body[data-page-hidden="true"] .theme-atmosphere::after,
body[data-page-hidden="true"] .scene.visible [class^="theme-"] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .scene [class^="theme-"],.theme-atmosphere::before,.theme-atmosphere::after { animation: none!important; }
  .theme-atmosphere { transition: none; }
}
@media (max-width: 720px) {
  .scene[data-theme]:not([data-theme="city"]) { height: 48%; min-height: 300px; left: -1px; right: -1px; }
  .theme-atmosphere { inset: 12% -35% 33%; }
  .theme-atmosphere::before { filter: blur(14px); }
  .theme-atmosphere::after { filter: blur(18px); }
}
@media (max-width: 720px) and (max-height: 700px) {
  .scene[data-theme]:not([data-theme="city"]) { height: 43%; min-height: 250px; }
}

/* The picker uses a stable sample light so neighboring themes are easy to compare. */
.scene-card[data-scene-theme="alpine"] .scene-theme-art {
  --scene-far: #80a0af; --scene-mid: #426e80; --scene-near: #1c4251; --scene-detail: #aac5cb;
  background: linear-gradient(160deg,#385d78,#b3cbca);
}
.scene-card[data-scene-theme="ocean"] .scene-theme-art {
  --scene-far: #67939a; --scene-mid: #416e7b; --scene-near: #213f4b; --scene-detail: #b9c9b6;
  background: linear-gradient(160deg,#528297,#c6ccaf);
}
.scene-card[data-scene-theme="forest"] .scene-theme-art {
  --scene-far: #668c80; --scene-mid: #3a6a5b; --scene-near: #193d35; --scene-detail: #a0b8a4;
  background: linear-gradient(160deg,#47766d,#abc2ac);
}
.scene-card[data-scene-theme="desert"] .scene-theme-art {
  --scene-far: #b89985; --scene-mid: #9b6e59; --scene-near: #654b46; --scene-detail: #d1ab85;
  background: linear-gradient(160deg,#766a83,#ddba95);
}
.scene-card[data-scene-theme="aurora"] .scene-theme-art {
  --scene-far: #456778; --scene-mid: #284a5b; --scene-near: #132b3b; --scene-detail: #8eafb2;
  background: linear-gradient(150deg,#102437,#25444e);
}