/* ==============================================
   PETROMAX OIL - FOLHA DE ESTILOS PRINCIPAL
   ============================================== */

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}
.font-mono {
    font-family: 'JetBrains Mono', monospace;
}
.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Webkit scrollbar customized for Petromax Navy */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #050a10;
}
::-webkit-scrollbar-thumb {
    background: #192e44;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e1331e;
}

/* Tech Cyber Grid Background Pattern */
.bg-grid {
    background-size: 50px 50px;
    background-image:
        linear-gradient(to right, rgba(25, 46, 68, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(25, 46, 68, 0.06) 1px, transparent 1px);
}

/* Tech Cyber Grid Background Pattern for light theme */
.bg-grid-light {
    background-size: 50px 50px;
    background-image:
        linear-gradient(to right, rgba(25, 46, 68, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(25, 46, 68, 0.03) 1px, transparent 1px);
}

/* Glow effects */
.neon-glow-red {
    box-shadow: 0 0 20px rgba(225, 51, 30, 0.35);
}
.neon-glow-navy {
    box-shadow: 0 0 20px rgba(25, 46, 68, 0.45);
}

/* CRT/Scanline details */
.scanlines {
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.3) 50%
    ),
    linear-gradient(
        90deg,
        rgba(225, 51, 30, 0.02),
        rgba(0, 255, 0, 0.005),
        rgba(0, 0, 255, 0.02)
    );
    background-size: 100% 4px, 6px 100%;
}

/* Infinitely scrolling marquee animation */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    animation: marquee 45s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
    .animate-marquee:hover {
        animation-play-state: paused;
    }
}

/* Infinitely scrolling client marquee animation */
@keyframes clientMarquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.animate-client-marquee {
    display: flex;
    width: max-content;
    animation: clientMarquee 22s linear infinite;
    /* Forca a faixa para uma camada propria da GPU: elimina o repaint
       a cada quadro, que era o que deixava o scroll lateral travado */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
}
/* Pausa ao passar o mouse SOMENTE em dispositivos com cursor real.
   No celular o :hover fica "grudado" depois de um toque e congelava a faixa. */
@media (hover: hover) and (pointer: fine) {
    .animate-client-marquee:hover {
        animation-play-state: paused;
    }
}
/* No celular a faixa e mais curta, entao o ciclo tambem precisa ser mais curto
   para manter a mesma sensacao de velocidade */
@media (max-width: 767px) {
    .animate-client-marquee {
        animation-duration: 16s;
    }
}

/* Impede que o repaint dos logos atrapalhe a animacao da faixa */
.animate-client-marquee img {
    transform: translateZ(0);
}

/* Pulse scanning lines helper */
@keyframes scanMove {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
.scan-line-pulse {
    animation: scanMove 8s linear infinite;
}

/* Diagonal stripes decoration */
.stripes-warning {
    background: repeating-linear-gradient(
        -45deg,
        rgba(225, 51, 30, 0.1),
        rgba(225, 51, 30, 0.1) 10px,
        transparent 10px,
        transparent 20px
    );
}

/* Premium Hover Zoom Effects for Industrial Cards */
.tech-card-image {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.group:hover .tech-card-image,
.tech-card-image:hover {
    transform: scale(1.12) !important;
    opacity: 1 !important;
}

/* Hide Google Translate toolbar and widgets */
.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
    display: none !important;
}
.goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
}
.goog-te-gadget .goog-te-combo {
    display: none !important;
}
#google_translate_element {
    display: none !important;
}
body {
    top: 0 !important;
    position: static !important;
}
.goog-te-banner-frame.skiptranslate, .goog-te-banner-frame, .skiptranslate {
    display: none !important;
}
iframe.goog-te-banner-frame {
    display: none !important;
}
.goog-tooltip, .goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==============================================
   MENU MOBILE (NOVO - VERSÃO RESPONSIVA)
   ============================================== */

/* Botão hambúrguer, visível apenas em telas menores que md */
#mobile-menu-btn {
    display: none;
}

#mobile-nav-panel {
    position: fixed;
    top: 80px; /* altura do header (h-20) */
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: #08101a;
    border-top: 1px solid rgba(36, 62, 89, 0.4);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 49;
    overflow-y: auto;
}
#mobile-nav-panel.open {
    transform: translateX(0%);
}

@media (max-width: 767px) {
    #mobile-menu-btn {
        display: flex;
    }
}

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

/* Ajustes finos para telas muito pequenas (<= 380px) */
@media (max-width: 380px) {
    #hero-title {
        font-size: 1.85rem !important;
        line-height: 1.05 !important;
    }
    #hero-desc {
        font-size: 0.7rem !important;
    }
}

/* Ajuda o carrossel de equipamentos a responder melhor ao toque no mobile.
   A transição CSS foi removida do HTML: quem anima o track é o GSAP, e as duas
   coisas juntas se atropelavam, o que deixava o arraste lateral "borrachudo". */
#equipment-track {
    touch-action: pan-y;
}
#equipment-track.is-dragging {
    cursor: grabbing;
}

/* ==============================================
   HERO / BANNER — CORREÇÃO DA VERSÃO MOBILE
   ==============================================
   Antes: no celular o #hero-sticky ficava travado em h-screen (100vh) com
   overflow:hidden. Como o conteúdo do hero (tag + título + parágrafo + 2 botões
   + 5 diferenciais + indicador de scroll) é bem mais alto que a tela de um
   celular, o excesso era simplesmente cortado — os diferenciais e parte dos
   botões sumiam, e a imagem do banner ficava recortada.

   Agora, abaixo de 768px o hero deixa de ser "pinado": ele cresce conforme o
   conteúdo, com altura mínima de uma tela cheia. A imagem de fundo continua
   cobrindo a seção inteira, sem corte de conteúdo. */
@media (max-width: 767px) {
    #hero-container {
        min-height: 0;
    }

    #hero-sticky {
        position: relative;
        top: auto;
        height: auto;
        /* 100svh = altura "pequena" da viewport: já desconta a barra de
           endereço do navegador, então não há mais salto quando ela recolhe */
        min-height: 100vh;
        min-height: 100svh;
        overflow: visible;
        justify-content: flex-start;
    }

    /* O espaçador de 128px empurrava demais o conteúdo para baixo */
    #hero-spacer {
        height: 5rem;
    }

    #hero-content {
        padding-top: 1rem;
        padding-bottom: 1.75rem;
    }

    /* Espaçamentos internos mais enxutos para caber melhor na tela do celular */
    #hero-subtitle { margin-bottom: 0.75rem; }
    #hero-title    { margin-bottom: 1rem; }
    #hero-desc     { margin-bottom: 1.25rem; }
    #hero-ctas     { margin-bottom: 1.5rem; }
    #hero-differentials { padding-top: 1.25rem; gap: 0.75rem; }

    /* Os dois botões ocupam a linha inteira: alvo de toque bem maior */
    #hero-ctas > a {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Escurece um pouco mais o fundo no celular para o texto branco
       manter contraste sobre a versão reduzida do banner */
    #hero-darken-overlay {
        opacity: 0.72;
    }

    #scroll-indicator {
        padding-bottom: 1.75rem;
    }
}

/* Em celulares deitados (altura baixa) o hero não precisa de tela cheia */
@media (max-width: 900px) and (max-height: 500px) {
    #hero-sticky {
        min-height: 0;
    }
}

/* A imagem do banner precisa preencher a seção inteira em qualquer altura */
#hero-media-wrapper,
#hero-bg-img {
    height: 100%;
    width: 100%;
}

/* Estado inicial seguro do banner: se o GSAP demorar (ou falhar) para carregar,
   a imagem aparece assim mesmo em vez de ficar uma tela preta */
#hero-bg-img {
    opacity: 0.75;
}

/* ==============================================
   PERFORMANCE GERAL NO MOBILE
   ============================================== */
@media (max-width: 767px) {
    /* backdrop-filter obriga a GPU a reamostrar tudo que está atrás do elemento
       a cada quadro. Havia 6 desses na página (cabeçalho + as etiquetas
       EQ_UNIT dos equipamentos), e cada um criava uma camada nova. */
    .backdrop-blur-md,
    .backdrop-blur-sm,
    [class*="backdrop-blur"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    header.backdrop-blur-md {
        background-color: rgba(8, 16, 26, 0.96);
    }

    /* Halo com blur de 70px: filtro caríssimo em GPU de celular
       para um brilho que quase não se percebe na tela pequena */
    .blur-\[70px\] {
        filter: none;
        opacity: 0.35;
    }

    /* will-change permanente reserva memória de GPU o tempo todo.
       No celular nada anima essas camadas depois da carga inicial. */
    #equipment-track {
        will-change: auto;
    }

    /* Linha de varredura animada sobre o hero inteiro: repaint constante */
    .scan-line-pulse {
        animation: none;
        display: none;
    }

    /* Grade e scanlines com opacidade mínima já não aparecem, mas continuavam
       sendo pintadas a cada quadro */
    .scanlines {
        display: none;
    }
}

/* Isola a pintura das seções pesadas: o navegador para de repintar o que
   está fora da tela durante o scroll */
#equipamentos,
#clientes {
    contain: paint;
}

/* ==============================================
   ACESSIBILIDADE: RESPEITA "REDUZIR MOVIMENTO"
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    .animate-client-marquee,
    .animate-marquee,
    .scan-line-pulse {
        animation: none !important;
    }
    html {
        scroll-behavior: auto;
    }
}