/* ═══════════════════════════════════════════════════════════════
   elvas * studio v2 — camada imersiva do campo (gerada pelo Lab)
   Formas do asterisco, fundo por capítulo, campo de asteriscos em
   3 profundidades, máscaras de linha, entregáveis/diferencial e estados do pin (field.js).
   Carrega depois de site.css e só sobrescreve o que o campo precisa.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fundo por capítulo: preto / branco / coral / amarelo / preto.
      As secções são transparentes; o .field muda de cor (crossfade) conforme o capítulo ancorado. */
.field { --fbg: var(--es-black); --fink: #fff; --fink-2: rgba(255,255,255,0.62);
  background: var(--fbg); color: var(--fink); transition: background-color 0.7s var(--es-ease), color 0.7s var(--es-ease); }
.field[data-bg="white"]  { --fbg: #fff;             --fink: var(--es-black); --fink-2: var(--es-gray-4); }
.field[data-bg="coral"]  { --fbg: var(--es-coral);  --fink: var(--es-black); --fink-2: rgba(26,26,24,0.72); }
.field[data-bg="yellow"] { --fbg: var(--es-yellow); --fink: var(--es-black); --fink-2: rgba(26,26,24,0.72); }
.field__head, .ch { position: relative; z-index: 1; }
.field__head { padding-left: calc(var(--es-px) + var(--toc-w, 0px)); max-width: calc(var(--es-max-w) + var(--toc-w, 0px)); }
.ch__inner { max-width: 680px; }
.field__head .es-eyebrow, .ch__eyebrow { color: var(--fink-2); opacity: 1; }
.ch, .ch--outline, .ch--blur, .ch--petal, .ch--mesh { background: transparent; color: inherit; }
.ch__desc { opacity: 1; color: var(--fink-2); }

/* ── O que entregamos + diferencial ── */
.ch__deliver { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0 0 28px; padding: 0; max-width: 560px; }
.ch__deliver li { display: inline-flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fink); }
.ch__deliver li::before { content: '*'; font-family: var(--es-font-cond); font-weight: 800; font-size: 1.3em; line-height: 0.6; color: var(--pr); }
.ch--petal .ch__deliver li::before, .ch--mesh .ch__deliver li::before { color: var(--es-black); }
.ch__edge { font-family: var(--es-font-serif); font-size: var(--es-fib-md); line-height: 1.4; letter-spacing: 0.03em; max-width: 34ch; color: var(--fink); }

/* ── As cinco personalidades ── */
.ch__ast { will-change: transform, opacity; overflow: visible; transform-origin: 50% 50%; }
.ch--sharp .ch__ast { color: var(--pr); }
.ch--outline .ch__ast { color: var(--pr); fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linejoin: miter; }
.ch--petal .ch__stage { justify-content: flex-end; padding-right: 0; }
.ch--petal .ch__ast { color: #fff; width: clamp(360px, 58vw, 940px); margin-right: -14vw; } /* sangra a borda do bloco coral */
.ch--mesh .ch__ast { color: var(--es-black); }
.ch--blur .ch__ast { color: var(--pr); filter: blur(clamp(12px, 2.4vw, 36px)); }

/* ── Máscara de linha ── */
.ch__eyebrow { display: block; }
.ch__line { display: block; clip-path: inset(0 -50vw); padding: 0.06em 0 0.18em; margin: -0.06em 0 -0.18em; } /* só clipa na vertical; a folga inferior é para descendentes, por isso o span escondido vai a 135% (field.js) */
.ch__line > span { display: block; will-change: transform; }

/* ── Campo de asteriscos em 3 profundidades (field.js popula) ── */
.field__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.field__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.field__layer { position: absolute; inset: -20% 0; will-change: transform; }
.field__layer[data-depth="far"]  { --s: 0.32; --o: 0.2;  --b: 1px; }
.field__layer[data-depth="mid"]  { --s: 0.7;  --o: 0.42; --b: 0px; }
.field__layer[data-depth="near"] { --s: 1.5;  --o: 0.14; --b: 6px; }
.fa { position: absolute; width: 44px; height: 44px; color: var(--fink); opacity: var(--o); filter: blur(var(--b)); transition: color 0.7s var(--es-ease); }
.fa svg { width: 100%; height: 100%; fill: currentColor; animation: es-spin var(--d, 44s) linear infinite; }
.fa.is-rev svg { animation-direction: reverse; }

/* ── Mobile: sem pin, menos asteriscos, sem blur pesado ── */
@media (max-width: 700px) {
  .fa { filter: none; }
  .ch--blur .ch__ast { filter: blur(12px); }
  .ch__stage { position: relative; inset: auto; height: auto; padding: 0; margin: 0 0 36px; justify-content: flex-start; opacity: 1; }
  .ch__ast { width: 52vw; }
  .ch--petal .ch__stage { justify-content: flex-end; }
  .ch--petal .ch__ast { width: 80vw; margin-right: -32vw; }
}

/* ── Sem JS ou reduced-motion: tudo visível, fundos fixos por capítulo ── */
.no-js .field, .no-js .ch { transition: none; }
.no-js .ch--sharp, .no-js .ch--blur { --fbg: var(--es-black); background: var(--fbg); color: #fff; --fink-2: rgba(255,255,255,0.62); }
.no-js .ch--outline { --fbg: #fff; background: var(--fbg); color: var(--es-black); --fink-2: var(--es-gray-4); }
.no-js .ch--petal { --fbg: var(--es-coral); background: var(--fbg); color: var(--es-black); --fink-2: rgba(26,26,24,0.72); }
.no-js .ch--mesh { --fbg: var(--es-yellow); background: var(--fbg); color: var(--es-black); --fink-2: rgba(26,26,24,0.72); }
@media (prefers-reduced-motion: reduce) {
  .field, .ch { transition: none; }
  .ch--sharp, .ch--blur { --fbg: var(--es-black); background: var(--fbg); color: #fff; --fink-2: rgba(255,255,255,0.62); }
  .ch--outline { --fbg: #fff; background: var(--fbg); color: var(--es-black); --fink-2: var(--es-gray-4); }
  .ch--petal { --fbg: var(--es-coral); background: var(--fbg); color: var(--es-black); --fink-2: rgba(26,26,24,0.72); }
  .ch--mesh { --fbg: var(--es-yellow); background: var(--fbg); color: var(--es-black); --fink-2: rgba(26,26,24,0.72); }
  .fa svg { animation: none; }
}

/* texto do capítulo sempre acima do palco */
.ch__inner { position: relative; z-index: 2; }
.ch__stage { z-index: 0; }
/* halo na cor do fundo em volta das letras: onde a copy passa sobre o asterisco da mesma cor
   (malha preta × "form" preto no 04, contorno verde × parágrafo no 02) as letras continuam a ler.
   A cor é a do fundo ACTUAL do campo (--fbg), não a do capítulo: no mobile, sem pin, o texto do
   capítulo anterior ainda está no ecrã quando o fundo muda — halo na cor antiga virava contorno. */
.ch__copy, .ch__desc, .ch__eyebrow, .ch__edge, .ch__deliver li { paint-order: stroke fill; -webkit-text-stroke-color: var(--fbg); transition: -webkit-text-stroke-color 0.7s var(--es-ease); }
.ch__copy { -webkit-text-stroke-width: 0.07em; }
.ch__desc, .ch__deliver li { -webkit-text-stroke-width: 0.22em; }
.ch__eyebrow { -webkit-text-stroke-width: 0.25em; }
.ch__edge { -webkit-text-stroke-width: 0.18em; }
/* desktop: palco não invade a coluna de texto (asterisco 40vw encostado à direita; "transform" a 120px termina em ~830px, o palco começa depois) */
@media (min-width: 701px) {
  .ch__ast { width: clamp(280px, 40vw, 640px); }
  .ch__stage { padding-right: 2vw; }
  .ch--petal .ch__stage { padding-right: 0; }
}