/* =========================================================
   WS GLOBAL ANIMATION SYSTEM
   ========================================================= */

.ws-animation {
  --ws-animation-delay: 0ms;
  --ws-animation-duration: 700ms;
  --ws-animation-distance: 32px;
  --ws-animation-scale: 0.96;
  --ws-animation-scale-out: 1.04;
  --ws-animation-rotate: 6deg;
  --ws-animation-blur: 8px;
  --ws-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);

  transition:
    opacity var(--ws-animation-duration) var(--ws-animation-easing),
    transform var(--ws-animation-duration) var(--ws-animation-easing),
    filter var(--ws-animation-duration) var(--ws-animation-easing);

  transition-delay: var(--ws-animation-delay);
  transform-origin: var(--ws-animation-origin, center);
  will-change: opacity, transform, filter;
}

/* Estado inicial */
.ws-animation:not(.ws-animation--none):not(.is-animated) {
  opacity: 0;
}

/* Estado final */
.ws-animation.is-animated {
  opacity: 1;
  transform: none;
  filter: none;
}

/* =========================
   TIPOS BÁSICOS
========================= */

.ws-animation--none {
  opacity: 1;
  transform: none;
  filter: none;
}

.ws-animation--fade:not(.is-animated) {
  opacity: 0;
  transform: none;
}

/* =========================
   SLIDE
========================= */

.ws-animation--slide-up:not(.is-animated),
.ws-animation--fade-up:not(.is-animated) {
  transform: translateY(var(--ws-animation-distance));
}

.ws-animation--slide-down:not(.is-animated),
.ws-animation--fade-down:not(.is-animated) {
  transform: translateY(calc(var(--ws-animation-distance) * -1));
}

.ws-animation--slide-left:not(.is-animated),
.ws-animation--fade-left:not(.is-animated) {
  transform: translateX(var(--ws-animation-distance));
}

.ws-animation--slide-right:not(.is-animated),
.ws-animation--fade-right:not(.is-animated) {
  transform: translateX(calc(var(--ws-animation-distance) * -1));
}

/* =========================
   ZOOM
========================= */

.ws-animation--zoom-in:not(.is-animated) {
  transform: scale(var(--ws-animation-scale));
}

.ws-animation--zoom-out:not(.is-animated) {
  transform: scale(var(--ws-animation-scale-out));
}

/* =========================
   BLUR
========================= */

.ws-animation--blur-in:not(.is-animated) {
  filter: blur(var(--ws-animation-blur));
}

.ws-animation--blur-up:not(.is-animated) {
  transform: translateY(var(--ws-animation-distance));
  filter: blur(var(--ws-animation-blur));
}

/* =========================
   ROTATE
========================= */

.ws-animation--rotate-in:not(.is-animated) {
  transform: rotate(var(--ws-animation-rotate)) scale(var(--ws-animation-scale));
}

.ws-animation--rotate-left:not(.is-animated) {
  transform: rotate(calc(var(--ws-animation-rotate) * -1));
}

.ws-animation--rotate-right:not(.is-animated) {
  transform: rotate(var(--ws-animation-rotate));
}

/* =========================
   FLIP
========================= */

.ws-animation--flip-up:not(.is-animated) {
  transform: perspective(900px) rotateX(18deg);
}

.ws-animation--flip-down:not(.is-animated) {
  transform: perspective(900px) rotateX(-18deg);
}

.ws-animation--flip-left:not(.is-animated) {
  transform: perspective(900px) rotateY(-18deg);
}

.ws-animation--flip-right:not(.is-animated) {
  transform: perspective(900px) rotateY(18deg);
}

/* =========================
   COMBINADAS PRO
========================= */

.ws-animation--rise:not(.is-animated) {
  transform: translateY(var(--ws-animation-distance)) scale(var(--ws-animation-scale));
  filter: blur(calc(var(--ws-animation-blur) / 2));
}

.ws-animation--reveal-left:not(.is-animated) {
  transform: translateX(calc(var(--ws-animation-distance) * -1)) scale(var(--ws-animation-scale));
  filter: blur(calc(var(--ws-animation-blur) / 2));
}

.ws-animation--reveal-right:not(.is-animated) {
  transform: translateX(var(--ws-animation-distance)) scale(var(--ws-animation-scale));
  filter: blur(calc(var(--ws-animation-blur) / 2));
}

/* =========================
   HOVER
========================= */

.ws-animation-trigger--hover {
  opacity: 1;
  transform: none;
  filter: none;
}

.ws-animation-trigger--hover.ws-animation--fade:hover {
  opacity: 0.75;
}

.ws-animation-trigger--hover.ws-animation--zoom-in:hover {
  transform: scale(1.04);
}

.ws-animation-trigger--hover.ws-animation--zoom-out:hover {
  transform: scale(0.97);
}

.ws-animation-trigger--hover.ws-animation--slide-up:hover {
  transform: translateY(calc(var(--ws-animation-distance) * -0.25));
}

.ws-animation-trigger--hover.ws-animation--slide-down:hover {
  transform: translateY(calc(var(--ws-animation-distance) * 0.25));
}

.ws-animation-trigger--hover.ws-animation--slide-left:hover {
  transform: translateX(calc(var(--ws-animation-distance) * -0.25));
}

.ws-animation-trigger--hover.ws-animation--slide-right:hover {
  transform: translateX(calc(var(--ws-animation-distance) * 0.25));
}

.ws-animation-trigger--hover.ws-animation--rotate-in:hover {
  transform: rotate(var(--ws-animation-rotate));
}

.ws-animation-trigger--hover.ws-animation--blur-in:hover {
  filter: blur(calc(var(--ws-animation-blur) / 2));
}

/* =========================
   STAGGER AUTOMÁTICO
========================= */

.ws-animation-group > .ws-animation-child {
  --ws-animation-delay: calc(
    var(--ws-animation-base-delay, 0ms) +
    (var(--ws-animation-index, 0) * var(--ws-animation-stagger, 100ms))
  );
}

/* =========================
   ACCESIBILIDAD
========================= */

@media (prefers-reduced-motion: reduce) {
  .ws-animation,
  .ws-animation-child {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.ws-animation {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.ws-animation.is-animated {
  pointer-events: auto;
}

.ws-animation:not(.is-animated) {
  pointer-events: none;
}

.ws-animation--fade-up:not(.is-animated),
.ws-animation--fade-down:not(.is-animated),
.ws-animation--fade-left:not(.is-animated),
.ws-animation--fade-right:not(.is-animated) {
  filter: blur(calc(var(--ws-animation-blur) / 3));
}

/* Transiciones más premium */
.ws-animation-easing--linear {
  --ws-animation-easing: linear;
}

.ws-animation-easing--ease {
  --ws-animation-easing: ease;
}

.ws-animation-easing--smooth {
  --ws-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.ws-animation-easing--soft {
  --ws-animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.ws-animation-easing--snappy {
  --ws-animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ws-animation-easing--in {
  --ws-animation-easing: cubic-bezier(0.32, 0, 0.67, 0);
}

.ws-animation-easing--out {
  --ws-animation-easing: cubic-bezier(0.33, 1, 0.68, 1);
}

.ws-animation-easing--in-out {
  --ws-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
}