/* ConstateMais - Estilos Principais */

/* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Open+Sans:wght@400;600;700&display=swap');

/* Reset e configurações base */
body {
    font-family: 'Open Sans', sans-serif;
}

.font-lato {
    font-family: 'Lato', sans-serif;
}

/* Cores da marca */
.brand-blue { 
    color: #1e3a8a; 
} 

.bg-brand-blue { 
    background-color: #1e3a8a; 
}

.border-brand-blue { 
    border-color: #1e3a8a; 
}

.brand-orange { 
    color: #f97316; 
}

.bg-brand-orange { 
    background-color: #f97316; 
}

.brand-gray { 
    color: #475569; 
}

/* Cards de funcionalidades */
.feature-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
}

/* Estilos do Modal */
.modal-overlay {
    transition: opacity 0.3s ease-in-out;
}

.modal-container {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.modal-hidden {
    pointer-events: none;
}

.modal-hidden .modal-overlay {
    opacity: 0;
}

.modal-hidden .modal-container {
    opacity: 0;
    transform: scale(0.95);
}

/* Animações de carregamento */
#loading-overlay { 
    animation: presentationAndFade 7s forwards; 
    animation-timing-function: ease-in-out; 
}

#animation-container { 
    position: relative; 
    width: 550px; 
    height: 90px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.unified-icon, .logotype-wrapper { 
    position: absolute; 
}

.unified-icon .progress-circle { 
    animation: drawC 4s ease-in-out forwards; 
    transform: rotate(-90deg); 
    transform-origin: 50% 50%; 
}

.unified-icon .plus-part { 
    stroke-dasharray: 15; 
    stroke-dashoffset: 15; 
    animation-fill-mode: forwards; 
}

.unified-icon #plus-part-1 { 
    animation: drawPlus 0.2s ease-out 2.0s forwards; 
}

.unified-icon #plus-part-2 { 
    animation: drawPlus 0.2s ease-out 2.2s forwards; 
}

.unified-icon #plus-part-3 { 
    animation: drawPlus 0.2s ease-out 2.4s forwards; 
}

.unified-icon #plus-part-4 { 
    animation: drawPlus 0.2s ease-out 2.6s forwards; 
}

.unified-icon .plus-group { 
    animation: fadeOutPlus 0.5s ease-in 4s forwards; 
}

.unified-icon { 
    animation: rotateMoveAndFade 1.5s ease-in-out 4.2s forwards; 
}

.logotype-wrapper { 
    display: flex; 
    font-family: 'Lato', sans-serif; 
    font-size: 2.8rem; 
    line-height: 1; 
    font-weight: 800; 
    opacity: 0; 
    animation: fadeInLogotype 1s ease-in 5s forwards; 
}

.logotype-constate { 
    transform: translateX(-10px); 
    opacity: 0; 
    animation: slideInText 0.8s ease-out 5.2s forwards; 
}

.logotype-mais { 
    opacity: 0; 
    animation: fadeInText 0.8s ease-out 5.5s forwards; 
}

/* Keyframes das animações */
@keyframes presentationAndFade { 
    0%, 92% { 
        opacity: 1; 
        visibility: visible; 
    } 
    100% { 
        opacity: 0; 
        visibility: hidden; 
    } 
}

@keyframes drawC { 
    0%, 10% { 
        stroke-dashoffset: 235.6; 
    } 
    50%, 100% { 
        stroke-dashoffset: 58.9; 
    } 
}

@keyframes drawPlus { 
    to { 
        stroke-dashoffset: 0; 
    } 
}

@keyframes fadeOutPlus { 
    to { 
        opacity: 0; 
    } 
}

@keyframes rotateMoveAndFade { 
    0% { 
        transform: translate(0, 0) rotate(0deg); 
        opacity: 1; 
    } 
    80% { 
        transform: translate(-130px, 0) rotate(128deg); 
        opacity: 1; 
    } 
    100% { 
        transform: translate(-130px, 0) rotate(140deg); 
        opacity: 0; 
    } 
}

@keyframes fadeInLogotype { 
    to { 
        opacity: 1; 
    } 
}

@keyframes slideInText { 
    to { 
        transform: translateX(0); 
        opacity: 1; 
    } 
}

@keyframes fadeInText { 
    to { 
        opacity: 1; 
    } 
}

/* Estilos para imagens dos fundadores */
.founder-image {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.founder-image:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Responsividade adicional */
@media (max-width: 768px) {
    #animation-container {
        width: 100%;
        max-width: 400px;
    }
    
    .logotype-wrapper {
        font-size: 2rem;
    }
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}