/* ===========================================================================
   PRATY — A abertura do site (a capa da bolsa)
   ---------------------------------------------------------------------------
   Tela cheia — veludo monograma com o zíper fechado. O clique puxa o zíper
   (sequência de quadros) e a capa esmaece, revelando a vitrine.

   Só existe quando o JS marca `.intro--pronta`. Sem JavaScript a capa não
   aparece e o site fica normalmente acessível.
   =========================================================================== */

.intro{display:none}

.intro.intro--pronta{
  display:block;
  position:fixed; inset:0; z-index:9000;
  background:#1B0E08;          /* o couro, para as bordas antes de a imagem vir */
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
.intro.intro--pronta:focus-visible{outline:3px solid #E3C56A; outline-offset:-6px}

.intro-capa,
.intro-q{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none;
}

/* ---------- o filme do zíper ----------
   Os quadros ficam empilhados e só o `.is-on` aparece. A troca é uma
   fusão curtíssima: os quadros vieram gerados um a um, então as dobras do
   veludo não batem exatamente entre um e outro — a fusão embaça esse pulo
   sem borrar o movimento do puxador. */
.intro-filme{position:absolute; inset:0; pointer-events:none}
/* `--intro-fusao` vem do JS, proporcional ao tempo de cada quadro: o quadro
   precisa ficar PARADO a maior parte do passo, senão não se lê como animação
   quadro a quadro — vira um borrão contínuo. */
.intro-q{opacity:0; transition:opacity var(--intro-fusao,.07s) linear}
.intro-q.is-on{opacity:1}

/* enquanto o zíper abre, as palavras saem da frente */
.intro--abrindo .intro-centro,
.intro--abrindo .intro-veu{
  opacity:0;
  transition:opacity .22s ease;
}

/* Véu na base: o couro é escuro e movimentado, e sem isto a tipografia some
   dentro dele. */
.intro-veu{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(9,4,12,.90) 0%, rgba(9,4,12,.66) 28%, rgba(9,4,12,.26) 62%, rgba(9,4,12,0) 100%);
}

/* ---------- texto ---------- */
.intro-centro{
  position:absolute; left:0; right:0; bottom:11%;
  text-align:center; padding:0 26px; pointer-events:none;
}
/* mancha escura logo atrás das palavras: o zíper passa por baixo do bloco de
   texto e, sem isto, os dentes dourados aparecem no meio das letras */
.intro-centro::before{
  content:''; position:absolute; left:50%; top:50%; z-index:-1;
  transform:translate(-50%,-50%);
  width:min(720px,96vw); height:135%; border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(9,4,12,.95) 0%, rgba(9,4,12,.75) 55%, rgba(9,4,12,0) 100%);
}
.intro-sobrelinha{
  margin:0 0 14px; font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  color:#E3C56A; text-shadow:0 2px 14px rgba(0,0,0,.95);
}
.intro-titulo{
  margin:0 auto; max-width:16ch;
  font-family:var(--font-display),Georgia,serif; font-weight:400;
  font-size:clamp(1.6rem,4.2vw,2.8rem); line-height:1.18; color:#F7F4EF;
  text-shadow:0 3px 22px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.8);
}
.intro-dica{
  margin:20px 0 0; text-align:center;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:#F0E2B6;
  text-shadow:0 2px 12px rgba(0,0,0,.95);
}
/* o convite: a instrução pulsa até alguém clicar */
@media (prefers-reduced-motion:no-preference){
  .intro--pronta:not(.intro--saindo) .intro-dica{animation:introChama 2.6s ease-in-out infinite}
}
@keyframes introChama{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}

/* ===========================================================================
   O FIM DA ABERTURA — em três tempos, sem nenhuma pausa entre eles
   ---------------------------------------------------------------------------
   Antes isto era um `opacity:0` na capa inteira. Três defeitos, todos apontados
   pelo Caio:
     1. o zíper parava no MEIO da tela — a arte tem nove quadros e o puxador não
        chega ao pé da imagem, então a abertura parecia interrompida;
     2. havia uma espera parada entre o último quadro e a saída;
     3. cruzar duas imagens por opacidade é a transição mais pobre que existe:
        as duas viram um borrão cinzento no meio do caminho.

   Agora:
     1. MERGULHO — a câmera avança para dentro do vão. O puxador desce para fora
        da tela por baixo, e é isso que faz o zíper parecer ter ido até o fim.
     2. PORTAS — as duas metades do último quadro se afastam. O corte deixa de
        ser um esmaecer e passa a ser um objeto abrindo.
     3. O SITE SAI DE DENTRO — pendurado no alto, no ponto onde o zíper abriu,
        balançando até assentar.
   =========================================================================== */

.intro{--intro-zoom:2.45}

.intro-camera{position:absolute; inset:0; transform-origin:50% 0}

/* 1 · o mergulho */
.intro.intro--mergulho .intro-camera{
  transition:transform var(--intro-mergulho,520ms) cubic-bezier(.45,0,.75,.35);
  transform:scale(var(--intro-zoom));
}

/* 2 · as portas */
.intro-porta{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none; opacity:0;
  transform-origin:50% 0;
  /* a ordem importa: escala primeiro, deslocamento depois — assim o
     afastamento anda a distância desenhada na TELA, e não multiplicada pela
     ampliação do mergulho */
  transform:translateX(0) scale(var(--intro-zoom));
}
.intro-porta--e{clip-path:inset(0 50% 0 0)}
.intro-porta--d{clip-path:inset(0 0 0 50%)}

/* 🔴 O fundo da capa PRECISA sumir junto com as portas. Ele existe para cobrir
   as bordas enquanto a imagem não chegou, e é opaco: sem isto, as portas se
   afastam e o que aparece no meio é o marrom do fundo, não o site. */
.intro.intro--portas{background:transparent}
.intro.intro--portas .intro-filme{opacity:0}
.intro.intro--portas .intro-porta{opacity:1}
.intro.intro--portas .intro-porta--e{
  transition:transform var(--intro-portas,780ms) cubic-bezier(.32,0,.12,1);
  transform:translateX(-62%) scale(var(--intro-zoom));
}
.intro.intro--portas .intro-porta--d{
  transition:transform var(--intro-portas,780ms) cubic-bezier(.32,0,.12,1);
  transform:translateX(62%) scale(var(--intro-zoom));
}

/* 3 · o site sai de dentro do zíper, balançando
   A origem no ALTO E NO CENTRO é o detalhe que faz a coisa funcionar: é o ponto
   onde o zíper abriu, então o site se comporta como algo pendurado ali — cai,
   passa do ponto, volta, assenta. Origem no centro daria um zoom comum. */
.site-corpo{transform-origin:50% 0%}
.site-corpo.corpo--saindo{
  animation:corpoSaindo var(--intro-corpo,980ms) cubic-bezier(.22,.68,.28,1) both;
  will-change:transform, opacity;
}
@keyframes corpoSaindo{
  0%  {opacity:0; transform:translateY(-7%) scale(.70) rotate(-3.2deg)}
  30% {opacity:1}
  55% {transform:translateY(0) scale(1.035) rotate(1.5deg)}
  78% {transform:translateY(0) scale(.995) rotate(-.65deg)}
  92% {transform:translateY(0) scale(1.004) rotate(.22deg)}
  100%{opacity:1; transform:none}
}

/* a capa só some depois que as portas já saíram do caminho */
.intro.intro--saindo{
  transition:opacity .25s linear .5s;
  opacity:0;
  pointer-events:none;
}

/* enquanto a capa está de pé, a página atrás não rola */
body.intro-travada{overflow:hidden}

@media (max-width:600px){
  .intro-centro{bottom:13%}
  .intro-veu{height:56%}
}

@media (prefers-reduced-motion:reduce){
  .intro.intro--saindo{transition:none}
  .intro-q{transition:none}
  .intro.intro--mergulho .intro-camera,
  .intro.intro--portas .intro-porta{transition:none; transform:none}
  .site-corpo.corpo--saindo{animation:none}
}