/* ============================================================
   NAKAO GROUP — Custom Styles (style.css)
   ============================================================
   Este arquivo contém estilos CSS que extrapolam as
   utilidades do Tailwind. Classes utilitárias muito específicas
   ou que dependem de animações / gradients customizados.
   ============================================================ */

html {
    scroll-behavior: smooth
}

:root {
    --primary: #610000;
    --primary-container: #8b0000;
    --on-primary: #ffffff;
    --secondary: #735c00;
    --gold-accent: #D4AF37;
    --tertiary: #2c2c2c;
    --surface: #f9f9f9;
    --on-surface: #1a1c1c;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: var(--tertiary)
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--primary), var(--gold-accent))
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-container)
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--tertiary);
}

/* ═══ WHATSAPP ═══ */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
    transition: all 0.3s;
    animation: pulseWa 2.5s infinite;
}

.whatsapp-btn:hover {
    transform: scale(1.12);
    animation: none;
    box-shadow: 0 10px 32px rgba(37, 211, 102, 0.6)
}

.whatsapp-btn svg {
    width: 28px;
    height: 28px;
    fill: white
}

.wa-tooltip {
    position: absolute;
    right: 70px;
    background: var(--tertiary);
    color: var(--on-primary);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.wa-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--tertiary);
    border-right: 0;
}

.whatsapp-btn:hover .wa-tooltip {
    opacity: 1
}

@keyframes pulseWa {

    0%,
    100% {
        box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45)
    }

    50% {
        box-shadow: 0 6px 36px rgba(37, 211, 102, 0.7), 0 0 0 10px rgba(37, 211, 102, 0.1)
    }
}

/* ── Icon Font (Material Symbols) ───────────────────────────
   Ajuste fino nos ícones para alinhamento vertical e
   espessura padrão (FILL=0, wght=400).
   Referência: https://fonts.google.com/icons
*/
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* ── Nav Link Active (barra indicadora) ────────────────────
   A classe .active é adicionada/removida pelo JS (main.js)
   conforme o scroll ou clique nos links do header.
*/
.nav-link.active {
    border-bottom-width: 2px;
    border-color: #735c00;
    font-weight: 700;
    color: #610000;
}

/* ── Gold Streak (linha decorativa dourada) ─────────────────
   Usada como separador ou destaque horizontal.
   Gradient fade-out da esquerda para a direita.
   Cor: gold-accent (#D4AF37) -> transparente.
*/
.gold-streak {
    height: 2px;
    background: linear-gradient(90deg, #D4AF37 0%, rgba(212, 175, 55, 0) 100%);
}

/* ── Metallic Text (efeito gradiente no texto) ──────────────
   Cria um gradiente linear vermelho-escuro -> primário.
   Usado em números de destaque (stats) para um visual
   "metálico" sem usar imagens.
   ATENÇÃO: -webkit-background-clip: text não funciona
   em todos os navegadores (fallback: cor sólida).
*/
.metallic-text {
    background: linear-gradient(135deg, #8B0000 0%, #610000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Technical Grid (fundo quadriculado) ────────────────────
   Aplica um grid sutil de linhas horizontais + verticais.
   Usado na seção "Ecossistema" (#ecosystem) para dar um
   ar técnico / engineering.
   Grid size: 40px (ajustável conforme necessidade).
*/
.technical-grid {
    background-image:
        linear-gradient(to right, rgba(26, 28, 27, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 28, 27, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ── Kanji Watermark (marca d'água decorativa) ─────────────
   Usado para exibir caracteres japoneses de forma decorativa
   ao fundo de seções (ex: 誠 = sinceridade).
   Desabilita eventos de mouse / seleção.
*/
.kanji-watermark {
    font-family: serif;
    pointer-events: none;
    user-select: none;
}

/* ── Mobile Menu (responsive: max 768px) ────────────────────
   Controla a transição do menu overlay em dispositivos
   móveis.
   Classes gerenciadas pelo JS (js/main.js):
     - .mobile-menu-open     : trava o scroll do body
     - #mobile-menu          : painel fullscreen
     - #mobile-menu.hidden-menu : escondido (fora da tela)
   NOTA: A classe .hidden-menu é definida no HTML como
   estado inicial (menu fechado).
*/
/* ── Client Carousel (animação infinita) ─────────────────────
   Logos dos clientes em scroll horizontal contínuo.
   O track duplica os slides para o efeito infinito.
   Pausa no hover.
*/
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 6));
    }
}

.carousel-track {
    display: flex;
    width: calc(250px * 12);
    animation: scroll 30s linear infinite;
}

.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-slide {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

@media (max-width: 768px) {

    /* Trava o scroll do body quando menu está aberto */
    .mobile-menu-open {
        overflow: hidden;
    }

    /* Painel do menu mobile: animação horizontal */
    #mobile-menu {
        transition: transform 0.3s ease-in-out;
    }

    /* Estado "fechado": desliza para a direita (fora da tela) */
    #mobile-menu.hidden-menu {
        transform: translateX(100%);
    }
}