/* NÓVERA — ANATOMIA: o Khamrah em três tempos (saída, coração, fundo).
   data-mode="stack": sequência vertical (padrão sem JS, celular e movimento reduzido).
   data-mode="pin": desktop; o palco fica fixo e a rolagem conduz os três atos.
   O JS só informa --p (0 a 1) e data-act; toda a coreografia está aqui. */

.anatomy {
  --an-bg: #110b07;
  --an-ink: #f5ecdd;
  --an-muted: #cbbba3;
  --an-gold: #e3bd7f;
  --an-line: #f2dcb52e;
  position: relative;
  overflow: clip;
  background: var(--an-bg);
  color: var(--an-ink);
  border-top: 1px solid #e3c6a024;
}
.anatomy-stage { --p: 0; position: relative; isolation: isolate; }
.anatomy-atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.anatomy-atmos .atmos { position: absolute; inset: 0; }
.atmos-1 { background: radial-gradient(ellipse 60% 70% at 72% 46%, #9b3f1d55, transparent 70%), radial-gradient(ellipse 50% 60% at 10% 100%, #5a24125c, transparent 70%); }
.atmos-2 { background: radial-gradient(ellipse 60% 70% at 72% 46%, #b2763a5c, transparent 70%), radial-gradient(ellipse 50% 60% at 8% 92%, #6a3f1d55, transparent 70%); }
.atmos-3 { background: radial-gradient(ellipse 58% 68% at 72% 48%, #d6a65466, transparent 70%), radial-gradient(ellipse 60% 60% at 0% 100%, #3b2a1366, transparent 72%); }

.anatomy-head .kicker { color: #d9b98a; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 18px; }
.anatomy-title { font: 400 clamp(44px, 5vw, 74px)/1.02 var(--serif); letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.anatomy-title em { color: var(--an-gold); font-weight: 400; }
.anatomy-lead { max-width: 340px; margin: 22px 0 0; color: var(--an-muted); font-size: 14px; line-height: 1.85; }

.anatomy-acts { list-style: none; margin: 0; padding: 0; }
.act-figure { margin: 0; overflow: hidden; background: #1a120c; aspect-ratio: 4 / 5; }
.act-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.act-num { margin: 0 0 6px; font: italic 400 clamp(64px, 7vw, 112px)/.9 var(--serif); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px #e3bd7f99; }
.act-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; font: 400 clamp(38px, 3.6vw, 56px)/1.05 var(--serif); letter-spacing: -.035em; }
.act-time { font: 500 10px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--an-gold); }
.act-notes { margin: 18px 0 0; font: italic 400 clamp(22px, 2vw, 30px)/1.35 var(--serif); color: #f0dcbc; letter-spacing: -.01em; }
.act-copy { max-width: 380px; margin: 16px 0 0; color: var(--an-muted); font-size: 14px; line-height: 1.85; }

.anatomy-clock { position: relative; height: 34px; }
.clock-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--an-line); }
.clock-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #a6743c, #f2cf8f); transform-origin: left center; transform: scaleX(var(--p)); box-shadow: 0 0 12px #f0c27a80; }
.clock-mark { position: absolute; top: 12px; font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #9d8c75; transition: color .5s ease; }
.clock-mark::before { content: ''; position: absolute; top: -15px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--an-bg); border: 1px solid #9d8c75; transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.clock-mark-1 { left: 0; }
.clock-mark-2 { left: 50%; transform: translateX(-50%); }
.clock-mark-2::before { left: 50%; margin-left: -4px; }
.clock-mark-3 { right: 0; }
.clock-mark-3::before { left: auto; right: 0; }
.anatomy-stage .clock-mark-1,
.anatomy-stage:is([data-act="1"], [data-act="2"]) .clock-mark-2,
.anatomy-stage[data-act="2"] .clock-mark-3 { color: #f3dcb4; }
.anatomy-stage .clock-mark-1::before,
.anatomy-stage:is([data-act="1"], [data-act="2"]) .clock-mark-2::before,
.anatomy-stage[data-act="2"] .clock-mark-3::before { background: #f2cf8f; border-color: #f2cf8f; box-shadow: 0 0 12px #f0c27a; }

.anatomy-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 22px 24px; background: #1c140ee6; border: 1px solid #e9cfa333; }
.ab-name { margin: 0; font: 400 28px/1.1 var(--serif); letter-spacing: -.02em; }
.ab-name span { display: block; margin-top: 6px; font: 400 12px/1.5 var(--sans); letter-spacing: .06em; color: var(--an-muted); }
.ab-meta { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #e2cba4; font-variant-numeric: tabular-nums; }
.ab-meta b { font-weight: 600; color: var(--an-ink); font-size: 15px; }
.ab-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-cta .btn { min-height: 48px; font-size: 13px; padding-inline: 20px; }
.ab-cta .btn-ghost { border-color: #e9cfa366; color: #f2e5cf; }
.anatomy-buy .trust-line { flex-basis: 100%; font-size: 9px; color: #cdb995; }

/* ---------- sequência vertical ---------- */
.anatomy[data-mode="stack"] .anatomy-stage { padding: clamp(72px, 9vw, 120px) var(--pad); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; }
.anatomy[data-mode="stack"] .anatomy-atmos { opacity: .9; }
.anatomy[data-mode="stack"] .atmos-2, .anatomy[data-mode="stack"] .atmos-3 { display: none; }
.anatomy[data-mode="stack"] .anatomy-acts { display: grid; gap: clamp(56px, 8vw, 96px); margin-top: clamp(44px, 6vw, 72px); }
.anatomy[data-mode="stack"] .act { display: grid; gap: 26px; }
.anatomy[data-mode="stack"] .act-figure { max-width: 560px; }
.anatomy[data-mode="stack"] .anatomy-clock { display: none; }
.anatomy[data-mode="stack"] .anatomy-buy { margin-top: clamp(48px, 7vw, 80px); }
/* entrada dos atos na sequência (só com JS; o modo fixo tem a própria coreografia) */
html.motion .anatomy[data-mode="stack"] :is(.act-figure, .act-text, .anatomy-buy)[data-an]:not(.is-in) { opacity: 0; transform: translate3d(0, 40px, 0); }
html.motion .anatomy[data-mode="stack"] :is(.act-figure, .act-text, .anatomy-buy)[data-an].is-in { opacity: 1; transform: none; transition: opacity 1s ease, transform 1.2s var(--m-ease, ease); }
html.motion .anatomy[data-mode="stack"] .act-figure[data-an] img { transform: scale(1.12); transition: transform 1.6s var(--m-ease, ease); }
html.motion .anatomy[data-mode="stack"] .act-figure[data-an].is-in img { transform: none; }
@media (min-width: 760px) {
  .anatomy[data-mode="stack"] .act { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 90px); }
  .anatomy[data-mode="stack"] .act:nth-child(even) .act-figure { order: 2; }
}

/* ---------- palco fixo (desktop) ---------- */
.anatomy[data-mode="pin"] { height: 380svh; }
.anatomy[data-mode="pin"] .anatomy-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  --pad-x: max(var(--pad), calc((100% - var(--max)) / 2));
  --fig-h: min(80svh, 820px);
  --fig-w: calc(var(--fig-h) * .8);
}
.anatomy[data-mode="pin"] .atmos-1 { opacity: calc(1 - clamp(0, (var(--p) - .28) / .12, 1)); }
.anatomy[data-mode="pin"] .atmos-2 { opacity: calc(clamp(0, (var(--p) - .28) / .12, 1) - clamp(0, (var(--p) - .61) / .12, 1)); }
.anatomy[data-mode="pin"] .atmos-3 { opacity: clamp(0, (var(--p) - .61) / .12, 1); }
.anatomy[data-mode="pin"] .anatomy-head { position: absolute; left: var(--pad-x); top: clamp(92px, 13svh, 140px); max-width: min(520px, 40vw); }
.anatomy[data-mode="pin"] .anatomy-acts { position: absolute; inset: 0; }
.anatomy[data-mode="pin"] .act { position: static; }
.anatomy[data-mode="pin"] .act-figure {
  position: absolute; right: var(--pad-x); top: 50%; width: var(--fig-w); height: var(--fig-h);
  transform: translate3d(0, calc(-50% + (var(--p) - .5) * -5svh), 0);
  box-shadow: 0 40px 90px -30px #000c;
}
.anatomy[data-mode="pin"] .act:nth-child(1) .act-figure img { transform: scale(calc(1.1 - clamp(0, var(--p) / .34, 1) * .1)); }
.anatomy[data-mode="pin"] .act:nth-child(2) .act-figure { --r: clamp(0, (var(--p) - .28) / .12, 1); clip-path: inset(calc((1 - var(--r)) * 100%) 0 0 0); }
.anatomy[data-mode="pin"] .act:nth-child(3) .act-figure { --r: clamp(0, (var(--p) - .61) / .12, 1); clip-path: inset(calc((1 - var(--r)) * 100%) 0 0 0); }
.anatomy[data-mode="pin"] .act:nth-child(n + 2) .act-figure img { transform: scale(calc(1.16 - var(--r) * .16)); }
.anatomy[data-mode="pin"] .act-text {
  position: absolute; left: var(--pad-x); bottom: clamp(118px, 17svh, 170px); width: min(460px, calc(100% - var(--fig-w) - var(--pad-x) * 2 - 40px));
  /* sem visibility: hidden, para que leitores de tela leiam os três atos em ordem */
  opacity: 0; transform: translate3d(0, 34px, 0); pointer-events: none;
  transition: opacity .45s ease, transform .7s var(--m-ease, ease);
}
.anatomy[data-mode="pin"] .anatomy-stage[data-act="0"] .act:nth-child(1) .act-text,
.anatomy[data-mode="pin"] .anatomy-stage[data-act="1"] .act:nth-child(2) .act-text,
.anatomy[data-mode="pin"] .anatomy-stage[data-act="2"] .act:nth-child(3) .act-text {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .7s ease .18s, transform 1s var(--m-ease, ease) .18s;
}
/* o ato que ficou para trás sai para cima */
.anatomy[data-mode="pin"] .anatomy-stage[data-act="1"] .act:nth-child(1) .act-text,
.anatomy[data-mode="pin"] .anatomy-stage[data-act="2"] .act:nth-child(-n + 2) .act-text { transform: translate3d(0, -34px, 0); }
/* as notas entram uma a uma */
.anatomy[data-mode="pin"] .act-notes .note { display: inline-block; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .5s ease, transform .7s var(--m-ease, ease); }
.anatomy[data-mode="pin"] .anatomy-stage[data-act="0"] .act:nth-child(1) .note,
.anatomy[data-mode="pin"] .anatomy-stage[data-act="1"] .act:nth-child(2) .note,
.anatomy[data-mode="pin"] .anatomy-stage[data-act="2"] .act:nth-child(3) .note { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i, 0) * .09s); }
.anatomy[data-mode="pin"] .anatomy-clock { position: absolute; left: var(--pad-x); bottom: clamp(40px, 7svh, 72px); width: min(460px, calc(100% - var(--fig-w) - var(--pad-x) * 2 - 40px)); }
/* compra: no fim do terceiro ato substitui o texto do fundo */
.anatomy[data-mode="pin"] .anatomy-buy {
  position: absolute; left: var(--pad-x); bottom: clamp(118px, 17svh, 170px); width: min(520px, calc(100% - var(--fig-w) - var(--pad-x) * 2 - 24px));
  opacity: 0; transform: translate3d(0, 30px, 0); pointer-events: none; transition: opacity .45s ease, transform .8s var(--m-ease, ease);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* também aparece se alguém chegar aos botões pelo teclado */
.anatomy[data-mode="pin"] .anatomy-stage.is-final .anatomy-buy,
.anatomy[data-mode="pin"] .anatomy-buy:focus-within { opacity: 1; transform: none; pointer-events: auto; transition: opacity .6s ease .1s, transform 1s var(--m-ease, ease) .1s; }
.anatomy[data-mode="pin"] .anatomy-stage.is-final[data-act="2"] .act:nth-child(3) .act-text { opacity: 0; transform: translate3d(0, -34px, 0); pointer-events: none; transition: opacity .35s ease, transform .6s var(--m-ease, ease); }
.anatomy[data-mode="pin"] .anatomy-stage.is-final .anatomy-head { opacity: .35; transition: opacity .6s ease; }
.anatomy[data-mode="pin"] .anatomy-head { transition: opacity .6s ease; }

/* telas largas e baixas: o título encolhe para caber com o ato */
@media (min-width: 1000px) and (max-height: 820px) {
  .anatomy[data-mode="pin"] .anatomy-title { font-size: clamp(38px, 4vw, 56px); }
  .anatomy[data-mode="pin"] .anatomy-lead { display: none; }
  .anatomy[data-mode="pin"] .act-num { font-size: 64px; }
  .anatomy[data-mode="pin"] .act-name { font-size: 40px; }
}

/* celular */
@media (max-width: 600px) {
  .anatomy-title { font-size: clamp(40px, 11vw, 52px); }
  .act-num { font-size: 64px; }
  .act-name { font-size: 38px; }
  .anatomy-buy { padding: 20px; }
  .ab-cta { width: 100%; }
  .ab-cta .btn { flex: 1 1 100%; justify-content: center; }
}