/* =========================================================
   VITOR ELETRICISTA — PREMIUM PAGE TRANSITIONS
   ========================================================= */

/* ─── WhatsApp floating button ──────────────────────────── */
#wa-float {
  position: sticky !important;
  float: right !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 9999px !important;
  background-color: #22c55e !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
  transform: none !important;
  /* sticky precisa de um offset vertical para funcionar */
  bottom: 1.5rem !important;
  margin-right: 1.25rem !important;
  /* garante que não ocupe linha própria no fluxo */
  margin-bottom: -3.5rem !important;
}

#wa-float:active {
  transform: scale(0.92) !important;
  transition: transform 0.1s ease !important;
}

/* ─── Page Enter (fade + lift from bottom) ─────────────── */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: pageEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Page Exit (fade + lift up) ───────────────────────── */
body.page-exit {
  animation: pageExit 0.28s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  pointer-events: none;
}

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

/* ─── Scroll-reveal: sections animate in on scroll ─────── */
.section-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children inside a revealed section */
.section-reveal .stagger-child {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-reveal.is-visible .stagger-child:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(2)  { transition-delay: 0.12s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(3)  { transition-delay: 0.19s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(4)  { transition-delay: 0.26s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(5)  { transition-delay: 0.33s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(6)  { transition-delay: 0.40s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(7)  { transition-delay: 0.47s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(8)  { transition-delay: 0.54s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(9)  { transition-delay: 0.54s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(10) { transition-delay: 0.54s; opacity: 1; transform: none; }
.section-reveal.is-visible .stagger-child:nth-child(n+11) { transition-delay: 0.54s; opacity: 1; transform: none; }

/* ─── Cards: hover lift with glow ──────────────────────── */
.service-card,
.stat-card,
section#avaliacoes .bg-white.rounded-2xl,
section#portfolio .bg-white.rounded-2xl,
section#porque .bg-white.rounded-2xl,
section#servicos-complementares article {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease !important;
  will-change: transform;
}

/* ─── Buttons: smooth scale + glow ─────────────────────── */
.btn-primary,
.btn-outline {
  transition:
    background-color 0.2s ease,
    box-shadow 0.25s ease !important;
}

.btn-primary:active,
.btn-outline:active {
  transform: scale(0.98);
}

/* ─── Nav links: underline slide ───────────────────────── */
header nav a:not(.btn-primary) {
  position: relative;
  transition: color 0.2s ease;
}

header nav a:not(.btn-primary)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--amber);
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

header nav a:not(.btn-primary):hover::after {
  width: 100%;
}

/* ─── Hero badge subtle pulse ───────────────────────────── */
.section-badge {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ─── FAQ smooth expand ─────────────────────────────────── */
.faq-item summary {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Chevron spin handled in refresh.css; keep transform consistent */
.faq-item summary svg {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

/* ─── Portfolio / review carousel cards ─────────────────── */
.portfolio-slide article,
.reviews-slide .bg-white {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}


/* ─── Form validation error state ──────────────────────── */
.input-field.border-red-400 {
  border-color: #f87171 !important;
  outline: none;
}

.input-field.border-red-400:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
}

/* ─── Input focus transition ────────────────────────────── */
.input-field {
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    background-color 0.2s ease !important;
}


/* ─── CTA section button ────────────────────────────────── */
section.bg-electric-500 a.bg-white {
  transition:
    background-color 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease !important;
}

section.bg-electric-500 a.bg-white:active {
  transform: scale(0.98);
}

/* ─── Footer links ──────────────────────────────────────── */
.footer-link {
  transition: color 0.2s ease !important;
}

/* ─── Logo link ─────────────────────────────────────────── */
header a[aria-label] img {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

header a[aria-label]:hover img {
  transform: scale(1.06);
}

/* ─── Carousel arrows ───────────────────────────────────── */
button[onclick^="scrollCarousel"],
button[onclick^="scrollPortfolioCarousel"] {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

button[onclick^="scrollCarousel"]:active,
button[onclick^="scrollPortfolioCarousel"]:active {
  transform: scale(0.95);
}

/* ─── Carousel dots ─────────────────────────────────────── */
#reviewsDots button,
#reviewsDots span,
#portfolioDots button,
#portfolioDots span {
  transition: background-color 0.25s ease, transform 0.25s ease !important;
}

/* ─── Map iframe fade-in ────────────────────────────────── */
iframe[loading="lazy"] {
  animation: fadeIn 0.8s ease 0.3s both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Accessibility: no motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
  body.page-exit { animation: none !important; }

  .section-reveal,
  .section-reveal .stagger-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn-primary:hover,
  .btn-outline:hover,
  .service-card:hover,
  .portfolio-slide article:hover,
  .reviews-slide .bg-white:hover,
  section.bg-electric-500 a.bg-white:hover {
    transform: none !important;
  }
}