/* Anchor for the sun and moon; their tracks carry them across the sky */
  .sky {
    position: fixed;
    top: calc(32px + env(safe-area-inset-top, 0px));
    right: 32px;
    width: var(--orb-size);
    height: var(--orb-size);
    pointer-events: none;
  }

  /* Tracks carry the travel; the discs inside stay untransformed so each
     ::before can sit behind its disc (a transform would trap it in front). */
  .track {
    position: absolute;
    inset: 0;
    animation-duration: var(--cycle);
    animation-iteration-count: infinite;
    animation-delay: var(--cycle-start);
    animation-timing-function: linear;
  }

  .moon, .sun {
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }

  /* Moon: dark disc over a glowing light disc that drifts side to side */
  .moon-track { animation-name: moon-travel; }
  .moon {
    /* lit shape drawn by script; unlit side is left open so the sky shows */
    filter: drop-shadow(0 0 6px var(--moon-light)) drop-shadow(0 0 28px rgba(255, 255, 255, .45));
  }
  .moon svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .moon path { fill: var(--moon-light); }
  @keyframes moon-travel {
    0.00% { transform: translate(calc(-0.00vw + 100.00% + 140.0px), 10.00vh); }
    2.08% { transform: translate(calc(-4.17vw + 95.83% + 129.2px), 8.40vh); }
    4.17% { transform: translate(calc(-8.33vw + 91.67% + 118.3px), 6.94vh); }
    6.25% { transform: translate(calc(-12.50vw + 87.50% + 107.5px), 5.62vh); }
    8.33% { transform: translate(calc(-16.67vw + 83.33% + 96.7px), 4.44vh); }
    10.42% { transform: translate(calc(-20.83vw + 79.17% + 85.8px), 3.40vh); }
    12.50% { transform: translate(calc(-25.00vw + 75.00% + 75.0px), 2.50vh); }
    14.58% { transform: translate(calc(-29.17vw + 70.83% + 64.2px), 1.74vh); }
    16.67% { transform: translate(calc(-33.33vw + 66.67% + 53.3px), 1.11vh); }
    18.75% { transform: translate(calc(-37.50vw + 62.50% + 42.5px), 0.62vh); }
    20.83% { transform: translate(calc(-41.67vw + 58.33% + 31.7px), 0.28vh); }
    22.92% { transform: translate(calc(-45.83vw + 54.17% + 20.8px), 0.07vh); }
    25.00% { transform: translate(calc(-50.00vw + 50.00% + 10.0px), 0.00vh); }
    27.08% { transform: translate(calc(-54.17vw + 45.83% + -0.8px), 0.07vh); }
    29.17% { transform: translate(calc(-58.33vw + 41.67% + -11.7px), 0.28vh); }
    31.25% { transform: translate(calc(-62.50vw + 37.50% + -22.5px), 0.62vh); }
    33.33% { transform: translate(calc(-66.67vw + 33.33% + -33.3px), 1.11vh); }
    35.42% { transform: translate(calc(-70.83vw + 29.17% + -44.2px), 1.74vh); }
    37.50% { transform: translate(calc(-75.00vw + 25.00% + -55.0px), 2.50vh); }
    39.58% { transform: translate(calc(-79.17vw + 20.83% + -65.8px), 3.40vh); }
    41.67% { transform: translate(calc(-83.33vw + 16.67% + -76.7px), 4.44vh); }
    43.75% { transform: translate(calc(-87.50vw + 12.50% + -87.5px), 5.62vh); }
    45.83% { transform: translate(calc(-91.67vw + 8.33% + -98.3px), 6.94vh); }
    47.92% { transform: translate(calc(-95.83vw + 4.17% + -109.2px), 8.40vh); }
    50.00% { transform: translate(calc(-100.00vw + 0.00% + -120.0px), 10.00vh); }
    99.99% { transform: translate(calc(-100.00vw + 0.00% + -120.0px), 10.00vh); }
    100.00% { transform: translate(calc(0.00vw + 100.00% + 140.0px), 10.00vh); }
  }