/* ============================================================
   ANIMATIONS — keyframes + clases de entrada + stagger
   ============================================================ */

@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes mandala-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.32; }
  50%      { transform: translate(-50%, -50%) scale(1.08) rotate(180deg); opacity: 0.42; }
}

@keyframes mandala-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 65, 120, 0.4); }
  50%      { box-shadow: 0 0 0 20px rgba(201, 65, 120, 0); }
}

/* ======================================================
   CLASES DE ANIMACIÓN (reveal al entrar en viewport)
   El estado inicial es oculto.  animate.js agrega .is-visible.
   ====================================================== */

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-animate="up"]    { transform: translateY(30px); }
[data-animate="down"]  { transform: translateY(-30px); }
[data-animate="left"]  { transform: translateX(-40px); }
[data-animate="right"] { transform: translateX(40px); }
[data-animate="scale"] { transform: scale(0.92); }
[data-animate="fade"]  { }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-med) var(--ease-soft),
    transform var(--dur-med) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 120ms);
}

[data-animate="scale"].is-visible {
  transition-duration: var(--dur-slow);
}

/* Opcional: clases imperativas para elementos con animación directa */
.anim-left   { animation: fade-in-left  var(--dur-med) var(--ease-soft) both; }
.anim-right  { animation: fade-in-right var(--dur-med) var(--ease-soft) both; }
.anim-up     { animation: fade-in-up    var(--dur-med) var(--ease-soft) both; }
.anim-down   { animation: fade-in-down  var(--dur-med) var(--ease-soft) both; }
.anim-scale  { animation: fade-in-scale var(--dur-slow) var(--ease-soft) both; }
.anim-fade   { animation: fade-in       var(--dur-slow) var(--ease-soft) both; }

[class*="anim-"][style*="--i"] {
  animation-delay: calc(var(--i) * 120ms);
}