/* Alpine.js - esconde elementos antes de inicializar */
[x-cloak] { display: none !important; }
@font-face {
    font-family: 'Gilroy';
    src: url('./gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'Gilroy';
    src: url('./gilroy/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
}

.font-gilroy { font-family: 'Gilroy', sans-serif; }
.font-serifa { font-family: 'Cormorant Garamond', serif; }

/* Animação do Preloader */
@keyframes loadingBar {
    0% { width: 0%; left: 0%; }
    50% { width: 100%; left: 0%; }
    100% { width: 0%; left: 100%; }
}

.animate-loading-bar {
    animation: loadingBar 1.5s infinite ease-in-out;
}

/* Oculta a barra de rolagem do carrossel no Mobile, mas mantém a funcionalidade de deslizar */
.hide-scroll {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Ativa o Snap no contentor de scroll (o corpo ou o main) */
html {
    scroll-snap-type: y mandatory;
}

/* Smooth scroll apenas no Desktop */
@media (min-width: 1024px) {
    html {
        scroll-behavior: smooth;
    }
}

/* Define onde cada 'paragem' deve acontecer */
.section-snap-point {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;  /* 1. Plano B: Para o Dreamweaver não reclamar e para navegadores muito antigos */
    height: 100dvh; /* 2. Plano A: Navegadores modernos de celular usam esta linha e ignoram a de cima */
    width: 100%;
}

/* Animação da Seta do Portfólio */
@keyframes bounceHorizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}
.animate-bounce-horizontal {
    animation: bounceHorizontal 1.5s infinite ease-in-out;
}

/* MATRIZ DE PORTFÓLIO (Mobile 4xN | Desktop 2xN) */
.portfolio-matrix {
    display: grid !important;
    grid-auto-flow: column !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    align-content: end !important; /* Trava tudo pela base no Desktop */
}

/* Configuração Mobile (4 linhas) */
@media (max-width: 767px) {
    .portfolio-matrix {
        grid-template-rows: repeat(4, max-content) !important;
        gap: 12px !important;
        padding-bottom: 16px;
    }
}

/* Configuração Desktop (2 linhas) */
@media (min-width: 768px) {
    .portfolio-matrix {
        grid-template-rows: repeat(2, max-content) !important;
        gap: 24px !important;
    }
}