/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Entrance animations
- Button hover animations
- Icon hover animations
- Footer hover animations
*/



/* Entrance animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button-entrance {
    animation-name: popUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: calc(var(--delay) / 10);
}

@keyframes popUp {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.fadein {
    animation-name: fadein;
    animation-duration: 3s;
    animation-fill-mode: both;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/* Button hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* También aplica a credit-hover y social-hover */

.button-hover,
.credit-hover,
.social-hover {
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Hover solo para dispositivos con mouse, no para iPhone/táctil */
@media (hover: hover) and (pointer: fine) {
    .button-hover:hover,
    .credit-hover:hover,
    .social-hover:hover {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

/* Al tocar en móvil, efecto breve y más suave */
.button-hover:active,
.credit-hover:active,
.social-hover:active {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
}

/* Evita que iPhone deje el botón agrandado por focus */
.button-hover:focus,
.credit-hover:focus,
.social-hover:focus {
    -webkit-transform: none;
    transform: none;
}



/* Icon hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.icon-hover {
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.icon-hover .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Animación del ícono solo en PC con mouse */
@media (hover: hover) and (pointer: fine) {
    .icon-hover:hover .hvr-icon {
        -webkit-animation-name: icon-hover;
        animation-name: icon-hover;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }
}

/* En móvil, animación más corta al tocar */
.icon-hover:active .hvr-icon {
    -webkit-animation-name: icon-hover;
    animation-name: icon-hover;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Evita animación pegada por focus en Safari/iPhone */
.icon-hover:focus .hvr-icon {
    -webkit-animation-name: none;
    animation-name: none;
}

@-webkit-keyframes icon-hover {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }

    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes icon-hover {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }

    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}



/* Footer hover animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.footer-hover {
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Hover del footer solo en PC con mouse */
@media (hover: hover) and (pointer: fine) {
    .footer-hover:hover {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

/* Efecto breve en móvil */
.footer-hover:active {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

/* Evita que quede subido por focus */
.footer-hover:focus {
    -webkit-transform: none;
    transform: none;
}