/* ==========================================================================
   SMOOTH SECTION TRANSITIONS - Transições Suaves entre Seções
   ==========================================================================
   Cria transições elegantes e suaves entre cada seção,
   evitando cortes bruscos e criando fluxo visual harmonioso.
*/

/* --- 1. GRADIENTE DE TRANSIÇÃO ENTRE SEÇÕES --- */
.home-page-container > section,
.home-page-container > .snap-section,
.home-page-container .home-section-wrapper,
.home-page-container .section-adaptive-alt,
.home-page-container .glass-map-wrapper {
    position: relative;
    overflow: visible; /* Mudado para visible para permitir que os gradientes apareçam */
    /* Transição suave de cores de fundo */
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                background-image 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Degradê superior delicado (transição de cima) - Para seções claras */
.home-page-container > section:not(:first-child):not(.areas-carousel-section):not(.cta-section-ultimate):not(.hero-universal-wrapper),
.home-page-container > .snap-section:not(:first-child):not(.areas-carousel-section):not(.hero-universal-wrapper),
.home-page-container .home-section-wrapper:not(:first-child) {
    position: relative;
}

.home-page-container > section:not(:first-child):not(.areas-carousel-section):not(.cta-section-ultimate):not(.hero-universal-wrapper)::before,
.home-page-container > .snap-section:not(:first-child):not(.areas-carousel-section):not(.hero-universal-wrapper)::before,
.home-page-container .home-section-wrapper:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px; /* Altura do degradê */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Degradê inferior delicado (transição para baixo) - Para seções claras */
.home-page-container > section:not(:last-child):not(.areas-carousel-section):not(.cta-section-ultimate):not(.hero-universal-wrapper),
.home-page-container > .snap-section:not(:last-child):not(.areas-carousel-section):not(.hero-universal-wrapper),
.home-page-container .home-section-wrapper:not(:last-child) {
    position: relative;
}

.home-page-container > section:not(:last-child):not(.areas-carousel-section):not(.cta-section-ultimate):not(.hero-universal-wrapper)::after,
.home-page-container > .snap-section:not(:last-child):not(.areas-carousel-section):not(.hero-universal-wrapper)::after,
.home-page-container .home-section-wrapper:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px; /* Altura do degradê */
    background: linear-gradient(to top, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Ajuste para seções escuras - Degradês mais sutis */
.areas-carousel-section,
.cta-section-ultimate {
    position: relative;
    overflow: visible;
}

/* Degradê superior delicado para seções escuras */
.areas-carousel-section:not(:first-child)::before,
.cta-section-ultimate:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, 
        rgba(26, 26, 26, 0.6) 0%,
        rgba(26, 26, 26, 0.3) 30%,
        rgba(26, 26, 26, 0.1) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Degradê inferior delicado para seções escuras */
.areas-carousel-section:not(:last-child)::after,
.cta-section-ultimate:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, 
        rgba(26, 26, 26, 0.6) 0%,
        rgba(26, 26, 26, 0.3) 30%,
        rgba(26, 26, 26, 0.1) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição entre seção clara e escura (clara -> escura) */
.home-section-wrapper:not(:last-child) + .areas-carousel-section::before,
.section-adaptive-alt:not(:last-child) + .areas-carousel-section::before {
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(26, 26, 26, 0.2) 50%,
        rgba(26, 26, 26, 0.05) 80%,
        transparent 100%);
}

/* Transição entre seção escura e clara (escura -> clara) */
.areas-carousel-section:not(:last-child) + .home-section-wrapper::before,
.areas-carousel-section:not(:last-child) + .section-adaptive-alt::before {
    background: linear-gradient(to bottom, 
        rgba(26, 26, 26, 0.3) 0%,
        rgba(26, 26, 26, 0.15) 20%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.05) 80%,
        transparent 100%);
}

/* ==========================================================================
   TRANSIÇÕES ESPECIAIS ENTRE SEÇÕES (Estilo CTA -> MAPA aplicado globalmente)
   ========================================================================== */

/* Transição especial entre CTA e Mapa (escura -> escura com gradiente suave) */
.cta-section-ultimate:not(:last-child) + .glass-map-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(26, 26, 26, 0.4) 0%,
        rgba(18, 18, 18, 0.3) 30%,
        rgba(18, 18, 18, 0.15) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Hero -> Areas Carousel (clara/escura -> escura) */
.hero-universal-wrapper:not(:last-child) + .areas-carousel-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.4) 0%,
        rgba(26, 26, 26, 0.3) 30%,
        rgba(26, 26, 26, 0.15) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Areas Carousel -> Home Section (escura -> clara) */
.areas-carousel-section:not(:last-child) + .home-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(26, 26, 26, 0.4) 0%,
        rgba(26, 26, 26, 0.25) 30%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Home Section -> Home Section (clara -> clara) */
.home-section-wrapper:not(:last-child) + .home-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Home Section -> Section Adaptive Alt (clara -> clara) */
.home-section-wrapper:not(:last-child) + .section-adaptive-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Section Adaptive Alt -> Home Section (clara -> clara) */
.section-adaptive-alt:not(:last-child) + .home-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Section Adaptive Alt -> Section Adaptive Alt (clara -> clara) */
.section-adaptive-alt:not(:last-child) + .section-adaptive-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Home Section -> CTA (clara -> escura) */
.home-section-wrapper:not(:last-child) + .cta-section-ultimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(26, 26, 26, 0.2) 50%,
        rgba(26, 26, 26, 0.1) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Section Adaptive Alt -> CTA (clara -> escura) */
.section-adaptive-alt:not(:last-child) + .cta-section-ultimate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.25) 30%,
        rgba(26, 26, 26, 0.2) 50%,
        rgba(26, 26, 26, 0.1) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Transição Areas Carousel -> Section Adaptive Alt (escura -> clara) */
.areas-carousel-section:not(:last-child) + .section-adaptive-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, 
        rgba(26, 26, 26, 0.4) 0%,
        rgba(26, 26, 26, 0.25) 30%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* --- 2. FADE EDGE (Bordas Desbotadas) - Removido para evitar conflitos --- */

/* --- 3. SMOOTH BORDER TRANSITIONS (Transições Suaves de Borda) --- */
.home-page-container > section,
.home-page-container > .snap-section {
    position: relative;
    transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

/* Garantir que o conteúdo fique acima dos degradês */
.home-page-container > section > *,
.home-page-container > .snap-section > *,
.home-page-container .home-section-wrapper > * {
    position: relative;
    z-index: 2;
}

/* --- 4. RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .home-page-container > section,
    .home-page-container > .snap-section {
        transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }
    
    /* Degradês menores em mobile */
    .home-page-container > section::before,
    .home-page-container > section::after,
    .home-page-container > .snap-section::before,
    .home-page-container > .snap-section::after,
    .home-page-container .home-section-wrapper::before,
    .home-page-container .home-section-wrapper::after {
        height: 60px;
    }
    
    .areas-carousel-section::before,
    .areas-carousel-section::after,
    .cta-section-ultimate::before,
    .cta-section-ultimate::after,
    .glass-map-wrapper::before,
    .hero-universal-wrapper + .areas-carousel-section::before,
    .areas-carousel-section + .home-section-wrapper::before,
    .home-section-wrapper + .home-section-wrapper::before,
    .home-section-wrapper + .section-adaptive-alt::before,
    .section-adaptive-alt + .home-section-wrapper::before,
    .section-adaptive-alt + .section-adaptive-alt::before,
    .home-section-wrapper + .cta-section-ultimate::before,
    .section-adaptive-alt + .cta-section-ultimate::before,
    .areas-carousel-section + .section-adaptive-alt::before {
        height: 60px;
    }
}

/* --- 5. REDUCE MOTION --- */
@media (prefers-reduced-motion: reduce) {
    .home-page-container > section,
    .home-page-container > .snap-section {
        mask-image: none;
        -webkit-mask-image: none;
    }
}