/* Suns: the home page's rising sun (the daybreak band) and setting sun (the dusk band), made to move like the hour
   bands on the inner pages, so the three read as one system. 14 Oct 2026, Mark: "animates amazingly and perfectly
   like Apple would do it, and it's super smooth and looks amazing."

   What was wrong. The disc's position came from the lights script (a scroll value written every frame) and was then
   clamped by polish9 block 15 to a fifth of its travel, so the sun rose for the first moment the band was on screen
   and then stopped dead, with a visible snap. The daybreak disc ran off the top of its band, so its top was cut flat
   against the dark section above. The disc's edge was a 7 percent gradient (a grey rim), with no light around it.

   What this does. Each disc is a crisp chalk circle with a faint warm limb, inside a wide warm glow that falls off
   along a smooth curve; both are static and ride with the disc, so they are painted once. The disc moves only by
   `translate` on its own layer. Where the browser has scroll-driven animations, suns.js marks each band
   data-sv-motion="css" and the move runs on the band's own view timeline, eased out of rest and settling
   (cubic-bezier(.25, 0, .75, 1), the curve the hour bands use), on the graphics thread, so a busy page cannot make
   it stutter. Elsewhere suns.js writes --sv-p (0 to 1) once a frame with the same curve and a light follow.
   Without the script, with reduced motion, or with the site paused, each disc rests at --sv-rest.

   Taking over from the older rules. polish9 block 15 sets the disc's `transform` with !important, and the lights
   script writes --lx-sun-rise, --lx-dusk-set, --lx-dawn-shift and --lx-dawn-title-y every frame. Here the disc, the
   dawn ground and the daybreak title get `transform: none` (with !important where polish9 used it) and move by the
   separate `translate` property instead, so those variables are still written but no longer move anything.

   Second pass, 14 Oct, Mark: "this sun isnt rising anymore?". It was rising, but only 46 px while the page moved
   1100 px, so it read as standing still. Now the daybreak sun comes up from fully below the horizon (110 px down)
   to the top of the band (2 px) between the band entering the window and passing 75 percent of its way through,
   so most of the climb happens while the band is in the lower half of the screen, where the eye is. The dusk sun drops from the
   top of its band (4 px) to below its horizon (112 px) between 15 and 90 percent. suns.js uses the same ranges.

   Numbers per band, as px from the top of the band's sun window to the top of the disc:
     --sv-a     where the disc is at the start of its range
     --sv-b     where it is at the end
     --sv-rest  where it rests when nothing moves
     --sv-ga    strength of the glow at the disc's edge
   Colours are chalk, carbon and warm greys only. Nothing here is ember. */

html body.nine-home #lx-lights .nh-interlude .lx-daybreak { --sv-a: 110px; --sv-b: 2px; --sv-rest: 14px; --sv-ga: .36; }
html body.nine-home #lx-lights .lx-dusk { --sv-a: 4px; --sv-b: 112px; --sv-rest: 34px; --sv-ga: .3; }
@media (max-width: 760px) {
  html body.nine-home #lx-lights .lx-dusk { --sv-a: 2px; --sv-b: 72px; --sv-rest: 22px; }
}

/* The windows the discs show through: a short fade at the top, so the glow never ends on a line against the
   section above, and an eased fade at the horizon (smoothstep in eight steps; a straight fade starts with a corner
   the eye reads as a line). The masks never move. */
html body.nine-home #lx-lights .nh-interlude .lx-daybreak .lx-sun-window {
  -webkit-mask-image: linear-gradient(transparent 0, rgb(0 0 0 / .16) 3px, rgb(0 0 0 / .5) 6px, rgb(0 0 0 / .84) 9px, #000 12px,
    #000 58%, rgb(0 0 0 / .957) 63.25%, rgb(0 0 0 / .844) 68.5%, rgb(0 0 0 / .684) 73.75%, rgb(0 0 0 / .5) 79%,
    rgb(0 0 0 / .316) 84.25%, rgb(0 0 0 / .156) 89.5%, rgb(0 0 0 / .043) 94.75%, transparent 100%);
  mask-image: linear-gradient(transparent 0, rgb(0 0 0 / .16) 3px, rgb(0 0 0 / .5) 6px, rgb(0 0 0 / .84) 9px, #000 12px,
    #000 58%, rgb(0 0 0 / .957) 63.25%, rgb(0 0 0 / .844) 68.5%, rgb(0 0 0 / .684) 73.75%, rgb(0 0 0 / .5) 79%,
    rgb(0 0 0 / .316) 84.25%, rgb(0 0 0 / .156) 89.5%, rgb(0 0 0 / .043) 94.75%, transparent 100%);
}
html body.nine-home #lx-lights .lx-dusk .lx-dusk-window {
  -webkit-mask-image: linear-gradient(transparent 0, rgb(0 0 0 / .16) 3px, rgb(0 0 0 / .5) 6px, rgb(0 0 0 / .84) 9px, #000 12px,
    #000 55%, rgb(0 0 0 / .957) 60.6%, rgb(0 0 0 / .844) 66.3%, rgb(0 0 0 / .684) 71.9%, rgb(0 0 0 / .5) 77.5%,
    rgb(0 0 0 / .316) 83.1%, rgb(0 0 0 / .156) 88.8%, rgb(0 0 0 / .043) 94.4%, transparent 100%);
  mask-image: linear-gradient(transparent 0, rgb(0 0 0 / .16) 3px, rgb(0 0 0 / .5) 6px, rgb(0 0 0 / .84) 9px, #000 12px,
    #000 55%, rgb(0 0 0 / .957) 60.6%, rgb(0 0 0 / .844) 66.3%, rgb(0 0 0 / .684) 71.9%, rgb(0 0 0 / .5) 77.5%,
    rgb(0 0 0 / .316) 83.1%, rgb(0 0 0 / .156) 88.8%, rgb(0 0 0 / .043) 94.4%, transparent 100%);
}


/* The two discs. The element itself is only the moving frame: its glow is ::before, the disc ::after. */
html body.nine-home #lx-lights .nh-interlude .lx-daybreak .lx-sun-window > .lx-sun,
html body.nine-home #lx-lights .lx-dusk .lx-dusk-window > .lx-dusk-sun {
  top: 0; bottom: auto; border-radius: 0; background: none;
  transform: none !important;
  translate: -50% var(--sv-rest);
  will-change: transform; backface-visibility: hidden;
}
html body.nine-home #lx-lights .nh-interlude .lx-daybreak .lx-sun-window > .lx-sun::before,
html body.nine-home #lx-lights .lx-dusk .lx-dusk-window > .lx-dusk-sun::before {
  content: ""; position: absolute; inset: -90%; border-radius: 50%; pointer-events: none;
  /* Glow box 2.8 discs wide; the disc's edge falls at 35.7 percent. A tight halo and a long tail, each a smoothstep,
     sampled in 17 stops so no stop meets the next at a corner. */
  background: radial-gradient(closest-side,
    rgb(246 239 226 / var(--sv-ga)) 35.7%, rgb(246 239 226 / calc(var(--sv-ga) * .9427)) 39.7%,
    rgb(246 239 226 / calc(var(--sv-ga) * .7998)) 43.8%, rgb(246 239 226 / calc(var(--sv-ga) * .6153)) 47.8%,
    rgb(246 239 226 / calc(var(--sv-ga) * .4341)) 51.8%, rgb(246 239 226 / calc(var(--sv-ga) * .3006)) 55.8%,
    rgb(246 239 226 / calc(var(--sv-ga) * .2337)) 59.8%, rgb(246 239 226 / calc(var(--sv-ga) * .176)) 63.8%,
    rgb(246 239 226 / calc(var(--sv-ga) * .125)) 67.9%, rgb(246 239 226 / calc(var(--sv-ga) * .0827)) 71.9%,
    rgb(246 239 226 / calc(var(--sv-ga) * .0501)) 75.9%, rgb(246 239 226 / calc(var(--sv-ga) * .0269)) 79.9%,
    rgb(246 239 226 / calc(var(--sv-ga) * .0122)) 83.9%, rgb(246 239 226 / calc(var(--sv-ga) * .0043)) 87.9%,
    rgb(246 239 226 / calc(var(--sv-ga) * .0009)) 92%, rgb(246 239 226 / 0) 96%);
}
html body.nine-home #lx-lights .nh-interlude .lx-daybreak .lx-sun-window > .lx-sun::after,
html body.nine-home #lx-lights .lx-dusk .lx-dusk-window > .lx-dusk-sun::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #F8F6F1 0, #F5F2EC 58%, #EFEAE0 100%);
}

/* The dawn ground and the daybreak line move on the same timeline as the sun (they used to follow the lights
   script's own eased scroll value, a frame or two behind). Same travel as before: the ground 8 percent each way,
   the line up 28 px. */
html body.nine-home #lx-lights .nh-interlude .lx-daybreak > .lx-dawn-ground { transform: none; translate: 0 -2%; }
html body.nine-home #lx-lights .nh-interlude .lx-daybreak > .lx-dawn-title { transform: none; translate: 0 0; }

/* Scroll-driven: the band is its own timeline, from its top edge entering the bottom of the window to its bottom
   edge leaving the top. */
html body.nine-home #lx-lights .nh-interlude .lx-daybreak[data-sv-motion="css"] { view-timeline: --sv-dawn block; }
html body.nine-home #lx-lights .lx-dusk[data-sv-motion="css"] { view-timeline: --sv-dusk block; }
html body.nine-home #lx-lights .nh-interlude .lx-daybreak[data-sv-motion="css"] .lx-sun-window > .lx-sun {
  animation: sv-disc linear both; animation-timeline: --sv-dawn; animation-range: cover 0% cover 75%;
  animation-timing-function: cubic-bezier(.25, 0, .75, 1);
}
html body.nine-home #lx-lights .lx-dusk[data-sv-motion="css"] .lx-dusk-window > .lx-dusk-sun {
  animation: sv-disc linear both; animation-timeline: --sv-dusk; animation-range: cover 15% cover 90%;
  animation-timing-function: cubic-bezier(.25, 0, .75, 1);
}
html body.nine-home #lx-lights .nh-interlude .lx-daybreak[data-sv-motion="css"] > .lx-dawn-ground {
  animation: sv-ground linear both; animation-timeline: --sv-dawn; animation-range: cover 0% cover 75%;
  animation-timing-function: cubic-bezier(.25, 0, .75, 1);
}
html body.nine-home #lx-lights .nh-interlude .lx-daybreak[data-sv-motion="css"] > .lx-dawn-title {
  animation: sv-title linear both; animation-timeline: --sv-dawn; animation-range: cover 0% cover 75%;
  animation-timing-function: cubic-bezier(.25, 0, .75, 1);
}
@keyframes sv-disc { from { translate: -50% var(--sv-a); } to { translate: -50% var(--sv-b); } }
@keyframes sv-ground { from { translate: 0 8%; } to { translate: 0 -8%; } }
@keyframes sv-title { from { translate: 0 28px; } to { translate: 0 0; } }

/* Script-driven, where scroll-driven animations are missing: --sv-p is already eased and followed by suns.js. */
html body.nine-home #lx-lights .nh-interlude .lx-daybreak[data-sv-motion="js"] .lx-sun-window > .lx-sun,
html body.nine-home #lx-lights .lx-dusk[data-sv-motion="js"] .lx-dusk-window > .lx-dusk-sun {
  translate: -50% calc(var(--sv-a) + (var(--sv-b) - var(--sv-a)) * var(--sv-p, .5));
}
html body.nine-home #lx-lights .nh-interlude .lx-daybreak[data-sv-motion="js"] > .lx-dawn-ground { translate: 0 calc(8% - 16% * var(--sv-p, .5)); }
html body.nine-home #lx-lights .nh-interlude .lx-daybreak[data-sv-motion="js"] > .lx-dawn-title { translate: 0 calc(28px * (1 - var(--sv-p, .5))); }

/* Stillness: reduced motion, or the site's own pause switch. Everything rests where it was designed to. */
@media (prefers-reduced-motion: reduce) {
  html body.nine-home #lx-lights .nh-interlude .lx-daybreak .lx-sun-window > .lx-sun,
  html body.nine-home #lx-lights .lx-dusk .lx-dusk-window > .lx-dusk-sun { animation: none !important; translate: -50% var(--sv-rest) !important; }
  html body.nine-home #lx-lights .nh-interlude .lx-daybreak > .lx-dawn-ground { animation: none !important; translate: 0 -2% !important; }
  html body.nine-home #lx-lights .nh-interlude .lx-daybreak > .lx-dawn-title { animation: none !important; translate: 0 0 !important; }
}
html[data-solva-motion="paused"] body.nine-home #lx-lights .nh-interlude .lx-daybreak .lx-sun-window > .lx-sun,
html[data-solva-motion="paused"] body.nine-home #lx-lights .lx-dusk .lx-dusk-window > .lx-dusk-sun { animation: none !important; translate: -50% var(--sv-rest) !important; }
html[data-solva-motion="paused"] body.nine-home #lx-lights .nh-interlude .lx-daybreak > .lx-dawn-ground { animation: none !important; translate: 0 -2% !important; }
html[data-solva-motion="paused"] body.nine-home #lx-lights .nh-interlude .lx-daybreak > .lx-dawn-title { animation: none !important; translate: 0 0 !important; }