/* ==========================================================================
   GALERIA EM PASTA — prefixo fold-
   Pilha de fotos dentro de uma pasta. Hover abre em leque, clique abre em
   linha, arrastar uma foto para baixo fecha.

   O leque de hover é CSS puro: cada foto lê --i (posição em relação ao
   centro) e --a (o mesmo em módulo) do próprio style inline. Sem JS a
   seção continua legível e o leque continua funcionando — só o abrir e o
   arrastar dependem do script.
   ========================================================================== */

/* --dur do core é .9s: certo para entrada de seção, lento para o leque
   responder ao ponteiro. A duração de interação é local e fica aqui, à
   mão de quem for ajustar. A curva continua sendo a do projeto. */
.fold{--fold-dur:.42s;--fold-dur-lento:.6s;--fold-spread:132px;
  margin-top:clamp(34px,5vh,56px);display:flex;flex-direction:column;align-items:center}

/* O palco reserva a altura toda: as fotos são absolutas e não empurram nada.
   A perspectiva é do palco, senão a aba tomba achatada. */
.fold-stage{position:relative;width:100%;max-width:420px;height:460px;
  display:flex;justify-content:center;perspective:1400px}

/* ---------------------------------------------------------------- a pasta */
/* Duas peças: a abinha de cima (o "dente" da pasta suspensa) e o corpo.
   Ficam atrás de tudo e somem quando a pasta abre. */
.fold-body{position:absolute;bottom:26px;width:min(320px,84%);height:224px;
  transition:opacity var(--fold-dur) var(--ease),transform var(--fold-dur) var(--ease)}
.fold-body-tab{position:absolute;top:0;left:0;width:128px;height:38px;
  background:linear-gradient(to top,var(--dark-2),color-mix(in srgb,var(--fg) 12%,var(--dark-2)));
  border:1px solid var(--rule);border-bottom:0;
  border-radius:var(--radius-media) var(--radius-media) 0 0}
.fold-body-back{position:absolute;top:32px;left:0;right:0;bottom:0;
  background:linear-gradient(to bottom,var(--dark-2),var(--dark));
  border:1px solid var(--rule);border-radius:0 var(--radius-media) var(--radius-media) var(--radius-media);
  box-shadow:inset 0 0 40px rgba(var(--dark-rgb),.8)}

/* ---------------------------------------------------------------- aba da frente */
/* É um <button> de verdade: foco, Enter e Espaço vêm de graça, e o leitor de
   tela anuncia o estado por aria-expanded. O original era uma <div> clicável. */
.fold-front{position:absolute;bottom:0;width:min(340px,90%);height:176px;z-index:20;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--fg) 12%,var(--dark-2)),var(--dark));
  border:1px solid var(--rule-2);border-radius:var(--radius-media);
  box-shadow:inset 0 2px 10px color-mix(in srgb,var(--fg) 8%,transparent),0 -20px 40px rgba(var(--dark-rgb),.8);
  transform-origin:bottom;cursor:pointer;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;
  transition:transform var(--fold-dur) var(--ease),opacity var(--fold-dur) var(--ease)}
/* o fio de luz na quina de cima, que dá volume à aba */
.fold-front::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--fg) 40%,transparent),transparent)}
.fold-front:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.fold-label{font-family:var(--display);font-weight:700;font-size:13.5px;
  letter-spacing:.02em;color:var(--fg);background:var(--dark);
  border:1px solid rgba(var(--dark-rgb),.8);border-radius:var(--radius-media);
  padding:10px 20px;box-shadow:inset 0 1px 6px rgba(var(--dark-rgb),.9)}

/* hover: a aba tomba para a frente e deixa ver o leque */
.fold-stage:hover .fold-front,
.fold-front:focus-visible{transform:rotateX(-25deg) translateY(10px)}

/* aberta: pasta e aba saem de cena */
.fold.is-open .fold-front{opacity:0;transform:none;pointer-events:none}
.fold.is-open .fold-body{opacity:0;transform:scale(.9);transition-duration:var(--fold-dur-lento)}

/* ---------------------------------------------------------------- as fotos */
.fold-items{position:absolute;bottom:40px;z-index:10;
  display:flex;justify-content:center;list-style:none;margin:0;padding:0}

/* --dx/--dy/--dr são o canal do arraste: o script só escreve estes três
   valores e o CSS recompõe o transform inteiro. Assim o JS não precisa
   conhecer a fórmula da posição, que continua morando aqui. */
.fold-item{--dx:0px;--dy:0px;--dr:0deg;
  position:absolute;bottom:0;width:224px;height:288px;
  border:1px solid var(--rule-2);border-radius:var(--radius-media);overflow:hidden;
  box-shadow:0 20px 40px rgba(var(--dark-rgb),.5);transform-origin:bottom;
  pointer-events:none;
  /* z-index sobe com a posição para a foto da direita ficar na frente */
  z-index:calc(10 + var(--i));
  transition:transform var(--fold-dur) var(--ease),box-shadow var(--fold-dur) var(--ease);
  /* PILHA — estado de repouso: quase alinhadas, leque mínimo */
  transform:translateX(calc(var(--i) * 3px)) translateY(calc(var(--i) * -5px))
            rotate(calc(var(--i) * 3deg)) scale(calc(1 - var(--a) * .03))}

.fold-img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

/* LEQUE — hover ou foco no palco: abrem em arco, sem sair da pasta */
.fold-stage:hover .fold-item,
.fold-front:focus-visible ~ .fold-items .fold-item{
  transform:translateX(calc(var(--i) * 30px)) translateY(calc(var(--i) * -10px - 40px))
            rotate(calc(var(--i) * 8deg)) scale(calc(1 - var(--a) * .03))}

/* ABERTA — linha reta, todas do mesmo tamanho, sem rotação */
.fold.is-open .fold-item{
  pointer-events:auto;cursor:grab;z-index:50;
  transform:translateX(calc(var(--i) * var(--fold-spread) + var(--dx)))
            translateY(calc(-130px + var(--dy))) rotate(var(--dr)) scale(1.05)}
.fold.is-open .fold-item:hover{z-index:100;
  transform:translateX(calc(var(--i) * var(--fold-spread) + var(--dx)))
            translateY(calc(-140px + var(--dy))) rotate(var(--dr)) scale(1.1)}
.fold.is-open .fold-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px;z-index:100}

/* durante o arraste o JS assume o transform e a transição sai da frente */
.fold-item.is-dragging{cursor:grabbing;transition:none;z-index:150;
  box-shadow:0 30px 60px rgba(var(--dark-rgb),.7)}
/* soltou sem fechar: volta para o lugar com transição de novo */
.fold-item.is-returning{transition:transform var(--fold-dur) var(--ease)}

/* ---------------------------------------------------------------- legenda */
/* Dentro da foto, ancorada embaixo, com véu em gradiente mascarado — véu em
   caixa reta lê chapado (contrato §6). Só aparece com a pasta aberta: na
   pilha as fotos estão sobrepostas e a legenda viraria ruído. */
.fold-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 15px 13px;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-family:var(--display);font-weight:700;color:var(--fg);
  background:linear-gradient(to top,rgba(var(--dark-rgb),.92),transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  opacity:0;transition:opacity var(--fold-dur) var(--ease)}
.fold.is-open .fold-cap{opacity:1}

/* ---------------------------------------------------------------- apoio */
.fold-hint{margin-top:20px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  font-family:var(--display);font-weight:700;color:var(--fg-muted);
  border:1px solid var(--rule);border-radius:var(--radius-pill);padding:10px 22px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--fold-dur) var(--ease),transform var(--fold-dur) var(--ease)}
.fold.is-open .fold-hint{opacity:1;transform:none}

/* Saída por teclado. O arraste é a graça do componente, mas não pode ser o
   único jeito de fechar: fica fora do alcance de quem navega por teclado ou
   usa leitor de tela. Some do fluxo enquanto a pasta está fechada. */
.fold-close{margin-top:14px;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);background:none;
  border:0;padding:8px 4px;cursor:pointer;transition:color .25s;
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fold-close:hover{color:var(--accent)}
.fold.is-open .fold-close{position:static;width:auto;height:auto;clip-path:none}
.fold-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------------------------------------------------------- movimento reduzido */
/* Sem deslocamento nem rotação: a pasta abre trocando opacidade e as fotos
   viram uma grade quieta. O componente continua inteiro, só não se mexe. */
@media(prefers-reduced-motion:reduce){
  .fold-item,.fold-front,.fold-body,.fold-cap,.fold-hint{transition-duration:.01ms}
  .fold-stage:hover .fold-front{transform:none}
  .fold-stage:hover .fold-item{transform:translateX(calc(var(--i) * 30px))
    translateY(-40px) rotate(0deg) scale(1)}
}

/* ---------------------------------------------------------------- mobile */
/* Aberta, cinco fotos de 224px não cabem em tela estreita. O espalhamento
   encolhe e as fotos passam a se sobrepor de propósito — vira um leque
   apertado em vez de uma linha, que é o que a largura permite. */
@media(max-width:860px){
  .fold{--fold-spread:74px}
  .fold-item{width:180px;height:232px}
  .fold-stage{height:420px}
}
@media(max-width:520px){
  .fold{--fold-spread:46px}
  .fold-item{width:150px;height:196px}
  .fold-stage{height:380px}
  .fold-hint{font-size:10.5px;padding:9px 16px;text-align:center}
}