/* The global theme also lights the opening room. */
.hero-visual #hero-room-light stop:first-child { stop-color: #f0e5d2; }
.hero-visual #hero-room-light stop:nth-child(2) { stop-color: #e5ddc7; }
.hero-visual #hero-room-light stop:last-child { stop-color: #cdd9c2; }
.hero-visual #hero-window-light stop:first-child { stop-color: #fff1d6; }
.hero-visual #hero-window-light stop:last-child { stop-color: #edb89a; }
.hero-visual .hero-window-frame { stroke: #e0cbb2; }
.hero-visual .hero-scene-window-line { stroke: #e8d9c0; }
.hero-evening-sky { opacity: 1; }
.hero-night-sky { opacity: 0; }

.hero-visual[data-atmosphere="night"] #hero-room-light stop:first-child { stop-color: #8ba089; }
.hero-visual[data-atmosphere="night"] #hero-room-light stop:nth-child(2) { stop-color: #6f8a73; }
.hero-visual[data-atmosphere="night"] #hero-room-light stop:last-child { stop-color: #49674e; }
.hero-visual[data-atmosphere="night"] #hero-window-light stop:first-child { stop-color: #193d30; }
.hero-visual[data-atmosphere="night"] #hero-window-light stop:last-child { stop-color: #3c624c; }
.hero-visual[data-atmosphere="night"] #hero-floor-light stop:nth-child(2) { stop-color: #698b69; stop-opacity: .42; }
.hero-visual[data-atmosphere="night"] #hero-floor-light stop:last-child { stop-color: #b5c7a6; }
.hero-visual[data-atmosphere="night"] .hero-window-frame { stroke: #9db298; }
.hero-visual[data-atmosphere="night"] .hero-scene-window-line { stroke: #859e80; }
.hero-visual[data-atmosphere="night"] .hero-window-warmth { fill: #b8d4a7; fill-opacity: .08; }
.hero-visual[data-atmosphere="night"] .hero-room-curtains { fill: #c3d0b2; fill-opacity: .28; }
.hero-visual[data-atmosphere="night"] .hero-evening-sky { opacity: 0; }
.hero-visual[data-atmosphere="night"] .hero-night-sky { opacity: 1; }
.hero-visual[data-atmosphere="night"] .hero-route-line { stroke: #e4ead5; stroke-opacity: .65; }
.hero-visual[data-atmosphere="night"] .hero-route-shadow { stroke: #426653; stroke-opacity: .2; }
.hero-visual[data-atmosphere="night"] .hero-route-traveller { stroke: #f2d2ab; }
.hero-visual[data-atmosphere="night"] .hero-route-node { fill: #f2d2ab; stroke: #a7bd99; }
.hero .hero-visual[data-atmosphere="night"]::before { background: radial-gradient(ellipse at 58% 48%, #96af8552, #dce7d92e 48%, transparent 73%); }

/* The scene always reaches its final state immediately when motion is stopped. */
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-scene-room stop,
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-window-frame,
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-scene-window-line,
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-window-warmth,
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-room-curtains,
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-evening-sky,
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-night-sky,
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-scene-route > * { transition: stop-color .85s ease, stop-opacity .85s ease, stroke .85s ease, stroke-opacity .85s ease, fill .85s ease, fill-opacity .85s ease, opacity .85s ease; }
@media (prefers-reduced-motion: reduce) {
  .hero-visual .hero-scene-room *, .hero-visual .hero-scene-route * { transition: none !important; }
}