/* ============================================================
   EaseMotion CSS — animations.css
   Production-ready, composable animation classes

   Integration log:
   Classes marked [INTEGRATED] were originally submitted by
   community contributors inside submissions/examples/,
   then standardized and merged here by the maintainer.
   ============================================================ */

/* ── Keyframe Definitions ──────────────────────────────────── */

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

@keyframes ease-kf-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ease-kf-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ease-kf-slide-down {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ease-kf-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ease-kf-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ease-kf-bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-20px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes ease-kf-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

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

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

@keyframes ease-kf-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70%      { transform: translateX(6px); }
}

@keyframes ease-kf-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ease-kf-flip {
  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  to   { transform: perspective(400px) rotateY(0deg);  opacity: 1; }
}

@keyframes ease-kf-shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes ease-kf-pulse-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ── Animation Utility Classes ─────────────────────────────── */

/* Entrance Animations */

/* Skeleton Loading Animations*/

.ease-skeleton-shimmer {
  background: var(--ease-color-neutral-100);
  background-image: linear-gradient(
    90deg,
    var(--ease-color-neutral-100) 0px,
    var(--ease-color-neutral-200) 40px,
    var(--ease-color-neutral-100) 80px
  );
  background-size: 1000px 100%;
  animation: ease-kf-shimmer 2s infinite linear forwards;
}

.ease-skeleton-pulse {
  background-color: var(--ease-color-neutral-200);
  animation: ease-kf-pulse-fade 1.5s var(--ease-ease) infinite;
}

.ease-skeleton-block {
  border-radius: var(--ease-radius-md);
  display: block;
}

.ease-fade-in {
  animation: ease-kf-fade-in var(--ease-speed-medium) var(--ease-ease) both;
}

.ease-fade-out {
  animation: ease-kf-fade-out var(--ease-speed-medium) var(--ease-ease) both;
}

.ease-slide-up {
  animation: ease-kf-slide-up var(--ease-speed-medium) var(--ease-ease) both;
}

.ease-slide-down {
  animation: ease-kf-slide-down var(--ease-speed-medium) var(--ease-ease) both;
}

.ease-slide-in-left {
  animation: ease-kf-slide-in-left var(--ease-speed-medium) var(--ease-ease) both;
}

.ease-slide-in-right {
  animation: ease-kf-slide-in-right var(--ease-speed-medium) var(--ease-ease) both;
}

.ease-zoom-in {
  animation: ease-kf-zoom-in var(--ease-speed-medium) var(--ease-ease-bounce) both;
}

.ease-flip {
  animation: ease-kf-flip var(--ease-speed-medium) var(--ease-ease) both;
}

/* Looping Animations */
.ease-bounce {
  animation: ease-kf-bounce 1s infinite;
}

.ease-rotate {
  animation: ease-kf-rotate 1.2s linear infinite;
}

.ease-pulse {
  animation: ease-kf-pulse 2s var(--ease-ease) infinite;
}

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

.ease-shake {
  animation: ease-kf-shake 0.5s var(--ease-ease) both;
}

/* ── Hover Animations ──────────────────────────────────────── */

/* Grow on hover
   [INTEGRATED] from submissions/examples/hover-grow/
   Original class name: .hover-grow-card / .hover-grow-btn
   Standardized to: .ease-hover-grow */
.ease-hover-grow {
  transition: transform var(--ease-speed-medium) var(--ease-ease-bounce);
  will-change: transform;
}
.ease-hover-grow:hover {
  transform: scale(1.06);
}

/* Shrink on hover */
.ease-hover-shrink {
  transition: transform var(--ease-speed-fast) var(--ease-ease);
  will-change: transform;
}
.ease-hover-shrink:hover {
  transform: scale(0.95);
}

/* Glow on hover */
.ease-hover-glow {
  transition: box-shadow var(--ease-speed-medium) var(--ease-ease);
}
.ease-hover-glow:hover {
  box-shadow: var(--ease-glow-primary);
}

/* Lift (shadow depth) on hover */
.ease-hover-lift {
  transition: transform var(--ease-speed-medium) var(--ease-ease),
              box-shadow var(--ease-speed-medium) var(--ease-ease);
}
.ease-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--ease-shadow-xl);
}

/* Color shift underline on hover */
.ease-hover-underline {
  position: relative;
}
.ease-hover-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--ease-color-primary);
  transition: width var(--ease-speed-medium) var(--ease-ease);
}
.ease-hover-underline:hover::after {
  width: 100%;
}

/* Card lift on hover
   [INTEGRATED] from submissions/examples/card-lift/
   Original class name: .lift-card
   Standardized to: .ease-card-lift
   (also available as .ease-hover-lift in the cards component) */
.ease-card-lift {
  transition:
    transform   var(--ease-speed-medium) var(--ease-ease-out),
    box-shadow  var(--ease-speed-medium) var(--ease-ease-out);
  will-change: transform, box-shadow;
}
.ease-card-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--ease-shadow-xl);
}

/* Shimmer sweep on hover
   [INTEGRATED] from submissions/examples/hover-shimmer/
   Original class name: .hover-shimmer-card
   Standardized to: .ease-hover-shimmer */
.ease-hover-shimmer {
  position: relative;
  overflow: hidden;
}
.ease-hover-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  transition: left var(--ease-speed-slow) var(--ease-ease);
  pointer-events: none;
}
.ease-hover-shimmer:hover::before {
  left: 150%;
}

/* ── Stagger Delay Helpers ─────────────────────────────────── */
/* Use these with entrance animations to stagger children */

.ease-delay-75  { animation-delay: 75ms; }
.ease-delay-100 { animation-delay: 100ms; }
.ease-delay-150 { animation-delay: 150ms; }
.ease-delay-200 { animation-delay: 200ms; }
.ease-delay-300 { animation-delay: 300ms; }
.ease-delay-500 { animation-delay: 500ms; }
.ease-delay-700 { animation-delay: 700ms; }

/* ── Duration Overrides ────────────────────────────────────── */
.ease-duration-fast   { animation-duration: var(--ease-speed-fast); }
.ease-duration-medium { animation-duration: var(--ease-speed-medium); }
.ease-duration-slow   { animation-duration: var(--ease-speed-slow); }

/* ── Reduced Motion: Respect user preference ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}