/* ROL-01 · Pilha que se espalha na rolagem — reescrita do original do 21st.dev sem React nem Motion.
   Os itens entram sobrepostos no centro e, conforme a seção sobe da base da tela até o meio, cada um
   vai para a sua coluna.

   Duas diferenças do original, as duas deliberadas:
     - **sem pin.** O original prende uma seção de 350 vh e come três telas de rolagem; aqui o efeito
       acompanha a rolagem natural, sem alongar a página.
     - **generalizado.** O original tem uma pilha fixa; aqui vale para N itens numa grade qualquer.

   `--espalha` vai de 0 (empilhado) a 1 (layout final). **O padrão é 1**: sem JS, em tela estreita ou
   com "reduzir movimento", o layout final é o que aparece — a falha mostra, não esconde. */
.c-espalhar {
  --c-rol-raio: 24px;
  --c-rol-card-fundo: #141414;
  --c-rol-card-linha: rgba(235, 235, 235, .12);
  --c-rol-giro: 3deg;        /* o giro do item quando empilhado */
  --c-rol-peek: 32px;        /* o quanto o item de trás espia de lado, para não ficar escondido */

  display: grid;
  gap: 24px;
}
.c-espalhar__item {
  margin: 0;
  border: 1px solid var(--c-rol-card-linha);
  border-radius: var(--c-rol-raio);
  background: var(--c-rol-card-fundo);
}

@media (min-width: 1024px) {
  .c-espalhar { position: relative; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 48px; align-items: center; }
  /* cada item anda --dx (escrito pelo JS) multiplicado pelo que falta para espalhar.
     O z-index decresce: o primeiro fica por cima da pilha. */
  .c-espalhar__item {
    position: relative;
    will-change: transform;
    transform: translateX(calc(var(--dx, 0px) * (1 - var(--espalha, 1))))
               rotate(calc(var(--c-rol-giro) * (1 - var(--espalha, 1)) * var(--sinal, 1)));
  }
  .c-espalhar__item:nth-child(1) { z-index: 3; --sinal: -1; }
  .c-espalhar__item:nth-child(2) { z-index: 2; --sinal:  1; transform:
    translate(calc((var(--dx, 0px) + var(--c-rol-peek)) * (1 - var(--espalha, 1))), calc(24px * (1 - var(--espalha, 1))))
    rotate(calc(var(--c-rol-giro) * .67 * (1 - var(--espalha, 1)))); }
  .c-espalhar__item:nth-child(n+3) { z-index: 1; --sinal: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .c-espalhar__item { transform: none !important; }
}