/* @layer utilities — helpers, a11y, motion, overrides */

@layer utilities {

  /* ─────────────────────────────────────────────
     SCREEN READER ONLY
     clip-path pattern: avoids layout impact.
     Do not use display:none or visibility:hidden —
     those remove content from the accessibility tree.
     ───────────────────────────────────────────── */

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Restore visibility when focused — for skip links and
     other elements that should be visible on keyboard focus */
  .sr-only--focusable:focus-visible {
    position: static;
    inline-size: auto;
    block-size: auto;
    padding: revert;
    margin: revert;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  /* ─────────────────────────────────────────────
     FADE-IN — INTERSECTION OBSERVER REVEAL
     JS adds .fade-in--visible when element enters viewport.
     No motion if prefers-reduced-motion is set —
     the @media block below handles that override.
     ───────────────────────────────────────────── */

  .fade-in {
    opacity: 0;
    transform: translateY(var(--space-3));
    transition:
      opacity    var(--duration-reveal) var(--ease-out),
      transform  var(--duration-reveal) var(--ease-out);
  }

  .fade-in--visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger delay modifiers — apply to child items in a grid/list */
  .fade-in--delay-1 { transition-delay: 100ms; }
  .fade-in--delay-2 { transition-delay: 200ms; }
  .fade-in--delay-3 { transition-delay: 300ms; }
  .fade-in--delay-4 { transition-delay: 400ms; }

  /* ─────────────────────────────────────────────
     REDUCED MOTION OVERRIDES
     Belt-and-suspenders: reset.css applies !important
     to all elements; these class-level rules back it up
     for specificity edge cases.
     ───────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .fade-in {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .fade-in--delay-1,
    .fade-in--delay-2,
    .fade-in--delay-3,
    .fade-in--delay-4 {
      transition-delay: 0ms;
    }
  }

  /* ─────────────────────────────────────────────
     DISPLAY UTILITIES
     Minimal set — resist the urge to expand this
     into a utility-class framework.
     ───────────────────────────────────────────── */

  .hidden {
    display: none !important;
  }

  .visually-hidden {
    /* Alias for .sr-only — some devs use either name */
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ─────────────────────────────────────────────
     TEXT UTILITIES
     ───────────────────────────────────────────── */

  .text-accent {
    color: var(--color-accent);
  }

  .text-muted {
    color: var(--color-text-muted);
  }

  .text-italic {
    font-style: italic;
  }

  .text-upper {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  /* ─────────────────────────────────────────────
     LIVE REGION
     Used for form submission feedback, stream updates.
     Invisible by default; content injected by JS.
     ───────────────────────────────────────────── */

  .live-region {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* When live region has visible content (e.g. .form-status) it is not hidden */
  .live-region--visible {
    position: static;
    inline-size: auto;
    block-size: auto;
    padding: revert;
    margin: revert;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  /* ─────────────────────────────────────────────
     LOADING STATE
     Applied to buttons during async operations.
     ───────────────────────────────────────────── */

  .is-loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
  }

  /* ─────────────────────────────────────────────
     PRINT
     Minimal — the platform is screen-first.
     ───────────────────────────────────────────── */

  @media print {
    .nav,
    .skip-link,
    .begin {
      display: none;
    }

    body {
      background: white;
      color: black;
    }
  }

} /* @layer utilities */