/* =========================================================
   ANIMAÇÕES — carregue DEPOIS do style.css
   Usa as propriedades `translate` e `scale` (e não `transform`)
   para não brigar com os hovers que você já tem.
   ========================================================= */

html {
    scroll-behavior: smooth;
}

@keyframes rise {
    from { opacity: 0; translate: 0 28px; }
}

@keyframes zoom-in {
    from { opacity: 0; scale: .94; translate: 0 16px; }
}


/* =========================================================
   1. ENTRADA DO HERO (o momento principal da página)
   ========================================================= */

.hero-content > * {
    animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}

.hero-content > :nth-child(1) { animation-delay: .10s; }
.hero-content > :nth-child(2) { animation-delay: .25s; }
.hero-content > :nth-child(3) { animation-delay: .40s; }
.hero-content > :nth-child(4) { animation-delay: .55s; }
.hero-content > :nth-child(5) { animation-delay: .70s; }


/* Números do hero: estrelas acendendo uma a uma (o count-up está no JS) */

.star {
    display: inline-block;
    opacity: 0;
    scale: .3;
}

.stars-on .star {
    animation: star-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
    animation-delay: calc(var(--i) * .12s);
}

@keyframes star-pop {
    to { opacity: 1; scale: 1; }
}


/* =========================================================
   2. REVEAL AO ROLAR A PÁGINA
   As classes são adicionadas pelo animations.js
   ========================================================= */

.reveal {
    opacity: 0;
}

.reveal.is-visible {
    opacity: 1;
    animation: rise .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both;
}

.reveal.zoom.is-visible {
    animation-name: zoom-in;
}


/* =========================================================
   3. HOVER / INTERAÇÃO
   ========================================================= */

/* Linha amarela que cresce no topo dos cards */

.servico-item,
.cambio-card {
    position: relative;
    overflow: hidden;
}

.servico-item::before,
.cambio-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: #FFD600;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}

.servico-item:hover::before,
.cambio-card:hover::before {
    transform: scaleX(1);
}

/* Número / sigla dá uma leve "virada" */

.servico-numero,
.cambio-topo {
    transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}

.servico-item:hover .servico-numero,
.cambio-card:hover .cambio-topo {
    transform: rotate(-8deg) scale(1.1);
}

/* Botões: feedback ao clicar */

.btn:active,
.btn-outline:active {
    transform: translateY(0) scale(.97);
}


/* =========================================================
   4. BOTÃO DO WHATSAPP
   ========================================================= */

.whatsapp-float {
    animation: wa-in .6s cubic-bezier(.3, 1.6, .5, 1) 1.4s both;
}

.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    z-index: -1;
    animation: wa-pulse 2.6s ease-out 2.2s infinite;
}

@keyframes wa-in {
    from { opacity: 0; scale: 0; }
}

@keyframes wa-pulse {
    0%        { transform: scale(1);   opacity: .55; }
    70%, 100% { transform: scale(1.7); opacity: 0; }
}


/* =========================================================
   5. BARRA DE PROGRESSO DE ROLAGEM
   ========================================================= */

.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    background: #FFD600;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 1000;
    pointer-events: none;
}


/* =========================================================
   ACESSIBILIDADE: respeita quem desativa animações no sistema
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .hero-content > *,
    .reveal.is-visible,
    .stars-on .star,
    .whatsapp-float {
        animation: none !important;
    }

    .reveal,
    .star {
        opacity: 1 !important;
        scale: 1 !important;
    }

    .whatsapp-float::before,
    .scroll-progress {
        display: none;
    }
}


/* =========================================================
   V2 — VISUAL + MOVIMENTO EXTRA
   ========================================================= */

/* Tipografia: fonte condensada nos títulos (estilo placa de oficina) */
h1, h2, h3, h4 { font-family: 'Barlow Condensed', Arial, sans-serif; letter-spacing: .3px; }
:focus-visible { outline: 2px solid #FFD600; outline-offset: 3px; }

/* Correções */
.sobre p { color: #b5b5b5; }                         /* estava #666 no fundo preto */
.hero-numbers h3 .star { font-size: inherit; color: inherit; } /* estrelas pegavam o estilo do span */

/* Cabeçalho */
header { transition: padding .3s, background .3s, box-shadow .3s; }
header.scrolled { padding-top: 12px; padding-bottom: 12px; background: rgba(0,0,0,.92);
    backdrop-filter: blur(8px); box-shadow: 0 1px 0 #FFD600; }
nav a { position: relative; padding: 6px 0; }
nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
    background: #FFD600; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
nav a:hover::after, nav a.ativo::after { transform: scaleX(1); }
nav a.ativo { color: #FFD600; }
.nav-cta { background: #FFD600; color: #000; padding: 9px 18px; border-radius: 6px; font-weight: 700; }
.nav-cta::after { display: none; }
.nav-cta:hover { background: #fff; color: #000; }

/* Hero: título maior, fundo com parallax e engrenagens girando */
.hero { position: relative; overflow: hidden; background-attachment: scroll, fixed; }
.hero-content { position: relative; z-index: 1; }
.hero-content h2 { font-size: clamp(46px, 8vw, 88px); line-height: 1; text-transform: uppercase; }

.hero-gear { position: absolute; fill: none; stroke: #FFD600; opacity: .1; pointer-events: none; }
.hero-gear.g1 { width: 520px; right: -120px; top: 8%; animation: spin 40s linear infinite; }
.hero-gear.g2 { width: 300px; right: 300px; bottom: -60px; animation: spin 28s linear infinite reverse; }
@keyframes spin { to { rotate: 360deg; } }

/* Faixa de segurança entre o hero e o resto */
.hazard { position: relative; height: 14px; overflow: hidden; background: #000; }
.hazard::before { content: ""; position: absolute; inset: 0 -64px;
    background: repeating-linear-gradient(-45deg, #FFD600 0 16px, #000 16px 32px);
    animation: hazard 1s linear infinite; }
@keyframes hazard { to { translate: 45.25px 0; } }

/* Cards: luz amarela que segue o mouse */
.servico-item::after, .cambio-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,214,0,.12), transparent 70%);
    opacity: 0; transition: opacity .3s; }
.servico-item:hover::after, .cambio-card:hover::after { opacity: 1; }

/* Mapa no tema escuro (volta ao normal ao passar o mouse) */
.mapa h3 { text-align: center; font-size: 40px; }
.mapa iframe { filter: invert(.9) hue-rotate(180deg) grayscale(.4); transition: filter .5s; }
.mapa iframe:hover { filter: none; }

@media (max-width: 700px) {
    nav a:not(.nav-cta) { display: none; }
    header { padding: 14px 5%; }
    header h1 { font-size: 20px; }
    .hero-gear.g1 { width: 340px; right: -140px; }
    .hero-gear.g2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-gear, .hazard::before { animation: none; }
    .hero { background-attachment: scroll; }
}