/* ---- Night (blue hour): moon, stars, lamps that come and go, people with warm drinks ---- */
#daylight .i-sun{display:none}
.blue-hour #daylight .i-moon{display:none}
.blue-hour #daylight .i-sun{display:block}
#daylight svg{transition:transform .6s cubic-bezier(.34,1.6,.5,1)}
#daylight:hover svg,#daylight:focus-visible svg{transform:rotate(-22deg) scale(1.08)}

body,#stage,.scene,.loader,.foot,header{transition:background-color 1.2s ease,color 1.2s ease}
body.blue-hour{--cream:#121a2d;--cream2:#0e1525;--ink:#eceaf2;--ink2:#b8bbcc;--accent:#e9a874;--line:rgba(236,234,242,.24);color:var(--ink)}

/* scene layers */
.living-root{z-index:auto}
.cam img.plate,.fg img{transition:filter 1.8s ease}
.blue-hour .cam img.plate,.blue-hour .fg img{filter:saturate(.66) brightness(.95)}
/* people are darkened in place by a colour matrix that eases in with the veil */
.nt-mul .living-root:not(.living-top) canvas{filter:url(#ntmul)}
/* painted sun: a sky-coloured 'darken' patch that keeps it from glowing through the veil */
.nightsun{position:absolute;border-radius:50%;mix-blend-mode:darken;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
.blue-hour .nightsun{opacity:1}
.nightveil,.nightfx{position:absolute;left:0;top:0;width:1600px;height:900px;pointer-events:none;opacity:0;transition:opacity 1.8s ease}
.nightveil{mix-blend-mode:multiply;background:linear-gradient(180deg,#45558f 0%,#5a68a3 40%,#6a73a8 66%,#4b5288 100%)}
.nightveil::after{content:'';position:absolute;inset:0;mix-blend-mode:normal;background:radial-gradient(ellipse 70% 55% at var(--mx,50%) var(--my,30%),rgba(170,190,255,.10),transparent 70%)}
.blue-hour .nightveil,.blue-hour .nightfx{opacity:1}
.blue-hour svg.ink{filter:invert(1) hue-rotate(180deg) brightness(1.05);opacity:.82}
.blue-hour .skyfx{opacity:.22}
.blue-hour .sunglow,.blue-hour .sweep,.blue-hour .sunrays,.blue-hour .bird{opacity:0!important}
.nt-anim .sunglow,.nt-anim .sweep,.nt-anim .sunrays,.nt-anim .bird,.nt-anim .skyfx,.nt-anim svg.ink{transition:opacity 1.4s ease,filter 1.4s ease}
.drone-wrap img{transition:filter 1.8s ease}
.blue-hour .drone-wrap img{filter:brightness(.5) saturate(.55) hue-rotate(10deg)}
.blue-hour .rotor{fill:rgba(190,205,240,.2)}

/* moon: rises a little when night falls */
.moon{position:absolute;border-radius:50%;transform:translate3d(0,46px,0) scale(.9);opacity:0;transition:transform 2.6s cubic-bezier(.2,.8,.2,1),opacity 2s ease;
  background:radial-gradient(circle at 63% 30%,rgba(196,186,160,.55) 0 7%,transparent 8%),radial-gradient(circle at 34% 62%,rgba(196,186,160,.5) 0 10%,transparent 11%),radial-gradient(circle at 60% 70%,rgba(196,186,160,.4) 0 5%,transparent 6%),radial-gradient(circle at 28% 32%,rgba(196,186,160,.32) 0 4%,transparent 5%),radial-gradient(circle at 40% 38%,#fffef7 0,#f6f0dc 48%,#dcd3b8 100%);
  box-shadow:0 0 14px 3px rgba(255,249,228,.55),0 0 60px 18px rgba(200,212,255,.22),inset -6px -5px 12px rgba(150,140,115,.35)}
.moon::after{content:'';position:absolute;left:50%;top:50%;width:900%;height:900%;margin:-450% 0 0 -450%;border-radius:50%;background:radial-gradient(circle,rgba(220,228,255,.16) 0,rgba(200,212,255,.06) 30%,transparent 62%);mix-blend-mode:screen}
.blue-hour .moon{transform:none;opacity:1;transition-delay:.35s}

/* stars: box-shadow fields in three twinkle phases */
.stars{position:absolute;left:0;top:0;width:1.6px;height:1.6px;border-radius:50%;background:transparent;animation:twinkle 4.2s ease-in-out infinite}
.stars.b{animation-duration:5.6s;animation-delay:-2s}
.stars.c{animation-duration:3.4s;animation-delay:-1.2s}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}

/* lamps, windows, city specks, beacons */
.lamp{position:absolute;border-radius:50%;mix-blend-mode:screen;transition:opacity .55s ease;
  background:radial-gradient(circle,rgba(255,236,196,1) 0,rgba(255,206,140,.85) 9%,rgba(255,176,96,.32) 30%,rgba(255,160,80,0) 68%)}
.pool{position:absolute;border-radius:50%;mix-blend-mode:screen;transition:opacity .55s ease;background:radial-gradient(ellipse,rgba(255,196,120,.34) 0,rgba(255,170,90,.12) 45%,transparent 72%)}
.win{position:absolute;mix-blend-mode:screen;transition:opacity .7s ease;border-radius:3px;filter:blur(2.5px);
  background:radial-gradient(ellipse 80% 70% at 50% 60%,rgba(255,210,150,.42),rgba(255,180,110,.3) 55%,rgba(255,160,90,.12) 100%);box-shadow:0 0 18px 4px rgba(255,170,90,.16)}
.speck{position:absolute;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#ffe2ad;box-shadow:0 0 5px 2px rgba(255,190,110,.55);transition:opacity .45s ease}
.speck.cool{background:#e4ecff;box-shadow:0 0 5px 2px rgba(180,200,255,.5)}
.beacon{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#ff5a4a;box-shadow:0 0 8px 3px rgba(255,70,50,.6);animation:beacon 2.4s steps(1) infinite}
@keyframes beacon{0%,55%{opacity:1}56%,100%{opacity:.08}}
.lamp.off,.pool.off,.win.off,.speck.off{opacity:0!important}
.flick{animation:flick .7s linear 1}
@keyframes flick{0%{opacity:1}12%{opacity:.15}22%{opacity:.9}34%{opacity:.05}48%{opacity:.8}60%{opacity:.25}100%{opacity:1}}

/* drone navigation lights */
.navl{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;opacity:0;transition:opacity 1s ease}
.navl.r{background:#ff4d3f;box-shadow:0 0 9px 3px rgba(255,70,50,.65)}
.navl.g{background:#5dff9a;box-shadow:0 0 9px 3px rgba(80,255,150,.55)}
.navl.w{background:#fff;box-shadow:0 0 12px 4px rgba(255,255,255,.8)}
.blue-hour .navl{opacity:1;animation:navl 1.6s steps(1) infinite}
.blue-hour .navl.w{animation:strobe 1.8s linear infinite}
@keyframes navl{0%,70%{opacity:1}71%,100%{opacity:.35}}
@keyframes strobe{0%,6%{opacity:1}7%,100%{opacity:0}}

/* speech pills sit above the night veil and turn to dusk glass */
.living-top{z-index:auto}
.living-voice::after{left:calc(50% - var(--nx,0px))}
.blue-hour .living-voice{color:#eef0fb;background:rgba(26,32,54,.74);border-color:rgba(255,255,255,.16);box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.blue-hour .living-voice::after{background:linear-gradient(rgba(220,226,255,.7),rgba(220,226,255,0))}

/* interface in the dark */
.blue-hour .copy::before{background:radial-gradient(ellipse 62% 56% at 36% 46%,rgba(14,20,37,.8),rgba(14,20,37,.46) 52%,rgba(14,20,37,0) 100%)}
.blue-hour .copy .body,.blue-hour .panel p{color:#cdd0e0}
.blue-hour .cta .dot{background:#eceaf2;color:#121a2d}
.blue-hour .cta:hover .dot,.blue-hour .cta:focus-visible .dot{background:#fff}
.blue-hour .pill{background:rgba(18,26,45,.66);border-color:rgba(236,234,242,.5)}
.blue-hour .pill:hover{background:#1b2441}
.blue-hour .hs i{background:rgba(18,26,45,.82)}
.blue-hour .hs i::after{border-color:rgba(236,234,242,.5)}
.blue-hour .selector{background:linear-gradient(to top,rgba(14,20,37,.92) 0,rgba(14,20,37,.58) 58%,rgba(14,20,37,0) 100%)}
.blue-hour .opt::before{background:rgba(32,42,74,.72)}
.blue-hour .opt:hover,.blue-hour .opt:focus-visible{background:rgba(70,84,140,.4)}
.blue-hour .rail button i{background:rgba(236,234,242,.42)}
.blue-hour .rail button:hover i{background:rgba(236,234,242,.72)}
.blue-hour .hint{background:rgba(236,234,242,.95);color:#121a2d}
.blue-hour .panel{background:rgba(20,28,50,.97);border-color:rgba(236,234,242,.32);box-shadow:7px 11px 0 rgba(233,168,116,.12),0 20px 50px rgba(0,0,0,.4)}
.blue-hour .panel .acts a,.blue-hour .panel .acts button{border-color:rgba(236,234,242,.55);color:var(--ink)}
.blue-hour .panel .acts a.primary{background:var(--ink);color:#121a2d}
.blue-hour .search{background:rgba(14,20,37,.94)}
.blue-hour .exlab{fill:#e4e2ec}
@media(max-width:900px){
  .blue-hour .mainnav{background:rgba(14,20,37,.97)}
  .blue-hour #copy::before{background:linear-gradient(to bottom,rgba(14,20,37,.94),rgba(14,20,37,.84) 45%,rgba(14,20,37,0))}
}

/* clean underlines in place of the hand-drawn strokes */
.copy h1 em,.copy h2 em{background:none;padding-bottom:0}
.mainnav a::after,.cta>span:last-child::after,.opt::after{height:1px;background:currentColor}
.mainnav a::after{bottom:4px}
.cta>span:last-child::after{bottom:-4px}
.opt::after{bottom:3px}
.searchbox input{background:none;border-bottom:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){.stars,.beacon,.blue-hour .navl,.flick{animation:none!important}.moon{transition:opacity 1s}}