/* Night mode for the street (js/night.js). Everything fades in over about a second and a half. */
:root { --nt-fade: 1.6s; }

/* day: the street lamps are off */
.layer-fg .glow { opacity: 0; animation: none; }
.layer-fg circle[r="10"] { fill: #efe8d2; transition: fill var(--nt-fade); }

/* the daytime drawing dims, a little cooler, as if under moonlight */
.street { transition: background-color var(--nt-fade); }
.street.night { background-color: #070b22; }
/* the drawn daytime sky (clouds, kites, birds) gives way to the real night sky of sky.js */
.layer-sky { transition: opacity var(--nt-fade) ease; }
.street.night .layer-sky { opacity: 0; }
.nt-dim { transition: filter var(--nt-fade) ease; filter: brightness(1) saturate(1) contrast(1); }
.street.night .nt-dim-skyline { filter: brightness(.3) saturate(.55) contrast(1.05); }
.street.night .nt-dim-buildings { filter: brightness(.34) saturate(.6) contrast(1.08); }
.street.night .nt-dim-wires { filter: brightness(.3) saturate(.6); }
.street.night .nt-dim-road { filter: brightness(.36) saturate(.55) contrast(1.05); }
.street.night .nt-dim-fg { filter: brightness(.38) saturate(.6); }
.street .gaju-body img { transition: filter var(--nt-fade); }
.street.night .gaju-body img { filter: brightness(.78) saturate(.85) sepia(.12) drop-shadow(0 6px 0 #00000044); }

/* the night layers */
.nt { opacity: 0; visibility: hidden; transition: opacity var(--nt-fade) ease, visibility 0s linear var(--nt-fade); pointer-events: none !important; }
.nt * { pointer-events: none !important; }
.street.night .nt { opacity: 1; visibility: visible; transition: opacity var(--nt-fade) ease, visibility 0s; }
.nt-lit { filter: sepia(.22) saturate(1.15) brightness(1.04); }

/* the lamps warm up one after another, with a short flicker like a real street light */
.nt-lamp { opacity: 0; }
.street.night .nt-lamp { animation: nt-ignite 1.8s ease-out var(--d) forwards; }
@keyframes nt-ignite {
  0% { opacity: 0; } 8% { opacity: .75; } 13% { opacity: .1; } 22% { opacity: .9; } 28% { opacity: .35; }
  45% { opacity: .85; } 100% { opacity: 1; }
}
.street.night .layer-fg circle[r="10"] { fill: #fff3c8; }

.nt-twinkle { animation: nt-twinkle 3.6s ease-in-out infinite; animation-delay: var(--d); animation-play-state: paused; }
.street.night .nt-twinkle { animation-play-state: running; }
@keyframes nt-twinkle { 50% { opacity: .25; } }
.nt-bulb { filter: drop-shadow(0 0 3px #ffd27a); }

/* the day/night switch (js/night.js draws it): a small cut-paper pill with an ink outline like the site's
   buttons; the knob slides from the sun's end to the moon's, quickly, and the sun turns into the moon */
.dn-btn { --w: 56px; --h: 28px; --dn-t: .35s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.icon-btn.dn-btn { border-radius: 99px; padding: 8px 4px; }
.icon-btn.dn-btn:hover { background: none; }
.dn-track {
  position: relative; display: block; box-sizing: border-box; width: var(--w); height: var(--h); border-radius: 99px; overflow: hidden;
  border: 2px solid var(--ink, #1d1714); background: #a9dcee; box-shadow: 0 2px 0 var(--ink, #1d1714);
  transition: background-color var(--dn-t) ease;
}
.dn-track > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dn-t) ease; }
.dn-night { opacity: 0; }
.dn-knob {
  position: absolute; top: 2px; left: 2px; width: calc(var(--h) - 8px); height: calc(var(--h) - 8px);
  transition: transform var(--dn-t) cubic-bezier(.4,0,.2,1.2);
}
.dn-knob svg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; transition: opacity var(--dn-t) ease, transform var(--dn-t) ease; }
.dn-moon { opacity: 0; transform: rotate(-120deg) scale(.6); }
.dn-btn[aria-checked="true"] .dn-track { background: #232a5c; }
.dn-btn[aria-checked="true"] .dn-day { opacity: 0; }
.dn-btn[aria-checked="true"] .dn-night { opacity: 1; }
.dn-btn[aria-checked="true"] .dn-knob { transform: translateX(calc(var(--w) - var(--h))); }
.dn-btn[aria-checked="true"] .dn-sun { opacity: 0; transform: rotate(120deg) scale(.6); }
.dn-btn[aria-checked="true"] .dn-moon { opacity: 1; transform: none; }
.dn-btn:active .dn-track { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink, #1d1714); }
.dn-btn:focus-visible { outline: none; }
.dn-btn:focus-visible .dn-track { box-shadow: 0 2px 0 var(--ink, #1d1714), 0 0 0 3px #fff, 0 0 0 6px #e8730c; }

/* with the extra button, give the right-hand icons room on phones */
@media (max-width: 480px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .topbar .logo { justify-self: center; }
  .topbar-right { gap: 2px; }
  .topbar-right .icon-btn { padding: 5px; }
  .topbar-right .dn-btn { --w: 46px; --h: 24px; padding: 5px 3px; }
}
/* small phones: the switch takes no more room than the old round button did */
@media (max-width: 420px) {
  .topbar-right .dn-btn { --w: 40px; --h: 22px; padding: 5px 1px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .street.night .nt-lamp { opacity: 1; }
}

/* the switch in the corner of the city page and of Explore: same place, same size on both */
.post-night {
  position: fixed; top: 16px; right: 16px; z-index: 12; padding: 0; border: 0; background: none; border-radius: 99px;
  --w: 60px; --h: 30px;
}
.post-night .dn-track { box-shadow: 0 3px 0 var(--ink, #1d1714); }
body.is-night .post-night .dn-track { border-color: #0a0d24; box-shadow: 0 3px 0 #0a0d24, 0 0 0 1.5px #f6ead255, 0 0 16px #c9d6ff33; }

/* ---------- the city page at night: the pigeon flies under the moon, the scroll is read by lamplight ---------- */
.city { transition: background-color var(--nt-fade); }
body.is-night .city { --night: #050817; background: #050817; }
/* the drawn arrival scene keeps its city but loses its daytime sky: the night sky (sky.js) shows through */
body.is-night .city-sky { background: none; }
body.is-night .city-sky .hero-skyfill, body.is-night .city-sky .hero-sun { opacity: 0; }
/* and the city itself in moonlight */
body.is-night .city-sky .hero-svg { filter: brightness(.5) saturate(.7) hue-rotate(-12deg) contrast(1.05); }
body.is-night .post-title { color: #f6ead2; text-shadow: 0 2px 12px #000a; }
body.is-night .post-title small { color: #c9c6e8; }
body.is-night .pg { filter: brightness(.82) saturate(.8) drop-shadow(0 0 10px #c9d6ff55); }

/* the city picture at dusk */
.city-hero img { transition: filter var(--nt-fade), transform 2.4s cubic-bezier(.2,.8,.2,1) .2s; }
body.is-night .city-hero img { filter: brightness(.62) saturate(.85) hue-rotate(-8deg) contrast(1.05); }
body.is-night .city-hero::after { background: linear-gradient(#0b0e2455, #0000 30%, #0b0e24ee); height: 100%; }

/* the scroll, lit by a warm lamp from above */
body.is-night .scroll::before {
  content: ''; position: absolute; left: -20%; right: -20%; top: -60px; height: 520px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 50% 60% at 50% 30%, #ffb45a3a, #0000 70%);
}
body.is-night .sheet { filter: sepia(.12) brightness(.94); box-shadow: 0 0 80px #ffb45a33; }
body.is-night .knob { filter: drop-shadow(0 3px 3px #0007) drop-shadow(0 0 6px #ffd56a88); }

body.is-night .medal { box-shadow: 0 0 0 3px #d8a93b, 0 0 0 5px #7a5310, 0 0 0 7px #e8730c55, 0 0 24px #ffcf6a77; }
body.is-night .element-disc { box-shadow: 0 0 0 6px #d8a93b, 0 0 0 9px #6b4a12, 0 0 60px #ffb34766, 0 30px 60px -20px #000c; }
body.is-night .story-head small, body.is-night .ev-year { text-shadow: 0 0 18px #ffcf6a66; }
body.is-night .ev-ghost { color: #c9d6ff0a; -webkit-text-stroke-color: #c9d6ff22; }
body.is-night .place-card { box-shadow: 0 0 0 4px #d8a93b, 0 0 0 6px #6b4a12, 0 0 50px #ffb34744, 0 30px 60px -20px #000; }

/* ---------- the real night sky (js/sky.js): stars, the Milky Way and tonight's Moon ---------- */
.night-sky { pointer-events: none; overflow: hidden; opacity: 0; transition: opacity var(--nt-fade) ease; contain: strict; }
.night-sky canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ns-moon { position: absolute; }
.ns-moon[hidden] { display: none; }
.ns-moon canvas { position: relative; width: 100%; height: 100%; display: block; }
.ns-street { position: absolute; inset: 0; }
.street.night .ns-street { opacity: 1; }
/* inside the city view, under everything in it (the letter, the timeline, the drawn arrival scene) */
.ns-city { position: fixed; inset: 0; z-index: -1; }
body.is-night .ns-city { opacity: 1; }
.city.film-on .ns-city { opacity: 0; }
/* Explore rebuilds its page each time, so its sky sits just under it */
.ns-explore { position: fixed; inset: 0; z-index: 69; display: none; }
body.is-night #explore:not([hidden]) + .ns-explore { display: block; opacity: 1; }
body.is-night .explore { background: transparent; }

/* ---------- no flash of daylight when a page opens in dark mode ----------
   theme-early.js marks the page dark before it is drawn; the street keeps its daytime drawing hidden until
   night.js has lit it, and then shows it straight away, without the slow dusk fade (.nt-instant). */
html.dark #street { background-color: #070b22; }
html.dark #street:not(.night) .world { visibility: hidden; }
.street.nt-instant, .street.nt-instant * { transition: none !important; }
.street.nt-instant .nt-lamp { animation-duration: 1ms !important; animation-delay: 0s !important; }
/* phones: the corner switch lines up with the round back arrow, clear of the city's name */
@media (max-width: 720px) { .post-night { top: 12px; right: 12px; } }