/* CSS Personalizado para Efeitos Awwwards */
body {
    cursor: none;
    /* Esconde cursor padrão para desktops */
}

@media (pointer: coarse) {
    body {
        cursor: auto;
    }

    .custom-cursor {
        display: none;
    }
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #f0f4f8;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background-color 0.3s;
    mix-blend-mode: difference;
}

.custom-cursor.hovered {
    width: 50px;
    height: 50px;
    background-color: rgba(26, 54, 93, 0.1);
    backdrop-filter: blur(2px);
    border-color: transparent;
}

.reveal-text {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Utilitário para ocultar elementos antes do scroll */
.opacity-0-start {
    opacity: 0;
}

/* Substitua a regra .animate-marquee no seu style.css por esta: */
.animate-marquee {
    display: flex;
    width: max-content;
    /* Ajusta ao tamanho real do conteúdo */
    animation: marquee 10s linear infinite;
    /* Aumentei o tempo para 30s para ficar mais elegante */
    will-change: transform;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Move apenas metade (o primeiro bloco) */
    }
}

/* Opcional: Pausar ao passar o mouse para facilitar a leitura */
.animate-marquee:hover {
    animation-play-state: paused;
}

.text-outline {
    -webkit-text-stroke: 1px rgba(26, 54, 93, 0.3);
    color: transparent;
}

/* Efeito de grão/ruído para textura premium */
.bg-noise {
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    opacity: 0.05;
    pointer-events: none;
}

/* Texto com preenchimento gradiente e borda */
.text-stroke {
    -webkit-text-stroke: 1px rgba(26, 54, 93, 0.5);
    color: transparent;
}

/* Animação de rotação lenta para elementos decorativos */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}

#mobile-menu {
    will-change: transform;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

/* Garante que o ícone do menu no navbar seja visível */
#navbar button i {
    stroke-width: 2.5px;
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 10s linear infinite;
    /* Tempo ajustado para logos */
    will-change: transform;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Move metade do conteúdo duplicado */
}

/* Pausa elegante ao passar o mouse */
.group:hover .animate-marquee {
    animation-play-state: paused;
}