/* Seção "Repertório" — o carrossel 3D no fim da página Inteligência.

   Vem do componente `componentes/Sliders/10`, que era uma página inteira:
   canvas `position: fixed` em 100vw/100vh, preloader por cima de tudo em
   z-index 9999, grão animado nos pseudoelementos do `body` e um Tweakpane
   aberto no canto. Nada disso sobrevive dentro de uma página que já tem
   cabeçalho, rodapé e outras cenas — aqui o palco é uma caixa no fluxo e
   tudo que era global virou filho dela.

   O que se manteve do original é o que dá a assinatura: os planos que se
   deformam conforme a velocidade do arrasto, o título que desfoca ao sair
   do centro e a poeira parada ao fundo.

   Estado base = sem JavaScript: `.intel-slider__lista` é a galeria em HTML,
   visível e legível. O JS lê dela para montar o 3D e só então a esconde. */

.intel-slider {
  position: relative;
  z-index: 1;
  padding-block: clamp(90px, 13vh, 150px) clamp(70px, 10vh, 120px);
  color: var(--calone-white);
  background: var(--calone-ink);
}

.intel-slider__quadro {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: clamp(22px, 6vw, 80px);
}

.intel-slider__eyebrow {
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  color: var(--calone-on-dark-muted);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: .26em;      /* caixa alta pequena pede entreletra positiva */
  text-transform: uppercase;
}

.intel-slider__titulo {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.034em;    /* display grande: entreletra negativa */
}

.intel-slider__titulo .font-display {
  font-weight: 400;
  letter-spacing: -.02em;
}

/* ---------- o palco ---------- */
.intel-slider__palco {
  position: relative;
  margin-top: clamp(48px, 7vh, 90px);
  /* Sem `.is-live` a caixa cresce com a galeria em HTML; com a cena no ar ela
     passa a ter altura própria, que é o enquadramento do 3D. */
  overflow: hidden;
}

.intel-slider.is-live .intel-slider__palco {
  height: clamp(420px, 68svh, 760px);
}

.intel-slider.is-live .intel-slider__palco {
  cursor: grab;
  /* Segura o arrasto horizontal sem tirar do dedo a rolagem vertical da
     página. É o que substitui o `preventDefault` no wheel/touchmove do
     original, que aqui prenderia a página inteira no carrossel. */
  touch-action: pan-y;
  /* Sem isto o arrasto do carrossel vira seleção de texto no meio do gesto. */
  user-select: none;
  -webkit-user-select: none;
}

.intel-slider.is-live .intel-slider__palco:active {
  cursor: grabbing;
}

.intel-slider__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity var(--motion-reveal, .8s) var(--ease-calone, ease);
}

.intel-slider.is-live .intel-slider__canvas {
  display: block;
}

.intel-slider.is-pronto .intel-slider__canvas {
  opacity: 1;
}

.intel-slider__canvas:focus-visible {
  outline: 2px solid var(--calone-white);
  outline-offset: -2px;
}

/* Poeira parada ao fundo: só profundidade, não acompanha o arrasto. */
.intel-slider__particulas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-reveal, .8s) var(--ease-calone, ease);
}

.intel-slider.is-pronto .intel-slider__particulas {
  opacity: 1;
}

.intel-slider__particula {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}

/* ---------- rótulos sobre o 3D ---------- */
/* Ficam em HTML, e não em textura: texto de verdade continua selecionável e
   nítido em qualquer densidade de tela. O JS projeta a posição de cada plano
   para pixels e escreve aqui. */
.intel-slider__rotulos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-reveal, .8s) var(--ease-calone, ease);
}

.intel-slider.is-pronto .intel-slider__rotulos {
  opacity: 1;
}

.intel-slider__rotulo {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .3s ease, filter .3s ease;
  will-change: transform, opacity, filter;
}

/* O título é o link para a obra. Nada de botão sobreposto nem de camada que
   só aparece no hover: o nome já é o foco do slide central, e como âncora de
   verdade ele funciona no teclado, no leitor de tela e no toque, onde não
   existe hover. Fora do centro o rótulo some, e com ele o link. */
.intel-slider__rotulo-nome {
  display: inline-flex;
  align-items: flex-start;
  gap: .28em;
  margin: 0;
  color: inherit;
  /* Menor que os 4.2vw de antes: com retrato o nome é mais largo que a foto,
     e um nome longo (Marcello Camargo Capuano) atravessava dois vizinhos. */
  font-size: clamp(1.15rem, 2.7vw, 2.3rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.034em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* O contêiner é transparente ao ponteiro para o arrasto passar; o link, não. */
a.intel-slider__rotulo-nome {
  pointer-events: auto;
  cursor: pointer;
  /* Link é arrastável por padrão: começar o gesto em cima do título disparava
     o arrasto nativo da URL, o navegador mandava `pointercancel` e o
     carrossel parava no meio — lia-se como a cena travando. */
  -webkit-user-drag: none;
}

.intel-slider__seta {
  width: .32em;
  height: .32em;
  margin-top: .1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
  transition: opacity var(--motion-micro, .22s) var(--ease-calone, ease),
              transform var(--motion-micro, .22s) var(--ease-calone, ease);
}

a.intel-slider__rotulo-nome:hover .intel-slider__seta,
a.intel-slider__rotulo-nome:focus-visible .intel-slider__seta {
  opacity: 1;
  transform: translate(.12em, -.12em);
}

a.intel-slider__rotulo-nome:focus-visible {
  outline: 2px solid var(--calone-white);
  outline-offset: 6px;
}

.intel-slider__rotulo-num {
  display: flex;
  align-items: center;
  margin: 10px 0 0;
  color: var(--calone-on-dark-muted);
  font-size: clamp(10px, .95vw, 12px);
  font-weight: 600;
  letter-spacing: .26em;
  font-variant-numeric: tabular-nums;
}

.intel-slider__rotulo-num::before {
  content: "";
  width: 40px;
  height: 2px;
  margin-right: 10px;
  background: var(--calone-white);
}

/* ---------- a galeria em HTML ---------- */
/* O palco sangra de borda a borda porque é assim que o 3D se enquadra; a
   galeria, que vive dentro dele, precisa da calha das outras seções. */
.intel-slider__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0 clamp(22px, 6vw, 80px);
  list-style: none;
  counter-reset: intel-slider;
}

.intel-slider__lista[hidden] {
  display: none;
}

.intel-slider__item {
  counter-increment: intel-slider;
}

.intel-slider__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.intel-slider__item img {
  display: block;
  width: 100%;
  height: auto;
  /* Retrato, como as fotos dos monitorados. Era 16/9 de quando os slides
     eram banners de obra. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
}

.intel-slider__link:hover .intel-slider__item-nome,
.intel-slider__link:focus-visible .intel-slider__item-nome {
  text-decoration: underline;
  text-underline-offset: .22em;
}

.intel-slider__item-nome {
  display: block;
  margin-top: 14px;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.intel-slider__item-nome::before {
  content: counter(intel-slider, decimal-leading-zero) " — ";
  color: var(--calone-on-dark-muted);
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .2em;
}

/* ---------- a dica de uso ---------- */
.intel-slider__ajuda {
  width: min(1280px, 100%);
  margin: clamp(26px, 3.4vh, 44px) auto 0;
  padding-inline: clamp(22px, 6vw, 80px);
  color: var(--calone-on-dark-muted);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-align: right;
}

/* Sem a cena no ar a dica não descreve nada que exista na tela. */
.intel-slider:not(.is-live) .intel-slider__ajuda {
  display: none;
}

@media (max-width: 767px) {
  .intel-slider.is-live .intel-slider__palco {
    height: clamp(340px, 52svh, 520px);
  }
}

/* Movimento reduzido: nada de WebGL nem de deformação — fica a galeria em
   HTML, que é o mesmo conteúdo em repouso. */
@media (prefers-reduced-motion: reduce) {
  .intel-slider__canvas,
  .intel-slider__particulas,
  .intel-slider__rotulos {
    display: none;
  }
}