@tailwind base;
@tailwind components;
@tailwind utilities;

/* Personalizações globais */
html {
    scroll-behavior: smooth;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #050505; 
}
::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #F5B400; /* Primary color */
}

/* Utilitário para classes que não estão no Tailwind CDN padrão */
.text-stroke {
    -webkit-text-stroke: 1px rgba(255,255,255,0.1);
}


.swiper-pagination-bullet-active {
    background: #F5B400 !important; /* Primary */
    opacity: 1 !important;
}

/* Animação Fade In */
.fade-in-section {
    opacity: 0; /* Começa invisível */
    transform: translateY(100px); /* Começa um pouco para baixo */
    filter: blur(6px);
    transition: opacity 1.2s ease-out, transform 0.8s ease-out, filter 0.8s ease-out; /* Define a suavidade */
    will-change: opacity, transform, filter; 
}

.is-visible {
    opacity: 1 !important; /* Torna visível */
    transform: translateY(0) !important; /* Coloca na posição original */
    filter: blur(0);
    will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-section {
        transition: none;
        transform: none;
        opacity: 1;
        filter: none;
        will-change: opacity, transform, filter;
    }
}

/* Video Background */
#hero-video {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Mobile Menu Transition */
.mobile-open {
    transform: translateX(0) !important;
}

/* Esconder Scrollbar no Carrossel Mobile */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}