/* =========================================
   1. RESET BÁSICO E CONFIGURAÇÃO GLOBAL
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #e8e8e8; /* Fundo cinza claro premium */
    font-family: 'Montserrat', sans-serif;
    color: #1a1a1a; /* Texto escuro */
    min-height: 100vh;
    overflow-x: hidden; /* Previne barras de scroll horizontais */
}

/* =========================================
   2. ESTRUTURA (LAYOUT)
   ========================================= */
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 100vh; 
    padding: 6vh 6vw; 
}

/* =========================================
   3. ELEMENTOS VISUAIS E ANIMAÇÕES (TIMELINE)
   ========================================= */

/* O Contacto no Topo (AGORA É O ÚLTIMO A APARECER: 4.5s) */
.top-contact {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 1.2rem; /* O TEU TAMANHO */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    opacity: 0;
    animation: fadeUp 1s ease forwards 4.5s; /* Aparece no fim de tudo */
}

.top-contact a {
    color: #1a1a1a;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.top-contact a:hover {
    opacity: 0.4;
}

/* Bloco Central que contém a linha e os textos */
.content {
    width: 100%; 
}

/* Título "BREVEMENTE" (Aparece aos 0.5s) */
h1 {
    font-size: 3rem; /* O TEU TAMANHO */
    font-weight: 200; 
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px; 
    opacity: 0;
    animation: fadeUp 1s ease forwards 0.5s;
}

/* A Linha (Avança para a direita a partir dos 1.2s) */
.line {
    width: 100%; 
    height: 2px;
    background-color: #1a1a1a;
    margin-bottom: 15px;
    
    transform-origin: left center;
    transform: scaleX(0); 
    animation: growRight 1.5s cubic-bezier(0.8, 0, 0.2, 1) forwards 1.2s;
}

/* Subtítulo "COMING SOON" (Aparece aos 2.7s) */
.subtitle {
    font-size: 1.9rem; /* O TEU TAMANHO */
    font-weight: 200; 
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: right; 
    opacity: 0;
    animation: fadeUp 1s ease forwards 2.7s; 
}

/* O Logótipo no Fundo (AGORA É O PRIMEIRO A APARECER: 0.3s) */
.bottom-logo {
    display: flex;
    justify-content: center;
    width: 100%;
}

.logo {
    max-width: 350px; /* O TEU TAMANHO */
    opacity: 0;
    animation: fadeUp 1s ease forwards 0.3s; /* Aparece logo de início */
    
    display: block;
    margin: 0 auto 5vh auto; /* Centraliza e dá margem inferior */
}

/* =========================================
   4. DEFINIÇÃO DOS MOVIMENTOS (KEYFRAMES)
   ========================================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes growRight {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* =========================================
   5. ADAPTAÇÃO PARA TELEMÓVEL
   ========================================= */
@media (max-width: 768px) {
    .logo {
        max-width: 250px;
    }
    h1 {
        font-size: 2.2rem;
    }
    .subtitle {
        font-size: 0.9rem;
    }
    .top-contact {
        font-size: 0.7rem; 
    }
}