/* ==========================================================================
   animations.css — keyframes, transições e estados de animação
   Destaque único da página: o motion de entrada do hero.
   Demais seções: apenas reveal sutil e micro-interações.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Banner do hero: abre como uma moldura e assenta devagar (sem mexer na opacidade, para não atrasar o LCP) */
@keyframes banner-reveal {
  from { clip-path: inset(7% 7% 7% 7% round var(--radius-lg)); }
  to { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}

@keyframes banner-settle {
  from { scale: 1.08; }
  to { scale: 1; }
}

@keyframes island-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes clock-hand {
  to { transform: rotate(360deg); }
}

@keyframes clock-pulse {
  0%, 70%, 100% { scale: 1; }
  80% { scale: 1.14; }
}

@keyframes island-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.55; }
}

/* Números do contador: duas animações idênticas, alternadas a cada segundo pelo JS */
@keyframes tick-a {
  from { opacity: 0.35; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

@keyframes tick-b {
  from { opacity: 0.35; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

/* CTAs */
@keyframes cta-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.025; }
}

@keyframes cta-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@keyframes cta-shine {
  0%, 72% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* Selo 50% OFF */
@keyframes badge-in {
  0% { opacity: 0; scale: 0.6; }
  65% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}

@keyframes badge-pulse {
  0%, 100% {
    scale: 1;
    box-shadow: 0 0 0 0 rgba(94, 107, 85, 0.45);
  }
  50% {
    scale: 1.05;
    box-shadow: 0 0 0 7px rgba(94, 107, 85, 0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Hero — elemento de destaque (no carregamento, sem depender de scroll)
   O parágrafo de apoio não é animado, para não atrasar a leitura.
   -------------------------------------------------------------------------- */
.hero__content > :not(.hero__lead) {
  animation: fade-up 700ms var(--ease-out) both;
}

.hero__content > :nth-child(1) { animation-delay: 380ms; }
.hero__content > :nth-child(2) { animation-delay: 460ms; }
.hero__content > :nth-child(4) { animation-delay: 560ms; }
.hero__content > :nth-child(5) { animation-delay: 640ms; }
.hero__content > :nth-child(6) { animation-delay: 700ms; }

.media-frame--hero {
  animation: banner-reveal 1200ms var(--ease-out) both;
}

.media-frame--hero img {
  animation: banner-settle 1800ms var(--ease-out) both;
}

.timer-island {
  animation: island-in 600ms var(--ease-out) 200ms both;
}

/* --------------------------------------------------------------------------
   Contador promocional
   -------------------------------------------------------------------------- */
.timer-island__icon {
  animation: clock-pulse 2s ease-in-out infinite;
}

.timer-island__hand {
  transform-box: view-box;
  transform-origin: 12px 13px;
  animation: clock-hand 6s linear infinite;
}

.timer-island::before {
  animation: island-glow 3.2s ease-in-out infinite;
}

.timer-island__value.tick-a { animation: tick-a 380ms var(--ease-out); }
.timer-island__value.tick-b { animation: tick-b 380ms var(--ease-out); }

/* --------------------------------------------------------------------------
   Botões de compra: pulsação, brilho periódico e sombra terracota
   -------------------------------------------------------------------------- */
.btn[data-checkout] {
  animation:
    cta-pulse 2.8s ease-in-out infinite,
    cta-shine 4.5s ease-in-out 1.2s infinite;
}

.btn[data-checkout]::before {
  animation: cta-glow 2.8s ease-in-out infinite;
}

/* No hover a pulsação congela e a sombra assume o estado de destaque */
.btn[data-checkout]:hover,
.btn[data-checkout]:hover::before,
.btn[data-checkout].is-loading,
.btn[data-checkout].is-loading::before {
  animation-play-state: paused;
}

.btn[data-checkout]:hover::before {
  animation: none;
  opacity: 1;
}

/* Barra fixa do celular: só anima quando está visível */
.sticky-cta:not(.is-visible) .btn[data-checkout],
.sticky-cta:not(.is-visible) .btn[data-checkout]::before {
  animation: none;
}

/* --------------------------------------------------------------------------
   Selo 50% OFF
   -------------------------------------------------------------------------- */
.hero .badge-off {
  animation:
    badge-in 700ms var(--ease-out) 900ms both,
    badge-pulse 2.8s ease-in-out 1.8s infinite;
}

/* Selo da oferta: entra quando o card é revelado */
.offer-card__ribbon {
  animation: badge-pulse 2.8s ease-in-out 1.2s infinite;
}

.js .offer-card .offer-card__ribbon {
  opacity: 0;
  animation: none;
}

.js .offer-card.is-visible .offer-card__ribbon {
  opacity: 1;
  animation:
    badge-in 700ms var(--ease-out) 350ms both,
    badge-pulse 2.8s ease-in-out 1.3s infinite;
}

/* --------------------------------------------------------------------------
   Imagens surgem suavemente ao carregar (exceto o banner do hero, para não atrasar o LCP)
   -------------------------------------------------------------------------- */
.js .media-frame:not(.media-frame--hero) img {
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out);
}

.js .media-frame:not(.media-frame--hero) img.is-loaded {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Reveal ao rolar (controlado por js/animations.js)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Cards mantêm o hover depois de revelados */
.js .benefit-card[data-reveal].is-visible {
  transition:
    opacity var(--transition-slow),
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  transition-delay: var(--reveal-delay, 0ms), 0ms, 0ms;
}

/* --------------------------------------------------------------------------
   Acessibilidade: movimento reduzido
   Sem pulsações, brilhos ou deslocamentos; só o essencial (spinner lento).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn:hover {
    translate: none;
  }

  /* O spinner continua girando devagar: é um indicador de estado, não decoração */
  .btn.is-loading::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}