/*********************
* Remove animations and transitions *
@see https://hankchizljaw.com/wrote/a-modern-css-reset/
========================
*********************/
@layer base {
  /*********************
  * Hides content visually. *
  So it's only available to screen readers and bots 🤖
  Solution by Joe Watkins.
  @see https://zellwk.com/blog/hide-content-accessibly/
  **********************/
  .sr-only {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    html {
      interpolate-size: allow-keywords;

      &:focus-within {
        scroll-behavior: var(--scroll-behavior, smooth);
      }
    }
  }
}