/* Animations CSS - Animaciones y transiciones */

/* ===== ANIMACIONES DE ENTRADA ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes elasticIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    55% {
        opacity: 1;
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== ANIMACIONES DE SALIDA ===== */
@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* ===== ANIMACIONES CONTINUAS ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

/* ===== ANIMACIONES DE NIEVE ===== */
@keyframes snowfall {
    0% {
        transform: translateY(-100px) translateX(0px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100% + 100px)) translateX(100px);
        opacity: 0;
    }
}

@keyframes snowflakeRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes snowDrift {
    0%, 100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(20px);
    }
}

/* ===== ANIMACIONES DE TEXTO ===== */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkCursor {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--color-primary);
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 5px var(--color-primary);
    }
    50% {
        text-shadow: 0 0 20px var(--color-primary), 0 0 30px var(--color-primary);
    }
}

@keyframes colorShift {
    0% { color: var(--color-primary); }
    25% { color: var(--color-info); }
    50% { color: var(--color-success); }
    75% { color: var(--color-warning); }
    100% { color: var(--color-primary); }
}

/* ===== ANIMACIONES DE LOADING ===== */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dots {
    0%, 20% {
        color: rgba(0,0,0,0);
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }
    40% {
        color: var(--color-primary);
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }
    60% {
        text-shadow: .25em 0 0 var(--color-primary), .5em 0 0 rgba(0,0,0,0);
    }
    80%, 100% {
        text-shadow: .25em 0 0 var(--color-primary), .5em 0 0 var(--color-primary);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ===== ANIMACIONES DE PARTÍCULAS ===== */
@keyframes particleFloat {
    0% {
        transform: translateY(calc(100% + 100px)) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ===== CLASES DE ANIMACIÓN ===== */
.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fadeInDown {
    animation: fadeInDown 0.6s ease-out forwards;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fadeInRight {
    animation: fadeInRight 0.6s ease-out forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-bounceIn {
    animation: bounceIn 0.8s ease-out forwards;
}

.animate-elasticIn {
    animation: elasticIn 0.7s ease-out forwards;
}

.animate-slideInUp {
    animation: slideInUp 0.5s ease-out forwards;
}

.animate-rotateIn {
    animation: rotateIn 0.6s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 2s infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-wobble {
    animation: wobble 1s ease-in-out;
}

.animate-swing {
    animation: swing 1s ease-in-out;
}

.animate-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-textGlow {
    animation: textGlow 2s ease-in-out infinite;
}

.animate-colorShift {
    animation: colorShift 3s ease-in-out infinite;
}

/* ===== DELAYS DE ANIMACIÓN ===== */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }
.animate-delay-600 { animation-delay: 0.6s; }
.animate-delay-700 { animation-delay: 0.7s; }
.animate-delay-800 { animation-delay: 0.8s; }
.animate-delay-900 { animation-delay: 0.9s; }
.animate-delay-1000 { animation-delay: 1s; }

/* ===== DURACIONES DE ANIMACIÓN ===== */
.animate-duration-fast { animation-duration: 0.3s; }
.animate-duration-normal { animation-duration: 0.5s; }
.animate-duration-slow { animation-duration: 0.8s; }
.animate-duration-slower { animation-duration: 1.2s; }

/* ===== ESTADOS DE ANIMACIÓN ===== */
.animate-paused {
    animation-play-state: paused;
}

.animate-running {
    animation-play-state: running;
}

.animate-infinite {
    animation-iteration-count: infinite;
}

.animate-once {
    animation-iteration-count: 1;
}

.animate-twice {
    animation-iteration-count: 2;
}

/* ===== ANIMACIONES ESPECÍFICAS DEL PROYECTO ===== */
.hero-title-animation {
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.hero-description-animation {
    animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-button-animation {
    animation: bounceIn 0.8s ease-out 0.7s both;
}

.hero-image-animation {
    animation: elasticIn 1s ease-out 0.9s both;
}

.pricing-card-animation {
    animation: scaleIn 0.6s ease-out both;
}

.testimonial-animation {
    animation: fadeInUp 0.6s ease-out both;
}

.gallery-item-animation {
    animation: rotateIn 0.8s ease-out both;
}

.form-step-animation {
    animation: slideInUp 0.5s ease-out both;
}

/* ===== ANIMACIONES DE HOVER ===== */
.hover-lift {
    transition: transform var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: transform var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate {
    transition: transform var(--transition-normal);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-glow {
    transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(217, 83, 79, 0.4);
}


/* ===== ANIMACIONES DE SCROLL ===== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease-out;
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease-out;
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease-out;
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ===== ANIMACIONES DE CUSI ===== */

/* Animación de entrada de Cusi */
@keyframes cusiEnter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8) rotate(-10deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-10px) scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* Animación de salida de Cusi */
@keyframes cusiExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05) rotate(-5deg);
    }
    100% {
        opacity: 0;
        transform: translateY(20px) scale(0.8) rotate(10deg);
    }
}

/* Animación de burbuja de Cusi */
@keyframes cusiBubbleEnter {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateX(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes cusiBubbleExit {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-15px) scale(0.95);
    }
}

/* Estados para controlar las animaciones */
.mascot--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mascot--entering .mascot__img,
.pricing__mascot--entering .pricing__mascot-img,
.testimonials__mascot--entering .testimonials__mascot-img,
.booking__mascot--entering .booking__mascot-img,
.gallery__mascot--entering .gallery__mascot-img,
.footer__mascot--entering .footer__mascot-img,
.chatbot--entering .chatbot__img {
    animation: cusiEnter 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.mascot--exiting .mascot__img,
.pricing__mascot--exiting .pricing__mascot-img,
.testimonials__mascot--exiting .testimonials__mascot-img,
.booking__mascot--exiting .booking__mascot-img,
.gallery__mascot--exiting .gallery__mascot-img,
.footer__mascot--exiting .footer__mascot-img,
.chatbot--exiting .chatbot__img {
    animation: cusiExit 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.mascot--entering .mascot__bubble,
.pricing__mascot--entering .pricing__mascot-bubble,
.testimonials__mascot--entering .testimonials__question,
.booking__mascot--entering .booking__mascot-bubble,
.gallery__mascot--entering .gallery__mascot-bubble,
.footer__mascot--entering .footer__mascot-bubble,
.chatbot--entering .chatbot__bubble {
    animation: cusiBubbleEnter 1s ease-out 0.3s forwards;
    opacity: 0;
    box-shadow: var(--box-shadow-md);
}

.mascot--exiting .mascot__bubble,
.pricing__mascot--exiting .pricing__mascot-bubble,
.testimonials__mascot--exiting .testimonials__question,
.booking__mascot--exiting .booking__mascot-bubble,
.gallery__mascot--exiting .gallery__mascot-bubble,
.footer__mascot--exiting .footer__mascot-bubble,
.chatbot--exiting .chatbot__bubble {
    animation: cusiBubbleExit 0.6s ease-in forwards;
}

/* Estado inicial - oculto */
.pricing__mascot,
.testimonials__mascot,
.booking__mascot,
.gallery__mascot,
.footer__mascot,
.chatbot {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Cuando está visible */
.pricing__mascot--visible,
.testimonials__mascot--visible,
.booking__mascot--visible,
.gallery__mascot--visible,
.footer__mascot--visible,
.chatbot--visible {
    opacity: 1;
    visibility: visible;
}

/* Placeholder para imágenes que no cargan */
.mascot__img, 
.pricing__mascot-img,
.testimonials__mascot-img,
.booking__mascot-img,
.gallery__mascot-img,
.footer__mascot-img,
.chatbot__img {
    position: relative;
    display: block;
}

.mascot__img::before,
.pricing__mascot-img::before,
.testimonials__mascot-img::before,
.booking__mascot-img::before,
.gallery__mascot-img::before,
.footer__mascot-img::before,
.chatbot__img::before {
    content: "🦙";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    background: rgba(217, 83, 79, 0.15);
    padding: 15px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(217, 83, 79, 0.3);
    z-index: 1;
    min-width: 80px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ocultar el placeholder cuando la imagen carga correctamente */
.mascot__img:not(.error)::before,
.pricing__mascot-img:not(.error)::before,
.testimonials__mascot-img:not(.error)::before,
.booking__mascot-img:not(.error)::before,
.gallery__mascot-img:not(.error)::before,
.footer__mascot-img:not(.error)::before,
.chatbot__img:not(.error)::before {
    display: none;
}