/*!
 * Parallax (decision D33, 2026-10-23: the owner asked for parallax scrolling to make the site feel more modern).
 *
 * A REMOVABLE LAYER, like dark.css. Deleting this file leaves the approved design exactly as it was, so
 * everything here is guarded twice and nothing sits outside the guards:
 *
 *   prefers-reduced-motion: no-preference  a visitor who has asked their device for less motion gets none;
 *   @supports (animation-timeline: view())  a browser without scroll-driven animations gets the static design.
 *
 * CSS ONLY. Scroll-driven animations run on the compositor from the scroll position, so there is no script, no
 * scroll listener and no per-visitor state (C4): every visitor receives the same bytes.
 *
 * TRANSFORM, PLUS ONE FADE. Until 2026-11-11 this layer only moved things. The owner then asked for the information
 * to fade in as the visitor scrolls down (spec D37), so the blocks that rise into place also fade in, through the
 * one `sfbl-fade-in` keyframe and nothing else. The fade ends by 35-40% of the way into view, so text is at full
 * opacity, and at the contrast CONTRAST.md measured, wherever a visitor actually reads it. Nothing here changes
 * visibility, display, color or layout, and a layer that lags can never cover a link. The hero never fades: it is
 * what a visitor sees first. print.css switches every animation off, so a printed page is never half faded. The
 * directory grid is left alone: it is a tool, and cards that move while a visitor filters them would be in the way.
 *
 * The distances are the three --parallax-* tokens in tokens.css.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* ---- the hero: the ruled lines lag furthest, the copy a little less, so the page slides over both ---- */
    .hero::before {
      animation: parallax-sink-far linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    .hero .wrap {
      animation: parallax-sink-mid linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    /* ---- the dark bands: the ruled lines drift against the scroll as the band passes ---- */
    .band::before {
      inset: calc(-1 * var(--parallax-mid)) 0;
      animation: parallax-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* ---- sections rise and fade into place as they come into view ---- */
    .sec-head,
    .seat,
    .professionhero,
    .th-cols,
    .band .wrap,
    .cards:not(#grid) > li {
      animation: parallax-rise-near linear both, sfbl-fade-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    /* ---- the pillars: the row rises as one piece, so the ruled grid between the boxes never opens; inside it, the
       text of each box settles at its own speed, which is the depth that makes it read as parallax. The deepest
       offset (near) is less than a pillar's bottom padding, so no text ever crosses its box's border. ---- */
    .pillars { animation: parallax-rise-mid linear both, sfbl-fade-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .pillar:nth-child(2) > *,
    .pillar:nth-child(3) > * { animation: parallax-rise-half linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .pillar:nth-child(3) > * { animation-name: parallax-rise-near; }

    @keyframes sfbl-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes parallax-sink-far { from { transform: none; } to { transform: translateY(var(--parallax-far)); } }
    @keyframes parallax-sink-mid { from { transform: none; } to { transform: translateY(var(--parallax-mid)); } }
    @keyframes parallax-drift { from { transform: translateY(calc(-1 * var(--parallax-mid))); } to { transform: translateY(var(--parallax-mid)); } }
    @keyframes parallax-rise-near { from { transform: translateY(var(--parallax-near)); } to { transform: none; } }
    @keyframes parallax-rise-half { from { transform: translateY(calc(var(--parallax-near) / 2)); } to { transform: none; } }
    @keyframes parallax-rise-mid { from { transform: translateY(var(--parallax-mid)); } to { transform: none; } }
    @keyframes parallax-rise-far { from { transform: translateY(var(--parallax-far)); } to { transform: none; } }
  }
}