/* ============================================================
   UTILITIES — t06-pilates
   Animações, helpers e estados globais.
   ============================================================ */


/* ── Anti-FOUC ─────────────────────────────────────────────── */
/* O body fica invisível até o JS terminar de inicializar.
   Isso evita que o usuário veja texto desformatado piscando.   */
body { visibility: hidden; }
body.is-ready { visibility: visible; }


/* ── ASSINATURA t06 — Animação de Respiração ────────────────
   Simula o ritmo de inspiração/expiração do Pilates.
   Aplicada ao título do hero e à linha decorativa.             */

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.018); }
}

@keyframes breathe-line {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(1.6); }
}

.hero__title {
  animation: breathe 4.5s ease-in-out infinite;
  transform-origin: center;
}

.hero__breathline {
  animation: breathe-line 4.5s ease-in-out infinite;
  transform-origin: center;
}

/* Desativa animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__breathline {
    animation: none;
  }
}


/* ── Scroll indicator ───────────────────────────────────────── */

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

.hero__scroll {
  animation: scroll-bounce 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}


/* ── WhatsApp FAB pulse ─────────────────────────────────────── */

@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50%       { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7),
                           0 0 0 10px rgba(37, 211, 102, 0.08); }
}

.whatsapp-fab {
  animation: fab-pulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { animation: none; }
}


/* ── Scroll Reveal ──────────────────────────────────────────── */
/* Adicione class="reveal" em qualquer elemento para
   animação de entrada ao rolar a página.                       */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}