/* =============================================
   SPIRAL ANIMATION STYLES
   ============================================= */

/* Importar fontes do Adobe Fonts (Balgin e Agrandir Grand) - REMOVIDO (404 error)
@import url("https://use.typekit.net/xqr4jor.css");
*/

/* Seção principal da animação espiral */
.spiral-section {
    position: relative;
    width: 100%;
    height: 50vh; /* Metade da altura da tela */
    min-height: 400px; /* Altura mínima para mobile */
    overflow: hidden;
    margin-top: -1px !important; /* Cola 1px pra cima eliminando gap */
    padding-top: 0 !important;
    top: -1px; /* Truque extra para garantir conexão */
    /* Imagem de fundo (suporta GIF animado) */
    background-image: url('../assets/images/spiral-background.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Fallback caso imagem não carregue */
    background-color: #007c8c !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container da animação */
.spiral-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay com texto centralizado */
.spiral-text-overlay {
    position: relative;
    z-index: 10;
    text-align: center;
    opacity: 1; /* Sempre visível, sem fade-in */
    transform: translateY(0);
}

/* Logo com imagem "OCEA Premium Supplements" */
.spiral-logo-image {
    width: clamp(166px, 26.6vw, 400px); /* Dobrado: 2/3 do tamanho original */
    height: auto;
    display: block;
    margin: 0 auto;
    filter: brightness(1);
    /* Garantir que a imagem seja nítida */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Animação de pulsação sutil */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .spiral-section {
        height: 50vh;
        min-height: 350px;
    }

    .spiral-logo-image {
        width: clamp(134px, 33.4vw, 266px); /* Dobrado: 2/3 do original */
    }
}

@media (max-width: 480px) {
    .spiral-section {
        height: 45vh;
        min-height: 300px;
    }

    .spiral-logo-image {
        width: clamp(120px, 40vw, 234px); /* Dobrado: 2/3 do original */
    }
}

/* Ajuste para telas muito grandes */
@media (min-width: 1920px) {
    .spiral-section {
        height: 45vh; /* Reduz um pouco em telas gigantes */
    }

    .spiral-logo-image {
        width: 466px; /* Dobrado: 2/3 de 700px */
        max-width: 33.4vw; /* Dobrado: 2/3 de 50vw */
    }
}