Day → night scroll scene

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/scroll/scroll-scene-day-night.html
  Desc   : Sun sets and moon rises as you scroll the section
  ============================================================
-->
<div class="sg-scroll-scene-day-night" style="--sg-sky-day:#8FC7EE; --sg-sky-night:#1B2140; --sg-size:260px;">
  <div class="sg-scroll-scene-day-night-track">
    <div class="sg-scroll-scene-day-night-sticky">
      <svg viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
        <rect class="sg-scroll-scene-day-night-sky" x="0" y="0" width="200" height="120" />
        <g class="sg-scroll-scene-day-night-stars">
          <circle cx="30" cy="22" r="1.3" /><circle cx="70" cy="14" r="1" />
          <circle cx="120" cy="26" r="1.2" /><circle cx="168" cy="16" r="1" />
        </g>
        <circle class="sg-scroll-scene-day-night-sun" cx="52" cy="42" r="14" />
        <g class="sg-scroll-scene-day-night-moon">
          <circle cx="146" cy="38" r="11" />
          <circle class="sg-scroll-scene-day-night-crater" cx="142" cy="35" r="2.6" />
          <circle class="sg-scroll-scene-day-night-crater" cx="150" cy="42" r="1.8" />
        </g>
        <path class="sg-scroll-scene-day-night-hills" d="M0 92 C 40 76, 76 100, 112 88 C 150 76, 176 96, 200 90 V120 H0 Z" />
      </svg>
      <span class="sg-scroll-scene-day-night-hint">scroll ↓</span>
    </div>
  </div>
</div>
<style>
  .sg-scroll-scene-day-night {
    width: 100%;
    min-width: 220px;
    height: var(--sg-size);
    overflow-y: scroll;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 10px;
  }
  .sg-scroll-scene-day-night-track { height: calc(var(--sg-size) * 3); }
  .sg-scroll-scene-day-night-sticky {
    position: sticky;
    top: 0;
    height: var(--sg-size);
    /* no overflow:hidden here — it would become the nearest scroll container
       and scroll(nearest) would bind to a box that never scrolls */
  }
  .sg-scroll-scene-day-night-sticky svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-scroll-scene-day-night-hint {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 12px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 8px;
    border-radius: 999px;
  }
  /* fallback = frozen dusk, halfway between the two skies */
  .sg-scroll-scene-day-night-sky { fill: color-mix(in srgb, var(--sg-sky-day) 45%, var(--sg-sky-night)); }
  .sg-scroll-scene-day-night-sun { fill: #f6c34a; translate: 0 28px; }
  .sg-scroll-scene-day-night-moon { fill: #e9edf5; translate: 0 30px; }
  .sg-scroll-scene-day-night-crater { fill: rgba(0, 0, 0, 0.15); }
  .sg-scroll-scene-day-night-stars { fill: #ffffff; opacity: 0.45; }
  .sg-scroll-scene-day-night-hills { fill: rgba(18, 22, 34, 0.85); }
  @supports (animation-timeline: scroll()) {
    .sg-scroll-scene-day-night-sky {
      animation: sg-scroll-scene-day-night-dim linear both;
      animation-duration: auto;
      animation-timeline: scroll(nearest);
    }
    .sg-scroll-scene-day-night-sun {
      animation: sg-scroll-scene-day-night-set linear both;
      animation-duration: auto;
      animation-timeline: scroll(nearest);
    }
    .sg-scroll-scene-day-night-moon {
      animation: sg-scroll-scene-day-night-rise linear both;
      animation-duration: auto;
      animation-timeline: scroll(nearest);
    }
    .sg-scroll-scene-day-night-stars {
      animation: sg-scroll-scene-day-night-twinkle linear both;
      animation-duration: auto;
      animation-timeline: scroll(nearest);
    }
  }
  @keyframes sg-scroll-scene-day-night-dim {
    from { fill: var(--sg-sky-day); }
    to   { fill: var(--sg-sky-night); }
  }
  @keyframes sg-scroll-scene-day-night-set {
    from { translate: 0 0; }
    to   { translate: 0 62px; }
  }
  @keyframes sg-scroll-scene-day-night-rise {
    from { translate: 0 68px; }
    to   { translate: 0 0; }
  }
  @keyframes sg-scroll-scene-day-night-twinkle {
    0%, 55% { opacity: 0; }
    100%    { opacity: 1; }
  }
</style>