/* ==========================================================================
   Section focus on scroll — OPTIONAL FEATURE
   --------------------------------------------------------------------------
   Self-contained. To turn this feature off, remove the two tagged lines from
   each page (search for "section-focus"): the stylesheet link in <head> and
   the script tag before </body>. Leave these two files in place and the
   feature can be switched back on the same way. Nothing else depends on them.
   ========================================================================== */

/* The section you are reading sits at full strength; the ones above and below
   recede. Focus is driven by how much of a section is in view, so a section
   taller than the viewport works fine — nothing is snapped or hidden.

   Ranges matter here. An earlier version animated over `cover`, which runs
   from before a section appears until after it has gone; the fade then
   finished off-screen and every section was already at full strength by the
   time you could see it, so the effect was invisible. `entry` and `exit` are
   the phases when the section actually occupies the screen, so the change
   happens where it can be watched.

   Fade-in is on the section and fade-out on its container: two elements, so
   the two opacity animations multiply instead of fighting over one property.
   Dimming the section (background included) also lets a beige band fade
   toward the cream page, while keeping the background box full-bleed so no
   seam appears between adjacent bands.

   No scroll hijacking: the page scrolls at its normal pace.

   Native scroll-driven animations handle this with no JavaScript. Firefox
   still keeps animation-timeline behind a flag, so js/section-focus.js applies
   the same effect with IntersectionObserver when the timeline is unavailable. */

@media (prefers-reduced-motion: no-preference) {

  /* Arrival carries the visible work. On a cream-on-cream palette an opacity
     ramp alone is almost imperceptible — dimming a beige band toward a cream
     page changes very little — so the content rises as well as fades. Motion
     reads clearly where a tone shift does not. */
  @keyframes gtc-rise-in {
    from { opacity: 0.10; transform: translateY(48px); }
    to   { opacity: 1;    transform: none; }
  }

  /* Departure stays gentle: the whole band, background included, recedes. */
  @keyframes gtc-recede-out {
    from { opacity: 1; }
    to   { opacity: 0.35; }
  }

  @supports (animation-timeline: view()) {
    /* The hero opts out entirely. The exit animation drops a section to 0.35
       opacity, which over the cream body would wash a dark media hero to grey
       and read as a rendering fault rather than an effect. */
    main > section.hero,
    main > section.hero > .container {
      animation: none;
      transform: none;
      opacity: 1;
    }

    /* Rises into place while it sweeps into view. Ends at 90% of entry so it
       settles just before the section is fully on screen, rather than still
       resolving once you are reading it. */
    main > section > .container {
      animation: gtc-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* Recedes while it leaves. Kept on the section, not the container, so the
       two opacity animations sit on different elements and multiply rather
       than fighting over one property. */
    main > section {
      animation: gtc-recede-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }

  /* Fallback, switched on by section-focus.js only when the native timeline is
     missing. Gated behind the class so that with JavaScript off nothing is
     ever left dimmed. */
  .gtc-focus-js main > section > .container {
    opacity: 0.10;
    transform: translateY(48px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .gtc-focus-js main > section.hero,
  .gtc-focus-js main > section.hero > .container {
    opacity: 1;
    transform: none;
  }

  .gtc-focus-js main > section.is-focused > .container {
    opacity: 1;
    transform: none;
  }
}