/* ARCHIVO: css/animaciones.css
FUNCIÓN: movimiento suave de imágenes y tarjetas con profundidad 3D. */

/* 01. FOTOGRAFÍAS: animación visual, sin editar las imágenes originales. */
@keyframes respirar-foto {

    from {
        transform: scale(1);

    }

    to {
        transform: scale(1.055) translateY(-2px);

    }

}

.imagen-viva img, .diapositiva.active img {
    animation: respirar-foto 12s ease-in-out infinite alternate;
    transform-origin: center;

}

.imagen-viva:hover img {
    animation-play-state: paused;

}

/* 02. CAPAS FLOTANTES: profundidad y movimiento de los colores del fondo. */
@keyframes flotar-etiqueta {

    0%,100% {
        transform: translateY(0) rotate(-5deg);

    }

    50% {
        transform: translateY(-8px) rotate(-3deg);

    }

}

@keyframes brillo-vivo {

    from {
        transform: translate3d(0,0,0) scale(1);

    }

    to {
        transform: translate3d(25px,15px,0) scale(1.12);

    }

}

@keyframes latido-suave {

    0%,100% {
        box-shadow: 0 0 0 0 #19856328;

    }

    65% {
        box-shadow: 0 0 0 6px #19856300;

    }

}

.etiqueta-flotante {
    animation: flotar-etiqueta 6s ease-in-out infinite;

}

.brillo {
    animation: brillo-vivo 10s ease-in-out infinite alternate;

}

.insignia > span {
    animation: latido-suave 3s infinite;

}

/* 03. GIRO 3D: JavaScript actualiza estas variables al mover el ratón. */
.tilt-card {
    --giro-x: 0deg;
    --giro-y: 0deg;
    --giro-z: 0deg;
    transform: perspective(1000px) rotateX(var(--giro-x)) rotateY(var(--giro-y)) rotateZ(var(--giro-z));
    transition: transform .25s ease,box-shadow .25s ease;
    transform-style: preserve-3d;

}

.postal-principal {
    --giro-z: 3deg;

}

.tilt-card:hover {
    box-shadow: 0 8px 0 #d8e7e3,0 23px 42px #16445525;

}

@keyframes entrar-foto {

    from {
        opacity: 0;
        transform: scale(.97);

    }

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

    }

}

.foto-original {
    animation: entrar-foto .8s ease both;

}

/* 04. APARICIÓN: el contenido se mantiene visible si JavaScript no está activo. */
@keyframes aparecer-tarjeta {

    from {
        opacity: .3;
        transform: translateY(14px);

    }

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

    }

}

.aparece {
    animation: aparecer-tarjeta .55s ease both;

}

.movimiento-pausado *, .movimiento-pausado *::before, .movimiento-pausado *::after {
    animation-play-state: paused !important;

}

/* 05. ACCESIBILIDAD: respetar la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;

    }

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;

    }

    .tilt-card {
        transform: none !important;

    }

}

@media (hover: none) {

    .tilt-card {
        --giro-x: 0deg !important;
        --giro-y: 0deg !important;

    }

}