@layer base {
  @keyframes pulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.4);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(74, 158, 255, 0);
    }
  }

  @keyframes breathe {
    from {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes rotation {
    to {
      transform: rotate(360deg);
    }
  }

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

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

  @keyframes slide-in {
    from {
      transform: translateY(100%);
    }
  }

  @keyframes slide-out {
    to {
      transform: translateY(100%);
    }
  }

  @keyframes slide-left-out {
    to {
      transform: translateX(-2rem);
      opacity: 0;
    }
  }
  @keyframes slide-left-in {
    from {
      transform: translateX(2rem);
      opacity: 0;
    }
  }
  @keyframes slide-right-out {
    to {
      transform: translateX(2rem);
      opacity: 0;
    }
  }
  @keyframes slide-right-in {
    from {
      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;
    }
  }
}