/**
 * AGIX TECNOLOGIA LTDA - CNPJ: 42.587.029/0001-61
 * 
 * Arquivo: custom.css
 * Versão: 1.0.0
 * Criado: 2025-10-22
 * 
 * Descrição:
 * Estilos personalizados para o site Eleva Home Store.
 * Inclui a fonte base, cores da marca, animações e outros estilos
 * que não são cobertos pelo Tailwind CSS padrão.
 *
 * Stack:
 * - CSS
 *
 * Histórico:
 * - 2025-10-22 (v1.0.0): Versão inicial com estilos extraídos do index.html original.
 */

/* Estilo base para a fonte e cores */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a1a1a;
    color: #e0e0e0;
    overflow-x: hidden; /* Garante que o body não tenha scroll lateral */
}

/*
 * Corrige a navegação por âncoras para compensar o header fixo.
 * O scroll-padding-top garante que quando clicar em um link âncora,
 * o conteúdo não fique escondido atrás do header.
 */
html {
    scroll-padding-top: 5rem; /* Desktop: ~80px (header padrão) */
}

/* No mobile, o header é um pouco menor, então ajustamos o scroll-padding */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 4rem; /* Mobile: ~64px */
    }
}

/* Cores personalizadas baseadas no logo */
.text-brand-primary { color: #A78B8B; }
.bg-brand-primary { background-color: #A78B8B; }
.border-brand-primary { border-color: #A78B8B; }
.hover\:bg-brand-primary-dark:hover { background-color: #8f7373; }


/* Correção para o bug do background-attachment: fixed no iOS */
@media (hover: none) {
    #inicio {
        background-attachment: scroll;
    }
}

/* Altera a cor do sublinhado da navegação no scroll */
#header.bg-brand-primary .underline-effect {
    background-color: white;
}

/*
 * ════════════════════════════════════════════════════════════════════════════════
 * PRELOADER V2 (Conceitual)
 * ════════════════════════════════════════════════════════════════════════════════
 */

/* Define o estado inicial dos elementos para a animação com GSAP */
.preloader-letter {
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: bottom center;
}

.preloader-line {
    width: 0%;
}

.preloader-tagline {
    opacity: 0;
}

/* Oculta o conteúdo principal enquanto o preloader está ativo */
#main-content.hidden-by-preloader {
    visibility: hidden;
    opacity: 0;
}

/*
 * ════════════════════════════════════════════════════════════════════════════════
 * VÍDEOS DE BACKGROUND
 * ════════════════════════════════════════════════════════════════════════════════
 */

/* Remove a interação do mouse com os vídeos de fundo para não exibir controles nativos */
.video-background {
    pointer-events: none;
}

/*
 * ════════════════════════════════════════════════════════════════════════════════
 * AJUSTES DE ESPAÇAMENTO MOBILE
 * ════════════════════════════════════════════════════════════════════════════════
 */

/*
 * Adiciona espaçamento vertical adequado entre as seções no mobile.
 * No desktop, as seções já têm min-h-screen que garante espaçamento natural.
 * No mobile, precisamos de padding adicional para evitar que fiquem grudadas.
 */
@media (max-width: 768px) {
    /* Adiciona padding top e bottom em todas as seções principais */
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* A seção Hero (#inicio) não precisa de padding extra, pois é h-screen */
    #inicio {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Ajusta o espaçamento interno dos containers das seções */
    section .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /*
     * ════════════════════════════════════════════════════════════════════
     * CARDS DE AMBIENTES - MOBILE
     * ════════════════════════════════════════════════════════════════════
     * No mobile, não temos hover real. Por isso, deixamos todos os elementos
     * do card sempre visíveis para facilitar o entendimento de que é clicável.
     */

    /* Título: posicionado no topo da área de texto */
    #ambientes .reveal-card > div:nth-child(3) {
        bottom: 9rem !important;
    }

    /* Subtítulo/Descrição: sempre visível, abaixo do título */
    #ambientes .reveal-card > div:nth-child(4) {
        opacity: 1 !important;
        bottom: 6rem !important;
    }

    /* CTA "Conheça nossos modelos": sempre visível na base */
    #ambientes .reveal-card > div:nth-child(5) {
        opacity: 1 !important;
        bottom: 2rem !important;
    }

    /* Barra de destaque: sempre expandida */
    #ambientes .reveal-card > div:nth-child(6) {
        width: 100% !important;
        left: 0 !important;
    }

    /* Overlay: sempre com escurecimento adequado para legibilidade */
    #ambientes .reveal-card > div:nth-child(2) {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent) !important;
    }
}