/**
 * AGI Careers - View Transitions Styles
 * Animaciones específicas para las páginas de carreras
 */

@supports (view-transition-name: auto) {
    /* Transiciones específicas para archive de carreras */
    .agi-careers-archive .agi-jobs-container {
        view-transition-name: careers-jobs-container;
    }

    .agi-careers-archive .agi-jobs-filters {
        view-transition-name: careers-jobs-filters;
    }

    /* Transiciones para página individual de trabajo */
    .agi-job-single {
        view-transition-name: careers-single-job;
    }

    .agi-job-hero {
        view-transition-name: careers-job-hero;
    }

    .agi-job-description {
        view-transition-name: careers-job-description;
    }

    .agi-job-sidebar {
        view-transition-name: careers-job-sidebar;
    }

    /* Modal de aplicación */
    .agi-modal {
        view-transition-name: careers-modal;
    }

    /* Animaciones específicas */
    ::view-transition-old(careers-jobs-container) {
        animation: fadeOutRight 0.5s cubic-bezier(0.4, 0, 1, 1);
    }

    ::view-transition-new(careers-jobs-container) {
        animation: fadeInRight 0.5s cubic-bezier(0, 0, 0.2, 1);
    }

    ::view-transition-old(careers-job-hero) {
        animation: slideOutRight 0.5s cubic-bezier(0.4, 0, 1, 1);
    }

    ::view-transition-new(careers-job-hero) {
        animation: slideInRight 0.5s cubic-bezier(0, 0, 0.2, 1);
    }

    ::view-transition-old(careers-job-description) {
        animation: fadeOutRight 0.5s cubic-bezier(0.4, 0, 1, 1);
    }

    ::view-transition-new(careers-job-description) {
        animation: fadeInRight 0.5s cubic-bezier(0, 0, 0.2, 1);
    }

    ::view-transition-old(careers-job-sidebar) {
        animation: slideOutRight 0.4s cubic-bezier(0.4, 0, 1, 1);
    }

    ::view-transition-new(careers-job-sidebar) {
        animation: slideInRight 0.4s cubic-bezier(0, 0, 0.2, 1);
    }

    /* Modal fade in/out */
    ::view-transition-old(careers-modal) {
        animation: fadeOut 0.3s ease-in-out;
    }

    ::view-transition-new(careers-modal) {
        animation: fadeIn 0.3s ease-in-out;
    }
}

/* Animaciones personalizadas */
/* Animaciones personalizadas */
@keyframes fadeOutScale {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

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

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

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

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

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

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

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

/* Soporte para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    @supports (view-transition-name: auto) {
        .agi-careers-archive .agi-jobs-container,
        .agi-careers-archive .agi-jobs-filters,
        .agi-job-single,
        .agi-job-hero,
        .agi-job-description,
        .agi-job-sidebar,
        .agi-modal {
            view-transition-name: none;
        }

        ::view-transition-old(*),
        ::view-transition-new(*) {
            animation: none !important;
        }
    }
}

/* Estados y variaciones - Contextos de transición del plugin de carreras */

/* Marcadores de contexto para debugging y personalización */
body.agi-careers-archive-transition {
    --careers-context: 'archive';
}

body.agi-careers-single-transition {
    --careers-context: 'single';
}

body.agi-careers-view-transitions-enabled {
    --careers-context: 'enabled';
}

/* Mejoras visuales durante transiciones */
.agi-modal-open {
    scroll-behavior: smooth;
}

/* Animación de carga durante transición */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.agi-loading-transition {
    animation: pulse 0.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}