/* dt-web-theme: Animation Library */
/* Source: dt-shopify-storefront animation patterns */
/* Brand-independent — no color references in keyframes */

/* ============================================================================
   Entrance Animations
   ============================================================================ */

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

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

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

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

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

/* ============================================================================
   Interactive Animations
   ============================================================================ */

@keyframes dt-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes dt-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes dt-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.dt-animate-scale-in {
  animation: dt-scale-in 0.33s ease-in-out both;
}

.dt-animate-fade-in {
  animation: dt-fade-in 0.3s ease-in-out both;
}

.dt-animate-slide-up {
  animation: dt-slide-up 0.3s ease-in-out both;
}

.dt-animate-pulse {
  animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dt-animate-ping {
  animation: dt-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

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

/* ============================================================================
   Stagger Container
   ============================================================================ */

.dt-stagger-container {
  --dt-stagger-duration: 0.33s;
}

.dt-stagger-container > * {
  animation: dt-scale-in var(--dt-stagger-duration) ease-in-out both;
}

/* ============================================================================
   Transition Utilities
   ============================================================================ */

.dt-transition-accordion {
  transition: max-height 250ms ease-in-out;
}

.dt-transition-chevron {
  transition: transform 250ms ease-in-out;
}

.dt-transition-chevron[aria-expanded="true"],
.dt-transition-chevron.is-expanded {
  transform: rotate(180deg);
}

.dt-transition-progress {
  transition: height 300ms ease-out, width 300ms ease-out;
}