/* ╔═══════════════════════════════════════════════════════════════╗
   ║  Animations & Motion                                          ║
   ║  Ported from: ezhard-ezhaul/src/styles/animations.css         ║
   ║  Uses motion tokens from variables.css.                       ║
   ╚═══════════════════════════════════════════════════════════════╝ */

@layer base {

  /* ── Keyframes ──────────────────────────────────────────────── */

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

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fade-in-scale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes slide-in-start {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }

  /* RTL: slide from inline-end */
  [dir="rtl"] .slide-in-start {
    animation-name: slide-in-end;
  }

  @keyframes slide-in-end {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  @keyframes slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
  }

  @keyframes ripple {
    from { transform: scale(0); opacity: 0.4; }
    to   { transform: scale(4); opacity: 0; }
  }

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

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
  }

  /* ── Utility: Staggered entrance ────────────────────────────── */
  .stagger-enter {
    animation: fade-in-up var(--md-motion-duration-medium) var(--md-motion-easing-decelerate) both;
    animation-delay: calc(var(--index, 0) * 60ms);
  }

  /* ── Utility: Hover lift ────────────────────────────────────── */
  .hover-lift {
    transition:
      transform var(--md-motion-duration-short) var(--md-motion-easing-standard),
      box-shadow var(--md-motion-duration-short) var(--md-motion-easing-standard);
  }

  .hover-lift:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--md-elevation-3);
  }

  /* ── Utility: Intersection-observer entrance ────────────────── */
  .observe-entrance {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--md-motion-duration-medium) var(--md-motion-easing-decelerate),
      transform var(--md-motion-duration-medium) var(--md-motion-easing-decelerate);
  }

  .observe-entrance.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Skeleton shimmer utility ───────────────────────────────── */
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--md-sys-color-surface-container-low) 25%,
      var(--md-sys-color-surface-container-high) 50%,
      var(--md-sys-color-surface-container-low) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--md-sys-shape-sm);
    animation: shimmer 1.5s infinite;
  }

  /* ══════════════════════════════════════════════════════════════
     MANDATORY: Reduced Motion Override
     ══════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .observe-entrance {
      opacity: 1;
      transform: none;
    }
  }
}