/*
Theme Name: Aggregate Professional
Theme URI: https://aggregate.local
Author: Aggregate
Description: Tema oficial da Aggregate Professional, desenvolvido com Tailwind CSS.
Version: 1.0.0
Text Domain: aggregate-tema
*/
html {
    scroll-behavior: smooth;
}

body {
    min-height: max(884px, 100dvh);
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-poppins {
    font-family: 'Poppins', sans-serif;
}

/* Tipografia Responsiva Global */
.text-section-title {
    font-size: 50px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.text-hero-title {
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

@media (max-width: 768px) {
    .text-section-title {
        font-size: 32px;
    }

    .text-hero-title {
        font-size: 40px;
        /* Reduzido levemente */
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
        width: 50%;
    }
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hero-gradient {
    background: linear-gradient(rgba(0, 6, 19, 0.7), rgba(0, 6, 19, 0.4)), url('https://placehold.co/1280x707');
    background-size: cover;
    background-position: center;
}


/* Animations Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    /* Começa 40px abaixo */
    transition: all 1s cubic-bezier(0.5, 1.25, 0.5, 1);
    /* Aumentei a duração para 1s para acompanhar o header */
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Garante que o reveal só aconteça quando o body estiver pronto (após cortinas) */
body.is-ready .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estado inicial forçado antes do is-ready para evitar flash */
body:not(.is-ready) .reveal {
    opacity: 0 !important;
    transform: translateY(40px) !important;
}

/* Stagger delays */
.stagger-1 {
    transition-delay: 100ms;
}

.stagger-2 {
    transition-delay: 200ms;
}

.stagger-3 {
    transition-delay: 300ms;
}

.stagger-4 {
    transition-delay: 400ms;
}

.stagger-5 {
    transition-delay: 500ms;
}

/* Correção de Bugs */

/* 1. Remove o delay de 1s do header */
.reveal.header-title {
    transition-delay: 0s;
}

/* 2. Garante que o conteúdo seja visível o suficiente para o observer pegar */
#inicio h1,
#inicio p {
    overflow: visible !important;
}

/* 3. Impede que o texto seja cortado pelo overflow-hidden do container do header */
.header-content {
    overflow: visible !important;
}

/* 4. Ajusta o header para não cobrir o texto */
#main-header {
    position: fixed;
    z-index: 1000;
    /* Garante que fique por cima de tudo */
}

/* 5. Garante que as seções estejam sempre acima do header no scroll */
section {
    position: relative;
    z-index: 1;
}

/* Page Transitions - Continuous Upwards Flow */
.transition-layer {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    transform: translateY(0);
    /* Começa cobrindo a tela */
}

/* Quando a página termina de carregar, as camadas sobem para revelar */
#page-transition.is-exiting .transition-layer {
    transform: translateY(-100%);
}

#page-transition.is-exiting .transition-layer:nth-child(2) {
    transition-delay: 0.1s;
}

#page-transition.is-exiting .transition-layer:nth-child(3) {
    transition-delay: 0.2s;
}

/* Quando clicamos em um link, as camadas vêm de baixo (100%) para o centro (0) */
#page-transition.is-active .transition-layer {
    transition: none;
    /* Reset instantâneo para a base */
    transform: translateY(100%);
}

/* Forçamos a animação de subida no clique */
#page-transition.is-animating .transition-layer {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateY(0);
}

#page-transition.is-animating .transition-layer:nth-child(2) {
    transition-delay: 0.1s;
}

#page-transition.is-animating .transition-layer:nth-child(3) {
    transition-delay: 0.2s;
}

/* --- Navigation Active State --- */
.nav-link-anchor.active .nav-indicator {
    opacity: 1 !important;
    width: 21px !important;
}

/* --- Dropdown Adjustments (Handled by Tailwind) --- */

/* --- Dropdown Adjustments on Scroll --- */
#main-header.is-scrolled #nav-links .nav-link-item {
    color: rgba(0, 6, 19, 0.6);
}

#main-header.is-scrolled #nav-links .nav-link-item:hover,
#main-header.is-scrolled #nav-links .active .nav-link-item {
    color: #000613;
}

#main-header.is-scrolled #nav-links .nav-indicator {
    background-color: #25737F;
}

#main-header.is-scrolled #nav-links .material-symbols-rounded {
    color: rgba(0, 6, 19, 0.6);
}

#main-header.is-scrolled #nav-links .group:hover .material-symbols-rounded {
    color: #000613;
}

/* --- Mobile Menu Overlay --- */
#mobile-menu {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu.opacity-100 {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mobile-nav-link {
    transition: all 0.3s ease;
    position: relative;
}

.mobile-nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #90EFEF;
    transition: width 0.3s ease;
}

.mobile-nav-link:hover::after {
    width: 100%;
}

/* --- Swiper Custom Styles --- */
.testimonials-swiper .swiper-pagination-bullet {
    background: #25737F;
    opacity: 0.2;
    transition: all 0.3s ease;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}

.swiper-button-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
}

/* --- Viaturas Archive & Modal --- */
:root {
    --modal-bg: rgba(0, 6, 19, 0.85);
}

#viatura-modal.is-visible {
    display: flex;
}

#viatura-modal.is-visible .modal-backdrop {
    opacity: 1;
}

#viatura-modal.is-visible .modal-container {
    opacity: 1;
    transform: translateY(0);
}

.viatura-card {
    will-change: transform, box-shadow;
}

/* Esconder scrollbar do modal */
.modal-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal-container::-webkit-scrollbar {
    display: none;
}

/* Ajustes de Paginação */
.pagination .nav-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pagination .page-numbers {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background-color: #fff;
    color: #000613;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.pagination .page-numbers:hover {
    background-color: #E9F1F2;
    transform: translateY(-2px);
}

.pagination .page-numbers.current {
    background-color: #0F4D5C;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(15 77 92 / 0.3);
}

.pagination .page-numbers.dots {
    background: transparent;
    box-shadow: none;
}

/* Animação suave para o card */
.viatura-card-image img {
    will-change: transform;
}

/* Mobile adjustments para o modal */
@media (max-width: 768px) {
    .modal-container {
        flex-direction: column;
        border-radius: 24px;
        max-height: 95dvh;
    }

    .modal-container .md\:w-1\/2 {
        width: 100%;
    }
}

/* --- Estilização da Barra de Rolagem (Scrollbar) --- */

/* Firefox (Padrão Global) */
html {
    scrollbar-width: thin;
    scrollbar-color: #25737F #F8FAFB;
}

/* Chrome, Edge e Safari (Global) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #F8FAFB;
}

::-webkit-scrollbar-thumb {
    background: #25737F;
    border-radius: 9999px;
    border: 2px solid #F8FAFB;
}

::-webkit-scrollbar-thumb:hover {
    background: #0F4C5C;
}

/* Chrome, Edge e Safari (Modais e Elementos de Overflow Interno) */
.overflow-y-auto::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track,
.overflow-y-scroll::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-y-scroll::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(37, 115, 127, 0.5);
    border-radius: 9999px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-y-scroll::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #0F4C5C;
}

/* Firefox (Modais e Elementos de Overflow Interno) */
.overflow-y-auto,
.overflow-y-scroll,
.overflow-x-auto {
    scrollbar-width: thin;
    scrollbar-color: #25737F transparent;
}