/* ============================================================
   POST TV — Virada de página do leitor de PDF
   Jornal Enfoque Popular (archive-edicao.php) e publicações
   legais (archive-publicacao-legal.php). Acompanha
   assets/js/jornal.js.

   Como funciona: o carrossel em translateX continua sendo a
   posição real da leitura. Quando o leitor troca para uma
   página vizinha, o JS move o carrossel na hora (sem
   transição) e cobre o palco com esta camada, que traz os
   MESMOS canvas já desenhados — nada é redesenhado só para
   animar.

   A virada tem duas metades, cada uma de 90°, com a lombada
   na borda esquerda (avançar) ou direita (voltar):

     1ª metade — a folha que sai dobra até ficar de perfil
                 (rotateY 0 → ∓90°), levantando na direção
                 do leitor;
     2ª metade — a folha que entra se desdobra de perfil até
                 deitar no lugar (rotateY ±90° → 0).

   Nos 90° as duas folhas são um risco de espessura zero, por
   isso a emenda entre as metades não aparece.
   ============================================================ */

.jornal{
  /* Duração de cada metade da virada. O JS lê estes valores
     daqui — mexer no tempo é mexer só nesta folha. */
  --jornal-fase:260ms;
  /* Quanto a segunda metade começa antes de a primeira acabar:
     evita o piscar de um quadro vazio na emenda. */
  --jornal-emenda:40ms;
  /* Distância do olho ao papel. Quanto menor, mais dramática a
     dobra — e mais deformados os cantos de uma página alta. */
  --jornal-perspectiva:2000px;
}

/* A camada da virada precisa se prender ao palco, senão o
   recorte de .jornal__stage não a segura e a folha dobrada
   escapa para fora, criando rolagem horizontal no celular.
   (Regra aditiva: .jornal__stage vive no style.css.) */
.jornal__stage{position:relative;}

/* ---------- camada da virada ---------- */

.jornal__virada{
  display:none;
  position:absolute;
  inset:0;
  place-items:center;
  perspective:var(--jornal-perspectiva);
  /* O leitor continua arrastando e clicando através dela. */
  pointer-events:none;
  z-index:4;
}

/* Só existe enquanto a página vira: fora disso não custa pintura. */
.jornal.is-virando .jornal__virada{display:grid;}

.jornal__folha{
  /* As duas folhas ocupam a mesma célula, centradas uma sobre
     a outra e do tamanho exato do canvas. */
  grid-area:1/1;
  position:relative;
  backface-visibility:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
}

.jornal.is-virando .jornal__folha{will-change:transform;}

.jornal__folha canvas{
  display:block;
  background:#fff;
}

/* Sombra que acompanha o ângulo: a folha que sai vai escurecendo
   da lombada para a borda solta; a que entra nasce escura junto
   da lombada, como quem estava por baixo, e clareia ao deitar. */
.jornal__sombra{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

/* ---------- lombada à esquerda: avançar ---------- */

.jornal__virada--frente .jornal__folha{transform-origin:0% 50%;}

.jornal__virada--frente .jornal__folha--sai .jornal__sombra{
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.62));
}
.jornal__virada--frente .jornal__folha--entra .jornal__sombra{
  background:linear-gradient(to right, rgba(0,0,0,.78), rgba(0,0,0,0) 62%);
}

/* ---------- lombada à direita: voltar ---------- */

.jornal__virada--tras .jornal__folha{transform-origin:100% 50%;}

.jornal__virada--tras .jornal__folha--sai .jornal__sombra{
  background:linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.62));
}
.jornal__virada--tras .jornal__folha--entra .jornal__sombra{
  background:linear-gradient(to left, rgba(0,0,0,.78), rgba(0,0,0,0) 62%);
}

/* ---------- tempo das duas metades ---------- */

/* Sai acelerando, como papel que é puxado. */
.jornal.is-virando .jornal__folha--sai,
.jornal.is-virando .jornal__folha--sai .jornal__sombra{
  transition:transform var(--jornal-fase) cubic-bezier(.5,.05,.85,.4),
             opacity var(--jornal-fase) linear;
}

/* Entra desacelerando e passa alguns graus da horizontal antes de
   assentar (o y>1 na curva) — é essa batidinha que dá o peso do
   papel. Espera a primeira metade quase terminar. */
.jornal.is-virando .jornal__folha--entra,
.jornal.is-virando .jornal__folha--entra .jornal__sombra{
  transition:transform var(--jornal-fase) cubic-bezier(.2,.85,.35,1.07)
             calc(var(--jornal-fase) - var(--jornal-emenda)),
             opacity var(--jornal-fase) linear
             calc(var(--jornal-fase) - var(--jornal-emenda));
}

/* ---------- celular ---------- */

@media (max-width:640px){
  .jornal{
    /* Mais curta: no celular o leitor folheia muito mais rápido. */
    --jornal-fase:210ms;
    /* O palco é estreito; com a perspectiva de mesa a dobra
       quase não apareceria. Não baixar muito daqui, senão os
       cantos de uma página alta e estreita entortam. */
    --jornal-perspectiva:1300px;
  }
}

/* ---------- quem pediu menos animação ---------- */

/* O JS já recusa a virada nesse caso e troca a página seca; esta
   regra é a garantia para o caso de a preferência mudar com uma
   virada no meio do caminho. */
@media (prefers-reduced-motion:reduce){
  .jornal.is-virando .jornal__virada{display:none;}
  .jornal__folha,
  .jornal__sombra{transition:none;}
}