/* ==========================================================================
   Section colours — gradual background change while scrolling
   --------------------------------------------------------------------------
   Each section keeps its own background-color in its CSS file (that is what
   shows without JavaScript). js/modules/section-colors.js reads those colours,
   adds `.has-section-colors` to <html> — which makes the sections transparent —
   and paints this fixed layer with the colour of the section in view
   (`--page-bg` on <html>).
   Sections marked with `data-bg-static` keep their own background.
   ========================================================================== */

/* Page start colour: the body already has the colour of the first section,
   so the strip behind the transparent sticky header matches it from the very
   first paint, before js/modules/section-colors.js paints .page-bg. */
.page--red {
  background-color: var(--color-red);
}

.page--black {
  background-color: var(--color-black);
}

.page--cream {
  background-color: var(--color-cream);
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--page-bg);
  transition: background-color 0.9s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}

.has-section-colors :is(main > section, .footer):not([data-bg-static]) {
  background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .page-bg {
    transition: none;
  }
}