/* ============================================================
   Astro Guia Vidas — animations.css
   Animações leves, com respeito a prefers-reduced-motion.
   ============================================================ */

/* ---------- Revelação ao rolar ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }
.reveal.delay-3 { transition-delay: 0.36s; }

/* ---------- Círculo zodiacal girando lentamente ---------- */
.ring-rotor {
  transform-origin: 300px 300px;
  animation: ring-spin 60s linear infinite;
}
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Halo pulsante da logo ---------- */
.logo-halo {
  animation: halo-pulse 4.5s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.06); }
}

/* ---------- Pulsação de brilho da logo (sincronizada com o halo) ---------- */
.hero-logo {
  animation: logo-glow-pulse 4.5s ease-in-out infinite;
}
@keyframes logo-glow-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(233, 190, 110, 0));
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.45);
  }
  50% {
    transform: scale(1.015);
    filter: brightness(1.22) saturate(1.18)
      drop-shadow(0 0 18px rgba(233, 190, 110, 0.55))
      drop-shadow(0 0 32px rgba(139, 92, 246, 0.4));
    box-shadow:
      0 0 55px rgba(233, 190, 110, 0.5),
      0 0 85px rgba(139, 92, 246, 0.4),
      0 0 110px rgba(63, 217, 242, 0.28);
  }
}

/* ---------- Nebulosas com profundidade discreta ---------- */
.nebula-a { animation: drift-a 60s ease-in-out infinite alternate; }
.nebula-b { animation: drift-b 75s ease-in-out infinite alternate; }
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4vw, -3vh) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-3vw, 3vh) scale(1.05); }
}

/* ---------- Glifos flutuando lentamente ---------- */
.step-glyph,
.card-glyph,
.cta-star {
  animation: float-slow 7s ease-in-out infinite;
}
.card:nth-child(2n) .card-glyph { animation-delay: 1.6s; }
.card:nth-child(3n) .card-glyph { animation-delay: 3.1s; }
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- Pulsação moderada do botão flutuante ---------- */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(52, 208, 115, 0.6);
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Brilho suave nos botões dourados ---------- */
.btn-gold {
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-gold:hover::after,
.btn-gold:focus-visible::after { left: 130%; }

/* ============================================================
   prefers-reduced-motion: reduzir/desativar movimentos
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ring-rotor,
  .logo-halo,
  .hero-logo,
  .nebula-a,
  .nebula-b,
  .step-glyph,
  .card-glyph,
  .cta-star,
  .wa-float::before {
    animation: none;
  }

  .btn, .card, .plan, .wa-float { transition: none; }
  .btn-gold::after { display: none; }
  .btn-gold:hover, .btn-outline:hover,
  .card:hover, .plan:hover, .wa-float:hover { transform: none; }
}