/* /styles/effects.css */

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }

/* Gradient text — verde */
.c-gradient-text {
  background: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-brand-400) 50%, var(--color-brand-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Badge pulsante — verde */
.c-badge--pulse { position: relative; }
.c-badge--pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--color-brand-300);
  animation: badgePulse 2.5s ease-out infinite;
}
@keyframes badgePulse {
  0%   { transform: scale(0.95); opacity: 0.8; }
  60%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* Pillar icon */
.c-pillar__icon {
  background: linear-gradient(135deg, rgba(144,217,176,0.5) 0%, rgba(74,158,110,0.15) 100%), var(--color-brand-50);
  border: 1px solid var(--color-brand-200);
  box-shadow: 0 4px 12px rgba(74,158,110,0.15);
  transition: transform var(--dur-200) var(--ease-out), box-shadow var(--dur-200) var(--ease-out);
}
.c-pillar:hover .c-pillar__icon {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 8px 24px rgba(74,158,110,0.25);
}

/* Card gradient border */
.c-card--gradient-border { position: relative; background: var(--color-surface); border: none; }
.c-card--gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-18);
  padding: 1px;
  background: linear-gradient(135deg, var(--color-brand-300) 0%, rgba(74,158,110,0.2) 50%, var(--color-brand-200) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Lista check verde */
.c-list--check li::before { content: "✓"; color: var(--color-brand-500); font-weight: var(--font-weight-700); font-size: 0.8em; }

/* Header */
.c-header {
  background-color: rgba(255,255,255,0.90);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(74,158,110,0.12), 0 4px 16px rgba(74,158,110,0.06);
}

/* Footer linha */
.c-footer { position: relative; }
.c-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand-300), transparent);
}

/* Botão primary — brilho (aplicado ao verde) */
.c-button--primary {
  overflow: hidden;
}

/* Section header h2 — linha vermelha como sotaque único */
.s-section__header h2::after {
  content: "";
  display: block;
  margin-top: var(--space-3);
  width: 40px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-300));
}

/* FAQ */
.c-faq__answer { animation: fadeIn 0.25s var(--ease-out); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Parallax */
.js-parallax { will-change: transform; }

/* WhatsApp float */
.c-whatsapp-float {
  width: 56px !important;
  height: 56px !important;
  min-height: unset !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.c-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.55), 0 4px 12px rgba(0,0,0,0.15) !important;
}
.c-whatsapp-float::before { display: none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .c-badge--pulse::after { animation: none; }
  .js-parallax { transform: none !important; }
}