@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: fixed;
    inset-block-start: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: var(--z-skip-link);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-xs);
    background-color: var(--color-brand);
    color: var(--color-on-dark);
    font-weight: var(--fw-bold);
    transform: translateY(-200%);
    transition: transform var(--duration) var(--ease-out);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .on-dark {
    color: var(--color-on-dark);
  }

  /* Смысловое выделение внутри заголовка — в макете такие слова набраны брендовым цветом. */
  .accent {
    color: var(--color-brand);
  }

  .no-scroll {
    overflow: hidden;
  }

  /* Появление секций при скролле; без JS и при reduce-motion всё видно сразу. */
  .reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

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