/* ════════════════════════════════════════════════════════════════════════════
   SOMA · soma-editorial.css — o movimento da landing, e os dois eixos que faltavam

   Acompanha `soma-editorial.js`. Duas partes:

     1) TOKENS DE ESPAÇO E SOMBRA. O sistema da casa tem cor, tipografia e easing
        em `styles.css:20-78`, mas NÃO tem espaçamento nem sombra: hoje o ritmo
        vertical é `clamp()` escrito à mão em cada regra e as sombras são valores
        literais espalhados. Sem esses dois eixos a página nova não tem cadência.
        Entram aqui, aditivos, sem tocar em nada existente.

     2) O MOVIMENTO. Revelação de cena, slider mascarado por forma, botão de
        repetir. Só `transform`, `opacity` e `clip-path`.

   NENHUMA COR LITERAL. Tudo sai dos tokens de `styles.css`.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── espaço — escala de 8, fluida onde importa ────────────────────────── */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;
  --e-9:  96px;
  --e-10: 128px;
  /* respiro de seção e goteira da página: acompanham a largura da tela */
  --e-secao:   clamp(64px, 9vw, 144px);
  --e-goteira: clamp(20px, 5vw, 72px);
  --e-medida:  68ch;                    /* medida de leitura confortável */

  /* ── sombra — quatro degraus, todos no navy da marca ──────────────────── */
  --s-1: 0 1px 2px rgba(5, 11, 23, .28);
  --s-2: 0 4px 14px -4px rgba(5, 11, 23, .42);
  --s-3: 0 16px 40px -16px rgba(5, 11, 23, .58);
  --s-4: 0 32px 80px -28px rgba(5, 11, 23, .72);
  /* brilho de acento: para o que precisa se anunciar, não para decorar */
  --s-teal: 0 8px 30px -8px rgba(2, 184, 191, .38);
}

/* ══ 1 · REVELAÇÃO DE CENA ═══════════════════════════════════════════════════
   O estado FINAL é o padrão — quem chega sem JS, ou com movimento desligado, vê
   a composição pronta. `.is-fora` é o estado inicial, e sair dele é a animação. */
[data-soma-item] {
  transition:
    opacity   .82s var(--ease-out, cubic-bezier(.16, 1, .3, 1)),
    transform .82s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
/* `will-change` SÓ enquanto a peça está fora — não o tempo todo.
   A landing tem ~40 peças animadas; promover as quarenta a camada de composição
   e deixá-las lá é o que faz a página engasgar no celular. A promoção dura o
   que dura a entrada: `.is-fora` entra, a camada nasce; `.is-fora` sai, a
   transição roda e a camada morre no fim. */
[data-soma-item].is-fora {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  will-change: opacity, transform;
}
/* variações de entrada, por atributo — a direção conta a história */
[data-soma-item][data-soma-de="esquerda"].is-fora { transform: translate3d(-34px, 0, 0); }
[data-soma-item][data-soma-de="direita"].is-fora  { transform: translate3d(34px, 0, 0); }
[data-soma-item][data-soma-de="escala"].is-fora   { transform: scale(1.06); }

/* ══ 2 · SLIDER EDITORIAL — a transição mascarada por forma ══════════════════
   A técnica do `ShapesSlideshow` do acervo, sem o motor: `clip-path` com a MESMA
   função nos dois estados. O navegador só interpola círculo→círculo e polígono→
   polígono de mesma contagem de pontos — é essa a regra que faz a máscara fluir
   em vez de saltar. */
[data-soma-slider] {
  position: relative;
  isolation: isolate;
}
[data-soma-slides] {
  position: relative;
  display: grid;                          /* todos os slides na MESMA célula */
  overflow: hidden;
  border-radius: var(--e-5);
  box-shadow: var(--s-4);
}
[data-soma-slide] {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  clip-path: circle(28% at 50% 50%);
  transform: scale(1.08);
  transition:
    clip-path 1.15s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)),
    opacity    .62s var(--ease-out, cubic-bezier(.16, 1, .3, 1)),
    transform 1.35s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
/* só o slide em cena ganha camada própria — os outros ficam inertes */
[data-soma-slide].is-ativo {
  opacity: 1;
  clip-path: circle(78% at 50% 50%);
  transform: scale(1);
  z-index: 1;
  will-change: clip-path, transform;
}
[data-soma-slide] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a legenda vive dentro do slide e entra depois da máscara */
[data-soma-slide] figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e-7) var(--e-6) var(--e-6);
  background: linear-gradient(to top, rgba(5, 11, 23, .92), rgba(5, 11, 23, 0));
  color: var(--d-ink);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .5s .38s ease, transform .5s .38s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
[data-soma-slide].is-ativo figcaption { opacity: 1; transform: none; }

/* máscara em polígono: outra assinatura, mesma regra dos pontos */
[data-soma-slider][data-forma="poligono"] [data-soma-slide] {
  clip-path: polygon(38% 22%, 62% 22%, 62% 78%, 38% 78%);
}
[data-soma-slider][data-forma="poligono"] [data-soma-slide].is-ativo {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ── forma "cena": SEM máscara ────────────────────────────────────────────────
   Para a foto que sangra em tela cheia. Uma forma geométrica recortando um
   fundo de página inteira brigaria com a imagem em vez de revelá-la — aqui a
   travessia é longa e o movimento é um zoom lento, que é a gramática
   cinematográfica da casa. O cartão também some: sem raio, sem sombra. */
[data-soma-slider][data-forma="cena"] [data-soma-slides] {
  border-radius: 0;
  box-shadow: none;
  height: 100%;
}
[data-soma-slider][data-forma="cena"] [data-soma-slide] {
  clip-path: none;
  transform: scale(1.1);
  transition:
    opacity   1.5s var(--ease-in-out),
    transform  14s linear;
}
[data-soma-slider][data-forma="cena"] [data-soma-slide].is-ativo {
  clip-path: none;
  transform: scale(1);
}
[data-soma-slider][data-forma="cena"] [data-soma-slide] img { height: 100%; }

/* ── navegação por NOME, nunca por "01/04" ──────────────────────────────── */
.soma-slider-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}
.soma-slider-tab {
  appearance: none;
  border: 1px solid var(--d-line);
  background: var(--d-surf);
  color: var(--d-ink-3);
  font: 500 12.5px/1 var(--f-sans, Inter, system-ui, sans-serif);
  letter-spacing: .01em;
  padding: 11px 16px;
  min-height: 44px;                       /* alvo de toque */
  border-radius: 999px;
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease, background-color .22s ease;
}
.soma-slider-tab:hover { color: var(--d-ink); border-color: var(--c-teal); }
.soma-slider-tab.is-ativo {
  color: var(--c-navy);
  background: var(--g-cta);
  border-color: transparent;
  box-shadow: var(--s-teal);
}
.soma-slider-tab:focus-visible {
  outline: 2px solid var(--c-teal-2);
  outline-offset: 3px;
}

/* ══ 3 · O BOTÃO DE REPETIR ══════════════════════════════════════════════════
   Discreto. Não compete com a cena — só fica disponível para quem quiser rever. */
.soma-replay {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  appearance: none;
  border: 1px solid var(--d-line);
  background: transparent;
  color: var(--d-ink-3);
  font: 500 11.5px/1 var(--f-mono, 'JetBrains Mono', ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease;
}
.soma-replay:hover { color: var(--c-teal-2); border-color: var(--c-teal); }
.soma-replay:focus-visible { outline: 2px solid var(--c-teal-2); outline-offset: 3px; }
.soma-replay svg { width: 15px; height: 15px; }
.soma-replay.is-girando svg { animation: soma-gira .62s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)); }

@keyframes soma-gira { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

/* ══ 4 · SEM MOVIMENTO — a composição final, desenhada ═══════════════════════
   Não é degradação: é a mesma página, parada. Todo slide visível empilha em
   grade, e nada depende de transição para existir. */
@media (prefers-reduced-motion: reduce) {
  [data-soma-item],
  [data-soma-slide],
  [data-soma-slide] figcaption {
    transition: none !important;
    animation: none !important;
  }
  [data-soma-item],
  [data-soma-item].is-fora {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-soma-slide] {
    clip-path: none !important;
    transform: none !important;
  }
  [data-soma-slide] figcaption { opacity: 1 !important; transform: none !important; }
  .soma-replay { display: none; }         /* não há o que repetir */
}