/* ============================================
   ANIMACIONES CON EASING EXTREMADAMENTE SUAVE
   ============================================ */

/* 1. DESVANECIMIENTO CON EASING ORGÁNICO */
.soft-fade {
  animation: softFade 1s cubic-bezier(0.2, 0.9, 0.4, 1) forwards;
  opacity: 0;
}

@keyframes softFade {
  to {
    opacity: 1;
  }
}

/* 2. ASCENSO CON EASING DE ACELERACIÓN SUAVE */
.light-rise {
  animation: lightRise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
  transform: translateY(12px);
}

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

/* 3. REVELADO CON ESCALA Y EASING ELÁSTICO SUTIL */
.scale-grace {
  animation: scaleGrace 1s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  opacity: 0;
  transform: scale(0.97);
}

@keyframes scaleGrace {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 4. DESLIZAMIENTO CON EASING DE DESACELERACIÓN SUAVE */
.slide-smooth {
  animation: slideSmooth 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  opacity: 0;
  transform: translateX(-10px);
}

@keyframes slideSmooth {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 5. DESENFOQUE A NITIDEZ CON EASING EXTRA SUAVE */
.bloom-soft {
  animation: bloomSoft 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: blur(6px);
  opacity: 0;
}

@keyframes bloomSoft {
  to {
    filter: blur(0);
    opacity: 1;
  }
}

/* 6. APARICIÓN CON PERSPECTIVA Y EASING FLUIDO */
.perspective-flow {
  animation: perspectiveFlow 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  opacity: 0;
  transform: perspective(600px) rotateX(6deg) translateY(15px);
}

@keyframes perspectiveFlow {
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0) translateY(0);
  }
}

/* 7. EXPANSIÓN DE ESPACIADO CON EASING ORGÁNICO */
.spacing-reveal {
  animation: spacingReveal 0.9s cubic-bezier(0.2, 0.7, 0.3, 1.05) forwards;
  letter-spacing: 0.2em;
  opacity: 0;
  filter: blur(2px);
}

@keyframes spacingReveal {
  to {
    letter-spacing: normal;
    opacity: 1;
    filter: blur(0);
  }
}

/* 8. CORTINA VERTICAL CON EASING DE ENTRADA SUAVE */
.curtain-soft {
  animation: curtainSoft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  clip-path: inset(0 0 100% 0);
}

@keyframes curtainSoft {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* 9. DESLIZAMIENTO ASCENDENTE CON EASING DE SALIDA SUAVE */
.float-gentle {
  animation: floatGentle 1.1s cubic-bezier(0.2, 0.9, 0.4, 0.95) forwards;
  opacity: 0;
  transform: translateY(18px);
}

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

/* 10. REVELADO CON SOMBRA Y EASING ELÁSTICO SUTIL */
.shadow-unveil {
  animation: shadowUnveil 1s cubic-bezier(0.34, 1.1, 0.55, 1) forwards;
  opacity: 0;
  transform: translateY(8px);
  filter: drop-shadow(0 0 0 transparent);
}

@keyframes shadowUnveil {
  40% {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.03));
  }
}

/* 11. APARICIÓN CON ESCALA Y EASING DE REBOTE SUAVE */
.bounce-subtle {
  animation: bounceSubtle 1s cubic-bezier(0.28, 1.05, 0.55, 1) forwards;
  opacity: 0;
  transform: scale(0.96);
}

@keyframes bounceSubtle {
  60% {
    opacity: 1;
    transform: scale(1.01);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 12. DESLIZAMIENTO CON ROTACIÓN Y EASING FLUIDO */
.rotate-glide {
  animation: rotateGlide 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.05) forwards;
  opacity: 0;
  transform: translateX(-8px) rotate(-1deg);
}

@keyframes rotateGlide {
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* 13. EFECTO DE ENFOQUE GRADUAL CON EASING SUAVE */
.focus-gentle {
  animation: focusGentle 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  filter: blur(8px);
  opacity: 0;
}

@keyframes focusGentle {
  to {
    filter: blur(0);
    opacity: 1;
  }
}

/* 14. APARICIÓN CON CORTINA HORIZONTAL Y EASING ORGÁNICO */
.curtain-horizontal {
  animation: curtainHorizontal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  clip-path: inset(0 100% 0 0);
}

@keyframes curtainHorizontal {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* 15. REVELADO CON DESPLAZAMIENTO DIAGONAL SUTIL */
.diagonal-reveal {
  animation: diagonalReveal 1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  opacity: 0;
  transform: translate(6px, 6px);
}

@keyframes diagonalReveal {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}


/*
   .soft-fade          - Desvanecimiento suave de opacidad
   .light-rise         - Ascenso ligero con desplazamiento vertical
   .scale-grace        - Revelado con escala sutil
   .slide-smooth       - Deslizamiento horizontal desde la izquierda
   .bloom-soft         - Desenfoque a nitidez con aparición gradual
   .perspective-flow   - Aparición con rotación 3D y perspectiva
   .spacing-reveal     - Expansión de espaciado entre letras con desenfoque
   .curtain-soft       - Cortina vertical que se abre hacia abajo
   .float-gentle       - Flotación ascendente suave
   .shadow-unveil      - Revelado con sombra progresiva
   .bounce-subtle      - Escala con rebote mínimo al final
   .rotate-glide       - Deslizamiento con rotación ligera
   .focus-gentle       - Enfoque gradual desde desenfoque intenso
   .curtain-horizontal - Cortina horizontal que se abre hacia la derecha
   .diagonal-reveal    - Revelado con desplazamiento diagonal
*/