/* --------------------------------------------------------------------------
   Inteligencia artificial: componentes/inteligencia.php

   Capitulo escuro (--sup-1) entre dois claros. As divisas com os vizinhos
   sao deduzidas em css/site.css (secao 05): este arquivo NAO desenha sangria,
   gradiente de transicao nem fio nas bordas da secao.

   Movimento: so o vocabulario compartilhado (css/site.css, secao 17). Cada
   elemento carrega UMA classe .mov-*. Duas na mesma tag brigariam pelo
   animation-name e a ultima do site.css venceria.
   -------------------------------------------------------------------------- */

/* --- 4.1 O nucleo: turno de conversa + fotografia -------------------------
   Tres camadas de profundidade sobre a foto, cada uma com o seu vinculo com
   o scroll: o palco desliza devagar (parallax 3%), a etiqueta desliza o dobro
   por cima dele (7%), a foto se aproxima (zoom) e o halo acende no meio da
   passagem (clarear). E a secao e escura: a foto nao ganha moldura, funde no
   fundo por mascara radial. ------------------------------------------------ */
.ia-nucleo {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--esp-grid);
  align-items: center;
  margin-bottom: var(--esp-bloco);
}

.ia-nucleo-texto h3 {
  margin-top: var(--e4);
  font-size: var(--t3);
  font-weight: var(--p-max);
  letter-spacing: var(--tk2);
  line-height: 1.16;
}

.ia-turno {
  display: grid;
  gap: var(--e5);
  counter-reset: turno;
  margin: var(--e7) 0 0;
  padding: 0;
  list-style: none;
}

.ia-turno > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e1) var(--e4);
  counter-increment: turno;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

/* Ordinal editorial. Pseudo de conteudo, nao de sangria. */
.ia-turno > li::before {
  content: counter(turno, decimal-leading-zero);
  grid-row: span 2;
  align-self: start;
  color: var(--verde);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.ia-turno > li > strong {
  align-self: center;
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.ia-turno > li > span {
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

/* O palco empilha quadro e etiqueta na mesma celula. Quem recorta o zoom e o
   quadro, nao o palco: assim a etiqueta nunca e cortada. */
.ia-nucleo-palco {
  display: grid;
  grid-template-areas: "quadro";
  --mov-forca: 3%;
}

.ia-nucleo-quadro {
  position: relative;
  display: grid;
  grid-area: quadro;
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
  aspect-ratio: 16 / 9;
}

.ia-nucleo-halo {
  position: absolute;
  top: 44%;
  left: 58%;
  width: 104%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--r-full);
  background: radial-gradient(circle, var(--verde-vidro), transparent 68%);
  pointer-events: none;
  --mov-opacidade-min: 0.18;
  --mov-opacidade-max: 1;
}

/* O assunto da foto esta a direita e o negativo a esquerda: a mascara mantem
   o nucleo solido e dissolve a moldura inteira no --sup-1 da faixa. */
.ia-nucleo-foto {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(
    102% 118% at 70% 42%,
    var(--texto) 26%,
    transparent 80%
  );
  mask-image: radial-gradient(
    102% 118% at 70% 42%,
    var(--texto) 26%,
    transparent 80%
  );
  --mov-zoom-de: 1.16;
}

.ia-nucleo-etiqueta {
  display: grid;
  gap: var(--e2);
  grid-area: quadro;
  align-self: end;
  justify-self: start;
  max-width: 36ch;
  margin: var(--e6);
  padding: var(--e5);
  --mov-forca: 7%;
}

.ia-nucleo-etiqueta > strong {
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-max);
  letter-spacing: var(--tk3);
  line-height: 1.25;
}

.ia-nucleo-etiqueta > span:last-child {
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.7;
}

/* --- 4.2 Tres papeis ------------------------------------------------------ */
.ia-papeis {
  align-items: stretch;
}

.ia-papel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
  align-content: start;
  transition:
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.ia-papel:hover {
  border-color: var(--verde-linha);
  transform: translateY(-2px);
}

.ia-papel > .selo {
  margin-left: auto;
}

.ia-papel > h3,
.ia-papel > p,
.ia-papel > .lista-marcada {
  flex: 0 0 100%;
}

.ia-papel > h3 {
  letter-spacing: var(--tk3);
}

.ia-papel > p {
  font-size: var(--c3);
  line-height: 1.8;
}

.ia-papel > .lista-marcada {
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

.ia-papel > .lista-marcada > li {
  font-size: var(--c4);
  line-height: 1.6;
}

.ia-papel > .lista-marcada .icone {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

/* --- 4.3 As travas -------------------------------------------------------- */
/* Regua editorial entre os papeis e as travas. Nao e borda de secao: e um
   separador interno, e se desenha da esquerda com .mov-fio. */
.ia-regua {
  display: block;
  height: 1px;
  margin-top: var(--esp-bloco);
  background: linear-gradient(
    90deg,
    var(--verde-linha),
    var(--borda) 58%,
    transparent
  );
}

.ia-travas {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: var(--esp-grid);
  align-items: start;
  margin-top: var(--e7);
}

.ia-travas-intro {
  position: sticky;
  top: calc(var(--e9) + var(--e7));
}

.ia-travas-intro h3 {
  margin-top: var(--e4);
  font-size: var(--t3);
  font-weight: var(--p-max);
  letter-spacing: var(--tk2);
  line-height: 1.16;
}

.ia-travas-intro p {
  margin-top: var(--e5);
  font-size: var(--c3);
  line-height: 1.8;
}

.ia-travas-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5) var(--esp-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ia-travas-lista > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e2) var(--e4);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

.ia-trava-marca {
  display: grid;
  place-items: center;
  grid-row: span 2;
  align-self: start;
  width: 32px;
  height: 32px;
  border: 1px solid var(--verde-linha);
  border-radius: var(--r-sm);
  background: var(--verde-vidro);
  color: var(--verde);
}

.ia-trava-marca .icone {
  width: 16px;
  height: 16px;
}

.ia-travas-lista > li > strong {
  align-self: center;
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.ia-travas-lista > li > span {
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

/* --- 4.4 Resposta em audio ------------------------------------------------ */
.ia-voz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: var(--esp-grid);
  align-items: center;
  margin-top: var(--esp-bloco);
  background-image: radial-gradient(
    120% 150% at 8% 0%,
    var(--verde-vidro),
    transparent 62%
  );
}

.ia-voz-texto h3 {
  margin-top: var(--e4);
  font-size: var(--t3);
  font-weight: var(--p-max);
  letter-spacing: var(--tk2);
  line-height: 1.16;
}

/* So o paragrafo NU. Ver a nota de .dupla-texto p:not([class]) em
   css/pagina.css. Seletor de elemento pesa (0,1,1) e vence calado o
   .nota e o .sobretitulo, que pesam (0,1,0). */
.ia-voz-texto p:not([class]) {
  margin-top: var(--e5);
  font-size: var(--c3);
  line-height: 1.8;
}

/* A onda flutua um pouco mais que o cartao: mesma ideia de camada do nucleo. */
.ia-voz-onda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  height: 168px;
  --mov-forca: 4%;
}

.ia-voz-onda > i {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 7px;
  height: var(--onda, 40%);
  border-radius: var(--r-full);
  background: linear-gradient(var(--verde), var(--verde-linha));
  animation: onda var(--dur-3) var(--ease) var(--atraso, 0ms) infinite alternate;
}

.ia-rodape {
  max-width: 82ch;
  margin-top: var(--esp-bloco);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

.ia-rodape a {
  color: var(--verde);
  font-weight: var(--p-forte);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ia-rodape a:hover {
  color: var(--verde-brilho);
}

/* --------------------------------------------------------------------------
   4.5 Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .ia-travas-lista {
    gap: var(--e5);
  }

  .ia-nucleo-etiqueta {
    margin: var(--e5);
  }
}

@media (max-width: 980px) {
  .ia-nucleo {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-turno {
    margin-top: var(--e6);
  }

  .ia-travas {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-travas-intro {
    position: static;
  }

  .ia-voz {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-voz-onda {
    height: 120px;
  }
}

@media (max-width: 680px) {
  /* Nesta largura a etiqueta nao cabe sobre a foto sem cobri-la: sai da
     sobreposicao e vira o bloco seguinte, logo abaixo do quadro. */
  .ia-nucleo-palco {
    grid-template-areas:
      "quadro"
      "etiqueta";
  }

  .ia-nucleo-etiqueta {
    grid-area: etiqueta;
    justify-self: stretch;
    max-width: none;
    margin: var(--e5) 0 0;
    --mov-forca: 0%;
  }

  .ia-travas-lista {
    grid-template-columns: minmax(0, 1fr);
  }

  .ia-voz-onda {
    height: 96px;
    gap: 2px;
  }
}

@media (max-width: 380px) {
  .ia-turno > li {
    gap: var(--e1) var(--e3);
  }

  .ia-nucleo-etiqueta {
    padding: var(--e4);
  }
}