/*These transition are from youtube*/

@keyframes transitionIn-X{
    from {
            opacity: 0;
            transform: translateX(-10px);

    }

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


@keyframes transitionIn-Y-over{
    from {
            opacity: 0;
            transform: translateY(-10px);

    }

    to {
            opacity: 1;
            transform: translateY(0);
    }
}
    
@keyframes transitionIn-Y-bottom{
    from {
            opacity: 0;
            transform: translateY(30px);

    }

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

/* Transition end */


/* =========================================================
   MEJORAS PRO (AGREGADAS SIN TOCAR LO ANTERIOR)
   ========================================================= */

/* Variables de timing */
:root{
  --anim-fast: 300ms;
  --anim: 500ms;
  --anim-slow: 800ms;
  --anim-ease: cubic-bezier(.22,.61,.36,1);
}

/* Utilidades para aplicar fácilmente */
.animate-in-x{ animation: transitionIn-X var(--anim) var(--anim-ease) both; }
.animate-in-y-over{ animation: transitionIn-Y-over var(--anim) var(--anim-ease) both; }
.animate-in-y-bottom{ animation: transitionIn-Y-bottom var(--anim) var(--anim-ease) both; }

/* Elevación suave para tarjetas/modales */
@keyframes elevate-in{
  from{ opacity:0; transform: translateY(10px) scale(.985); filter: blur(.3px) saturate(90%); }
  to{   opacity:1; transform: translateY(0)    scale(1);    filter:none; }
}
.elevate-in{ animation: elevate-in var(--anim) var(--anim-ease) both; }

/* Stagger (retraso progresivo por hijo) */
.stagger > *{ animation-delay: calc(var(--stagger-step,70ms) * var(--i,0)); }
.stagger > *:nth-child(1){--i:0}
.stagger > *:nth-child(2){--i:1}
.stagger > *:nth-child(3){--i:2}
.stagger > *:nth-child(4){--i:3}
.stagger > *:nth-child(5){--i:4}
.stagger > *:nth-child(6){--i:5}
.stagger > *:nth-child(7){--i:6}
.stagger > *:nth-child(8){--i:7}
.stagger > *:nth-child(9){--i:8}
.stagger > *:nth-child(10){--i:9}

/* ================= RESPONSIVE ================= */

/* Tablets: animaciones un poco más cortas */
@media (max-width: 992px){
  .animate-in-x,.animate-in-y-over,.animate-in-y-bottom,.elevate-in{ animation-duration: 420ms; }
}

/* Móviles: distancias más pequeñas para evitar “saltos” */
@media (max-width: 768px){
  @keyframes transitionIn-X-mobile{
    from{ opacity:0; transform: translateX(-6px); }
    to{   opacity:1; transform: translateX(0); }
  }
  @keyframes transitionIn-Y-over-mobile{
    from{ opacity:0; transform: translateY(-6px); }
    to{   opacity:1; transform: translateY(0); }
  }
  @keyframes transitionIn-Y-bottom-mobile{
    from{ opacity:0; transform: translateY(12px); }
    to{   opacity:1; transform: translateY(0); }
  }

  /* Remapea utilidades a variantes mobile (no toca tus keyframes originales) */
  .animate-in-x{ animation-name: transitionIn-X-mobile; }
  .animate-in-y-over{ animation-name: transitionIn-Y-over-mobile; }
  .animate-in-y-bottom{ animation-name: transitionIn-Y-bottom-mobile; }
  .elevate-in{ animation-duration: 360ms; }
}

/* Altura reducida (landscape móvil) */
@media (max-height: 420px){
  .animate-in-x,.animate-in-y-over,.animate-in-y-bottom,.elevate-in{ animation-duration: 320ms; }
}

/* Accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste: un poco de sombra para legibilidad */
@media (prefers-contrast: more){
  .elevate-in{ filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
}