/* 15/11 (feedback do sócio): as três dores do gestor de marketing e a resposta da casa, entre as marcas e os serviços.
   3ª versão (escolha dele, "poeira que se reescreve"): cena presa ao scroll, ~uma tela por dor. a frase da dor se desfaz em
   grãos (os do Vitruviano) e o pó remonta a resposta. pains.js escreve por dor: --in (a dor entra), --wo (a dor vira pó),
   --an (a resposta assume), --out (sai). sem html.scrolly a seção é uma lista. */
.pains { position: relative; color: #f3f0e8; }
.pains-title { margin: 0; text-align: center; font-size: clamp(26px, 3vw, 52px); line-height: 1.02; }
.pains-count { margin: 0; text-align: center; font-size: 12px; letter-spacing: .14em; color: rgba(226, 196, 134, .82); }
.pains-count b { font-weight: 400; color: #f3f0e8; }
.pn-list { list-style: none; margin: 0; padding: 0; }
.pn-n { display: block; font-size: 12px; letter-spacing: .14em; color: rgba(226, 196, 134, .82); }
.pn-was, .pn-now { margin: 0; font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 400; line-height: 1.04; letter-spacing: -.03em;
  font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; }
.pn-was { color: rgba(236, 234, 226, .42); }
.pn-now { margin-top: .22em; color: #f3f0e8; text-shadow: 0 2px 30px rgba(3, 4, 10, .85); }
.pn-now em { font-style: italic; color: #e2c486; font-variation-settings: "SOFT" 100, "WONK" 1; }
/* o risco: um fundo fino que cresce pela frase, linha a linha (o fundo de um trecho inline corre pelas linhas em sequência) */
.pn-strike { background: linear-gradient(rgba(226, 196, 134, .95), rgba(226, 196, 134, .95)) no-repeat 0 58% / 100% .055em; }
.pains-lead { margin: clamp(56px, 9vh, 100px) auto 0; padding: 0 max(24px, 6vw) clamp(90px, 14vh, 160px); max-width: 34em; text-align: center;
  font-size: clamp(16px, 1.35vw, 21px); line-height: 1.55; color: rgba(240, 238, 230, .86); text-shadow: 0 1px 14px rgba(3, 4, 12, .9); }

/* ── sem a cena (movimento reduzido, navegador antigo): a lista ── */
html:not(.scrolly) .pains-stage { padding: clamp(110px, 17vh, 190px) max(24px, 6vw) 0; max-width: 1120px; margin: 0 auto; }
html:not(.scrolly) .pains-head { margin-bottom: clamp(48px, 9vh, 104px); }
html:not(.scrolly) .pains-count, html:not(.scrolly) .pn-vis { display: none; }
html:not(.scrolly) .pn-list { display: grid; gap: clamp(56px, 10vh, 120px); text-align: center; }
html:not(.scrolly) .pn-n { margin-bottom: 1.2em; }
html:not(.scrolly) .pn-was, html:not(.scrolly) .pn-now { font-size: clamp(32px, 4.4vw, 80px); }

/* ══ a cena ══ */
html.scrolly .pains-pin { position: relative; height: 380svh; }
html.scrolly .pains-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
html.scrolly .pains-head { position: absolute; left: 0; right: 0; top: max(100px, 12svh); z-index: 2; padding: 0 24px;
  transform: translateY(calc((1 - var(--hd, 0)) * (38svh - 50%))) scale(calc(1.5 - .5 * var(--hd, 0))); transform-origin: 50% 0; }
html.scrolly .pains-title { font-size: clamp(20px, 1.9vw, 32px); }
html.scrolly .pains-count { margin-top: 14px; opacity: var(--hd, 0); }
html.scrolly .pn { position: absolute; inset: 0; opacity: calc(1 - var(--out, 0)); transform: translateY(calc(var(--out, 0) * -5svh)); visibility: hidden; }
html.scrolly .pn.vis { visibility: visible; }
/* a dor e a resposta ocupam o mesmo lugar: o pó sai de uma e pousa na outra */
html.scrolly .pn-txt { position: absolute; left: max(24px, 7vw); right: max(24px, 7vw); top: 56%; transform: translateY(-50%);
  display: grid; justify-items: center; text-align: center; }
/* 15/11 (pedido dele, "facilitar a leitura"): a dor fica na tela, em cima e menor; o fio dourado a risca e ela apaga um pouco,
   sem sumir. o pó sai dela e monta a resposta logo embaixo, então as duas se leem juntas */
html.scrolly .pn-n { margin-bottom: 1.4em; opacity: calc(var(--in, 0)); }
html.scrolly .pn-was, html.scrolly .pn-now { max-width: 15em; margin: 0; line-height: 1.04; }
html.scrolly .pn-was { font-size: clamp(28px, 3.3vw, 56px); color: rgba(236, 234, 226, calc(.94 - .38 * var(--st, 0)));
  opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 36px)); }
html.scrolly .pn-strike { background-size: calc(var(--st, 0) * 100%) .055em; }
html.scrolly .pn-now { margin-top: .32em; font-size: clamp(40px, 5.6vw, 98px); line-height: 1.02; opacity: var(--an, 0); }
/* a frase que fecha entra embaixo da última resposta, dentro da cena (antes ficava sozinha numa tela vazia depois dela) */
html.scrolly .pains-lead { position: absolute; left: 0; right: 0; bottom: 11svh; margin: 0 auto; padding: 0 24px; opacity: var(--ld, 0); transform: translateY(calc((1 - var(--ld, 0)) * 16px)); }
/* durante a medição dos grãos o texto fica no lugar final, sem deslocamento */
.pains.measuring .pn, .pains.measuring .pn-was, .pains.measuring .pn-now { transform: none !important; }
.pains-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

@media (max-width: 760px) {
  html.scrolly .pains-pin { height: 290svh !important; }
  html.scrolly .pains-lead { bottom: 9svh; font-size: 15px; }
  html.scrolly .pains-head { top: 5svh; padding: 0 22px; transform: translateY(calc((1 - var(--hd, 0)) * (40svh - 50%))) scale(calc(1.25 - .25 * var(--hd, 0))); }
  html.scrolly .pains-title { font-size: clamp(17px, 5vw, 24px); }
  html.scrolly .pains-count { margin-top: 10px; }
  html.scrolly .pn-txt { left: 22px; right: 22px; top: 54%; }
  html.scrolly .pn-was { font-size: clamp(23px, 6.6vw, 30px); }
  html.scrolly .pn-now { font-size: clamp(36px, 10.4vw, 50px); }
}