/* Transições suaves globais */
html {
    scroll-behavior: smooth;
    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    opacity: 1;
}

body {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
    background-color: var(--light);
}

/* Transição de saída - página atual desaparecendo */
html.page-transition-out,
body.page-transition-out {
    opacity: 0;
    pointer-events: none;
}

/* Transição de entrada - nova página aparecendo */
html.page-transition-in,
body.page-transition-in {
    opacity: 0;
    animation: fadeIn 300ms ease-in-out forwards;
}

/* Animação de fade-in */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Estado carregado */
html.page-loaded,
body.page-loaded {
    opacity: 1;
}

/* 
 * IMPORTANTE: Manter o cabeçalho e navegação visíveis durante as transições 
 * Isso evita o "piscar" do menu
 */
header, 
header.transition-persist {
    transition: none !important;
    opacity: 1 !important;
}

nav,
nav.transition-persist {
    transition: none !important;
    opacity: 1 !important;
}

/* Durante a transição de saída, manter o cabeçalho visível */
html.page-transition-out header,
body.page-transition-out header,
html.page-transition-out nav,
body.page-transition-out nav {
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Durante a transição de entrada, manter o cabeçalho visível */
html.page-transition-in header,
body.page-transition-in header,
html.page-transition-in nav,
body.page-transition-in nav {
    opacity: 1 !important;
}

/* Estilos que garantem que o cabeçalho e o menu nunca pisquem */
.logo, 
.menu-toggle {
    transition: none !important;
    opacity: 1 !important;
}

/* Garantir que o conteúdo principal tenha transição adequada */
main {
    transition: opacity 300ms ease-in-out;
}

/* Preloader configurado para transições suaves */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(222, 223, 215, 0.97);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Animações de carregamento */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.preloader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(74, 60, 113, 0.2);
    border-top: 3px solid #4A3C71;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Configuração para usuários que preferem movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    html, 
    body, 
    main,
    header, 
    nav,
    .logo, 
    .menu-toggle,
    html.page-transition-out,
    body.page-transition-out,
    html.page-transition-in,
    body.page-transition-in {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
    }
    
    /* Desativar animações para preferências de movimento reduzido */
    @keyframes fadeIn {
        0% { opacity: 1; }
        100% { opacity: 1; }
    }
    
    .preloader {
        display: none;
    }
}