/* =========================================================================
   Soulstory · ajustes de estado e responsividade
   ARQUIVO GERADO. Não edite aqui: mexa nos arquivos de origem e rode
   python3 construir-estilos.py para refazer.
   Origem:
     estados.css
     responsivo.css
   ========================================================================= */

/* ===== estados.css ===== */
/* =========================================================================
   Soulstory · estados de hover e de foco
   O runtime de origem aplicava esses estados por conta própria (atributos
   style-hover e style-focus) e os perdemos ao tornar a página independente.
   Aqui eles voltam como CSS de verdade.

   As regras usam !important porque o export deixou todos os estilos embutidos
   no atributo style de cada elemento, e estilo embutido vence folha de estilo.
   Os valores vêm dos tokens do design system, nunca de hex solto.
   ========================================================================= */

/* ---------- Hover (só onde existe ponteiro de verdade) ---------- */
@media (hover: hover) {

  /* Aba TRAMA, no topo da página */
  a[href="#trama"]:hover {
    box-shadow: var(--shadow-elevated) !important;
    border-color: var(--line-active) !important;
  }

  /* Pílula "clique aqui e descubra", nos cards Motivo 1 e Motivo 2 */
  .scp1:hover {
    background: var(--ss-indigo-press) !important;
  }

  /* Botões de anterior e próximo do deck de depoimentos */
  .scp4:hover {
    background: color-mix(in srgb, var(--ss-periwinkle) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--ss-periwinkle) 85%, transparent) !important;
    transform: translateY(-2px) !important;
  }

  /* Modal do Raio-X: botão de fechar */
  [data-modal-raiox] button[aria-label="Fechar"]:hover {
    background: color-mix(in srgb, var(--ss-cream) 14%, transparent) !important;
  }

  /* Modal do Raio-X: voltar uma pergunta */
  [data-modal-raiox] button[data-acao="voltar"]:hover {
    color: var(--ss-cream) !important;
  }

  /* Modal do Raio-X: avançar ou enviar */
  [data-modal-raiox] button[data-acao="avancar"]:hover {
    transform: translateY(-2px) !important;
  }
}

/* ---------- Foco de teclado ----------
   As quatro réguas de estatística têm tabindex e recebiam contorno ao focar.
   Usamos :focus-visible, que mostra o contorno para quem navega por teclado
   sem sujar o clique de mouse. */
.scp2:focus-visible {
  outline: 2px solid var(--ss-indigo) !important;
  outline-offset: 3px !important;
}

.scp3:focus-visible {
  outline: 2px solid var(--ss-periwinkle) !important;
  outline-offset: 3px !important;
}

/* ===== responsivo.css ===== */
/* =========================================================================
   Soulstory · ajustes de responsividade e de toque

   1) Transbordo horizontal
   Algumas camadas decorativas (o brilho de borda dos cards e o canvas da borda
   elétrica) são desenhadas propositalmente para fora do elemento, para o brilho
   escapar das bordas. No desktop sobra espaço e ninguém percebe. No celular elas
   empurravam a página para os lados: a tela tinha 375px de largura e o conteúdo
   pedia 425px, então dava para arrastar a página na horizontal, o que atrapalha
   a leitura e a rolagem. Esse defeito já existia no export original.

   A correção recorta o excesso no contêiner principal da página. Como o excesso
   é só brilho decorativo, nada de conteúdo se perde. Usamos "clip" e deixamos
   "hidden" antes, como reserva para navegadores mais antigos.

   2) Alvos de toque
   As bolinhas do carrossel da história tinham 9px, pequenas demais para o dedo.
   A área clicável cresce para 44px sem mudar o tamanho do desenho.
   ========================================================================= */

/* ---------- 1. Recorte do excesso decorativo ---------- */
#dc-root {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ---------- 2. Bolinhas do carrossel com área de toque maior ----------
   As bolinhas têm 9px de diâmetro, pequenas demais para o dedo. A área clicável
   cresce sem mudar o desenho.

   Atenção ao espaçamento: a primeira tentativa usou 44px de largura e as áreas
   de bolinhas vizinhas passaram a se sobrepor, então tocar numa acionava a outra.
   Por isso o intervalo entre elas também aumentou: agora são 33px de centro a
   centro para 32px de área, o que garante que cada toque atinja só uma. */
.sstk-dots {
  gap: 24px;
}

.sstk-dot {
  position: relative;
}

.sstk-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 44px;
  transform: translate(-50%, -50%);
  /* só amplia a área de toque, não aparece na tela */
}

/* ---------- 3. Borda elétrica: estática no celular ----------
   No desktop o contorno do card do Raio-X é desenhado quadro a quadro num canvas,
   deslocado por ruído, e cercado por três camadas de brilho borrado. É bonito e
   custa caro: cerca de 30 mil contas por quadro, 60 vezes por segundo, num
   aparelho que já tem menos fôlego e bateria contada.

   No celular a mesma ideia vira uma hairline periwinkle parada. Some o canvas,
   somem os dois brilhos borrados e some o eb-background-glow, que era o único
   gradiente que ainda restava nesta página. No lugar entra um anel de 1px em
   var(--brand-soft), desenhado como sombra no contêiner para não disputar com a
   borda que o card já traz no atributo style (estilo inline só perde para
   !important, e não vale sujar o CSS por causa disso).

   O limite de 700px é o mesmo que o hero já usa para trocar a imagem de fundo,
   então "celular" quer dizer a mesma coisa nos dois lugares.

   O borda-eletrica.js tem a trava correspondente: abaixo de 700px ele nem liga a
   animação, senão o processador continuaria desenhando um canvas escondido. */
@media (max-width: 700px) {
  .electric-border .eb-canvas-container,
  .electric-border .eb-layers {
    display: none;
  }

  .electric-border {
    box-shadow: 0 0 0 1px var(--brand-soft);
  }
}

/* ---------- 4. Meio-tom: fora do celular ----------
   A arte da citação é um shader WebGL que revela a frase debaixo do cursor. No
   celular não existe cursor: a arte ficava parada em meio-tom, com a frase
   serrilhada e ilegível, depois de baixar 130KB da biblioteca OGL só para isso.
   Medido na arte exibida com os 343px de largura que o celular tem: a overline
   caía para 3,4px de altura e a assinatura para 6,5px.

   Então no celular a arte sai inteira, e com ela as duas linhas que só existiam
   para pedir o gesto (o convite "passe o cursor" e a instrução embaixo). A
   seção fica com a overline e o título, que é o que sustenta a ideia sem
   depender de interação. O desktop segue exatamente como estava.

   O meio-tom.js tem a trava correspondente: abaixo de 700px ele não busca a OGL
   nem monta o WebGL. */
@media (max-width: 700px) {
  [data-meio-tom-caixa],
  [data-meio-tom-convite],
  [data-meio-tom-instrucao] {
    display: none;
  }
}