/* ============================================================
   Custom CSS — Landing Page NF-e Expert v2
   Estilos complementares ao Tailwind CSS CDN
   ============================================================ */

/* ---- Scroll suave ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Animação fade-in ao scroll (Intersection Observer) ---- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for children */
.animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }

/* ---- Header — always white, fixed ---- */
/* (no scroll-based transitions needed) */

/* ---- Menu mobile drawer ---- */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.open {
  transform: translateX(0);
}

/* ---- Logo carousel (infinite marquee) ---- */
.logo-carousel {
  width: 100%;
}

.logo-carousel-track {
  animation: logoScroll 30s linear infinite;
  width: max-content;
}

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

@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---- FAQ <details> animation ---- */
.faq-item[open] > div {
  animation: faqOpen 0.3s ease-out;
}

@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Sticky CTA transitions ---- */
#sticky-cta-desktop.show {
  transform: translateY(0);
}

#sticky-cta-mobile.show {
  transform: translateY(0);
}

/* ---- Exit popup animation ---- */
#exit-popup.active {
  display: flex !important;
}

#exit-popup.active > div:last-child {
  animation: popupScale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popupScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---- Form progressive disclosure ---- */
#form-step-2 {
  animation: stepReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stepReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Pill toggle (platform selector) ---- */
.pill-toggle {
  background: #F8FAFC;
}

.pill-option {
  cursor: pointer;
  color: #64748B;
  background: transparent;
  border: none;
  position: relative;
}

.pill-option:hover:not(.active) {
  background: #F1F5F9;
  color: #475569;
}

.pill-option.active {
  background: #1E40AF;
  color: #FFFFFF;
}

.pill-option:focus-visible {
  outline: 2px solid #1E40AF;
  outline-offset: -2px;
}

/* ---- Focus states (accessibility) ---- */
:focus-visible {
  outline: 2px solid #1E40AF;
  outline-offset: 2px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  .mobile-menu {
    transition: none;
  }

  .faq-item[open] > div {
    animation: none;
  }

  #sticky-cta-desktop,
  #sticky-cta-mobile {
    transition: none;
  }

  #exit-popup.active > div:last-child {
    animation: none;
  }

  #form-step-2 {
    animation: none;
  }

  .logo-carousel-track {
    animation: none;
  }
}

/* ---- Input number: hide spinners ---- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}