/* ============================================================
   GB Despachante — Animações e melhorias visuais
   Adicionar ao final do style.css existente
   ============================================================ */

/* SCROLL ANIMATIONS */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-left { opacity:0; transform:translateX(-30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-left.visible { opacity:1; transform:translateX(0); }
.fade-right { opacity:0; transform:translateX(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-right.visible { opacity:1; transform:translateX(0); }
.fade-scale { opacity:0; transform:scale(0.92); transition:opacity 0.5s ease, transform 0.5s ease; }
.fade-scale.visible { opacity:1; transform:scale(1); }
.delay-1 { transition-delay:0.1s !important; }
.delay-2 { transition-delay:0.2s !important; }
.delay-3 { transition-delay:0.3s !important; }
.delay-4 { transition-delay:0.4s !important; }
.delay-5 { transition-delay:0.5s !important; }
.delay-6 { transition-delay:0.6s !important; }

/* NAVBAR scroll */
.navbar { transition:box-shadow 0.3s ease, background 0.3s ease; }
.navbar.scrolled { box-shadow:0 4px 20px rgba(13,79,60,0.25); background:rgba(13,79,60,0.98) !important; backdrop-filter:blur(10px); }
.navbar.scrolled .nav-logo-nome,
.navbar.scrolled .nav-logo-tag,
.navbar.scrolled .nav-logo-mark { opacity:1 !important; color:inherit; }

/* HERO partículas */
.hero { position:relative; overflow:hidden; }
.hero-particle { position:absolute; border-radius:50%; background:rgba(201,168,76,0.06); animation:float 8s ease-in-out infinite; pointer-events:none; }
.hero-particle:nth-child(1) { width:320px; height:320px; top:-120px; right:-100px; animation-delay:0s; }
.hero-particle:nth-child(2) { width:200px; height:200px; bottom:40px; left:-80px; animation-delay:3s; }
.hero-particle:nth-child(3) { width:160px; height:160px; top:45%; right:15%; animation-delay:1.5s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-20px) rotate(5deg)} 66%{transform:translateY(10px) rotate(-3deg)} }

/* HERO botão pulse */
.hero .btn-primary { animation:pulse-btn 3s ease-in-out infinite; }
@keyframes pulse-btn { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0)} 50%{box-shadow:0 0 0 8px rgba(201,168,76,0.15)} }

/* HERO badge shimmer */
.hero-badge { position:relative; overflow:hidden; }
.hero-badge::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); animation:badge-shimmer 3s ease-in-out infinite; }
@keyframes badge-shimmer { 0%{left:-100%} 60%,100%{left:150%} }

/* STATS linha */
.stats-bar { position:relative; overflow:hidden; }
.stats-bar::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--dourado),transparent); animation:shimmer-line 4s ease-in-out infinite; }
@keyframes shimmer-line { 0%{left:-100%} 100%{left:100%} }

/* SERVIÇO cards hover */
.servico-card { transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; }
.servico-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(13,79,60,0.15) !important; border-color:var(--verde) !important; }
.servico-card:hover .servico-icon { background:var(--verde) !important; transform:scale(1.08); transition:all 0.25s; }
.servico-card:hover .servico-icon .material-icons-round { color:#fff !important; }

/* DIFERENCIAL hover */
.diferencial-card { transition:transform 0.25s ease, box-shadow 0.25s ease !important; }
.diferencial-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(13,79,60,0.12) !important; }

/* ETAPAS hover */
.etapa-num { transition:transform 0.3s ease, background 0.3s ease; }
.etapa:hover .etapa-num { transform:scale(1.15); background:var(--dourado) !important; color:var(--verde-dark) !important; }

/* DEPOIMENTOS carrossel */
.depoimentos-grid { overflow:hidden; position:relative; }
.depoimentos-track { display:flex; gap:24px; transition:transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.depoimento-card { flex:0 0 calc(33.333% - 16px); min-width:280px; }
.carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:var(--borda); cursor:pointer; transition:all 0.3s; border:none; padding:0; }
.carousel-dot.active { background:var(--dourado); width:24px; border-radius:4px; }

/* FAQ animação */
.faq-resposta { max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s ease; padding:0 20px; }
.faq-item.active .faq-resposta { max-height:400px; padding:0 20px 16px; }

/* FOTO hover */
.sobre-foto-wrap img { transition:transform 0.4s ease, box-shadow 0.4s ease; }
.sobre-foto-wrap:hover img { transform:scale(1.02); box-shadow:0 20px 60px rgba(13,79,60,0.25) !important; }

/* WHATSAPP float */
.zap-float { position:fixed; bottom:28px; right:28px; width:58px; height:58px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4); z-index:999; transition:transform 0.3s ease, box-shadow 0.3s ease; animation:zap-appear 0.5s ease 1s both; }
.zap-float:hover { transform:scale(1.12); box-shadow:0 8px 30px rgba(37,211,102,0.5); }
.zap-float .material-icons-round { font-size:28px; color:#fff; }
.zap-float::before { content:''; position:absolute; width:100%; height:100%; border-radius:50%; background:#25D366; animation:zap-pulse 2.5s ease-out infinite; z-index:-1; }
@keyframes zap-pulse { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.8);opacity:0} }
@keyframes zap-appear { from{transform:scale(0) rotate(-180deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }

/* SKELETON loading foto */
.sobre-foto-placeholder { background:linear-gradient(90deg,var(--verde-light) 25%,rgba(13,79,60,0.1) 50%,var(--verde-light) 75%); background-size:200% 100%; animation:skeleton 1.5s ease-in-out infinite; }
@keyframes skeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

@media(max-width:768px) {
    .depoimento-card { flex:0 0 100%; min-width:0; }
    .zap-float { bottom:20px; right:20px; width:52px; height:52px; }
}