/* feitos.css · #feitos. Cards de vidro sobre a luz do próprio trabalho.

   Luz: cada card tem a SUA luz por trás (::before e ::after do <li>, não do vidro), na cor do
   que ele conta: Amigo Divino e uPersonal na cor da tela do produto (--cor-tela do conteudo.js,
   aplicada pelo feitos.js em --luz; o CSS traz o mesmo valor de reserva); os outros num branco
   frio neutro. As luzes derivam devagar e cada uma no seu tempo (só transform), e só andam com a
   seção à vista (.feitos--viva, posta pelo feitos.js). Sem JS ou com movimento reduzido: paradas.

   Grade: bento assimétrico. Computador: o card grande à esquerda, coluna de credenciais à direita
   (Springer, MarIA, mestrado) e os dois produtos embaixo. Raios por hierarquia: grande > produto >
   credencial.

   Celular: só o card grande tem desfoque de verdade (custo: no máximo 3 ou 4 vidros com blur na
   tela, e a barra de baixo já é um). Nos outros o vidro fica com as camadas 2 e 3 (borda de luz e
   brilho) sobre a luz, que já é macia: a diferença não se vê, o custo some.

   Inclinação (feitos.js): transform direto no .feito__vidro, com perspective() no próprio
   transform (não depende de cadeia preserve-3d). */

.feitos { overflow: clip; }
.feitos__palco { position: relative; }

/* O campo geral fica só como um piso de luz bem fraco sob a grade (a luz de verdade é a de cada card) */
.feitos__campo {
  position: absolute; z-index: 0;
  inset: -4% -6%;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 55%, rgb(214 222 240 / .045), transparent 70%);
}
.feitos__luz { display: none; }

.feitos__grade {
  position: relative; z-index: 1;
  display: grid; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}

/* ---------- Card e a luz dele ---------- */
.feito {
  --luz: 222 232 252;                 /* branco frio neutro (bem menos saturado que a luz de monitor) */
  --luz-forca: .8;
  --raio-feito: 18px;
  /* luz principal e a segunda, mais fraca: centro (cx, cy) e tamanho (w, h), em % do card.
     Os núcleos ficam nas bordas e nos cantos (luz de contorno), longe do texto. */
  --l1-cx: 100%; --l1-cy: 50%; --l1-w: 64%; --l1-h: 150%;
  --l2-cx: 0%;   --l2-cy: 100%; --l2-w: 50%; --l2-h: 90%;
  --l2-forca: .4;
  --deriva-1: feito-deriva-a;
  --deriva-2: feito-deriva-b;
  --tempo-1: 19s; --tempo-2: 26s;
  --atraso: 0s;
  position: relative;
  display: grid;
}
.feito::before,
.feito::after {
  content: "";
  position: absolute; z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgb(var(--luz) / 1) 0%,
    rgb(var(--luz) / .66) 16%,
    rgb(var(--luz) / .26) 44%,
    rgb(var(--luz) / .07) 72%,
    rgb(var(--luz) / 0) 100%);
  animation: var(--deriva-1) var(--tempo-1) ease-in-out var(--atraso) infinite alternate both paused;
}
.feito::before {
  left: calc(var(--l1-cx) - var(--l1-w) / 2); top: calc(var(--l1-cy) - var(--l1-h) / 2);
  width: var(--l1-w); height: var(--l1-h);
  opacity: var(--luz-forca);
}
.feito::after {
  left: calc(var(--l2-cx) - var(--l2-w) / 2); top: calc(var(--l2-cy) - var(--l2-h) / 2);
  width: var(--l2-w); height: var(--l2-h);
  opacity: var(--l2-forca);
  animation-name: var(--deriva-2);
  animation-duration: var(--tempo-2);
}
.movimento .feitos--viva .feito::before,
.movimento .feitos--viva .feito::after { animation-play-state: running; }

@keyframes feito-deriva-a {
  0%   { transform: translate3d(-12%, -9%, 0) scale(.9); }
  50%  { transform: translate3d(5%, 10%, 0) scale(1.08); }
  100% { transform: translate3d(13%, -5%, 0) scale(.97); }
}
@keyframes feito-deriva-b {
  0%   { transform: translate3d(9%, 11%, 0) scale(1.1); }
  50%  { transform: translate3d(-8%, -4%, 0) scale(.93); }
  100% { transform: translate3d(-13%, 9%, 0) scale(1.04); }
}
@keyframes feito-deriva-c {
  0%   { transform: translate3d(0, 13%, 0) scale(1); }
  50%  { transform: translate3d(-12%, -6%, 0) scale(1.1); }
  100% { transform: translate3d(10%, -11%, 0) scale(.92); }
}

/* cada card com a sua luz, no seu lugar e no seu tempo */
.feito--grande {
  --raio-feito: var(--raio-painel);
  --luz-forca: .9;
  --l1-cx: 84%; --l1-cy: 15%; --l1-w: 62%; --l1-h: 60%;    /* alto à direita, ao lado do título */
  --l2-cx: 12%; --l2-cy: 90%; --l2-w: 50%; --l2-h: 40%;    /* embaixo à esquerda, fraca */
  --l2-forca: .45;
  --tempo-1: 21s; --tempo-2: 29s; --atraso: -6s;
}
.feito[data-feito="springer"] {
  --l1-cx: 90%; --l1-cy: 40%; --l1-w: 56%; --l1-h: 150%;
  --l2-cx: 26%; --l2-cy: 8%;  --l2-w: 40%; --l2-h: 70%;  --l2-forca: .3;
  --deriva-1: feito-deriva-c; --tempo-1: 17s; --tempo-2: 23s; --atraso: -11s;
}
.feito[data-feito="maria"] {
  --l1-cx: 88%; --l1-cy: 88%; --l1-w: 60%; --l1-h: 170%;
  --l2-cx: 6%;  --l2-cy: 14%; --l2-w: 40%; --l2-h: 80%;  --l2-forca: .28;
  --deriva-1: feito-deriva-b; --deriva-2: feito-deriva-a; --tempo-1: 23s; --tempo-2: 18s; --atraso: -3s;
}
.feito[data-feito="mestrado"] {
  --l1-cx: 76%; --l1-cy: 84%; --l1-w: 66%; --l1-h: 150%;
  --l2-cx: 95%; --l2-cy: 18%; --l2-w: 36%; --l2-h: 90%; --l2-forca: .32;
  --deriva-1: feito-deriva-c; --tempo-1: 25s; --tempo-2: 20s; --atraso: -14s;
}
/* produtos: a cor da tela (o feitos.js reaplica --luz a partir do conteudo.js) */
.feito[data-feito="amigo-divino"] {
  --luz: 201 219 239;
  --raio-feito: 24px;
  --luz-forca: .9;
  --l1-cx: 16%; --l1-cy: 72%; --l1-w: 64%; --l1-h: 150%;
  --l2-cx: 92%; --l2-cy: 10%; --l2-w: 42%; --l2-h: 100%; --l2-forca: .42;
  --deriva-1: feito-deriva-b; --tempo-1: 20s; --tempo-2: 27s; --atraso: -9s;
}
.feito[data-feito="upersonal"] {
  --luz: 106 74 216;
  --raio-feito: 24px;
  --luz-forca: 1;
  --l1-cx: 84%; --l1-cy: 46%; --l1-w: 96%; --l1-h: 230%;
  --l2-cx: 6%;  --l2-cy: 96%; --l2-w: 60%; --l2-h: 140%; --l2-forca: .6;
  --deriva-1: feito-deriva-a; --deriva-2: feito-deriva-c; --tempo-1: 18s; --tempo-2: 24s; --atraso: -15s;
}

/* ---------- Vidro ---------- */
.feito__vidro {
  --vidro-raio: var(--raio-feito);
  --vidro-recuo: 22px;
  --vidro-fundo: rgb(255 255 255 / .045);
  --vidro-sombra: 0 24px 50px -30px rgb(0 0 0 / .8), 0 2px 8px -2px rgb(0 0 0 / .3);
  --lente-borda: 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  padding: 24px 22px;
  transform-origin: 50% 50%;
}
.movimento .feito__vidro { will-change: transform; }
.feito__titulo { font-size: 1.3125rem; line-height: 1.18; letter-spacing: -.022em; }
.feito__texto { color: var(--vidro-texto-2); font-size: 1rem; line-height: 1.5; }
.feito__link {
  margin-top: auto; padding-top: 8px;
  font-size: var(--t-pequeno);
  overflow-wrap: anywhere;
  color: var(--gelo);
}

.feito--grande .feito__vidro { padding: 30px 24px 28px; }
.feito--grande .feito__titulo {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1; letter-spacing: -.042em;
  max-width: 10.5ch;
  margin-bottom: 10px;
}
.feito--grande .feito__texto { font-size: var(--t-lead); line-height: 1.45; max-width: 30em; }

/* ---------- Barras "antes / depois" (sem eixo numérico) ----------
   A barra tem a largura do trilho e anda para a esquerda (translateX), recortada pelo trilho:
   só transform, e a ponta continua redonda. Estado final é o padrão (sem JS, movimento reduzido);
   o feitos.js põe .tempo--cheio e tira quando o card entra na tela, uma vez. */
.tempo { margin-top: auto; padding-top: 32px; display: grid; gap: 20px; }
.tempo__rotulos {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 10px;
  font-size: var(--t-pequeno);
  color: var(--vidro-texto-2);
}
.tempo__rotulos span:last-child { color: var(--gelo); font-weight: 500; }
.tempo__linha--depois .tempo__rotulos span:last-child { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.tempo__trilho {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(255 255 255 / .09);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05);
  transform: translateZ(0);            /* recorte arredondado estável no Safari */
}
.tempo__barra {
  display: block;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: rgb(255 255 255 / .38);
  transform: translateX(calc(max(12px, var(--fim, 1) * 100%) - 100%));
  transition: transform 1.5s var(--expo) .2s;
}
.tempo__linha--depois .tempo__barra {
  background: linear-gradient(90deg, rgb(255 255 255 / .7), var(--gelo));
}
.tempo--cheio .tempo__barra { transform: none; transition: none; }

/* ---------- Celular: vidro barato nos cards pequenos ---------- */
@media (max-width: 767px) {
  .feito:not(.feito--grande) .feito__vidro {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --vidro-fundo: rgb(255 255 255 / .06);
  }
  .feito--grande .feito__vidro { --vidro-filtro: blur(18px) saturate(170%) brightness(1.08); }
  /* uma luz por card pequeno (menos camadas animadas), com o núcleo mais macio (não há desfoque por cima) */
  .feito:not(.feito--grande)::after { display: none; }
  .feito:not(.feito--grande)::before {
    background: radial-gradient(closest-side,
      rgb(var(--luz) / .8) 0%,
      rgb(var(--luz) / .48) 24%,
      rgb(var(--luz) / .18) 54%,
      rgb(var(--luz) / .05) 78%,
      rgb(var(--luz) / 0) 100%);
  }
  /* produtos: a cor da tela entra pelo lado direito, mais forte que o branco das credenciais */
  .feito[data-feito="amigo-divino"] { --l1-cx: 92%; --l1-cy: 30%; --l1-w: 70%; --l1-h: 150%; --luz-forca: 1; }
  .feito[data-feito="upersonal"]    { --l1-cx: 88%; --l1-cy: 40%; --l1-w: 84%; --l1-h: 170%; }
  .feito[data-feito="mestrado"]     { --l1-cx: 86%; --l1-cy: 64%; --l1-w: 62%; --l1-h: 140%; }
}

/* ---------- Tablet: duas colunas ---------- */
@media (min-width: 768px) {
  .feitos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .feito { --raio-feito: 24px; }
  .feito[data-feito="amigo-divino"],
  .feito[data-feito="upersonal"] { --raio-feito: 30px; }
  .feito--grande { --raio-feito: var(--raio-painel); grid-column: 1 / -1; }
  .feito[data-feito="mestrado"] { grid-column: 1 / -1; }
  .feito__vidro { padding: 28px; }
  .feito--grande .feito__vidro { padding: 40px; }
}

/* ---------- Computador: bento ----------
   [ grande  7 col, 3 linhas ][ Springer  ]
   [                         ][ MarIA     ]
   [                         ][ Mestrado  ]
   [ Amigo Divino 5 ][ uPersonal       7  ] */
@media (min-width: 980px) {
  .feitos__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .feito--grande { grid-column: 1 / 8; grid-row: 1 / 4; }
  .feito[data-feito="springer"] { grid-column: 8 / 13; grid-row: 1; }
  .feito[data-feito="maria"]    { grid-column: 8 / 13; grid-row: 2; }
  .feito[data-feito="mestrado"] { grid-column: 8 / 13; grid-row: 3; }
  .feito[data-feito="amigo-divino"] { grid-column: 1 / 6; grid-row: 4; }
  .feito[data-feito="upersonal"]    { grid-column: 6 / 13; grid-row: 4; }
  .feito__vidro { padding: 30px 32px; }
  .feito--grande .feito__vidro { padding: 52px 52px 48px; }
  .feito[data-feito="amigo-divino"] .feito__vidro,
  .feito[data-feito="upersonal"] .feito__vidro { padding: 36px 40px; min-height: 196px; }
  .feito[data-feito="amigo-divino"] .feito__titulo,
  .feito[data-feito="upersonal"] .feito__titulo { font-size: 1.625rem; letter-spacing: -.028em; }
}

/* ---------- Movimento reduzido: tudo parado e no estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  .feito::before, .feito::after { animation: none; }
  .feito__vidro { transform: none !important; }
  .tempo__barra { transition: none; }
}

/* ---------- Impressão ---------- */
@media print {
  .feito::before, .feito::after, .feitos__campo { display: none; }
  .feito__vidro { transform: none !important; box-shadow: none; background: none; border: 1px solid #bbb; color: #000; }
  .feito__texto, .tempo__rotulos { color: #333; }
}