/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*= require fontawesome */
/*= require menu */

/* ====================================
   TRANSICIONES DE PÁGINA - COPERA
   Optimizado para móviles y desktop
   ==================================== */

/* Animaciones desactivadas en móviles para mejor rendimiento */
@media (max-width: 768px) {
    /* Desactivar animaciones complejas en móvil */
    body,
    header,
    main,
    section,
    h1, h2,
    .card,
    .sobre-texto,
    .gestion-texto,
    .team-member {
        animation: none !important;
    }

    /* Solo transición simple de fade para navegación en móvil */
    body {
        transition: opacity 0.2s ease-in-out;
    }

    body.page-exiting {
        opacity: 0;
    }
}

/* Animaciones completas solo en desktop */
@media (min-width: 769px) {
    /* Animación principal de entrada */
    @keyframes fadeSlideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Animación de salida */
    @keyframes fadeSlideOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-20px);
        }
    }

    /* Aplicar animación de entrada al body */
    body {
        animation: fadeSlideIn 0.5s ease-out;
    }

    /* Estado de salida cuando se navega */
    body.page-exiting {
        animation: fadeSlideOut 0.3s ease-in forwards;
        pointer-events: none;
    }

    /* Animación para el header */
    @keyframes headerSlide {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    header {
        animation: headerSlide 0.6s ease-out 0.2s backwards;
    }

    /* Animación para contenido principal */
    @keyframes contentFadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    main,
    .main-content,
    section {
        animation: contentFadeIn 0.7s ease-out 0.3s backwards;
    }

    /* Animación escalonada para secciones */
    section:nth-of-type(1) { animation-delay: 0.3s; }
    section:nth-of-type(2) { animation-delay: 0.4s; }
    section:nth-of-type(3) { animation-delay: 0.5s; }
    section:nth-of-type(4) { animation-delay: 0.6s; }

    /* Animación para títulos */
    @keyframes titleEnter {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    h1, h2.sobre-titulo, h2.gestion-titulo {
        animation: titleEnter 0.8s ease-out 0.4s backwards;
    }

    /* Animación para cards y elementos */
    @keyframes cardEnter {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .card,
    .sobre-texto,
    .gestion-texto,
    .team-member {
        animation: cardEnter 0.6s ease-out backwards;
    }

    /* Delays escalonados para múltiples cards */
    .card:nth-child(1),
    .team-member:nth-child(1) { animation-delay: 0.5s; }
    .card:nth-child(2),
    .team-member:nth-child(2) { animation-delay: 0.6s; }
    .card:nth-child(3),
    .team-member:nth-child(3) { animation-delay: 0.7s; }
    .card:nth-child(4),
    .team-member:nth-child(4) { animation-delay: 0.8s; }
    .card:nth-child(5),
    .team-member:nth-child(5) { animation-delay: 0.9s; }
    .card:nth-child(6),
    .team-member:nth-child(6) { animation-delay: 1s; }
}

/* Barra de progreso de Turbo personalizada */
.turbo-progress-bar {
    background: linear-gradient(90deg, #00a551, #a3dc35) !important;
    height: 3px !important;
}

/* Desactivar animaciones en páginas que no las necesiten */
body[data-no-transition] {
    animation: none;
}

body[data-no-transition] * {
    animation: none !important;
}

/* Respetar preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body {
        animation: none !important;
    }
}