/* The night scene (partials/hero.gohtml; night.js brings it to life).
 *
 * The light comes from the moon (cool, from the upper right, so it rims the
 * trees, the owl and the branch on that side) and from the creatures (warm:
 * the fairy, the owl's eyes, the fireflies, which run a little green like
 * real ones). Night is the default picture: these values hold unless the
 * theme is day (day.css). */
.sb-hero {
  /* Deep blue-black overhead, lightening toward the hills, with the faint
   * green of airglow low down and the moon's side of the sky a little
   * brighter. */
  --sky:
    radial-gradient(ellipse 60% 50% at 82% 18%, rgb(110 140 190 / 0.14), transparent 70%),
    radial-gradient(ellipse 130% 34% at 50% 74%, rgb(70 130 125 / 0.1), transparent 70%),
    radial-gradient(ellipse 120% 40% at 50% 100%, rgb(60 100 135 / 0.35), transparent 70%),
    linear-gradient(#050b16 0%, #07122a 24%, #0d2140 50%, #16324f 74%, #1f4060 100%);
  --far-top: #21405f;
  --far-foot: #152c45;
  --far-rim: #37608a;
  --mid-top: #132a42;
  --mid-foot: #0c1c2e;
  --mid-rim: #2b4d70;
  --near-top: #09141f;
  --near-foot: #060d16;
  --near-rim: #1d3754;
  --mist: rgb(150 180 210 / 0.14);
  --bark: #060d16;
  --rim: #5d7a98;
}

/* The title in the night sky, and the dark behind the header's words. */
.sb {
  --title-bg: #050b16;
  --title-tiny: #cdbb8f;
  --title-shadow: 0 0 42px rgb(255 232 180 / 0.16), 0 2px 24px rgb(0 0 0 / 0.35);
  --walk-glow: rgb(255 230 160 / 0.35);
  --headfade: rgb(5 11 22 / 0.7);
}

/* ---- The sky ----------------------------------------------------------------- *
 * Where the moon is, as the sky's own properties, so the moon, its corona
 * over the clouds and the glare that hides the stars round it all agree. */
.nt-sky {
  --moon-top: 13%;
  --moon-right: 14%;
  --moon-size: clamp(62px, 7.2vw, 108px);
  --moon-at: calc(100% - var(--moon-right) - var(--moon-size) / 2) calc(var(--moon-top) + var(--moon-size) / 2);
}

/* The stars' tints (scene.go picks them): white, blue-white, warm white,
 * gold, rose. */
.nt-sky .t0 { --c: #f4f7ff; }
.nt-sky .t1 { --c: #cddcff; }
.nt-sky .t2 { --c: #fff1d8; }
.nt-sky .t3 { --c: #ffd79c; }
.nt-sky .t4 { --c: #ffc4b0; }

/* The still stars and the Milky Way. Nothing in it moves, so it is painted
 * once; the ones that twinkle are the glints. The moon's glare hides the
 * stars near it. */
.nt-stars,
.nt-glints {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(circle at var(--moon-at), transparent calc(var(--moon-size) * 0.7), rgb(0 0 0 / 0.35) calc(var(--moon-size) * 1.5), #000 calc(var(--moon-size) * 3.2));
  animation: nt-come-out 3.4s 0.4s ease-out both;
}
.nt-stars circle { fill: var(--c); }
@keyframes nt-come-out { from { opacity: 0; } }

/* A twinkling star: a soft point of its colour, dimming and shrinking now
 * and then. The big ones carry a faint cross of light. */
.nt-glint {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 25%, var(--c) 45%, transparent);
  animation: nt-twinkle var(--t) ease-in-out var(--d) infinite;
}
.nt-glint--big {
  width: calc(var(--s) * 6);
  height: calc(var(--s) * 6);
  margin: calc(var(--s) * -3) 0 0 calc(var(--s) * -3);
  border-radius: 0;
  background:
    radial-gradient(closest-side, #fff 0 8%, color-mix(in srgb, var(--c) 70%, transparent) 16%, color-mix(in srgb, var(--c) 14%, transparent) 34%, transparent 60%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 55%, transparent) 50%, transparent) center / 100% 1px no-repeat,
    linear-gradient(transparent, color-mix(in srgb, var(--c) 55%, transparent) 50%, transparent) center / 1px 100% no-repeat;
}
@keyframes nt-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  40% { opacity: 0.5; transform: scale(0.72); }
  48% { opacity: 0.9; transform: scale(0.95); }
  56% { opacity: 0.35; transform: scale(0.6); }
}

/* The moon: the disc (drawn in the template), and the wide faint light it
 * spreads over the sky. */
.nt-moon {
  position: absolute;
  top: var(--moon-top);
  right: var(--moon-right);
  width: var(--moon-size);
  aspect-ratio: 1;
}
.nt-moon::before {
  content: "";
  position: absolute;
  inset: -500%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(205 218 242 / 0.14), rgb(185 202 235 / 0.08) 12%, rgb(165 185 225 / 0.04) 26%, rgb(145 170 212 / 0.015) 50%, transparent);
}
.nt-moon__disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--moon-size) * 0.12) rgb(255 244 214 / 0.55));
}
.nt-moon__seas { fill: #8a8778; }
.nt-moon__seas--pale { opacity: 0.5; }
.nt-moon__seas--dark { opacity: 0.62; }
.nt-moon__rays { fill: none; stroke: #fffdf5; stroke-width: 1.8; stroke-linecap: round; opacity: 0.13; }
.nt-moon__craters { fill: #fffef8; opacity: 0.6; }

/* The moon's corona, laid over the clouds and added to what is under it
 * (screen), so a wisp drifting across the moon is lit silver rather than
 * darkening it. */
.nt-moonlight {
  position: absolute;
  top: var(--moon-top);
  right: var(--moon-right);
  width: var(--moon-size);
  aspect-ratio: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.nt-moonlight::before {
  content: "";
  position: absolute;
  inset: -150%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(255 248 228 / 0.12) 0 18%,
    rgb(255 246 222 / 0.5) 21%,
    rgb(248 240 222 / 0.26) 27%,
    rgb(228 232 245 / 0.12) 38%,
    rgb(205 218 245 / 0.05) 54%,
    rgb(195 212 245 / 0.02) 68%,
    transparent 86%);
}

/* Wisps of cloud: soft veils combed into streaks (the template's filter,
 * painted once), moonlit on top and darker beneath, drifting across the
 * moon. Where they cross it they thin, so it shows through them, lit by
 * the corona laid over them. */
.nt-defs { position: absolute; }
.nt-clouds {
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(circle at var(--moon-at), rgb(0 0 0 / 0.4) calc(var(--moon-size) * 0.45), #000 calc(var(--moon-size) * 1.3));
}
.nt-cloud {
  position: absolute;
  overflow: visible;
  opacity: 0.9;
}
.nt-cloud--1 {
  top: calc(var(--moon-top) + var(--moon-size) * 0.1);
  right: 4%;
  width: clamp(320px, 36vw, 560px);
  animation: nt-cloud 130s linear -38s infinite;
}
.nt-cloud--2 {
  top: calc(var(--moon-top) - var(--moon-size) * 0.55);
  right: 18%;
  width: clamp(360px, 44vw, 700px);
  opacity: 0.55;
  animation: nt-cloud 190s linear -120s infinite;
}
@keyframes nt-cloud {
  from { transform: translateX(60vw); }
  to { transform: translateX(-100vw); }
}

/* A shooting star, with a bright head; night.js places it and sets it off. */
.nt-meteor {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 1.6px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(190 210 255 / 0.35) 55%, rgb(255 255 255 / 0.95));
  opacity: 0;
  transform-origin: 100% 50%;
}
.nt-meteor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgb(210 225 255 / 0.8);
}
.nt-meteor.is-on { animation: nt-meteor 1.2s cubic-bezier(0.3, 0, 0.6, 1); }
@keyframes nt-meteor {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(0) scaleX(0.2); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(300px) scaleX(1); }
}

/* ---- Eyes in the dark woods: open, blink, gone. ------------------------------- */
.nt-peer__eyes {
  fill: var(--peer, #ffcf66);
  opacity: 0;
  transition: opacity 0.9s;
  filter: drop-shadow(0 0 3px var(--peer, #ffcf66));
  transform-box: fill-box;
  transform-origin: center;
}
.nt-peer.is-open .nt-peer__eyes { opacity: 0.9; }
.nt-peer.is-blink .nt-peer__eyes { transform: scaleY(0.1); transition: transform 0.08s, opacity 0.9s; }
.nt-peer.is-gone .nt-peer__eyes { opacity: 0; transition-duration: 0.15s; }

/* ---- The owl ----------------------------------------------------------------- */
.nt-owl { pointer-events: auto; cursor: pointer; }
.nt-owl__dark { fill: #0a1420; }
.nt-owl__wing { fill: #0e1b29; }
.nt-owl__belly { fill: #142638; }
.nt-owl__marks { fill: none; stroke: #28425b; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.nt-owl__disc { fill: #13253a; }
.nt-owl__brow { fill: none; stroke: #2e4a66; stroke-width: 1.6; stroke-linecap: round; }
.nt-owl__iris { fill: url(#nt-owl-iris); }
.nt-owl__pupil { fill: #04080d; }
.nt-owl__glint { fill: #fff; opacity: 0.85; }
.nt-owl__beak { fill: #cf9f48; }
.nt-owl__beak--low { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transition: transform 0.15s, opacity 0.15s; }
.nt-owl__feet { fill: none; stroke: #8f7236; stroke-width: 1.2; stroke-linecap: round; }
/* Its eyes are shut until night.js wakes the scene, and stay open with no
 * script or reduced motion. */
.nt-owl__lid { fill: #0a1420; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 0.6s ease-out; }
.sb-hero.is-waiting .nt-owl__lid { transform: scaleY(1); transition: none; }
.sb-hero.is-waking .nt-owl__lid { transition-duration: 1.6s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.nt-owl.is-blink .nt-owl__lid { transform: scaleY(1); transition-duration: 0.07s; }
.nt-owl.is-sleepy .nt-owl__lid { transform: scaleY(0.58); transition-duration: 1.4s; }
.nt-owl__b { transform-box: fill-box; transform-origin: 50% 100%; }
.nt-owl.is-ruffle .nt-owl__b { animation: nt-ruffle 0.7s ease-in-out; }
.nt-owl.is-hoo .nt-owl__b { animation: nt-puff 0.55s ease-in-out 2; }
.nt-owl.is-hoo .nt-owl__beak--low { opacity: 1; transform: translateY(2px); }
.nt-owl__hoo { fill: #d6dde6; font-family: var(--font-hand); font-size: 22px; opacity: 0; }
.nt-owl.is-hoo .nt-owl__hoo { animation: nt-hoo 2s ease-out; }
@keyframes nt-puff { 50% { transform: scale(1.07, 0.95); } }
@keyframes nt-ruffle { 20% { transform: scale(1.1, 0.94); } 40% { transform: scale(0.97, 1.03) rotate(-2deg); } 60% { transform: scale(1.03, 0.98) rotate(2deg); } }
@keyframes nt-hoo { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px); } }

/* ---- Nightfall ---------------------------------------------------------------- *
 * On a visit without the welcome (which has its own opening) the page opens
 * in the last of the dusk and darkens: night.js adds .is-nightfall. */
.nt-twilight {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(#34466e 0%, #5e5a82 45%, #b77f73 85%, #d99a78 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.sb-hero.is-nightfall .nt-twilight { animation: nt-nightfall 3.6s cubic-bezier(0.4, 0, 0.3, 1); }
@keyframes nt-nightfall { from { opacity: 0.75; } }

@media (max-width: 600px) {
  /* Above the title, clear of the header. */
  .nt-sky { --moon-top: 8.5%; --moon-right: 7%; --moon-size: 50px; }
}