/* =====================================================
   FogoNorte Engenharia — animacoes.css
   Animações, transições e dinamismo visual
   ===================================================== */

/* ─── SCROLL SUAVE GLOBAL ─── */
html { scroll-behavior: smooth; }

/* ─── PROGRESS BAR no topo ─── */
#fn-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #E84118, #2ECC40);
  z-index: 10000; width: 0%;
  transition: width 0.1s linear;
  pointer-events: none; border-radius: 0 2px 2px 0;
}

/* ─── HEADER ─── */
header {
  transition: background-color 0.4s ease, box-shadow 0.4s ease !important;
}
header.fn-header-scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.10) !important;
}
header .fn-logo-img { transition: filter 0.4s ease !important; }
header.fn-header-scrolled .fn-logo-img { filter: none !important; }
header:not(.fn-header-scrolled) .fn-logo-img { filter: brightness(0) invert(1); }
header nav button { transition: color 0.3s ease !important; }
header.fn-header-scrolled nav button { color: #1A1A1A !important; }
header.fn-header-scrolled nav button:hover { color: #E84118 !important; }
header nav button.fn-nav-active { color: #E84118 !important; position: relative; }
header nav button.fn-nav-active::after {
  content: ''; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%); width: 5px; height: 5px;
  background: #E84118; border-radius: 50%;
}
header.fn-header-scrolled .fn-menu-btn { color: #1A1A1A !important; }

/* ─── SCROLL REVEAL ─── */
.fn-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.65s ease, transform 0.65s ease; }
.fn-reveal.fn-revealed { opacity: 1; transform: translateY(0); }
.fn-reveal-delay-1 { transition-delay: 0.12s; }
.fn-reveal-delay-2 { transition-delay: 0.22s; }
.fn-reveal-delay-3 { transition-delay: 0.32s; }

/* ─── HERO ─── */
@keyframes fnFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fnFadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
#hero .fn-hero-content > * { animation: fnFadeUp 0.7s ease both; }
#hero .fn-hero-content > *:nth-child(1) { animation-delay: 0.15s; }
#hero .fn-hero-content > *:nth-child(2) { animation-delay: 0.30s; }
#hero .fn-hero-content > *:nth-child(3) { animation-delay: 0.45s; }
#hero .fn-hero-content > *:nth-child(4) { animation-delay: 0.60s; }
#hero .fn-hero-content > *:nth-child(5) { animation-delay: 0.75s; }
#hero .fn-hero-card { animation: fnFadeInRight 0.8s 0.5s ease both; }

/* ─── CARDS SERVIÇOS ─── */
#servicos .grid > div {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}
#servicos .grid > div:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 44px rgba(232,65,24,0.11);
  background-color: #fff !important;
}
#servicos .grid > div .w-12 { transition: transform 0.35s ease !important; }
#servicos .grid > div:hover .w-12 { transform: scale(1.18) rotate(-5deg); }

/* ─── CARDS SOBRE ─── */
#sobre .grid > div { transition: transform 0.3s ease, box-shadow 0.3s ease !important; }
#sobre .grid > div:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); }
#sobre .w-full.h-64 { overflow: hidden; }
#sobre .w-full.h-64 img { transition: transform 0.55s ease !important; }
#sobre .w-full.h-64:hover img { transform: scale(1.05); }

/* ─── BOTÕES PRINCIPAIS ─── */
button.bg-\[#E84118\], a.bg-\[#E84118\] {
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
button.bg-\[#E84118\]:hover, a.bg-\[#E84118\]:hover {
  transform: translateY(-2px); box-shadow: 0 8px 26px rgba(232,65,24,0.38);
}
button.bg-\[#E84118\]:active, a.bg-\[#E84118\]:active { transform: translateY(0); }

/* ─── WHATSAPP FLUTUANTE ─── */
a[aria-label="Falar pelo WhatsApp"] > div {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  animation: fnWhatsappPulse 2.8s ease-in-out infinite;
}
@keyframes fnWhatsappPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
  50%     { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 0 0 14px rgba(37,211,102,0); }
}
a[aria-label="Falar pelo WhatsApp"]:hover > div {
  animation: none; transform: scale(1.12);
  box-shadow: 0 8px 30px rgba(37,211,102,0.55) !important;
}

/* ─── DEPOIMENTOS ─── */
#fn-testimonial-box {
  transition: opacity 0.32s ease, transform 0.32s ease;
}
#fn-testimonial-box.fn-fading {
  opacity: 0; transform: translateX(-14px);
}
@keyframes fnSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
#fn-testimonial-box.fn-appearing {
  animation: fnSlideIn 0.4s ease forwards;
}
#fn-testimonial-progress {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #E84118, #ff6b3d);
  border-radius: 0 0 0 1.5rem; width: 0%; transition: none;
}
#fn-testimonial-progress.fn-progressing {
  transition: width 3s linear; width: 100%;
}
#depoimentos .fn-thumb-btn {
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
#depoimentos .fn-thumb-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.09); }
#depoimentos .fn-thumb-btn.fn-thumb-active { box-shadow: 0 4px 16px rgba(232,65,24,0.22); }

/* ─── CONTATO ─── */
#contato input, #contato select, #contato textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
#contato input:focus, #contato select:focus, #contato textarea:focus {
  box-shadow: 0 0 0 3px rgba(232,65,24,0.13);
}
#contato a.flex.items-center.gap-4 > div:first-child { transition: transform 0.2s ease !important; }
#contato a.flex.items-center.gap-4:hover > div:first-child { transform: scale(1.1); }

/* ─── FOOTER ─── */
footer button, footer a { transition: color 0.2s ease !important; }

/* ─── MOBILE NAV ─── */
.fn-mobile-nav {
  position: fixed; inset: 0; background: rgba(0,0,0,0);
  z-index: 998; pointer-events: none; transition: background 0.3s ease;
}
.fn-mobile-nav.fn-mobile-nav--open { background: rgba(0,0,0,0.55); pointer-events: all; }
.fn-mobile-links {
  position: absolute; top: 0; right: 0; background: #fff;
  border-left: 3px solid #E84118; width: 78%; max-width: 310px;
  min-height: 100vh; padding: 88px 24px 32px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(110%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.12);
}
.fn-mobile-nav.fn-mobile-nav--open .fn-mobile-links { transform: translateX(0); }
.fn-mobile-links button {
  text-align: left; padding: 13px 16px; border-radius: 10px;
  color: #333; font-size: 15px; font-weight: 500;
  border: none; background: transparent; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease !important; font-family: inherit;
}
.fn-mobile-links button:hover { background: rgba(232,65,24,0.08); color: #E84118; }
.fn-mobile-links .fn-cta-mobile {
  margin-top: 16px; background: #E84118; color: #fff !important;
  font-weight: 700; border-radius: 999px; text-align: center !important; padding: 14px 16px !important;
}
.fn-mobile-links .fn-cta-mobile:hover { background: #c73510 !important; color: #fff !important; }
.fn-mobile-divider { height: 1px; background: #f0f0f0; margin: 8px 0; border: none; }

img { transition: opacity 0.4s ease; }