@layer defaults {
  @keyframes pulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgb(74 158 255 / 40%);
    }

    50% {
      box-shadow: 0 0 0 10px rgb(74 158 255 / 0%);
    }
  }

  @keyframes breathe {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes fade-in {
    from { opacity: 0; }
  }

  @keyframes fade-out {
    to { opacity: 0; }
  }

  @keyframes slide-left-in {
    from { transform: translateX(2rem); opacity: 0; }
  }

  @keyframes slide-left-out {
    to { transform: translateX(-2rem); opacity: 0; }
  }

  @keyframes slide-right-in {
    from { transform: translateX(-2rem); opacity: 0; }
  }

  @keyframes slide-right-out {
    to { transform: translateX(2rem); opacity: 0; }
  }

  :root {
    interpolate-size: allow-keywords;

    --transition-fast: 0.15s;
    --transition-normal: 0.3s;

    --timing-snap: cubic-bezier(0.4, 0, 0.2, 1);
  }

  *,
  *::before,
  *::after,
  *::backdrop {
    animation-duration: var(--transition-fast);
    transition-duration: var(--transition-fast);

    animation-timing-function: var(--timing-snap);
    transition-timing-function: var(--timing-snap);

    transition-behavior: allow-discrete;
    transition-property: none;

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}