/* ---------- Kigali hours: the look after dark ----------
   At night the page is the day page turned over by one filter (see the end of css/motion.css), softened so
   white becomes graphite (#0D0D0D) and ink becomes #E3E3E3. So rules here are written in one of two ways:
   - inside .grain, .night-keep and .header.is-dark the colours are real: write what should be seen;
   - everywhere else they are turned over: write the opposite. Black shows as light, white as graphite,
     #F2F2F2 as #181818, and a dark shadow shows as a soft glow.
   Nothing here applies by day. */

/* Texture: the page ground carries the faint film grain the dark sections have (behind the content, so
   the dark sections and the footer keep only their own grain, exactly as by day). */
html.night body { background-image: url("/img/grain.png"); background-size: 128px 128px; }

/* Moonlight: a soft light behind the symbol on the home page. It crosses the sky through the night
   (low after sunset, high at midnight, low before dawn; --gx/--gy are set by js/motion.js) and turns
   to haze when Kigali is cloudy, rainy or misty. */
html.night .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(var(--gw, 40%) var(--gh, 58%) at var(--gx, 76%) var(--gy, 46%), rgba(0, 0, 0, var(--ga, .085)), transparent 72%), radial-gradient(70% 50% at 20% 110%, rgba(0, 0, 0, .04), transparent 70%); }
html.night[data-kgl-sky="haze"] { --gw: 78%; --gh: 100%; --ga: .065; }
@media (max-width: 960px) {
  html.night .hero.grain::before { background: radial-gradient(var(--gw, 70%) var(--gh, 45%) at var(--gxm, 85%) var(--gym, 18%), rgba(255, 255, 255, calc(var(--ga, .085) * .82)), transparent 72%); }
  html.night[data-kgl-sky="haze"] { --gw: 120%; --gh: 70%; }
}
/* A few faint stars around the symbol when the Kigali sky is clear. */
.night-stars { display: none; }
html.night .night-stars { display: block; position: absolute; top: 0; right: 0; width: 60%; height: 78%; pointer-events: none; }
html.night .night-stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #000; opacity: var(--o); }
html.night .night-stars i.tw { animation: star-tw 6s ease-in-out var(--d) infinite; }
@keyframes star-tw { 50% { opacity: calc(var(--o) * .2); } }
@media (max-width: 960px) {
  html.night .night-stars { width: 100%; height: 27%; }
  html.night .hero.grain .night-stars i { background: #fff; }
}
@media (prefers-reduced-motion: reduce) { html.night .night-stars i.tw { animation: none; } }

/* The dark sections are the stage: lit faintly from above, with a hairline where the light catches the edge. */
html.night main > .grain:not(.hero), html.night .direct-card.grain { background-image: radial-gradient(90% 55% at 50% -8%, rgba(255, 255, 255, .055), transparent 70%), url("/img/grain.png"); background-size: auto, 128px 128px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }

/* The footer looks exactly as it does by day; only its symbol breathes a little slower after dark. */
html.night .m .footer__symbol .blade { animation-duration: 8s; }

/* Header: nearly solid smoked glass once it is solid, fading softly into the page below. */
html.night .header.is-solid:not(.is-dark) { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 1px 0 rgba(0, 0, 0, .06) !important; }
html.night .header.is-solid:not(.is-dark)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
html.night .header.is-dark.is-solid { background: rgba(10, 10, 10, .92); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
html.night .m-progress { opacity: .9; }
html.night .header:not(.is-dark) .m-progress { box-shadow: 0 0 10px rgba(0, 0, 0, .55) !important; }
html.night .header.is-dark .m-progress { box-shadow: 0 0 10px rgba(255, 255, 255, .55); }

/* Buttons: a step below full white at rest, they brighten and glow a little when they are reached for. */
html.night :is(.button, .header__cta):not(.button--ghost, .grain *, .night-keep *, .header.is-dark *) { background: #1C1C1C; transition: background .3s var(--ease), transform .2s var(--ease), color .3s var(--ease), box-shadow .5s var(--ease); }
html.night :is(.button, .header__cta):not(.button--ghost, .grain *, .night-keep *, .header.is-dark *):hover { background: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 8px 36px -6px rgba(0, 0, 0, .3) !important; }
html.night .grain .button:not(.button--ghost), html.night .header.is-dark .header__cta { background: #DEDEDE; color: #111; }
html.night .grain .button:not(.button--ghost):hover, html.night .header.is-dark .header__cta:hover { background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 8px 36px -6px rgba(255, 255, 255, .28); }

/* The assistant: a dark glass orb with a faint halo, instead of a white tile. */
html.night .tri__orb, html.night .tri__orb.is-light { background: rgba(236, 236, 236, .86); color: var(--ink);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .13), 0 0 0 6px rgba(0, 0, 0, .025), 0 0 48px -8px rgba(0, 0, 0, .2) !important; }
html.night .tri__orb .tri__orb-who { color: var(--grey); }
html.night .tri__orb .tri__orb-who span { border-color: #C8C8C8; }
html.night .tri__orb .tri__orb-replies button { border-color: #C8C8C8; color: var(--ink); background: transparent; }
html.night .tri__orb .tri__orb-replies button:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
html.night .tri__panel { box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 0 80px -20px rgba(0, 0, 0, .18) !important; }

/* Phones: the dock is the same dark glass. */
@media (max-width: 960px) {
  html.night .dock { background: rgba(236, 236, 236, .84); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 40px -10px rgba(0, 0, 0, .18) !important; }
  html.night .dock a { color: var(--ink); }
  html.night .dock .dock__main { background: var(--ink); color: #fff; }
}

/* Cards and frames lift off the page with a hairline instead of a shadow. */
html.night :is(.device, .browser, .work-item__frame, .showcase__frame) { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) !important; }

/* The lime notes in the guides: at night the lime becomes the light, not the paper. */
html.night .article-takeaway { background: #161616; color: #E6E6E6; box-shadow: inset 3px 0 0 #E4FB69, inset 0 0 0 1px #262626; }
html.night .article-takeaway > span { color: #E4FB69; }
html.night .journal-question { background: #121212; color: #EDEDED; box-shadow: inset 0 1px 0 #262626; }
html.night .journal-question .eyebrow { color: #E4FB69; }
html.night .journal-question h2 { color: #fff; }
html.night .journal-question .button { background: #E4FB69; color: #111; }
html.night .journal-question .button:hover { background: #F0FF8F; box-shadow: 0 8px 40px -8px rgba(228, 251, 105, .45); }

/* Easier on the eyes: the faintest text is lifted a little so it still reads on graphite. */
html.night { --dim: #7B7B7B; }

/* Switching sky from the footer: night rises from the switch as a widening circle. */
html.sky-turn::view-transition-old(root) { animation: none; }
html.sky-turn::view-transition-new(root) { animation: sky-turn .9s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes sky-turn { from { clip-path: circle(0 at var(--sx, 50%) var(--sy, 100%)); } to { clip-path: circle(var(--sr, 150vmax) at var(--sx, 50%) var(--sy, 100%)); } }
@media (prefers-reduced-motion: reduce) { html.sky-turn::view-transition-new(root) { animation: none; } }

/* Dark cards on light sections (the About poster, the Contact note) stay dark at night, with a faint lit edge. */
html.night :is(.practice-poster, .message-note) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 0 70px -24px rgba(255, 255, 255, .1); }

/* Type: light letters on a dark ground look heavier, so at night every weight steps down a little
   (js/motion.js tags each text element with its weight as data-nw) and body text gets a hair more air. */
html.night body { font-weight: 370; letter-spacing: .004em; }
html.night [data-nw="400"] { font-weight: 370; }
html.night [data-nw="500"] { font-weight: 470; }
html.night [data-nw="560"] { font-weight: 525; }
html.night [data-nw="600"] { font-weight: 565; }
html.night [data-nw="650"] { font-weight: 610; }
html.night [data-nw="700"] { font-weight: 660; }
/* Big headlines a step below full white (data-big, in plain ink or white only), so body text reads first. */
html.night [data-big]:not(.grain *, .night-keep *, .header.is-dark *) { color: #262626; }
html.night :is(.grain, .night-keep) [data-big] { color: #D6D6D6; }

/* Screenshots come back to full brightness under the pointer. */
html.night :is(a, figure, button, [class*="frame"], [class*="device"], [class*="browser"], [class*="show"]):hover img:not(.grain *, .night-keep *, .night-skip) { filter: brightness(1) var(--unnight); }

/* Keyboard focus: a soft halo around links and buttons (text fields keep their own focus style). */
html.night :is(a, button, [role="button"], summary):focus-visible:not(.grain *, .night-keep *, .header.is-dark *) { box-shadow: 0 0 0 7px rgba(0, 0, 0, .13) !important; }
html.night :is(.grain, .night-keep, .header.is-dark) :is(a, button, [role="button"], summary):focus-visible { box-shadow: 0 0 0 7px rgba(255, 255, 255, .13); }

/* Dusk and dawn: a visitor on the site when the sun sets or rises in Kigali sees the page ease over. */
html.sky-dusk::view-transition-old(root), html.sky-dusk::view-transition-new(root) { animation-duration: 2.8s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

/* The MacBook in the showcases is Space Black at night (written inverted: these show as #46474A down to #111213),
   and the phone beside it stays black. */
html.night .show__mac { --mac-top: #BFBFBF; --mac-mid: #DCDCDC; --mac-low: #EDEDED; --mac-edge: #FAFAFA; --mac-scoop: #E6E6E6; --mac-rim: #C1C1C1; --mac-bezel: #FFFFFF; --mac-hinge: #F7F7F7; --mac-foot: #FFFFFF; }
html.night .show__lid { box-shadow: 0 0 0 1.5px var(--mac-rim) !important; }
html.night .show__notch::after { background: #E2E2E2; }
html.night .show__hinge { background: var(--mac-hinge); }
html.night .show__base { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .18) !important; }
html.night .show__base::before { box-shadow: inset 0 1px 2px rgba(255, 255, 255, .5) !important; }
html.night .device:not(.grain *, .night-keep *) { background: #FEFEFE; box-shadow: inset 0 0 0 1.5px #DCDCDC !important; }