/* ═══════════════════════════════════════════
   ORGANNAH — Scroll Animations v3
   Regra de ouro: apenas opacity + transform.
   Nunca margin, height, width — evita reflow.
   Resposta a prefers-reduced-motion garantida.
   ═══════════════════════════════════════════ */

/* ────────────────────────────────────────────
   1. FADE-UP (padrão — todos os .reveal)
   ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  650ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ────────────────────────────────────────────
   2. SLIDE DA ESQUERDA — coluna esquerda de
      layouts side-by-side (about, localizacao)
   ──────────────────────────────────────────── */
.reveal--left {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ────────────────────────────────────────────
   3. SLIDE DA DIREITA — coluna direita de
      layouts side-by-side
   ──────────────────────────────────────────── */
.reveal--right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ────────────────────────────────────────────
   4. SCALE-UP — blocos de impacto (CTA, Trust)
   ──────────────────────────────────────────── */
.reveal--scale {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition:
    opacity  750ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ────────────────────────────────────────────
   5. ESTADO VISÍVEL — único seletor para todos
   ──────────────────────────────────────────── */
.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
  opacity: 1;
  transform: none;  /* reseta qualquer transform de saída */
}

/* ────────────────────────────────────────────
   6. DELAYS DE ESCALONAMENTO (data-delay)
      Uso: <div class="reveal" data-delay="1">
   ──────────────────────────────────────────── */
.reveal[data-delay="1"],
.reveal--left[data-delay="1"],
.reveal--right[data-delay="1"],
.reveal--scale[data-delay="1"] { transition-delay: 80ms; }

.reveal[data-delay="2"],
.reveal--left[data-delay="2"],
.reveal--right[data-delay="2"],
.reveal--scale[data-delay="2"] { transition-delay: 160ms; }

.reveal[data-delay="3"],
.reveal--left[data-delay="3"],
.reveal--right[data-delay="3"],
.reveal--scale[data-delay="3"] { transition-delay: 240ms; }

.reveal[data-delay="4"],
.reveal--left[data-delay="4"],
.reveal--right[data-delay="4"],
.reveal--scale[data-delay="4"] { transition-delay: 320ms; }

/* ────────────────────────────────────────────
   7. ITENS FILHOS com stagger automático
      O JS adiciona .is-visible a cada .stagger-item
      com delay incremental de 90ms por índice.
   ──────────────────────────────────────────── */
.stagger-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  550ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-item.is-visible {
  opacity: 1;
  transform: none;
}

/* ────────────────────────────────────────────
   8. ACESSIBILIDADE — sem animação se pedido
   ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}