/* The day scene (partials/hero.gohtml; day.js brings it to life): the same
 * forest on a clear morning. The sun hangs where the moon does, so the same
 * edges catch the light, warm now instead of cool. No owl, no fireflies, no
 * stars: a songbird on the branch, butterflies, pollen in the sunbeams,
 * clouds going over, a flock now and then, a rabbit in the undergrowth and
 * wildflowers in the grass. */
[data-theme="day"] .sb-hero {
  --sky:
    radial-gradient(ellipse 55% 45% at 83% 17%, rgb(255 248 222 / 0.8), transparent 70%),
    radial-gradient(ellipse 120% 42% at 50% 100%, rgb(255 246 226 / 0.65), transparent 70%),
    linear-gradient(#8cc0e4 0%, #a9d1ec 30%, #cfe5ef 56%, #ecf0e2 78%, #f6ecd4 100%);
  --far-top: #aac7be;
  --far-foot: #99b9ab;
  --far-rim: #d3e5d7;
  --mid-top: #76a181;
  --mid-foot: #5e8c6b;
  --mid-rim: #afd4a0;
  --near-top: #35633f;
  --near-foot: #2c5436;
  --near-rim: #8ab968;
  --mist: rgb(255 255 255 / 0.42);
  --bark: #3b4733;
  --leaves: #557f48;
  --rim: #b5d58f;
  --grain: 0.025;
}

/* The meadow is too unlike the paper to fade into it (that reads as a
 * blur), so it runs to the foot of the scene whole, flowers and all, and
 * ends there on a crisp rolling edge, as if cut out of the page. */
[data-theme="day"] .sb-hero::after {
  height: clamp(16px, 2vw, 30px);
  background: var(--color-bg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V21C140 11 300 27 500 20S860 6 1060 17 1420 30 1600 13V40Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}

[data-theme="day"] .sb {
  --title-bg: #8cc0e4;
  --title-tiny: var(--color-accent);
  --title-by: #34443a;
  --title-shadow: 0 0 34px rgb(255 255 255 / 0.6), 0 0 2px rgb(255 255 255 / 0.5);
  --walk-glow: rgb(255 255 255 / 0.7);
  --headfade: rgb(236 246 252 / 0.5);
  --fairy-light: rgb(255 244 200 / 0.45);
  /* The fairy's sparkle, which vanishes into a light sky as bare yellow:
   * a deeper gold, larger, with a thin brown edge and a warm glow. */
  --spark: #ffa800;
  --spark-size: 13px;
  --spark-edge: drop-shadow(0 0 0.8px #5c2a00) drop-shadow(0 0 0.8px #5c2a00) drop-shadow(0 0 5px rgb(255 140 0 / 0.8));
}

/* ---- The sky ----------------------------------------------------------------- */
/* The sun: a warm white disc in a wide soft glow, with faint rays turning
 * slowly about it. */
.dy-sun {
  position: absolute;
  top: 12%;
  right: 13.5%;
  width: clamp(66px, 7.6vw, 112px);
  aspect-ratio: 1;
}
.dy-sun::before {
  content: "";
  position: absolute;
  inset: -170%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 252 234 / 0.85) 0%, rgb(255 242 196 / 0.38) 20%, rgb(255 236 180 / 0.12) 42%, transparent 68%);
}
.dy-sun__rays {
  position: absolute;
  inset: -95%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 250 226 / 0.34) 0deg 3.5deg, transparent 3.5deg 15deg);
  mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  animation: dy-turn 240s linear infinite;
}
.dy-sun__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fffffa, #fff6d6 58%, #ffe7a6);
  box-shadow: 0 0 34px 10px rgb(255 244 204 / 0.8), 0 0 90px 30px rgb(255 238 186 / 0.35);
}
@keyframes dy-turn { to { rotate: 1turn; } }

/* Clouds drift from left to right, each at its own height and pace. */
.dy-cloud {
  position: absolute;
  left: 0;
  fill: url(#dy-cloud-paint);
  overflow: visible;
  animation: dy-drift var(--t) linear var(--d) infinite;
}
.dy-cloud--1 { top: 7%; width: clamp(150px, 16vw, 250px); --t: 170s; --d: -52s; }
.dy-cloud--2 { top: 27%; width: clamp(96px, 10vw, 150px); --t: 210s; --d: -150s; opacity: 0.8; }
.dy-cloud--3 { top: 40%; width: clamp(190px, 21vw, 320px); --t: 260s; --d: -30s; opacity: 0.62; }
@keyframes dy-drift {
  from { transform: translateX(-35vw); }
  to { transform: translateX(120vw); }
}

/* A flock crossing high up; day.js sets its course and starts it. */
.dy-flock {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 36px;
  opacity: 0;
}
.dy-flock.is-on { animation: dy-flock var(--dur) linear forwards; }
@keyframes dy-flock {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s)); }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(var(--s)); }
}
.dy-flock__bird {
  position: absolute;
  width: 16px;
  overflow: visible;
  fill: none;
  stroke: #3f4d56;
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: dy-glide 2.4s ease-in-out calc(var(--i) * -0.6s) infinite alternate;
}
/* A loose flock, headed right (day.js mirrors it to go left). */
.dy-flock__bird:nth-child(1) { left: 64px; top: 12px; }
.dy-flock__bird:nth-child(2) { left: 44px; top: 2px; width: 14px; }
.dy-flock__bird:nth-child(3) { left: 38px; top: 22px; width: 13px; }
.dy-flock__bird:nth-child(4) { left: 18px; top: 10px; width: 12px; }
.dy-flock__bird:nth-child(5) { left: 0; top: 24px; width: 11px; }
.dy-flock__wing {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: dy-flap-l 0.46s ease-in-out calc(var(--i) * -0.11s) infinite alternate;
}
.dy-flock__wing--r { animation-name: dy-flap-r; }
@keyframes dy-flap-l { from { rotate: -24deg; } to { rotate: 30deg; } }
@keyframes dy-flap-r { from { rotate: 24deg; } to { rotate: -30deg; } }
@keyframes dy-glide { to { translate: 0 4px; } }

/* ---- The land ---------------------------------------------------------------- */
/* Shafts of sunlight falling through the air toward the lower left, over
 * the far woods and under the near ones. */
.dy-beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.dy-beams i {
  position: absolute;
  top: -8%;
  right: var(--at);
  width: var(--w);
  height: 130%;
  transform-origin: 50% 0;
  rotate: 32deg;
  background: linear-gradient(transparent 30%, rgb(255 251 232 / 0.5) 56%, rgb(255 251 232 / 0.2) 80%, transparent 94%);
  opacity: 0.5;
  animation: dy-beam var(--t) ease-in-out var(--d) infinite alternate;
}
.dy-beams i:nth-child(1) { --at: 14%; --w: 7%; --t: 9s; --d: -2s; }
.dy-beams i:nth-child(2) { --at: 24%; --w: 3.5%; --t: 7s; --d: -5s; }
.dy-beams i:nth-child(3) { --at: 31%; --w: 10%; --t: 11s; --d: -1s; }
.dy-beams i:nth-child(4) { --at: 45%; --w: 5%; --t: 8s; --d: -6s; }
@keyframes dy-beam { from { opacity: 0.2; } to { opacity: 0.62; } }

/* Wildflowers in the grass: daisies, buttercups, clover. */
.dy-bloom--0 { fill: #fbf8ec; }
.dy-bloom--1 { fill: #f3cf55; }
.dy-bloom--2 { fill: #eba5bf; }

/* The rabbit: peeps from the bush, looks about with a twitch of the ears,
 * sometimes sits up a while; tapped, it ducks. */
.dy-rabbit { pointer-events: auto; cursor: pointer; }
.dy-rabbit__b { transform: translateY(100px); transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); }
.dy-rabbit.is-up .dy-rabbit__b { transform: translateY(0); }
.dy-rabbit.is-peek .dy-rabbit__b { transform: translateY(36px); }
.dy-rabbit.is-duck .dy-rabbit__b { transition: transform 0.18s ease-in; }
.dy-rabbit__fur,
.dy-rabbit__ear { fill: #b8a083; stroke: #5b4836; stroke-width: 2.4; }
.dy-rabbit__chest { fill: #e6d9c5; }
.dy-rabbit__inner { fill: none; stroke: #d69a93; stroke-width: 2.4; stroke-linecap: round; }
.dy-rabbit__eye { fill: #231d18; }
.dy-rabbit__glint { fill: #fff; }
.dy-rabbit__nose { fill: #d68e89; }
.dy-rabbit__ear { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.2s; }
.dy-rabbit.is-twitch .dy-rabbit__ear--r { transform: rotate(18deg); }
.dy-rabbit.is-twitch2 .dy-rabbit__ear--l { transform: rotate(-14deg); }
.dy-rabbit__bush { fill: var(--near-foot); }

/* ---- The songbird ------------------------------------------------------------- */
.dy-bird { pointer-events: auto; cursor: pointer; }
.dy-bird__body { fill: #5a86b6; }
.dy-bird__wing { fill: #3f6c9c; }
.dy-bird__tail { fill: #3c6693; }
.dy-bird__belly { fill: #efa679; }
.dy-bird__quill { fill: none; stroke: #2d5480; stroke-width: 0.8; stroke-linecap: round; }
.dy-bird__beak { fill: #e2a13c; }
.dy-bird__beak--low { transform-box: fill-box; transform-origin: 0 30%; transition: rotate 0.1s; }
.dy-bird.is-open .dy-bird__beak--low { rotate: 22deg; }
.dy-bird__eye { fill: #1b1b1b; }
.dy-bird__glint { fill: #fff; }
.dy-bird__legs { fill: none; stroke: #6b5a4a; stroke-width: 1.1; stroke-linecap: round; }
.dy-bird__b { transform-box: fill-box; transform-origin: 50% 100%; }
.dy-bird.is-flick .dy-bird__tail { transform-box: fill-box; transform-origin: 100% 60%; animation: dy-flick 0.36s ease-in-out; }
.dy-bird.is-ruffle .dy-bird__b { animation: dy-ruffle 0.6s ease-in-out; }
@keyframes dy-flick { 40% { rotate: 16deg; } }
@keyframes dy-ruffle { 25% { scale: 1.12 0.92; } 55% { scale: 0.96 1.05; } }
/* Away until day.js flies it in; in flight its wings beat, the two drawings
 * of them shown by turns, and its legs are tucked up. */
.dy-bird.is-away { visibility: hidden; }
.dy-bird__flap { fill: #3f6c9c; display: none; }
.dy-bird.is-flying .dy-bird__wing,
.dy-bird.is-flying .dy-bird__quill,
.dy-bird.is-flying .dy-bird__legs { display: none; }
.dy-bird.is-flying .dy-bird__flap { display: inline; animation: dy-bird-flap 0.15s linear infinite; }
.dy-bird.is-flying .dy-bird__flap--down { animation-delay: -0.075s; }
@keyframes dy-bird-flap { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Its song, three notes rising from the beak on the side it faces
 * (day.js sets --side). */
.dy-note { fill: #34443a; stroke: #34443a; stroke-width: 1.2; opacity: 0; }
.dy-note path { fill: none; stroke-linecap: round; }
.dy-bird.is-song .dy-note { animation: dy-note 1.9s ease-out both; }
.dy-bird.is-song .dy-note:nth-child(2) { animation-delay: 0.5s; }
.dy-bird.is-song .dy-note:nth-child(3) { animation-delay: 1s; }
@keyframes dy-note {
  0% { opacity: 0; transform: translate(calc(var(--side, 1) * 20px), -26px) scale(0.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--side, 1) * 38px), -62px) rotate(calc(var(--side, 1) * 14deg)) scale(1.05); }
}

/* ---- Butterflies -------------------------------------------------------------- *
 * Each flaps on its own beat; day.js flies them. */
.dy-flutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dy-fly {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  margin: -13px 0 0 -15px;
  overflow: visible;
  opacity: 0;
  will-change: transform;
}
.dy-flutter.is-flying .dy-fly { opacity: 1; transition: opacity 1.2s; }
.dy-fly__wings {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: dy-wing calc(0.13s + var(--i) * 0.013s) ease-in-out infinite alternate;
}
@keyframes dy-wing { to { scale: 0.16 1; } }
.dy-fly__wing { fill: var(--wing); stroke: var(--edge); stroke-width: 1.2; stroke-linejoin: round; }
.dy-fly__vein { fill: none; stroke: var(--edge); stroke-width: 0.9; stroke-linecap: round; opacity: 0.55; }
.dy-fly__body { fill: none; stroke: #2e2a24; stroke-width: 1.6; stroke-linecap: round; }
.dy-fly:nth-child(6n + 1) { --wing: #f6d35e; --edge: #a07a1c; }
.dy-fly:nth-child(6n + 2) { --wing: #9ccaf0; --edge: #3f6e9a; }
.dy-fly:nth-child(6n + 3) { --wing: #f4a067; --edge: #9c4f22; }
.dy-fly:nth-child(6n + 4) { --wing: #fbf8ee; --edge: #7b7a6e; }
.dy-fly:nth-child(6n + 5) { --wing: #f2a9c9; --edge: #9d4c73; }
.dy-fly:nth-child(6n + 6) { --wing: #bfa6f2; --edge: #634aa0; }

/* ---- Daybreak ------------------------------------------------------------------ *
 * On a visit without the welcome the page opens in the pink of early
 * morning, and the sun climbs: day.js adds .is-daybreak. */
.dy-daybreak {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(rgb(250 196 178 / 0.85), rgb(255 214 186 / 0.7) 50%, rgb(255 230 196 / 0.55));
  opacity: 0;
}
.sb-hero.is-daybreak .dy-daybreak { animation: dy-daybreak 3.4s cubic-bezier(0.4, 0, 0.3, 1); }
.sb-hero.is-daybreak .dy-sun { animation: dy-rise 3.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes dy-daybreak { from { opacity: 0.8; } }
@keyframes dy-rise { from { transform: translateY(52px); } }

@media (max-width: 600px) {
  .dy-sun { top: 8.5%; right: 7%; width: 52px; }
  .dy-cloud--1 { top: 5%; }
  .dy-cloud--3 { top: 46%; }
}