/* =========================================================
   animations.css — @keyframes e classes de reveal
   ========================================================= */

/* ── Entrada de elementos ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

/* ── Flutuação das figurinhas decorativas ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(4deg); }
  66%       { transform: translateY(7px) rotate(-3deg); }
}

/* ── Pulso genérico ── */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.12); opacity: 0.75; }
}

/* ── Piscar do ponto animado ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── Marquee horizontal ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Shimmer no texto gradiente ── */
@keyframes textShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Brilho pulsante no card featured ── */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(59, 158, 255, 0.15),
                0 0 0 1px rgba(59, 158, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 60px rgba(59, 158, 255, 0.4),
                0 0 0 2px rgba(59, 158, 255, 0.5);
  }
}

/* ── Ripple (botões) ── */
@keyframes rippleAnim {
  0%   { transform: scale(0); opacity: 0.35; }
  100% { transform: scale(1); opacity: 0; }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  animation: rippleAnim 0.6s var(--ease) forwards;
  z-index: 0;
}

/* ── Botões precisam de position: relative e overflow: hidden ── */
.btn-primary,
.btn-secondary,
.btn-plan,
.nav-cta {
  position: relative;
  overflow: hidden;
}

/* ── Classes de reveal (aplicadas pelo scroll-reveal.js) ── */
.step-card,
.bento-card,
.review-card,
.price-card,
.inc-item,
.perk {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.step-card.visible,
.bento-card.visible,
.review-card.visible,
.price-card.visible,
.inc-item.visible,
.perk.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pain items deslizam da esquerda */
.pain-item {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.pain-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Spotlight glow nos cards (CSS custom properties via JS) ── */
.bento-card,
.price-card,
.review-card,
.step-card,
.perk {
  --mx: 50%;
  --my: 50%;
}

.bento-card::after,
.price-card::after,
.review-card::after,
.step-card::after,
.perk::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mx) var(--my),
    rgba(59, 158, 255, 0.07),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}

.bento-card:hover::after,
.price-card:hover::after,
.review-card:hover::after,
.step-card:hover::after,
.perk:hover::after {
  opacity: 1;
}