/* The shadow maps combine with darken before the scene multiplies onto the page.
   This uses the stronger shadow at each point, rather than adding two shadows. */
html[data-theme="light"] { background-color: #ebe2d0; }
body > .daylight {
  display: none;
  position: fixed;
  /* Above the paper texture, below the content and fixed footer. */
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  background: white;
  mix-blend-mode: multiply;
}
html[data-theme="light"] .daylight { display: block; }
.daylight > div { position: absolute; pointer-events: none; }
.daylight-sun {
  inset: 0;
  background:
    radial-gradient(ellipse at 94% -12%, rgba(255, 228, 159, .23), transparent 68%),
    linear-gradient(126deg, transparent 22%, rgba(255, 242, 199, .09) 55%, transparent 83%);
}
.daylight-clouds,
.daylight-clouds-alt {
  --cloud-veil: .77;
  --cloud-tile: clamp(1100px, 135vw, 2100px);
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,var(--cloud-veil)), rgba(255,255,255,var(--cloud-veil))),
    url("/assets/cloud-field-fallback-v1.webp") 0 0 / var(--cloud-tile) var(--cloud-tile) repeat,
    white;
  mix-blend-mode: darken;
}
.daylight-clouds-alt {
  --cloud-veil: .88;
  --cloud-tile: clamp(760px, 89vw, 1386px);
  background-position: 0 0, 33% 75%, 0 0;
}
.daylight-clouds,
.daylight-clouds-alt { display: none; }
.daylight-static .daylight-clouds,
.daylight-static .daylight-clouds-alt { display: block; }
.daylight > canvas.daylight-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  mix-blend-mode: darken;
  pointer-events: none;
}
.daylight.daylight-field-ready > canvas.daylight-field { display: block; }
.daylight-field-ready .daylight-clouds,
.daylight-field-ready .daylight-clouds-alt { display: none; }
.daylight-tree,
.daylight-twigs,
.daylight-leaves-left,
.daylight-leaves-right {
  width: clamp(820px, 108vw, 1640px);
  height: clamp(615px, 81vw, 1230px);
  top: -10vh;
  right: -7vw;
  transform-origin: 97% 0;
  --tree-veil: .81;
  background:
    linear-gradient(rgba(255,255,255,var(--tree-veil)), rgba(255,255,255,var(--tree-veil))),
    var(--tree-image) top right / contain no-repeat,
    white;
  --tree-image: url("/assets/tree-branches-v2.webp");
  mix-blend-mode: darken;
  opacity: 1;
  /* Keep the densest leaves at the margins, with a gradual falloff toward copy. */
  mask-image: linear-gradient(240deg, #000 10%, rgba(0,0,0,.95) 32%, rgba(0,0,0,.58) 57%, transparent 80%);
  animation: tree-limb-drift 19s ease-in-out infinite;
}
.daylight-twigs {
  --tree-image: url("/assets/tree-canopy-back-v2.webp");
  --tree-veil: .90;
  animation: tree-canopy-drift 17s ease-in-out -4s infinite;
}
.daylight-leaves-left {
  --tree-image: url("/assets/tree-canopy-left-v2.webp");
  --tree-veil: .77;
  transform-origin: 67% 22%;
  animation: tree-leaves-left 11s ease-in-out -2s infinite;
}
.daylight-leaves-right {
  --tree-image: url("/assets/tree-canopy-right-v2.webp");
  --tree-veil: .77;
  transform-origin: 86% 18%;
  animation: tree-leaves-right 13s ease-in-out -5s infinite;
}
@keyframes tree-limb-drift {
  0%, 100% { transform: rotate(-.16deg); }
  50% { transform: rotate(.18deg); }
}
@keyframes tree-canopy-drift {
  0%, 100% { transform: translate(-1px, 0) rotate(-.2deg); }
  50% { transform: translate(2px, 1px) rotate(.25deg); }
}
@keyframes tree-leaves-left {
  0%, 100% { transform: translate(0, 0) rotate(-.2deg); }
  28% { transform: translate(1.5px, -.5px) rotate(.15deg); }
  58% { transform: translate(3px, 1px) rotate(.4deg); }
  80% { transform: translate(.5px, 1.5px) rotate(.1deg); }
}
@keyframes tree-leaves-right {
  0%, 100% { transform: translate(.5px, 0) rotate(.15deg); }
  33% { transform: translate(-1px, 1.5px) rotate(-.3deg); }
  65% { transform: translate(2px, .5px) rotate(.3deg); }
}
.daylight-paused > div { animation-play-state: paused; }
@media (max-width: 600px) {
  .daylight-tree, .daylight-twigs, .daylight-leaves-left, .daylight-leaves-right { right: -205px; }
  .daylight-tree { --tree-veil: .85; }
  .daylight-twigs { --tree-veil: .92; }
  .daylight-leaves-left, .daylight-leaves-right { --tree-veil: .81; }
  .daylight-clouds { --cloud-veil: .79; }
}
@media (prefers-reduced-motion: reduce) {
  .daylight > div { animation: none; }
}