@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

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

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

  .text-center {
    text-align: center;
  }

  .mt-section {
    margin-top: var(--sp-section);
  }

  /* === Reveal system: progressive enhancement + stagger === */
  .reveal,
  .reveal--slide-left,
  .reveal--scale {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  body.js-ready .reveal {
    opacity: 0;
    translate: 0 2rem;
    transition: opacity 0.7s var(--ease-out),
                translate 0.7s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 120ms);
  }

  body.js-ready .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }

  body.js-ready .reveal--slide-left {
    opacity: 0;
    translate: -2rem 0;
    transition: opacity 0.7s var(--ease-out),
                translate 0.7s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 120ms);
  }

  body.js-ready .reveal--slide-left.is-visible {
    opacity: 1;
    translate: 0 0;
  }

  body.js-ready .reveal--scale {
    opacity: 0;
    scale: 0.95;
    transition: opacity 0.7s var(--ease-out),
                scale 0.7s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 120ms);
  }

  body.js-ready .reveal--scale.is-visible {
    opacity: 1;
    scale: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    body.js-ready .reveal,
    body.js-ready .reveal--slide-left,
    body.js-ready .reveal--scale {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      transition: none;
    }
  }
}