/* ════════════════════════════════════════════════════════════════════════════
   SOMA · soma-coverflow.css — o carrossel em perspectiva

   Referência de desenho: "Carrossel coverflow" do repositório de webdesign
   (`REPOSITORIO_WEBDESIGN/https://www.originkit.dev/components/coverflowgallery`).
   O original é componente React; esta base é HTML/CSS/JS sem bundler, então a
   peça foi REESCRITA em CSS 3D + JS vanilla. Nada de React, nada de biblioteca
   externa: o que veio de lá é o desenho — a perspectiva, o giro dos vizinhos, o
   autoplay e o título por slide.

   POR QUE ARQUIVO PRÓPRIO (Nível 3)
   Aditivo, com prefixo `cf-` que não colide com nada, e sai de cena removendo
   duas linhas de `<link>`/`<script>`. Não toca em `solucao.css` nem no global.

   O QUE NÃO ESTÁ AQUI
   Nada que anime `width`, `height`, `left` ou `top`. O movimento é `transform`
   e `opacity` — o compositor interpola sem repintar, e um carrossel com cinco
   peças em voo não pode custar layout a cada quadro.

   TOKENS CONSUMIDOS (definidos em `styles.css` e `soma-premium.css`)
   --c-teal · --c-teal-2 · --d-ink · --d-ink-2 · --d-ink-3 · --f-rotulo
   --m-medio · --m-lento · --m-entra
   ════════════════════════════════════════════════════════════════════════════ */

.cf-galeria {
  /* A RÉGUA DA PEÇA. Tudo que o JS calcula sai daqui, e é aqui que se afina o
     carrossel sem abrir o script: largura do slide, avanço lateral, ângulo do
     giro, recuo em profundidade e quantos vizinhos ficam visíveis de cada
     lado. O JS lê estes valores no `getComputedStyle` do container. */
  --cf-largura: min(680px, 68vw);   /* largura do slide central */
  --cf-proporcao: 16 / 9;
  --cf-avanco: 46%;                 /* deslocamento lateral por passo */
  --cf-angulo: 34deg;               /* giro do vizinho */
  --cf-recuo: 130px;                /* quanto o vizinho afunda em Z */
  --cf-escala: 0.13;                /* quanto encolhe por passo */
  --cf-fade: 0.34;                  /* quanto apaga por passo */
  --cf-vizinhos: 2;                 /* peças visíveis de cada lado */

  position: relative;
  margin: 48px auto 0;
  max-width: 1100px;
}

/* ── O PALCO ─────────────────────────────────────────────────────────────────
   A `perspective` mora no palco e não no slide: em cada slide, cada peça teria
   o próprio ponto de fuga e o conjunto leria como cinco fotos tortas em vez de
   uma cena com profundidade. `perspective-origin` no centro alinha o ponto de
   fuga com o slide em foco.

   A altura é fixada por `aspect-ratio` no próprio palco porque os filhos são
   absolutos — sem isso o palco colapsa e a seção pula quando o JS entra. */
.cf-palco {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cf-proporcao);
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  touch-action: pan-y;              /* o arraste horizontal é nosso; o vertical é da página */
}

/* ── O SLIDE ─────────────────────────────────────────────────────────────────
   Cada peça é posicionada no centro e empurrada pelo `transform` que o JS
   escreve em `--cf-t`. Uma variável só, uma escrita de estilo por peça por
   quadro. */
.cf-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cf-largura);
  margin: 0;
  transform: translate(-50%, -50%) var(--cf-t, none);
  transition:
    transform var(--m-lento, .72s) var(--m-entra, cubic-bezier(.16,.84,.26,1)),
    opacity   var(--m-lento, .72s) var(--m-entra, cubic-bezier(.16,.84,.26,1));
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Enquanto o dedo está no arraste o slide segue o ponteiro: transição zero,
   senão a peça persegue a mão com meio segundo de atraso. */
.cf-galeria.esta-arrastando .cf-slide { transition: none; }

.cf-slide-moldura {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(127, 231, 235, 0.14);
  box-shadow: 0 24px 80px rgba(2, 184, 191, 0.10);
  background: rgba(5, 11, 23, 0.62);
  aspect-ratio: var(--cf-proporcao);
}

.cf-slide img {
  width: 100%;
  height: 100%;
  /* `cover` e não `fill`: as fotos do acervo não têm todas a mesma proporção, e
     `fill` é exatamente o que esticava a imagem que esta peça veio substituir. */
  object-fit: cover;
  display: block;
}

/* O VÉU DOS VIZINHOS. A peça fora de foco não é só menor: ela é mais escura.
   Sem isso, cinco fotos de brilho igual competem e nenhuma é o centro. O véu
   mora num `::after` da moldura e sua opacidade é escrita pelo JS em
   `--cf-veu`, junto com o resto do passo. */
.cf-slide-moldura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 22, 0.72);
  opacity: var(--cf-veu, 0);
  transition: opacity var(--m-lento, .72s) var(--m-entra, cubic-bezier(.16,.84,.26,1));
  pointer-events: none;
}

/* O slide fora do alcance sai do fluxo de foco e de clique — e do leitor de
   tela, que não deve anunciar seis fotos quando uma está em cena. */
.cf-slide[aria-hidden="true"] { pointer-events: none; }

/* Clicar num vizinho traz ele para o centro. O cursor precisa dizer isso. */
.cf-slide:not(.esta-ativo) .cf-slide-moldura { cursor: pointer; }

/* ── O TÍTULO ────────────────────────────────────────────────────────────────
   Só o slide em foco mostra o título. Cinco legendas ao mesmo tempo viram
   ruído, e as dos vizinhos ficariam ilegíveis no giro de 34°. */
.cf-slide-titulo {
  margin: 18px auto 0;
  max-width: 46ch;
  text-align: center;
  font-family: var(--f-rotulo);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--d-ink-2);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--m-medio, .42s) var(--m-entra, cubic-bezier(.16,.84,.26,1)),
    transform var(--m-medio, .42s) var(--m-entra, cubic-bezier(.16,.84,.26,1));
}
.cf-slide.esta-ativo .cf-slide-titulo { opacity: 1; transform: none; }
.cf-slide-titulo strong { color: var(--d-ink); font-weight: 500; }

/* ── OS CONTROLES ────────────────────────────────────────────────────────────
   Setas e pontos numa linha só, abaixo do palco. Ficam FORA do palco de
   propósito: dentro, herdariam a perspectiva e girariam com a cena. */
.cf-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.cf-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(127, 231, 235, 0.22);
  color: var(--c-teal-2);
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--m-rapido, .24s) var(--m-entra, ease),
    color var(--m-rapido, .24s) var(--m-entra, ease);
}
.cf-seta:hover { border-color: rgba(127, 231, 235, 0.55); color: var(--d-ink); }
.cf-seta svg { width: 15px; height: 15px; }

.cf-pontos { display: flex; align-items: center; gap: 9px; }

.cf-ponto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(127, 231, 235, 0.26);
  cursor: pointer;
  transition:
    width var(--m-medio, .42s) var(--m-entra, ease),
    background var(--m-medio, .42s) var(--m-entra, ease);
}
.cf-ponto[aria-selected="true"] {
  width: 24px;
  border-radius: 100px;
  background: var(--c-teal);
}

/* ── SEM JS ──────────────────────────────────────────────────────────────────
   Antes de o script assumir, a peça é uma pilha de figuras empilhadas no mesmo
   ponto. Mostrar a primeira e esconder as outras deixa a seção legível mesmo
   se o script falhar — e evita o lampejo de seis fotos sobrepostas no
   carregamento. */
.cf-galeria:not(.esta-pronta) .cf-slide { opacity: 0; }
.cf-galeria:not(.esta-pronta) .cf-slide:first-child { opacity: 1; }
.cf-galeria:not(.esta-pronta) .cf-controles { visibility: hidden; }

/* ── TELA ESTREITA ───────────────────────────────────────────────────────────
   Abaixo de 720px o giro sai de cena. Num slide de 86vw, um vizinho a 34° fica
   com a borda de fora e a peça central perde o centro: o que era profundidade
   vira aperto. Sobra um vizinho de cada lado, sem rotação, só escala e véu. */
@media (max-width: 720px) {
  .cf-galeria {
    --cf-largura: 86vw;
    --cf-avanco: 52%;
    --cf-angulo: 0deg;
    --cf-recuo: 60px;
    --cf-escala: 0.16;
    --cf-vizinhos: 1;
  }
  .cf-slide-moldura { border-radius: 16px; }
  .cf-slide-titulo { font-size: 12.5px; }
}

/* ── SEM MOVIMENTO ───────────────────────────────────────────────────────────
   Não é degradação: é o mesmo carrossel, sem transição e sem autoplay (o JS lê
   a mesma consulta e não liga o relógio). As setas e os pontos continuam
   trocando o slide — só que na hora, sem o voo. */
@media (prefers-reduced-motion: reduce) {
  .cf-slide,
  .cf-slide-moldura::after,
  .cf-slide-titulo { transition: none; }
}