/**
 * Animaciones e interacciones entre secciones
 * Respeta prefers-reduced-motion. No modifica la lógica MVC.
 */

/* ========== Variables de movimiento ========== */
:root {
    --motion-duration-fast: 0.25s;
    --motion-duration: 0.5s;
    --motion-duration-slow: 0.7s;
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --section-reveal-offset: 40px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration-fast: 0.01ms;
        --motion-duration: 0.01ms;
        --motion-duration-slow: 0.01ms;
    }
}

/* ========== Secciones: revelado al hacer scroll ========== */
.page-section {
    transition: opacity var(--motion-duration-slow) var(--ease-out),
                transform var(--motion-duration-slow) var(--ease-out);
}

.page-section:not(.section-in-view) {
    opacity: 0.85;
    transform: translateY(var(--section-reveal-offset));
}

.page-section.section-in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .page-section:not(.section-in-view) {
        opacity: 1;
        transform: none;
    }
}

/* ========== Transiciones suaves en elementos interactivos ========== */
.service-item,
.team-item,
.btn,
.footer .btn.btn-link,
.navbar .navbar-nav .nav-link {
    transition-duration: var(--motion-duration);
    transition-timing-function: var(--ease-out);
}

/* ========== Hover sutil en bloques de contenido ========== */
.page-section.section-in-view .service-item:hover,
.page-section.section-in-view .team-item {
    transition: transform var(--motion-duration) var(--ease-out),
                box-shadow var(--motion-duration) var(--ease-out);
}

.page-section.section-in-view .service-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.page-section.section-in-view .team-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .page-section.section-in-view .service-item:hover,
    .page-section.section-in-view .team-item:hover {
        transform: none;
    }
}

/* ========== Separador entre secciones (línea animada) ========== */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
    border: 0;
    margin: 0;
    opacity: 0;
    transition: opacity var(--motion-duration-slow) var(--ease-out);
}

.page-section.section-in-view .section-divider,
.section-divider.is-visible {
    opacity: 1;
}

/* ========== Retrasos escalonados para hijos (usados con WOW) ========== */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }