/* ============================================================
   ANIMAÇÕES — discretas, rápidas, funcionais.
   Cada regra tem gatilho, duração, easing e finalidade
   documentados na Etapa C do plano (ver README).
   ============================================================ */

/* #1 e #2 — entrada de seção + cascata dos filhos.
   Gatilho: IntersectionObserver a 15%, uma única vez.
   O estado inicial só é aplicado quando o JS assume o controle
   (html.js-reveal), para que o conteúdo apareça normalmente
   se o JavaScript falhar ou estiver desativado. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* #14 — esqueleto de carregamento das fotos.
   Única animação contínua do site, e termina quando a foto chega. */
.skeleton {
  background: linear-gradient(100deg,
    var(--c-areia) 20%, var(--c-creme) 40%, var(--c-areia) 60%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* #7 — pulso único do botão flutuante (uma vez por sessão) */
@keyframes pulso-unico {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* #18 — indicador de rolagem do hero: 3 repetições e para */
@keyframes desce {
  0%, 100% { transform: translateY(0);   opacity: .75; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* #15 — conector da linha do tempo da fidelidade */
@keyframes traca-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes traca-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ============================================================
   prefers-reduced-motion — regra global.
   Nenhuma informação do site depende de animação para ser
   compreendida; aqui tudo vira estático ou fade curto.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  /* mantém apenas o fade onde a transição carrega significado */
  .js-reveal [data-reveal] {
    transform: none !important;
    transition: opacity var(--t-micro) linear !important;
    transition-delay: 0ms !important;
  }
  .fab, .drawer, .drawer__overlay {
    transition: opacity var(--t-micro) linear !important;
    transform: none !important;
  }
  .skeleton { animation: none !important; background: var(--c-areia); }
  .scroll-cue { animation: none !important; }
  .fidelidade__conector { animation: none !important; transform: none !important; }
}