/* Linguagem Oculta — animações
   Tudo aqui só vale com a classe .anim no <html> (JS ativo e sem "reduzir movimento" no sistema).
   Sem ela, a página aparece completa e estática. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Barra de progresso de leitura ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 2px;
  background: linear-gradient(90deg, var(--gold-mid), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Palavras divididas (título do hero e títulos de seção) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .1em 0; margin: 0 -.06em -.1em 0; }
.w > span { display: inline-block; }

/* ---------- 1. Abertura do hero ---------- */
@keyframes rise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cover { from { opacity: 0; transform: translateY(60px) rotate(-4deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes word  { from { transform: translateY(110%) rotate(4deg); } to { transform: none; } }
@keyframes ink   { from { background-size: 0% .12em; } to { background-size: 100% .12em; } }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.anim .topbar               { animation: fade .8s var(--ease-soft) both; }
.anim .hero .kicker         { animation: fade .7s var(--ease-soft) .1s both; }
.anim .hero .kicker::before { transform-origin: 0 50%; animation: draw .9s var(--ease-out) .2s both; }
.anim .hero h1 .w > span    { animation: word 1s var(--ease-out) calc(.25s + var(--i, 0) * 45ms) both; }
.anim .hero .lead           { animation: rise 1s var(--ease-out) .75s both; }
.anim .hero .cta-row        { animation: rise 1s var(--ease-out) .9s both; }
.anim .hero__cover          { animation: cover 1.5s var(--ease-out) .15s both; }
.anim .hero__cover img      { animation: floaty 7s ease-in-out 1.8s infinite; }

/* Traço dourado sob "presença marcante" */
.anim .hero h1 em {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-position: 0 94%; background-size: 0% .12em;
  animation: ink 1.1s var(--ease-out) 1.35s both;
}

/* Capa: perspectiva para a inclinação que segue o mouse */
.hero__cover { perspective: 1200px; }
.hero__cover img { transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); will-change: transform; }

/* Seta do primeiro botão "chama" para baixo */
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.btn .arrow { display: inline-block; margin-left: .45em; transition: transform .35s var(--ease-out); }
.anim .hero .btn .arrow { animation: nudge 1.6s ease-in-out 2.2s infinite; }
@media (hover: hover) {
  .btn:hover .arrow--down { transform: translateY(3px); }
  .btn:hover .arrow--right { transform: translateX(4px); }
}

/* ---------- 2. Revelação ao rolar ---------- */
.anim [data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity 1s var(--ease-out) var(--d, 0ms), transform 1s var(--ease-out) var(--d, 0ms);
}
.anim [data-reveal].is-in { opacity: 1; transform: none; }

/* Títulos divididos: as palavras sobem de dentro de uma máscara */
.anim [data-reveal].split { opacity: 1; transform: none; }
.anim .split .w > span { transform: translateY(110%); transition: transform 1s var(--ease-out) calc(var(--d, 0ms) + var(--i, 0) * 40ms); }
.anim .split.is-in .w > span { transform: none; }

/* Imagens: cortina + zoom que assenta (e parallax pelo `translate`) */
.anim [data-reveal="img"] { opacity: 1; transform: none; overflow: hidden; }
.anim [data-reveal="img"] img {
  clip-path: inset(0 0 100% 0); transform: scale(1.22);
  transition: clip-path 1.3s var(--ease-out) var(--d, 0ms), transform 1.8s var(--ease-out) var(--d, 0ms);
}
.anim [data-reveal="img"].is-in img { clip-path: inset(0 0 0 0); transform: scale(1.1); }
[data-parallax] img, img[data-parallax] { translate: 0 var(--py, 0px); }

@media (hover: hover) {
  .anim .look[data-reveal="img"].is-in:hover img,
  .anim .looks .look.is-focus img { transform: scale(1.14); }
}

/* No celular as objeções viram carrossel: os cards fora da tela já ficam prontos */
@media (max-width: 900px) {
  .anim .objections > [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 3. Detalhes que contam a história ---------- */

/* "Não é…": o risco atravessa a frase depois que ela aparece */
.anim .nots:not(.nots--plain) li { text-decoration-color: transparent; transition: opacity 1s var(--ease-out) var(--d, 0ms), transform 1s var(--ease-out) var(--d, 0ms), text-decoration-color .8s var(--ease-soft) calc(var(--d, 0ms) + 500ms); }
.anim .nots:not(.nots--plain) li.is-in { text-decoration-color: rgba(228, 200, 142, .7); }

/* Lista numerada: o número desliza da esquerda */
.anim .numbered li::before { display: inline-block; transform: translateX(-12px); opacity: 0; transition: transform .8s var(--ease-out) calc(var(--d, 0ms) + 200ms), opacity .8s ease calc(var(--d, 0ms) + 200ms); }
.anim .numbered li.is-in::before { transform: none; opacity: 1; }

/* Método: a linha dourada cresce de cima para baixo */
.anim .method__with { position: relative; border-left-color: transparent; }
.anim .method__with::after {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--gold-mid); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .9s var(--ease-out) calc(var(--d, 0ms) + 350ms);
}
.anim .method__row.is-in .method__with::after { transform: scaleY(1); }

/* Citação: o fio lateral se desenha */
.anim blockquote[data-reveal] { border-left-color: transparent; position: relative; }
.anim blockquote[data-reveal]::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--gold-mid); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 1s var(--ease-out) .3s;
}
.anim blockquote[data-reveal].is-in::before { transform: scaleY(1); }

/* Fio de topo das partes do sumário */
.anim .part { border-top-color: transparent; position: relative; }
.anim .part::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out) var(--d, 0ms);
}
.anim .part.is-in::before { transform: scaleX(1); }

/* Capítulos: destaque ao passar o mouse */
.chapters li { transition: background-color .3s ease, padding-left .35s var(--ease-out); }
@media (hover: hover) { .chapters li:hover { background: rgba(228, 200, 142, .16); padding-left: 8px; } }

/* Para quem é: card marcado dá um "pulo" */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
.anim .aud.just-checked { animation: pop .45s var(--ease-spring); }

/* Faixa de palavras: movida pelo JS (velocidade acompanha a rolagem) */
.anim .marquee__track { will-change: transform; }

/* ---------- 4. Botões ---------- */
.btn { translate: var(--mx, 0px) var(--my, 0px); }
.btn--ink, .btn--gold { transition: transform .3s var(--ease-out), translate .5s var(--ease-out), background-color .2s ease, box-shadow .3s var(--ease-out); }
@media (hover: hover) {
  .btn--ink:hover  { box-shadow: 0 14px 28px -14px rgba(28, 25, 21, .7); }
  .btn--gold:hover { box-shadow: 0 14px 32px -12px rgba(228, 200, 142, .75); }
}
.btn:active { transform: scale(.97); }

/* Brilho que atravessa o botão dourado */
.btn--gold { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (hover: hover) { .btn--gold:hover::after { transition: transform .9s var(--ease-soft); transform: translateX(120%); } }
.anim .price-card.is-in .btn--gold::after,
.anim .final-card.is-in .btn--gold::after { animation: shine 4.5s var(--ease-soft) 1s infinite; }
@keyframes shine { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

/* Cartão de preço: borda dourada que gira */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.anim .price-card { position: relative; }
.anim .price-card::before {
  content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a), transparent 0 65%, var(--gold) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { --a: 360deg; } }

/* Preço "assenta" com um leve zoom */
.anim .price-card__price strong { display: inline-block; transform: scale(.85); opacity: 0; transition: transform 1s var(--ease-spring) .3s, opacity .6s ease .3s; }
.anim .price-card.is-in .price-card__price strong,
.anim .final-card.is-in .price-card__price strong { transform: none; opacity: 1; }

/* ---------- 5. FAQ ---------- */
.faq summary { transition: color .25s ease, padding-left .35s var(--ease-out); }
@media (hover: hover) { .faq summary:hover { color: var(--gold-text); padding-left: 6px; } }
.faq summary::after { transition: transform .4s var(--ease-spring); }
.faq details[open] summary::after { content: "+"; transform: rotate(135deg); }
.anim .faq details.is-opening > p { animation: rise .5s var(--ease-out) both; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- 6. Barra de compra no celular ---------- */
.buybar .btn { transition: transform .4s var(--ease-out) .1s, opacity .4s ease .1s; }
.buybar:not(.is-visible) .btn { transform: translateY(8px); opacity: 0; }

/* ---------- Movimento reduzido: desliga tudo ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progress { display: none; }
  .btn { translate: none !important; }
}