/* Style para o Site One Page de Thatiana Oliveira */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Syne:wght@700;800&family=Inter:wght@300;400;500;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

html {
    scroll-behavior: smooth;
}

/* Configuração dos ícones com stroke weight fininho de 200 conforme design */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Bordas editoriais com baixa opacidade */
.editorial-border {
    border-bottom: 1px solid rgba(198, 198, 205, 0.2); /* outline-variant 20% */
}

/* Efeito Glassmorphism avançado para o Header */
.header-glass {
    background: rgba(10, 17, 40, 0.5); /* brand-navy com 50% opacidade */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(224, 215, 255, 0.15); /* brand-lilac com 15% opacidade */
}

/* Efeito de transição para itens da lista */
.group-hover-fade {
    transition: all 0.3s ease;
}

/* Glassmorphism para cartões em fundo escuro */
.glass-card-dark {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 194, 226, 0.12); /* Borda fina Rosa Claro */
    box-shadow: 0 8px 32px 0 rgba(10, 17, 40, 0.2);
}

/* Glassmorphism para cartões em fundo claro */
.glass-card-light {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(224, 215, 255, 0.4); /* Borda fina Lilás */
    box-shadow: 0 8px 32px 0 rgba(224, 215, 255, 0.1);
}

/* Efeito de hover premium nos botões */
.btn-premium {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(224, 215, 255, 0.4);
}

/* Efeito de hover premium nos botões secundários / contorno */
.btn-premium-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(255, 194, 226, 0.15);
}

/* Estilo para Mesh Gradient animado em CSS */
.mesh-gradient-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0A1128;
    background-image: 
        radial-gradient(at 0% 0%, rgba(224, 215, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 194, 226, 0.12) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(224, 215, 255, 0.08) 0px, transparent 50%);
    overflow: hidden;
}