/* fecho.css · #contato. A última tela: "Quer fazer o seu?" bem grande, a compra e os contatos
   em botões redondos de vidro com ícone e nome visível.

   Luz própria, tirada do trabalho: os pôsteres dos quatro vídeos, muito desfocados, viram uma
   faixa de luz lenta atrás dos contatos (âmbar do "Nada disso", o branco do terminal, o verde-
   -petróleo do "Tudo que eu falar"). O fecho.js cria as quatro luzes a partir do conteudo.js;
   sem JS fica um degradê com essas mesmas cores. Derivam devagar só com a seção à vista
   (.fecho--viva); com movimento reduzido ficam paradas.

   Celular: os contatos ficam com as camadas 2 e 3 do vidro (borda de luz e brilho) sem desfoque,
   porque a luz atrás já é macia e seis desfoques redondos + a barra passariam do limite. */

.fecho {
  overflow: clip;
  text-align: center;
  padding-bottom: calc(var(--espaco-secao) * .9);
}

/* ---------- Luz ---------- */
.fecho__campo {
  position: absolute; z-index: 0;
  left: 50%; bottom: 0;
  width: min(1500px, 190vw); height: 62%;
  transform: translateX(-50%);
  pointer-events: none;
  /* reserva sem JS: as mesmas cores, em degradê */
  background:
    radial-gradient(28% 40% at 22% 58%, rgb(224 128 76 / .26), transparent 70%),
    radial-gradient(26% 38% at 50% 52%, rgb(214 222 240 / .14), transparent 70%),
    radial-gradient(28% 40% at 78% 58%, rgb(46 104 100 / .32), transparent 70%);
}
.fecho__campo--posteres { background: none; }
.fecho__luz {
  position: absolute;
  top: 12%;
  width: 32%; height: 76%;
  border-radius: 40%;
  background: var(--poster) var(--recorte, 50% 50%) / cover no-repeat;
  filter: blur(var(--desfoque, 56px)) saturate(1.1) brightness(1.3);
  opacity: var(--forca, .6);
  animation: fecho-deriva var(--tempo, 26s) ease-in-out var(--atraso, 0s) infinite alternate both paused;
  will-change: transform;
}
/* ordem do conteudo.js: 1 Nada disso (âmbar: o abajur), 2 Dentro da telinha (o terminal),
   3 Feito por uma IA (o título branco), 4 Tudo que eu falar (a parede verde-petróleo).
   As duas com cor ficam no meio, atrás dos contatos; as escuras, nas pontas. */
.fecho__luz:nth-child(1) { left: 20%; top: 8%;  --recorte: 78% 10%; --tempo: 27s; --atraso: -4s;  --forca: .62; }
.fecho__luz:nth-child(2) { left: -2%; top: 16%; --recorte: 50% 56%; --tempo: 33s; --atraso: -17s; --forca: .55; }
.fecho__luz:nth-child(3) { left: 70%; top: 18%; --recorte: 30% 40%; --tempo: 29s; --atraso: -9s;  --forca: .5; }
.fecho__luz:nth-child(4) { left: 47%; top: 6%;  --recorte: 50% 6%;  --tempo: 24s; --atraso: -13s; --forca: .78; }
.movimento .fecho--viva .fecho__luz { animation-play-state: running; }

@keyframes fecho-deriva {
  0%   { transform: translate3d(-9%, 4%, 0) scale(.94) rotate(-4deg); }
  50%  { transform: translate3d(6%, -6%, 0) scale(1.06) rotate(3deg); }
  100% { transform: translate3d(11%, 5%, 0) scale(.98) rotate(-2deg); }
}

/* ---------- Texto e compra ---------- */
/* sem z-index aqui: o vidro dos contatos fica no mesmo contexto de empilhamento que a luz,
   para o desfoque de fundo enxergá-la em qualquer navegador (a luz tem z-index 0 e vem antes) */
.fecho__corpo {
  position: relative;
  display: grid; justify-items: center;
  gap: clamp(28px, 4vw, 40px);
}
.fecho__titulo {
  font-size: var(--t-display);
  line-height: .95; letter-spacing: -.045em;
  max-width: 9ch;
}

/* ---------- Contatos ---------- */
.contatos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 6px;
  width: 100%; max-width: 1040px;
  margin: clamp(28px, 5vw, 64px) 0 0; padding: 0; list-style: none;
}
.contato {
  display: grid; justify-items: center; align-content: start; gap: 3px;
  min-height: 44px;
  padding: 6px 4px 8px;
  border-radius: 22px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.contato__icone {
  --vidro-sombra: 0 18px 34px -16px rgb(0 0 0 / .85);
  --vidro-fundo: rgb(255 255 255 / .07);
  --vidro-filtro: blur(18px) saturate(125%) brightness(1.05);
  --vidro-brilho-cor: rgb(255 255 255 / .22);
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: 12px;
  transition: transform .5s var(--expo);
}
.contato__icone .icone { width: 26px; height: 26px; }
.contato__icone .icone--github { width: 24px; height: 24px; }
.contato__nome { font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.contato__nota { font-size: .8125rem; color: #B9B9BE; }
.contato:active .contato__icone { transform: scale(.94); }
.contato:focus-visible { outline-offset: 2px; }
@media (hover: hover) {
  .contato:hover .contato__icone { transform: translateY(-3px); }
}

@media (max-width: 767px) {
  .contato__icone {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --vidro-fundo: rgb(255 255 255 / .09);
  }
  .fecho__campo { width: 150vw; height: 58%; }
  .fecho__luz { --desfoque: 38px; width: 42%; height: 70%; }
  .fecho__luz:nth-child(1) { left: 18%; top: 4%; }
  .fecho__luz:nth-child(2) { left: 0%;  top: 34%; }
  .fecho__luz:nth-child(3) { left: 58%; top: 34%; }
  .fecho__luz:nth-child(4) { left: 40%; top: 18%; }
}
@media (min-width: 768px) {
  .contatos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .contato__icone { width: 72px; height: 72px; }
  .fecho__campo { height: 56%; }
}

@media (prefers-reduced-motion: reduce) {
  .fecho__luz { animation: none; }
}
@media print {
  .fecho__campo { display: none; }
  .fecho { color: #000; }
}