/* The hero at night (hero-night.mjs; html[data-theme] from theme.mjs): the dusk sky of the coast, stars, light type.
   The landscape, its parts and the vehicles are swapped for their dusk paintings in hero-night.mjs. */
html[data-theme="night"] .hero { background: #1f2c52; }
html[data-theme="night"] .sky-extension { background-color: #1f2c52; background-image: url('./art/landscape-panorama-a3-dusk.webp'); }
html[data-theme="night"] #hero { color: #fff4dc; }
html[data-theme="night"] #hero .hero-copy p { color: #eadcc6; }
html[data-theme="night"] #hero .primary-cta { background: #fff4dc; border-color: #fff4dc; color: #152621; }
html[data-theme="night"] #hero .primary-cta:hover { background: #ffffff; }
html[data-theme="night"] #hero .nav-cta { color: #fff4dc; border-color: #fff4dc99; }
html[data-theme="night"] #hero .nav-cta:hover { background: #ffffff1f; }
html[data-theme="night"] #hero .wordmark span { color: #ff8f73; }
/* the drawn parts that are not cut from a painting: the lake's ripples and the birds */
html[data-theme="night"] #ambient-water { stroke: #d9cde6; }
html[data-theme="night"] #ambient-water [data-ripple] path:last-child { stroke: #33406f; }
html[data-theme="night"] #ambient-sky [data-bird] { stroke: #1d2340; }
html[data-theme="night"] #ambient-sky [data-cloud] { opacity: .78; }      /* the dusk clouds sit back in the sky */

.hn-stars { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; fill: #fff4dc; }
html:not([data-theme="night"]) .hn-stars { display: none; }
.hn-stars circle { animation: hn-twinkle var(--hn-slow, 4s) ease-in-out var(--hn-delay, 0s) infinite alternate; }
@keyframes hn-twinkle { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hn-stars circle { animation: none; } }