/* Base styles */
[ot-animate] {
  --ot-duration: 0.6s;
  --ot-delay: 0s;
  --ot-easing: ease;
  animation-duration: var(--ot-duration);
  animation-delay: var(--ot-delay);
  animation-timing-function: var(--ot-easing);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  [ot-animate] {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Keyframes */
@keyframes ot-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ot-fade-down {
  from {
    opacity: 0.5;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ot-zoom-in {
  from {
    transform: scale(0.94);
  }

  to {
    transform: scale(1);
  }
}

@keyframes ot-slide-left {
  from {
    transform: translateX(24px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes ot-slide-right {
  from {
    transform: translateX(-24px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes ot-pop {
  0% {
    transform: scale(0.85);
  }

  80% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes ot-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes ot-flip-in {
  from {
    opacity: 0.5;
    transform: perspective(480px) rotateX(30deg);
  }

  to {
    opacity: 1;
    transform: perspective(480px) rotateX(0deg);
  }
}

@keyframes ot-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

@keyframes ot-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

/* Animation Classes (On-load) */
[ot-animate~="fade-up"] {
  animation-name: ot-fade-up;
}

[ot-animate~="fade-down"] {
  animation-name: ot-fade-down;
}

[ot-animate~="zoom-in"] {
  animation-name: ot-zoom-in;
}

[ot-animate~="slide-left"] {
  animation-name: ot-slide-left;
}

[ot-animate~="slide-right"] {
  animation-name: ot-slide-right;
}

[ot-animate~="pop"] {
  animation-name: ot-pop;
}

[ot-animate~="bounce"] {
  animation-name: ot-bounce;
}

[ot-animate~="flip-in"] {
  animation-name: ot-flip-in;
}

[ot-animate~="shake"] {
  animation-name: ot-shake;
}

[ot-animate~="pulse"] {
  animation-name: ot-pulse;
  animation-iteration-count: infinite;
}

/* Hover Animations */
[ot-animate*="hover:fade-up"]:hover {
  transform: translateY(-4px);
  animation-name: ot-fade-up;
}

[ot-animate*="hover:fade-down"]:hover {
  animation-name: ot-fade-down;
}

[ot-animate*="hover:zoom-in"]:hover {
  animation-name: ot-zoom-in;
}

[ot-animate*="hover:slide-left"]:hover {
  animation-name: ot-slide-left;
}

[ot-animate*="hover:slide-right"]:hover {
  animation-name: ot-slide-right;
}

[ot-animate*="hover:pop"]:hover {
  animation-name: ot-pop;
}

/* View Animations (HIDDEN initially) */
[ot-animate*="view:"] {
  opacity: 0 !important;
}