/* RESET ESTRUTURAL: Garante que o navegador não adicione margens indesejadas */
* { margin: 0; padding: 0; box-sizing: border-box; }

body, html {
    width: 100%; height: 100%;
    overflow: hidden; /* Remove barras de rolagem para manter a imersão */
    background-color: #ffffff; /* Fundo base branco puro */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* O 'PALCO': Garante centralização vertical e horizontal absoluta */
#viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Organiza os elementos verticalmente no centro */
}

/* ESTRUTURA DOS SLIDES */
.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* Invisível por padrão para o efeito de fade-in */
    transition: opacity 2s ease-in-out; /* Transição suave de 2 segundos */
    z-index: 1;
    background-color: #ffffff; /* Todos os fundos são brancos */
}

/* Mostra o slide que está ativo */
.active { opacity: 1; z-index: 10; }

/* TÉCNICA DE TEXTO EM DEGRADÊ: Aplica suas cores solicitadas (#173068 > #943546) */
.gradient-text {
    background: linear-gradient(135deg, #173068 0%, #943546 100%);
    -webkit-background-clip: text; /* Corta o fundo no formato do texto (Safari/Chrome) */
    -webkit-text-fill-color: transparent; /* Torna a cor sólida do texto transparente */
    background-clip: text;
    display: inline-block;
}

/* --- CONFIGURAÇÕES VISUAIS DOS SLIDES --- */

/* SLIDE 1: FRASE PHILOSÓFICA */
.phrase-text {
    font-size: 3.5rem; /* Tamanho de impacto para desktop */
    max-width: 85%;
    line-height: 1.1;
    margin: 0;
}

/* SLIDE 2: LOGO GIGANTE E CENTRALIZADO */
.logo-img {
    max-width: 600px; /* Seu ajuste de logo gigante para desktop */
    width: 85%; /* Ocupa 85% da largura da tela, garantindo que não toque nas bordas */
    height: auto; /* Mantém a proporção do logo */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.02)); /* Sombra quase invisível para profundidade */
}

/* SLIDE 3: URL COM MESMO TAMANHO DA FRASE DO SLIDE 1 */
.url-text {
    font-size: 3.5rem; /* Alinhado ao tamanho da frase do Slide 1 */
    letter-spacing: 2px; /* Pequeno espaçamento para estética minimalista */
    text-transform: lowercase; /* Mantém a URL em minúsculas */
}

/* ANIMAÇÃO DE RESPIRAÇÃO (VIVA): Dá movimento suave e orgânico ao conteúdo central */
.active .content-box {
    animation: breathe 8s infinite ease-in-out;
}

@keyframes breathe {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.04) translateY(-10px); } /* Sobe e cresce 4% no ápice */
}

/* --- RESPONSIVIDADE PARA DISPOSITIVOS MÓVEIS (CELULARES) --- */
@media (max-width: 768px) {
    .phrase-text { font-size: 2.2rem; line-height: 1.2; max-width: 90%; }
    .logo-img { max-width: none; width: 85%; }
    .url-text { font-size: 1.4rem; letter-spacing: 1px; }
}