/* ===== Animation Utilities ===== */
@layer base {
  @keyframes z-enter {
    from {
      opacity: var(--z-enter-opacity, 1);
      transform: translate3d(var(--z-enter-translate-x, 0), var(--z-enter-translate-y, 0), 0)
        scale3d(var(--z-enter-scale, 1), var(--z-enter-scale, 1), var(--z-enter-scale, 1));
    }
  }

  @keyframes z-exit {
    to {
      opacity: var(--z-exit-opacity, 1);
      transform: translate3d(var(--z-exit-translate-x, 0), var(--z-exit-translate-y, 0), 0)
        scale3d(var(--z-exit-scale, 1), var(--z-exit-scale, 1), var(--z-exit-scale, 1));
    }
  }

  .z-animate-in {
    animation: z-enter 180ms cubic-bezier(0.32, 0.72, 0, 1);
    animation-fill-mode: forwards;
  }

  .z-animate-out {
    animation: z-exit 150ms cubic-bezier(0.32, 0.72, 0, 1);
    animation-fill-mode: forwards;
  }

  /* Fade */
  .z-fade-in {
    --z-enter-opacity: 0;
  }

  .z-fade-out {
    --z-exit-opacity: 0;
  }

  /* Zoom/Scale */
  .z-zoom-in-95 {
    --z-enter-scale: 0.95;
  }

  .z-zoom-out-95 {
    --z-exit-scale: 0.95;
  }

  .z-zoom-in-90 {
    --z-enter-scale: 0.9;
  }

  .z-zoom-out-90 {
    --z-exit-scale: 0.9;
  }

  /* Slide */
  .z-slide-in-from-top-2 {
    --z-enter-translate-y: -4px;
  }

  .z-slide-out-to-top-2 {
    --z-exit-translate-y: -4px;
  }

  .z-slide-in-from-bottom-2 {
    --z-enter-translate-y: 4px;
  }

  .z-slide-out-to-bottom-2 {
    --z-exit-translate-y: 4px;
  }

  .z-slide-in-from-left-2 {
    --z-enter-translate-x: -4px;
  }

  .z-slide-out-to-left-2 {
    --z-exit-translate-x: -4px;
  }

  .z-slide-in-from-right-2 {
    --z-enter-translate-x: 4px;
  }

  .z-slide-out-to-right-2 {
    --z-exit-translate-x: 4px;
  }

  /* Slide-4 (16px) - for popover */
  .z-slide-in-from-top-4 {
    --z-enter-translate-y: -10px;
  }

  .z-slide-out-to-top-4 {
    --z-exit-translate-y: -10px;
  }

  .z-slide-in-from-bottom-4 {
    --z-enter-translate-y: 10px;
  }

  .z-slide-out-to-bottom-4 {
    --z-exit-translate-y: 10px;
  }

  .z-slide-in-from-left-4 {
    --z-enter-translate-x: -10px;
  }

  .z-slide-out-to-left-4 {
    --z-exit-translate-x: -10px;
  }

  .z-slide-in-from-right-4 {
    --z-enter-translate-x: 10px;
  }

  .z-slide-out-to-right-4 {
    --z-exit-translate-x: 10px;
  }

  /* Duration modifiers */
  .z-duration-100 {
    animation-duration: 100ms;
  }

  .z-duration-150 {
    animation-duration: 150ms;
  }

  .z-duration-200 {
    animation-duration: 200ms;
  }

  .z-duration-300 {
    animation-duration: 300ms;
  }

  /* CDK Overlay Backdrop Animation */
  @keyframes z-backdrop-enter {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes z-backdrop-exit {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

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

  .z-animate-spin {
    animation: z-spin-effect 1s linear infinite;
  }

  @keyframes z-wave-effect {
    to {
      box-shadow: 0 0 0 5px var(--z-wave-color, currentColor);
    }
  }

  @keyframes z-fade-effect {
    to {
      opacity: 0;
    }
  }

  .z-animate-wave {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    box-shadow: 0 0 0 0 var(--z-wave-color, currentColor);
    opacity: 0.2;
    animation:
      z-fade-effect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
      z-wave-effect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-fill-mode: forwards;
    pointer-events: none;
  }

  /* Raise z-index when wave is active (for button groups) */
  .z-wave-active {
    z-index: 1;
    position: relative;
  }

  /* CDK Backdrop Styles for Service Mode Modal */
  .cdk-overlay-backdrop {
    animation: z-backdrop-enter 150ms ease-out forwards;
  }

  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 1;
  }

  .cdk-overlay-backdrop.z-backdrop-leaving {
    animation: z-backdrop-exit 120ms ease-in forwards;
  }
}