@layer components {
  /* Error Message Component
     ========================================================================== */

  .error-message {
    inline-size: 100%;
    color: var(--color-red);
    background-color: var(--color-red-light);
    padding: var(--block-space-half);
    border-radius: var(--border-radius);
    margin-block-end: var(--block-space-half);

    /* Smooth entry animation when error appears */
    animation: slide-down 0.2s ease-out;

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  /* Animation for error message appearance */
  @keyframes slide-down {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* High contrast mode adjustments */
  @media (prefers-contrast: high) {
    .error-message {
      border: 2px solid currentColor;
    }
  }

  /* Motion reduction */
  @media (prefers-reduced-motion: reduce) {
    .error-message {
      animation: none;

      @starting-style {
        opacity: 1;
        transform: none;
      }
    }
  }
}