/* ═══════════════════════════════════════════════════════════
   ANIMAÇÕES — Lightweight scroll + entrance reveals
═══════════════════════════════════════════════════════════ */

/* respeita usuário com motion reduzido */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-fade, .reveal-stagger > *,
  .hero-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* base — todos começam invisíveis */
.reveal,
.reveal-up,
.reveal-fade,
.reveal-stagger > * {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.25,1),
    transform 0.8s cubic-bezier(.2,.7,.25,1);
  will-change: opacity, transform;
}

.reveal-up    { transform: translateY(28px); }
.reveal       { transform: translateY(40px); }
.reveal-fade  { transform: none; }

.reveal-stagger > * {
  transform: translateY(20px);
}

/* visível */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* stagger — atrasos progressivos */
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 490ms; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 560ms; }

/* ─────────────────────────────────────────────────
   HERO — entrance ao carregar
───────────────────────────────────────────────────── */
.hero-anim {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 0.9s cubic-bezier(.2,.7,.25,1) forwards;
}
.hero-anim--1 { animation-delay: 0.05s; }
.hero-anim--2 { animation-delay: 0.18s; }
.hero-anim--3 { animation-delay: 0.32s; }
.hero-anim--4 { animation-delay: 0.46s; }
.hero-anim--5 { animation-delay: 0.60s; }
.hero-anim--6 { animation-delay: 0.74s; }
.hero-anim--7 { animation-delay: 0.86s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* foto do hero — fade + leve zoom */
.hero__photo img {
  opacity: 0;
  transform: scale(1.04);
  animation: heroPhotoIn 1.4s cubic-bezier(.2,.7,.25,1) 0.2s forwards;
}
@keyframes heroPhotoIn {
  to { opacity: 1; transform: scale(1); }
}

/* grid decorativa do hero — fade discreto */
.hero__bg-grid {
  opacity: 0;
  animation: gridFadeIn 1.6s ease-out 0.3s forwards;
}
@keyframes gridFadeIn {
  to { opacity: 0.35; }
}

/* urgency bar — slide in */
.urgency-bar {
  animation: barSlideDown 0.5s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes barSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* underline do headline — desenha após entrada */
.hero__headline em {
  display: inline-block;
  position: relative;
}

/* lot pill ativo — pulso suave */
.lot-pill-card--active {
  animation: pulseActive 2.4s ease-in-out infinite;
}
@keyframes pulseActive {
  0%, 100% { box-shadow: 0 0 0 1px var(--cyan), 0 0 24px rgba(42,181,232,.15); }
  50%      { box-shadow: 0 0 0 1px var(--cyan), 0 0 36px rgba(42,181,232,.35); }
}

/* botão primário — brilho passando */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }

/* progress fill anima ao entrar na viewport */
.lot-bar.is-visible .lot-bar__progress-fill { width: var(--fill-w, 100%); }

/* hover lift cards (sutil) */
.persona-card,
.cur-card,
.bonus-card,
.cost-card,
.dec-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.persona-card:hover,
.cur-card:hover,
.bonus-card:hover {
  transform: translateY(-2px);
}