/* Archivo: /home/xyz/var/www/grtravels.com.mx/public_html/css/animations.css */
/* Animaciones para el sitio web GR Travels */

/*-------------------------------------------
  ANIMACIONES BÁSICAS DE ENTRADA Y SALIDA
-------------------------------------------*/

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

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

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

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

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

@keyframes zoom {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*-------------------------------------------
  ANIMACIONES PARA SLIDERS
-------------------------------------------*/

@keyframes slideRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

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

@keyframes testimonialSlide {
    0% {
        opacity: 0;
        transform: scale(0.9) translateX(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes kenBurns {
    from {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}

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

/*-------------------------------------------
  ANIMACIONES PARA ELEMENTOS INTERACTIVOS
-------------------------------------------*/

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
}

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

@keyframes rotateIcon {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(180deg);
    }
}

@keyframes btnPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 86, 179, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 86, 179, 0);
    }
}

@keyframes floatingButton {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

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

@keyframes borderAnimation {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/*-------------------------------------------
  ANIMACIONES PARA UI/UX
-------------------------------------------*/

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

@keyframes shrinkHeader {
    from {
        padding: 1rem 0;
    }
    to {
        padding: 0.5rem 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
}

@keyframes messageAppear {
    0% {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
        padding: 0;
    }
    100% {
        max-height: 200px;
        opacity: 1;
        transform: translateY(0);
        padding: 1rem;
    }
}

@keyframes messageFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/*-------------------------------------------
  CLASES DE ANIMACIÓN REUTILIZABLES
-------------------------------------------*/

.animate-fade-in {
    animation: fadeIn 0.8s forwards;
}

.animate-fade-up {
    animation: fadeUp 0.8s forwards;
}

.animate-fade-down {
    animation: fadeDown 0.8s forwards;
}

.animate-fade-left {
    animation: fadeLeft 0.8s forwards;
}

.animate-fade-right {
    animation: fadeRight 0.8s forwards;
}

.animate-zoom {
    animation: zoom 0.8s forwards;
}

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

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

/*-------------------------------------------
  RETRASOS DE ANIMACIÓN
-------------------------------------------*/

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-900 { animation-delay: 900ms; }
.delay-1000 { animation-delay: 1000ms; }

/*-------------------------------------------
  EFECTOS DE HOVER
-------------------------------------------*/

.hover-zoom {
    transition: all 0.3s ease;
}

.hover-zoom:hover {
    transform: scale(1.05);
    z-index: 1;
}

.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hover-rotate img {
    transition: all 0.5s ease;
}

.hover-rotate:hover img {
    transform: rotate(3deg) scale(1.05);
}

/*-------------------------------------------
  ANIMACIONES DE CARGA DE PÁGINA
-------------------------------------------*/

.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.page-transition.loaded {
    transform: translateY(-100%);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spinner 1s linear infinite;
}

/*-------------------------------------------
  ANIMACIONES PARA COMPONENTES ESPECÍFICOS
-------------------------------------------*/

/* Tarjetas de destino */
.destination-card .btn {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease 0.1s;
}

.destination-card:hover .btn {
    transform: translateY(0);
    opacity: 1;
}

/* Animación secuencial de listas */
.sequence-animation > * {
    opacity: 0;
    transform: translateY(20px);
}

.sequence-animation > *:nth-child(1) { animation: fadeUp 0.5s forwards 0.1s; }
.sequence-animation > *:nth-child(2) { animation: fadeUp 0.5s forwards 0.2s; }
.sequence-animation > *:nth-child(3) { animation: fadeUp 0.5s forwards 0.3s; }
.sequence-animation > *:nth-child(4) { animation: fadeUp 0.5s forwards 0.4s; }
.sequence-animation > *:nth-child(5) { animation: fadeUp 0.5s forwards 0.5s; }
.sequence-animation > *:nth-child(6) { animation: fadeUp 0.5s forwards 0.6s; }

/* Botón con pulso */
.btn-primary.with-pulse {
    animation: btnPulse 2s infinite;
}

/* Mensajes de formulario */
.success-message,
.error-message {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    animation: messageAppear 0.5s forwards;
}

.success-message {
    background-color: rgba(40, 167, 69, 0.1);
    border-left: 4px solid var(--success);
    color: var(--success);
}

.error-message {
    background-color: rgba(220, 53, 69, 0.1);
    border-left: 4px solid var(--error);
    color: var(--error);
}

.fade-out {
    animation: messageFadeOut 0.5s forwards;
}

/*-------------------------------------------
  HERO SLIDER ANIMATIONS
-------------------------------------------*/

/* Animaciones del contenido del slide */
.slide .animate-fade {
    opacity: 0;
}

.slide.active .animate-fade {
    animation: fadeIn 0.8s forwards;
}

.slide.active h1.animate-fade {
    animation-delay: 0.2s;
}

.slide.active p.animate-fade {
    animation-delay: 0.5s;
}

/* Si decidimos volver a añadir botones */
.slide.active .hero-buttons.animate-fade {
    animation-delay: 0.8s;
}

/* Efecto de zoom en el slide activo */
.slide-bg {
    transform: scale(1.1);
    transition: transform 9s ease;
}

.slide.active .slide-bg {
    transform: scale(1.0);
}

/* Overlay del slide */
.slide .slide-overlay {
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.active .slide-overlay {
    opacity: 1;
}

/* Animación para los indicadores */
.slider-nav {
    animation: fadeInUp 1s forwards;
    animation-delay: 1s;
    opacity: 0;
}

/* Dots de navegación */
.dot {
    transition: all 0.3s ease;
}

.dot.active {
    transform: scale(1.3);
}