/* 00 · night (sections/night.js). After hours: the page goes dark with the scroll, the skyline stands behind everything,
   the receipt included, and the visitor's pointer is the lamp across the whole section. */

/* ------------------------------------------------------------ the page at night (the tokens are written inline by night.js) */
html[data-night="on"] { color-scheme: dark; }
html[data-night="on"] img[src*="/shared/art/cutouts/"]:not(.qx-pad *, .qx-specs *, .qx-marks *, .q-on-paper *, .night-desk *, .volume *), html[data-night="on"] img[src*="/shared/art/homage/"]:not(.q-on-paper *), html[data-night="on"] img[src*="/shared/art/ink/"] { filter: invert(1) hue-rotate(180deg); mix-blend-mode: normal; }
html[data-night="on"] img[src*="/shared/art/scenes/"] { filter: invert(0.875) hue-rotate(180deg); background: none; mix-blend-mode: normal; padding: 0; }
html[data-night="on"] .q-stamp { mix-blend-mode: normal; }
html[data-night="on"] .q-btn { background: var(--ink); color: var(--paper); }
html[data-night="on"] .q-btn--canton { background: var(--canton); color: #10110f; }
html[data-night="on"] .q-canton, html[data-night="on"] .qx-ticket-tab, html[data-night="on"] .qx-ticket { color: #10110f; }
html[data-night="on"] .qx-marks .q-stamp { color: var(--qx-ink, var(--ink)); mix-blend-mode: normal; }
html[data-night="on"] .walkers, html[data-night="on"] body .qx-pad { opacity: 0; pointer-events: none; transition: opacity 0.5s; }

/* ------------------------------------------------------------ the section */
.part--night { position: relative; }
/* the receipt carries on through the night, paper and edges and all; it simply goes dark with the page */
.part--night .part__copy { min-height: 150svh; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 1; }
.part--night .part__copy > * { position: relative; }
.part--night .part__copy .night__morning { margin-top: auto; padding-top: 2rem; opacity: 0; transition: opacity 0.8s var(--settle) 0.25s; }
.part--night .part__copy .night__morning.is-on { opacity: 1; }

/* the skyline: the whole width of the page, behind the receipt and the stage; the windows come on at night */
.night-sky { --night: 0; position: absolute; inset: 0; width: 100vw; left: 50%; translate: -50% 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: var(--night); transition: opacity 0.4s; }
.night-sky__band { position: sticky; top: 0; height: 100svh; display: flex; align-items: flex-end; }
/* the drawing's own box: the windows are placed in it, in % of the drawing, so they ride with the buildings */
.night-sky__city { position: relative; flex: none; width: 100%; }
.night-sky__band img { display: block; width: 100%; height: auto; max-width: none; opacity: 0.55; filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
html[data-lights="off"] .night-sky__band img, html[data-night="on"] .night-sky__band img { filter: invert(1) hue-rotate(180deg); }
.night-bulb { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); min-width: 3px; min-height: 3px; translate: -50% -50%; background: var(--canton); opacity: 0; transition: opacity 0.4s linear; transition-delay: calc(0.4s + var(--i, 0) * 0.16s); }
.part--night.is-night .night-bulb { opacity: 0.9; }

/* Zero at the desk on the stage, in front of the skyline, on no paper and no pool: the lamp in hand is the only light */
.stage--night { z-index: 1; }
.night-desk { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; margin: 0; }
.night-desk img { position: relative; max-height: 92%; width: auto; max-width: 100%; }
html[data-lights="off"] .night-desk img, html[data-night="on"] .night-desk img { background: none !important; padding: 0 !important; filter: none !important; }
.stage--night .stage__caption { display: none; }

/* the lamp: a dark sheet over the whole viewport with a soft hole where the pointer is */
@property --lx { syntax: "<length>"; inherits: false; initial-value: -9999px; }
@property --ly { syntax: "<length>"; inherits: false; initial-value: -9999px; }
@property --hole { syntax: "<number>"; inherits: false; initial-value: 0; }
.night-lamp {
  --night: 0; --r: clamp(180px, 26vw, 420px); --hole: 0;
  position: fixed; inset: 0; z-index: 35; pointer-events: none;
  background: rgba(16, 17, 15, 0.94);
  -webkit-mask-image: radial-gradient(circle calc(var(--r) * var(--hole)) at var(--lx) var(--ly), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.42) 66%, rgba(0, 0, 0, 0.78) 82%, #000 100%);
  mask-image: radial-gradient(circle calc(var(--r) * var(--hole)) at var(--lx) var(--ly), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.42) 66%, rgba(0, 0, 0, 0.78) 82%, #000 100%);
  opacity: 0; transition: opacity 0.45s ease, --hole 0.4s ease;
}
.night-lamp.is-on { opacity: 1; }
.night-lamp.is-lit { --hole: 1; }
/* the windows across the street stay lit over the dark: the same bulbs, on the sheet itself, in a box night.js keeps exactly
   over the drawing */
.night-lamp__city { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.night-lamp__bulb { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); min-width: 3px; min-height: 3px; translate: -50% -50%; background: var(--canton); box-shadow: 0 0 5px 0 color-mix(in srgb, var(--canton) 35%, transparent); opacity: 0; transition: opacity 0.4s linear; transition-delay: calc(0.3s + var(--i, 0) * 0.12s); }
.night-lamp__bulb[hidden] { display: none; }
.night-lamp.is-on .night-lamp__bulb { opacity: 0.45; }

@media (max-width: 880px) {
  /* enough paper for a proper night on a small screen: dusk, a screen of dark, dawn before the corridor */
  .part--night .part__copy { min-height: 150svh; }
  .night-desk { height: 60svh; }
  .night-sky__band { position: absolute; inset: 0; height: 100%; }
  .night-sky__city { min-width: 180%; }
  .night-lamp { --r: clamp(140px, 45vw, 260px); }
}
@media (prefers-reduced-motion: reduce) {
  .night-sky, .night-bulb, .night-lamp, .night-lamp__bulb, .part--night .part__copy .night__morning { transition: none; }
}