/**
 * LP Escala B2G — Animações (estilo Framer, referências: ScrollReveal, Halo Lab, Framer)
 * Mais lentas e variadas: fade, slide (up/left/right), scale. Otimizado para Hostinger.
 * Respeita prefers-reduced-motion.
 */

:root {
  --lp-anim-duration: 1.05s;
  --lp-anim-duration-slow: 1.25s;
  --lp-anim-delay: 0.1s;
  --lp-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lp-anim-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --lp-anim-offset: 36px;
  --lp-anim-offset-x: 44px;
  --lp-stagger-step: 0.12s;
  --lp-stagger-step-slow: 0.16s;
  --lp-hero-stagger: 0.22s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lp-anim-duration: 0.01s;
    --lp-anim-duration-slow: 0.01s;
    --lp-anim-delay: 0s;
    --lp-anim-ease: linear;
    --lp-anim-ease-soft: linear;
    --lp-anim-offset: 0;
    --lp-anim-offset-x: 0;
    --lp-stagger-step: 0;
    --lp-stagger-step-slow: 0;
    --lp-hero-stagger: 0;
  }
}

/* —— Base: fade + slide up (padrão) —— */
.lp-anim {
  opacity: 0;
  transform: translateY(var(--lp-anim-offset));
  transition: opacity var(--lp-anim-duration) var(--lp-anim-ease),
    transform var(--lp-anim-duration) var(--lp-anim-ease);
}

.lp-anim.lp-in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--lp-anim-delay);
}

/* —— Só fade (sem movimento) — referência: baixo impacto, elegante —— */
.lp-anim-fade {
  opacity: 0;
  transition: opacity var(--lp-anim-duration-slow) var(--lp-anim-ease-soft);
}

.lp-anim-fade.lp-in-view {
  opacity: 1;
  transition-delay: var(--lp-anim-delay);
}

/* —— Slide da direita para esquerda (entrada lateral) —— */
.lp-anim-slide-left {
  opacity: 0;
  transform: translateX(var(--lp-anim-offset-x));
  transition: opacity var(--lp-anim-duration) var(--lp-anim-ease),
    transform var(--lp-anim-duration) var(--lp-anim-ease);
}

.lp-anim-slide-left.lp-in-view {
  opacity: 1;
  transform: translateX(0);
  transition-delay: var(--lp-anim-delay);
}

/* —— Slide da esquerda para direita —— */
.lp-anim-slide-right {
  opacity: 0;
  transform: translateX(calc(-1 * var(--lp-anim-offset-x)));
  transition: opacity var(--lp-anim-duration) var(--lp-anim-ease),
    transform var(--lp-anim-duration) var(--lp-anim-ease);
}

.lp-anim-slide-right.lp-in-view {
  opacity: 1;
  transform: translateX(0);
  transition-delay: var(--lp-anim-delay);
}

/* —— Scale suave + fade (destaque, uso pontual) —— */
.lp-anim-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--lp-anim-duration-slow) var(--lp-anim-ease-soft),
    transform var(--lp-anim-duration-slow) var(--lp-anim-ease-soft);
}

.lp-anim-scale.lp-in-view {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--lp-anim-delay);
}

/* —— Container stagger (filhos em sequência) —— */
.lp-anim-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--lp-anim-duration) var(--lp-anim-ease),
    transform var(--lp-anim-duration) var(--lp-anim-ease);
}

.lp-anim-stagger.lp-in-view > * {
  opacity: 1;
  transform: translateY(0);
}

.lp-anim-stagger.lp-in-view > *:nth-child(1) { transition-delay: calc(var(--lp-anim-delay) + 1 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(2) { transition-delay: calc(var(--lp-anim-delay) + 2 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(3) { transition-delay: calc(var(--lp-anim-delay) + 3 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(4) { transition-delay: calc(var(--lp-anim-delay) + 4 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(5) { transition-delay: calc(var(--lp-anim-delay) + 5 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(6) { transition-delay: calc(var(--lp-anim-delay) + 6 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(7) { transition-delay: calc(var(--lp-anim-delay) + 7 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(8) { transition-delay: calc(var(--lp-anim-delay) + 8 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(9) { transition-delay: calc(var(--lp-anim-delay) + 9 * var(--lp-stagger-step)); }
.lp-anim-stagger.lp-in-view > *:nth-child(10) { transition-delay: calc(var(--lp-anim-delay) + 10 * var(--lp-stagger-step)); }

/* —— Stagger lento (mais pausa entre itens) —— */
.lp-anim-stagger--slow > * {
  transition-duration: var(--lp-anim-duration-slow);
}

.lp-anim-stagger--slow.lp-in-view > *:nth-child(1) { transition-delay: calc(var(--lp-anim-delay) + 1 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(2) { transition-delay: calc(var(--lp-anim-delay) + 2 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(3) { transition-delay: calc(var(--lp-anim-delay) + 3 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(4) { transition-delay: calc(var(--lp-anim-delay) + 4 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(5) { transition-delay: calc(var(--lp-anim-delay) + 5 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(6) { transition-delay: calc(var(--lp-anim-delay) + 6 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(7) { transition-delay: calc(var(--lp-anim-delay) + 7 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(8) { transition-delay: calc(var(--lp-anim-delay) + 8 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(9) { transition-delay: calc(var(--lp-anim-delay) + 9 * var(--lp-stagger-step-slow)); }
.lp-anim-stagger--slow.lp-in-view > *:nth-child(10) { transition-delay: calc(var(--lp-anim-delay) + 10 * var(--lp-stagger-step-slow)); }

/* —— Stagger da direita (itens entram da direita) —— */
.lp-anim-stagger--from-right > * {
  transform: translateX(var(--lp-anim-offset-x));
}

.lp-anim-stagger--from-right.lp-in-view > * {
  transform: translateX(0);
}

/* —— Stagger com scale (cards) —— */
.lp-anim-stagger--scale > * {
  transform: scale(0.97);
}

.lp-anim-stagger--scale.lp-in-view > * {
  transform: scale(1);
}

/* —— Hero: entrada em sequência (mais lenta) —— */
.lp-hero-anim .ecos-hero__title-line,
.lp-hero-anim .ecos-hero__content,
.lp-hero-anim .ecos-hero__actions {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--lp-anim-duration) var(--lp-anim-ease),
    transform var(--lp-anim-duration) var(--lp-anim-ease);
}

.lp-hero-visible .lp-hero-anim .ecos-hero__title-line:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.lp-hero-visible .lp-hero-anim .ecos-hero__title-line:nth-child(2) { transition-delay: var(--lp-hero-stagger); opacity: 1; transform: translateY(0); }
.lp-hero-visible .lp-hero-anim .ecos-hero__title-line:nth-child(3) { transition-delay: calc(2 * var(--lp-hero-stagger)); opacity: 1; transform: translateY(0); }
.lp-hero-visible .lp-hero-anim .ecos-hero__content { transition-delay: calc(3 * var(--lp-hero-stagger)); opacity: 1; transform: translateY(0); }
.lp-hero-visible .lp-hero-anim .ecos-hero__actions { transition-delay: calc(4 * var(--lp-hero-stagger)); opacity: 1; transform: translateY(0); }

/* —— Cards: leve lift no hover —— */
.lp-hover-lift {
  transition: transform 0.35s var(--lp-anim-ease), box-shadow 0.35s var(--lp-anim-ease);
}

@media (hover: hover) {
  .lp-hover-lift:hover {
    transform: translateY(-4px);
  }
}

/* —— FAQ: suavizar abertura —— */
.lp-faq-anim details {
  transition: opacity 0.28s ease;
}

.lp-faq-anim details[open] summary {
  transition: color 0.22s ease;
}

/* —— CTA: micro feedback no clique —— */
.lp-cta-tap {
  transition: transform 0.25s var(--lp-anim-ease);
}

.lp-cta-tap:active {
  transform: scale(0.98);
}