/* Importa as fontes para manter a identidade visual consistente */
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Fredoka:wght@400;500;600;700&display=swap');

body,
.font-fredoka,
.font-poppins {
    font-family: 'Fredoka', sans-serif;
}

.font-display {
    font-family: 'Cherry Bomb One', 'Fredoka', sans-serif;
}

/* Background principal do hero */
#inicio {
    background-image: url('/assets/animescafebanner-final.png');
    background-position: center bottom;
}

#sobre {
    margin-top: -1px;
    background:
        linear-gradient(
            to bottom,
            #040a12 0%,
            #0b1422 18%,
            #111827 42%,
            #111827 100%
        );
}

.hero-title {
    letter-spacing: 0;
    text-shadow:
        0 4px 0 rgba(12, 148, 154, 0.9),
        0 8px 24px rgba(236, 72, 153, 0.45);
}

.hero-title span {
    color: #ff69b4;
    text-shadow:
        0 4px 0 rgba(10, 128, 138, 0.95),
        0 8px 24px rgba(255, 105, 180, 0.55);
}

/* Animação para os elementos entrarem na tela (Fade In Up) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Animação de deslizar para cima (Slide In Up) */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-in-up {
    animation: slideInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Scrollbar personalizada para o chat */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: #111827; /* gray-900 */
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #374151; /* gray-700 */
    border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #4b5563; /* gray-600 */
}

/* Animação de digitação (3 pontinhos) */
.typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}