/* MiCultura Animaciones - estilos base.
   Los valores de duración, distancia, desenfoque y curva los
   define el panel del plugin (Ajustes > MiCultura Animaciones). */

:root {
    --mc-dur: 1.5s;
    --mc-distancia: 70px;
    --mc-desenfoque: 12px;
    --mc-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Evita barra de scroll horizontal por los desplazamientos laterales */
html,
body {
    overflow-x: clip;
}

/* Direcciones */
.mi_contenedor_animado                  { --mc-x: 0;      --mc-y: var(--mc-distancia); --mc-s: .96; }
.mi_contenedor_animado.animar_arriba    { --mc-x: 0;      --mc-y: var(--mc-distancia); --mc-s: .96; }
.mi_contenedor_animado.animar_abajo     { --mc-x: 0;      --mc-y: calc(var(--mc-distancia) * -1); --mc-s: .96; }
.mi_contenedor_animado.animar_izquierda { --mc-x: -110px; --mc-y: 0; --mc-s: .97; }
.mi_contenedor_animado.animar_derecha   { --mc-x: 110px;  --mc-y: 0; --mc-s: .97; }
.mi_contenedor_animado.animar_escala    { --mc-x: 0;      --mc-y: 30px; --mc-s: .82; }

@media (max-width: 767px) {
    .mi_contenedor_animado                  { --mc-y: calc(var(--mc-distancia) * .65); }
    .mi_contenedor_animado.animar_arriba    { --mc-y: calc(var(--mc-distancia) * .65); }
    .mi_contenedor_animado.animar_abajo     { --mc-y: calc(var(--mc-distancia) * -.65); }
    .mi_contenedor_animado.animar_izquierda { --mc-x: -60px; --mc-y: 0; }
    .mi_contenedor_animado.animar_derecha   { --mc-x: 60px;  --mc-y: 0; }
    .mi_contenedor_animado.animar_escala    { --mc-y: 25px; }
}

/* Retardos fijos (se suman al escalonado automático) */
.mi_contenedor_animado.retraso_1 { --mc-fijo: .2s; }
.mi_contenedor_animado.retraso_2 { --mc-fijo: .4s; }
.mi_contenedor_animado.retraso_3 { --mc-fijo: .6s; }

/* Frames: solo "from", el final es el estado normal del elemento */
@keyframes mc-movimiento {
    from {
        translate: var(--mc-x, 0) var(--mc-y, 70px);
        scale: var(--mc-s, .96);
    }
}

@keyframes mc-aparecer {
    from {
        opacity: 0;
        filter: blur(var(--mc-desenfoque)) saturate(1.3);
    }
    55% {
        opacity: .6;
    }
}

/* Antes de aparecer: oculto (solo si el script cargó: html.mc-js) */
html.mc-js .mi_contenedor_animado:not(.mc-visible) {
    opacity: 0;
}

/* Al entrar en pantalla: animación con tiempo propio */
html.mc-js .mi_contenedor_animado.mc-visible {
    animation:
        mc-movimiento calc(var(--mc-dur) * 1.1) var(--mc-ease)
            calc(var(--mc-auto, 0s) + var(--mc-fijo, 0s)) backwards,
        mc-aparecer var(--mc-dur) ease-out
            calc(var(--mc-auto, 0s) + var(--mc-fijo, 0s)) backwards;
}

/* Extras */
.mi_contenedor_animado.mc_hover {
    transition: transform .5s var(--mc-ease);
}
.mi_contenedor_animado.mc_hover:hover {
    transform: translateY(-8px);
}

.mi_contenedor_animado.mc_borde {
    border: 2px solid transparent !important;
    border-radius: 20px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #6366f1, #ec4899 55%, #f59e0b) border-box !important;
}

/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .mi_contenedor_animado {
        animation: none !important;
        opacity: 1 !important;
    }
}