/* ==========================================================================
   Loto Game · Animações
   Tudo aqui só vale com a classe .lp-anima no <html>, que o index.html liga
   quando o visitante não pediu "reduzir movimento". Sem ela (ou sem JS),
   a página aparece completa e estática, igual ao wireframe.
   Para desligar as animações, remova a linha de motion.css do index.html.
   ========================================================================== */
:root {
  --mov-curva: cubic-bezier(.2, .8, .2, 1);
  --mov-mola: cubic-bezier(.34, 1.56, .64, 1);
  --mov-duracao: .8s;
}

/* ---------- Hero: entrada ao carregar ---------- */
.lp-anima .lp-slide.is-ativo .lp-hero__fundo { animation: lp-aproxima 2.4s var(--mov-curva) both, lp-respira 18s ease-in-out 2.4s infinite alternate; transform-origin: 70% 50%; will-change: transform; }
.lp-anima .lp-slide.is-ativo .lp-hero__conteudo > * { animation: lp-sobe .9s var(--mov-curva) both; }
.lp-anima .lp-slide.is-ativo .lp-hero__conteudo > :nth-child(1) { animation-delay: .15s; }
.lp-anima .lp-slide.is-ativo .lp-hero__conteudo > :nth-child(2) { animation-delay: .28s; }
.lp-anima .lp-slide.is-ativo .lp-hero__conteudo > :nth-child(3) { animation-delay: .44s; }
.lp-anima .lp-slide.is-ativo .lp-hero__conteudo > :nth-child(4) { animation: none; }
.lp-anima .lp-slide.is-ativo .lp-hero__conteudo > :nth-child(5) { animation-delay: .9s; }
.lp-anima .lp-slide.is-ativo .lp-hero__conteudo > :nth-child(6) { animation-delay: 1.02s; }
.lp-anima .lp-eyebrow::before { transform-origin: left center; }
.lp-anima .lp-slide.is-ativo .lp-eyebrow::before { animation: lp-risca .7s var(--mov-curva) .3s both; }
.lp-anima .lp-slide.is-ativo .lp-chip { animation: lp-sobe .7s var(--mov-curva) both; }
.lp-anima .lp-slide.is-ativo .lp-chip:nth-child(1) { animation-delay: .56s; }
.lp-anima .lp-slide.is-ativo .lp-chip:nth-child(2) { animation-delay: .64s; }
.lp-anima .lp-slide.is-ativo .lp-chip:nth-child(3) { animation-delay: .72s; }
.lp-anima .lp-slide.is-ativo .lp-chip:nth-child(4) { animation-delay: .8s; }
.lp-anima .lp-chip .lp-ponto,
.lp-anima .lp-vidro .lp-ponto { animation: lp-pulso 2.4s ease-out infinite; }
.lp-anima .lp-chip:nth-child(2) .lp-ponto { animation-delay: .6s; }
.lp-anima .lp-chip:nth-child(3) .lp-ponto { animation-delay: 1.2s; }
.lp-anima .lp-chip:nth-child(4) .lp-ponto { animation-delay: 1.8s; }
.lp-anima .lp-header { animation: lp-desce .8s var(--mov-curva) both; }

/* ---------- Faixa 01-04 ---------- */
.lp-anima .lp-faixa { overflow: hidden; }
.lp-anima .lp-faixa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  transform: translateX(-100%); animation: lp-varre 7s ease-in-out 1.6s infinite;
}

/* ---------- Revelação ao rolar (o JS marca [data-anima] e adiciona .is-visivel) ---------- */
.lp-anima [data-anima] {
  opacity: 0;
  transition: opacity var(--mov-duracao) var(--mov-curva) var(--d, 0s), transform var(--mov-duracao) var(--mov-curva) var(--d, 0s), clip-path 1.4s var(--mov-curva) var(--d, 0s);
}
.lp-anima [data-anima="sobe"]     { transform: translateY(32px); }
.lp-anima [data-anima="esquerda"] { transform: translateX(-40px); }
.lp-anima [data-anima="direita"]  { transform: translateX(40px); }
.lp-anima [data-anima="zoom"]     { transform: scale(.92); }
.lp-anima [data-anima].is-visivel { opacity: 1; transform: none; }

/* Peças que já têm rotação própria no wireframe */
.lp-anima .lp-colagem__base[data-anima] { transform: rotate(-9deg) translateX(-30px); }
.lp-anima .lp-colagem__base[data-anima].is-visivel { transform: rotate(-2deg); }
.lp-anima .lp-colagem__cliente[data-anima] { transform: translateY(-48px) rotate(14deg); transition-timing-function: var(--mov-mola); }
.lp-anima .lp-colagem__cliente[data-anima].is-visivel { transform: rotate(4deg); }

/* Linha tracejada do "Como funciona" se desenha */
.lp-anima .lp-passos__linha[data-anima] { opacity: 1; clip-path: inset(0 100% 0 0); }
.lp-anima .lp-passos__linha[data-anima].is-visivel { clip-path: inset(0 0 0 0); }

/* Números dos passos entram com mola */
.lp-anima .lp-passo[data-anima] .lp-passo__n { transform: scale(0) rotate(-20deg); transition: transform .6s var(--mov-mola) calc(var(--d, 0s) + .25s); }
.lp-anima .lp-passo[data-anima].is-visivel .lp-passo__n { transform: none; }

/* Ícones dos cards giram levemente ao entrar */
.lp-anima .lp-card[data-anima] .lp-icone,
.lp-anima .lp-bol__lista li[data-anima] .lp-icone { transform: scale(.4) rotate(-30deg); transition: transform .6s var(--mov-mola) calc(var(--d, 0s) + .2s); }
.lp-anima .lp-card[data-anima].is-visivel .lp-icone,
.lp-anima .lp-bol__lista li[data-anima].is-visivel .lp-icone { transform: none; }

/* Linha laranja do rodapé cresce */
.lp-anima .lp-rodape__linha[data-anima] { opacity: 1; transform: scaleX(0); transform-origin: left center; transition-duration: 1.4s; }
.lp-anima .lp-rodape__linha[data-anima].is-visivel { transform: none; }

/* ---------- Movimentos contínuos e discretos ---------- */
.lp-anima .lp-brilho { animation: lp-brilha 7s ease-in-out infinite alternate; }
.lp-anima .lp-colagem__cliente.is-visivel { animation: lp-flutua 6s ease-in-out 1.4s infinite; }
.lp-anima .lp-final__foto.is-visivel img { animation: lp-flutua 7s ease-in-out 1s infinite; }
.lp-anima .lp-final__foto::before { animation: lp-gira 40s linear infinite; }
.lp-anima .lp-final__foto::after { animation: lp-gira 56s linear infinite reverse; }

/* ---------- Interações ---------- */
.lp-btn--laranja { position: relative; overflow: hidden; isolation: isolate; }
.lp-btn--laranja::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.lp-anima .lp-btn--laranja:hover::after { transition: transform .8s var(--mov-curva); transform: translateX(120%); }
.lp-anima .lp-hero__ctas .lp-btn--laranja::after { animation: lp-reflexo 4.5s var(--mov-curva) 2s infinite; }

.lp-anima .lp-card,
.lp-anima .lp-passo,
.lp-anima .lp-dif article,
.lp-anima .lp-bol__lista li,
.lp-anima .lp-faq__item { transition-property: opacity, transform, box-shadow, border-color, background-color; }
.lp-anima .lp-card.is-visivel:hover,
.lp-anima .lp-passo.is-visivel:hover,
.lp-anima .lp-bol__lista li.is-visivel:hover { transform: translateY(-6px); transition-delay: 0s; transition-duration: .35s; box-shadow: 0 26px 46px -24px rgba(3, 3, 110, .45); }
.lp-anima .lp-dif article.is-visivel:hover { transform: translateY(-6px); transition-delay: 0s; transition-duration: .35s; border-color: rgba(253, 105, 1, .55); background-color: rgba(253, 105, 1, .08); }
.lp-anima .lp-slide.is-ativo .lp-chip { transition: background-color .3s, border-color .3s; }
.lp-anima .lp-chip:hover { background: rgba(253, 105, 1, .14); border-color: rgba(253, 105, 1, .55); }
.lp-anima .lp-colagem__grupo img,
.lp-anima .lp-seg__foto img { transition: transform 1.2s var(--mov-curva); }
.lp-anima .lp-colagem:hover .lp-colagem__grupo img,
.lp-anima .lp-seg__foto:hover img { transform: scale(1.05); }
.lp-anima .lp-faq__item.is-visivel:hover { transition-delay: 0s; transition-duration: .3s; border-color: #C9CEEA; }
.lp-anima .lp-faq__r:not([hidden]) { animation: lp-abre .4s var(--mov-curva) both; }
.lp-anima .lp-logo { transition: transform .3s var(--mov-curva); }
.lp-anima .lp-logo:hover { transform: rotate(-3deg) scale(1.04); }

/* ---------- Keyframes ---------- */
@keyframes lp-sobe { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lp-desce { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes lp-risca { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lp-aproxima { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1.02); } }
@keyframes lp-respira { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, 1%); } }
@keyframes lp-pulso { 0% { box-shadow: 0 0 0 0 rgba(253, 105, 1, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(253, 105, 1, 0); } }
@keyframes lp-varre { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
@keyframes lp-brilha { from { transform: scale(.82); } to { transform: scale(1.18); } }
@keyframes lp-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes lp-gira { to { transform: rotate(360deg); } }
@keyframes lp-reflexo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes lp-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }