/* =========================================
   FONTES LOCAIS (self-hosted)
   TeX Gyre Schola — equivalente aberto da Century Schoolbook
   (licença GUST Font License). Subset latino em WOFF2.
   ========================================= */
@font-face {
    font-family: 'Century Schola';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/century-schola-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Century Schola';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/century-schola-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Century Schola';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/century-schola-bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Century Schola';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/century-schola-bolditalic.woff2') format('woff2');
}

/* =========================================
   VARIÁVEIS & IDENTIDADE VISUAL
   ========================================= */
:root {
    /* Opções de Fundo (Você pode alternar aqui para testar) */
    --cor-fundo-papel: #F7F5F0;  /* Opção 1: Algodão quente / Cinza papel */
    --cor-fundo-marfim: #FFF8E7; /* Opção 2: Cosmic Latte / Marfim quente */
    
    /* VARIÁVEL ATIVA DE FUNDO (Altere a palavra no final para testar) */
    --bg-color: var(--cor-fundo-marfim); 

    /* Cores Sólidas da Paleta (Analógico & Natureza) */
    --text-color: #181615;       /* Grafite profundo para leitura (Carvão) */
    --accent-terracota: #A34836; /* Fita magnética, carretel Revox, argila */
    --accent-madeira: #7A5C43;   /* Madeira de piano e violão */
    --accent-musgo: #3E4D40;     /* Natureza contida, verde seco */
    --accent-petroleo: #26394A;  /* Cinema, noite e profundidade */

    /* Tipografia */
    --font-headings: 'Fraunces', serif; /* Orgânico, clássico, vibração de MPB/Jazz */
    --font-ui: 'Inter', sans-serif;     /* Precisão técnica, clean, engenharia */
}

/* =========================================
   RESET BÁSICO
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-ui);
    
    /* Ocultar barra de rolagem no body inteiro (fallback) */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    display: none;
}

h1, h2, h3 {
    font-family: var(--font-headings);
    font-weight: 400;
}

/* =========================================
   ESTRUTURA DE SCROLL SNAP (100dvh)
   ========================================= */
.scroll-container {
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    
    /* Ocultar barra de rolagem no container que rola */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.screen-section {
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* Obriga o scroll a parar perfeitamente na seção */
    position: relative; /* Necessário para a linha divisória */
    
    /* Alinhamento flex provisório para vermos os blocos */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

/* Linhas divisórias no topo e na base de cada seção (exceto o Hero) */
.screen-section:not(#hero)::before,
.screen-section:not(#hero)::after {
    content: '';
    position: absolute;
    left: 5%; /* Centralizado: 5% de cada lado = 90% de largura */
    width: 90%;
    height: 2px; /* Aumentado para 2px a pedido do usuário */
    background-color: #A52A2A; /* Mesma cor terracota do Hero */
    opacity: 0.85; /* Um pouco mais forte para dar a sensação de borda */
}

.screen-section:not(#hero)::before {
    top: 0;
}

.screen-section:not(#hero)::after {
    bottom: 0;
}

/* =========================================
   ESTILOS TEMPORÁRIOS DE ESTRUTURA (Skeleton)
   ========================================= */
.content h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: 1rem;
    color: var(--accent-terracota);
}

.content h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 1rem;
    color: var(--accent-musgo);
}

.content p {
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}


/* =========================================
   SEÇÃO 01 - APRESENTAÇÃO (fiel ao site atual lucasmonaco.art.br)
   Fonte, cores e proporções replicadas do site atual.
   Dimensões calibradas para o notebook Dell G15 5530 (1920px de largura):
   nome = 48px, subtítulo = 20,8px, filete = 317px — e escalam de forma
   fluida (vw) para celular, tablet e monitores grandes.
   Escopo: somente #hero.
   ========================================= */
#hero {
    /* Tamanho-base (equivale ao "3em" = 48px do site atual em 1920px) */
    --hero-size: clamp(2rem, 2.5vw, 4.5rem);

    position: relative;
    isolation: isolate;
    padding: 0;
    color: #fff;
    /* Mesma pilha do site atual: Century (e equivalentes metricamente compatíveis) */
    font-family: 'Century Schola', 'Century', 'Century Schoolbook', 'C059', serif;
    line-height: 1.6;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../img/fundo-hero.webp');
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a; /* fallback enquanto a imagem carrega */
}

.hero-presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 1.5rem 0; /* leve deslocamento para baixo, como no site atual */
}

.hero-presentation h1,
.hero-presentation h2 {
    margin: 0;
    font-family: inherit; /* evita a regra global de títulos (Fraunces) */
}

.hero-presentation h1 {
    font-size: var(--hero-size);
    font-weight: 700;
}

/* Filete vermelho-terroso (#A52A2A), 6,6× o corpo do nome = 317px a 48px */
.hero-rule {
    width: calc(var(--hero-size) * 6.6);
    height: 2px;
    margin: 1px 0;
    background-color: #A52A2A;
}

/* Subtítulo: 1,3em/3em = ~43,3% do nome; espaçamento de 3px a 20,8px = 0,144em */
.hero-presentation h2 {
    font-size: calc(var(--hero-size) * 0.4333);
    font-style: italic;
    font-weight: 700; /* como no site atual (h2 padrão = negrito) */
    letter-spacing: 0.144em;
}

/* =========================================
   SEÇÃO 02 - SOBRE (Editorial Interativo)
   ========================================= */
#sobre {
    /* O container pai flex (da .screen-section) vai centralizar a .sobre-container */
    background-color: var(--bg-color); /* Fundo claro para contrastar com o Hero */
    color: var(--text-color);
}

.sobre-container {
    display: grid;
    /* Retornamos para colunas simétricas para acomodar bem o formato 4:3 */
    grid-template-columns: 33vw 33vw;
    gap: 4vw; /* Espaço elegante entre o texto e a foto */
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1600px;
}

/* 
   O segredo da interatividade: usar CSS Grid na própria caixa de texto.
   Isso permite empilhar múltiplos textos na MESMA célula (grid-area: 1 / 1).
   Assim, a caixa cresce acompanhando o texto mais longo, evitando quebra de layout.
*/

.texto-camada {
    grid-area: 1 / 1;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado Padrão */
.texto-1 {
    opacity: 1;
    transform: translateY(0);
}
.texto-2 {
    opacity: 0;
    transform: translateY(10px); 
    pointer-events: none; 
}

/* Estado Hover (Mouse em cima da área do texto) */
.sobre-textos:hover .texto-1 {
    opacity: 0;
    transform: translateY(-10px);
}
.sobre-textos:hover .texto-2 {
    opacity: 1;
    transform: translateY(0);
}

/* Imagem */
.sobre-imagem {
    width: 100%;
    aspect-ratio: 4 / 3; /* Formato 4:3 (clássico horizontal) */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(24, 22, 21, 0.08);
}

.foto-perfil {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(20%) contrast(1.05);
}

/* Responsividade Básica (Mobile) */
@media (max-width: 960px) {
    .sobre-container {
        grid-template-columns: 85vw; /* Uma coluna só */
        gap: 3rem;
    }
    /* No celular não tem hover, então precisaríamos de uma lógica de Tap (clique)
       ou exibir um após o outro. Por ora, vamos manter o hover via toque longo. */
}


/* =========================================
   BADGE DE MANUTENÇÃO
   ========================================= */
.maintenance-badge {
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    pointer-events: none;
}