/* Camada de vida da landing (24/09): brilho, entrada, rolagem e elementos vivos.
   Skills: animate (curvas e durações), high-end-visual-design (luz, profundidade, reveal no scroll). */
.lp {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --magenta: #ff2e88;
  --coral: #ff7a59;
  --uva: #b43cff;
}

/* ---------- 1. brilho de cor ---------- */
/* palavras de destaque com gradiente que corre devagar */
.titulo em {
  /* o gradiente começa e termina na mesma cor e anda exatamente um ciclo (200%): sem pulo de cor quando a animação recomeça */
  background: linear-gradient(100deg, var(--magenta) 0%, var(--coral) 25%, var(--magenta) 50%, var(--uva) 75%, var(--magenta) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brilho-texto 7s linear infinite;
}
@keyframes brilho-texto { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* luz colorida atrás da abertura, se mexendo devagar */
body.lp { position: relative; isolation: isolate; }
.aurora { position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 1200px; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: 60vmax; height: 60vmax; opacity: .55;
}
.aurora::before { top: -30vmax; right: -18vmax; background: radial-gradient(closest-side, rgba(255, 46, 136, .45), transparent 70%); animation: orbe-a 16s var(--ease-in-out) infinite alternate; }
.aurora::after { bottom: -10vmax; left: -22vmax; background: radial-gradient(closest-side, rgba(180, 60, 255, .28), transparent 70%); animation: orbe-b 20s var(--ease-in-out) infinite alternate; }
@keyframes orbe-a { to { transform: translate(-8vmax, 6vmax) scale(1.08); } }
@keyframes orbe-b { to { transform: translate(10vmax, -5vmax) scale(1.12); } }

/* botão com gradiente e um reflexo que passa de tempos em tempos */
.lp .botao {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #e0126f 0%, #c20d61 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 36px -10px rgba(255, 46, 136, .7);
}
.lp .botao::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg); animation: reflexo 4.5s var(--ease-out) infinite;
}
@keyframes reflexo { 0%, 70% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }
.lp .botao { transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.lp .botao:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .lp .botao:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 20px 44px -10px rgba(255, 46, 136, .85); }
}

/* mockup flutuando e com brilho próprio */
.mockup { animation: flutua 6s var(--ease-in-out) infinite alternate; }
.mockup img { filter: drop-shadow(0 30px 70px rgba(255, 46, 136, .35)) drop-shadow(0 0 40px rgba(180, 60, 255, .18)); }
@keyframes flutua { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* ---------- 2. faixa que corre ---------- */
.faixa-wrap { overflow: hidden; padding: 14px 0; margin-top: -6px; }
.faixa-viva { overflow: hidden; background: linear-gradient(90deg, #c20d61, #ff2e88 50%, #c20d61); color: #fff; padding: 13px 0; transform: rotate(-1.2deg) scaleX(1.02); box-shadow: 0 10px 30px -12px rgba(255, 46, 136, .6); }
.faixa-viva .rolo { display: flex; gap: 34px; width: max-content; animation: rola-faixa 28s linear infinite; }
.faixa-viva span { display: inline-flex; align-items: center; gap: 34px; font: 800 15px "Archivo", sans-serif; letter-spacing: .02em; white-space: nowrap; }
.faixa-viva span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .85; }
@keyframes rola-faixa { to { transform: translateX(-50%); } }

/* ---------- 3. entrada da abertura, em sequência ---------- */
.lp .abre .selo, .lp .abre .titulo, .lp .abre .apoio, .lp .abre .mockup, .lp .abre .compra {
  opacity: 0; translate: 0 18px;
  transition: opacity 800ms var(--ease-out), translate 800ms var(--ease-out);
}
.lp.pronta .abre .selo { transition-delay: 0ms; }
.lp.pronta .abre .titulo { transition-delay: 70ms; }
.lp.pronta .abre .apoio { transition-delay: 140ms; }
.lp.pronta .abre .mockup { transition-delay: 210ms; }
.lp.pronta .abre .compra { transition-delay: 280ms; }
.lp.pronta .abre .selo, .lp.pronta .abre .titulo, .lp.pronta .abre .apoio, .lp.pronta .abre .mockup, .lp.pronta .abre .compra { opacity: 1; translate: 0 0; }

/* ---------- 4. aparecer ao rolar ---------- */
.revela { opacity: 0; translate: 0 22px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.revela.visivel { opacity: 1; translate: 0 0; }


/* ---------- 5. cartões que respondem ---------- */
@media (hover: hover) and (pointer: fine) {
  .passos li, .criadora, .pra-quem > div, .trilho figure, .sinais li { transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
  .passos li:hover, .criadora:hover, .pra-quem > div:hover, .sinais li:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(255, 46, 136, .55); }
  .trilho figure:hover { transform: translateY(-4px) rotate(-.6deg); }
}

/* bolinhas do espelho pulsando */
.sinais li::before { animation: pulsa 2.4s var(--ease-out) infinite; }
.sinais li:nth-child(2)::before { animation-delay: .3s; } .sinais li:nth-child(3)::before { animation-delay: .6s; }
.sinais li:nth-child(4)::before { animation-delay: .9s; } .sinais li:nth-child(5)::before { animation-delay: 1.2s; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(255, 46, 136, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(255, 46, 136, 0); } }

/* cartão da oferta com borda de luz girando */
.oferta-card { position: relative; isolation: isolate; border-color: transparent; }
.oferta-card::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--giro, 0deg), transparent 0 60%, var(--magenta) 75%, var(--coral) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giro 5s linear infinite;
}
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes giro { to { --giro: 360deg; } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .titulo em, .aurora::before, .aurora::after, .lp .botao::after, .mockup, .faixa-viva .rolo, .sinais li::before, .oferta-card::before { animation: none; }
  .lp .abre .selo, .lp .abre .titulo, .lp .abre .apoio, .lp .abre .mockup, .lp .abre .compra, .revela { translate: none; transition: opacity 400ms ease; }
}

/* nome da marca sempre destacado, igual aos entregáveis */
.mf { display: inline-block; background: #0b0b0b; color: #fff; font-weight: 900; font-style: normal; text-transform: none; letter-spacing: -.01em; padding: .06em .42em .12em; border-radius: .4em; line-height: 1.15; white-space: nowrap; border: 1px solid #3a2a31; vertical-align: baseline; }
.mf em { font-style: normal; color: var(--magenta); -webkit-text-fill-color: var(--magenta); }
.botao .mf { border-color: rgba(255,255,255,.25); margin-left: .25em; }

/* barra fixa: texto maior e preço em rosa, igual ao resto da página */
.barra > span { font: 700 17px "Archivo", sans-serif; color: var(--tinta); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.barra > span .mf { font-size: 18px; }
.barra > span b { font: 900 23px "Archivo", sans-serif; color: var(--magenta); letter-spacing: -.01em; }
.barra .botao { white-space: nowrap; flex: none; }
@media (max-width: 440px) {
  .barra { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .barra > span { font-size: 15px; gap: 5px; }
  .barra > span .mf { font-size: 16px; }
  .barra > span b { font-size: 21px; }
  .barra .botao { padding: 10px 16px; font-size: 15px; }
}

/* mockup de pacote maior */
.lp .mockup { width: min(100%, 760px); }
@media (max-width: 959px) { .lp .mockup { width: calc(100% + 28px); max-width: none; margin-inline: -14px; } }

/* capas dos bônus ao lado do nome */
.pilha.bonus li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; }
.pilha.bonus li::before { display: none; }
.capa-bonus { width: 58px; height: auto; aspect-ratio: 148 / 210; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px -6px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-3deg); }