/* Os cinco passos em origami: a série que se monta quando entra na tela (homologacao/componentes/passos-origami;
   AX-0160, AX-0158, crítica G4 e G4-2). Soma-se ao CSS .pas* da home: o que de lá precisa mudar está sobrescrito aqui,
   sob [data-po].

   Repouso (sem script, movimento reduzido, impressão, longe da tela): cada disco mostra a cena completa do passo
   (.po__cena), o fio vermelho desenhado, a volta tracejada e "a cada ciclo, nova leitura" à vista, as legendas sempre.
   A cena fica à vista também durante a entrada: nenhum disco fica vazio.
   Estados que passos.js põe, só perto da tela e fora dela:
     .po.po-montado       por cima da cena, a camada de chegada: a peça do próprio passo em versão clara (no 4, sem a
                          fita vermelha); as peças cheias, escondidas;
     .po.po-vai           as peças sobem em cor cheia, cada uma com o seu atraso (--t) e duração (--dur), e a chegada
                          some quando a última assenta;
     .po.po-luz           uma luz passa pelas peças da cor do passo (no laço, quando a leitura para embaixo);
     .pas.po-via-armada   só o fio vermelho por desenhar (a conta o desenha); a volta e o rótulo do ciclo ficam à vista.
   Peças: cada <i class="po__p"> recorta o atlas pecas.webp (--bp, --bs) numa caixa do quadro de 1200 (--x, --y, --w,
   --h, em %). Movimentos: sobe (aparece a 1,15 vez, um pouco acima, e assenta no lugar), lupa (o mesmo, girando pelo
   cabo), pousa (cai já opaca de 55% da própria altura, achata no contato e assenta), fio (o vermelho se revela a partir
   da roseta) e some (a camada de chegada sai).
   O atlas está em caminho relativo a este arquivo: copiado para outra pasta, vai junto (e com o nome que o url() diz). */

/* --- o que a home tinha de entrada da série (objetos, legendas e traço escondidos até .play) deixa de valer --- */
.pas[data-po] .pas__obj,.pas[data-po] .pas__rot{opacity:1;transform:translateZ(0);transition:none}
.pas[data-po] .pas__caminho,.pas[data-po].play .pas__caminho{stroke-dashoffset:0;transition:none}
.pas[data-po] .pas__volta,.pas[data-po] .pas__seta,.pas[data-po].play .pas__volta,.pas[data-po].play .pas__seta{opacity:.7;transition:none}
.pas[data-po] .pas__ciclo,.pas[data-po].play .pas__ciclo{opacity:1;transition:none}
.pas[data-po] .pas__retorno,.pas[data-po].play .pas__retorno{opacity:1;transition:none}
.pas[data-po].po-via-armada .pas__caminho{stroke-dashoffset:1}

/* --- o disco: a mesma caixa da <img class="pas__obj"> de hoje --- */
.po{display:block;aspect-ratio:1/1;max-width:100%}   /* como a <img>: no celular a coluna de 96 px corta a caixa de 104 */
.po__q,.po__cena,.po__anim,.po__novo{position:absolute;inset:0;display:block;width:100%;height:100%}
.po__anim{display:none}
.po.po-montado .po__anim{display:block}
.po__p{position:absolute;display:block;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);
  background:url(passos-origami-pecas-g6.webp) var(--bp)/var(--bs) no-repeat;transform-origin:var(--o);opacity:0}
.po__p--some{opacity:1}
.po.po-vai .po__p{animation:po-sobe var(--dur) cubic-bezier(.2,.7,.25,1) var(--t) both}
.po.po-vai .po__p--lupa{animation-name:po-lupa}
.po.po-vai .po__p--pousa{animation-name:po-pousa;animation-timing-function:linear}
.po.po-vai .po__p--fio{animation-name:po-fio;animation-timing-function:cubic-bezier(.35,.55,.35,1)}
.po.po-vai .po__p--some{animation-name:po-some;animation-timing-function:linear}
.po__p--fio{transform-origin:var(--no)}
.po__conta{fill:#DB1E2F;opacity:0;pointer-events:none}
.po__aux{fill:none;stroke:none}

/* aparece a 1,15 vez, um pouco acima do lugar, por cima da versão clara, e assenta */
@keyframes po-sobe{
  0%{opacity:0;transform:translateY(-8%) scale(1.15)}
  35%{opacity:1;transform:translateY(-8%) scale(1.15)}
  80%{transform:translateY(1%) scale(.985)}
  100%{opacity:1;transform:none}
}
/* a lupa: o mesmo, girando um pouco pelo cabo */
@keyframes po-lupa{
  0%{opacity:0;transform:rotate(-10deg) scale(1.15)}
  35%{opacity:1;transform:rotate(-10deg) scale(1.15)}
  80%{transform:rotate(1.5deg) scale(.985)}
  100%{opacity:1;transform:none}
}
/* cai já opaca de --cai (55% da própria altura) a 1,15 vez, achata no contato e assenta no tamanho */
@keyframes po-pousa{
  0%{opacity:0;transform:translateY(var(--cai)) scale(1.15);animation-timing-function:cubic-bezier(.55,0,.9,.55)}
  5%{opacity:1}
  50%{transform:translateY(0) scale(1.22,1.02);animation-timing-function:cubic-bezier(.2,.8,.35,1)}
  72%{transform:translateY(-4%) scale(1.03,1.06);animation-timing-function:cubic-bezier(.5,0,.6,1)}
  88%{transform:translateY(0) scale(1.01,.99)}
  100%{opacity:1;transform:none}
}
/* o vermelho nasce na roseta: a fita sobe até a etiqueta e os fios correm até as telas; cresce a partir dela e assenta */
@keyframes po-fio{
  0%{opacity:1;clip-path:circle(0% at var(--no));transform:scale(1.15)}
  70%{clip-path:circle(150% at var(--no));transform:scale(1.15)}
  100%{opacity:1;clip-path:circle(150% at var(--no));transform:none}
}
/* a camada de chegada sai quando as peças cheias já cobrem o lugar delas */
@keyframes po-some{0%{opacity:1}100%{opacity:0}}

/* a luz que passa pelo papel (no laço): uma faixa clara recortada pela própria peça, só nas peças da cor do passo */
.po.po-luz .po__p--cor::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  background:linear-gradient(105deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 66%) 130% 0/280% 100% no-repeat;
  -webkit-mask:url(passos-origami-pecas-g6.webp) var(--bp)/var(--bs) no-repeat;
  mask:url(passos-origami-pecas-g6.webp) var(--bp)/var(--bs) no-repeat;
  animation:po-luz .6s ease-in-out both}
@keyframes po-luz{0%{opacity:0;background-position:130% 0}18%{opacity:1}82%{opacity:1}100%{opacity:0;background-position:-30% 0}}

/* --- celular: o quadro de 132 px recortado no centro da caixa (96×132 na coluna da lista), como o object-fit:cover de
   hoje; "a cada ciclo, nova leitura" deitado, ao pé do colchete, logo abaixo do disco 5 e alinhado com ele, a 13 px
   (crítica G4-2, item 4); o colchete desce até a linha do rótulo e continua subindo até a seta do disco 2 --- */
@media screen and (max-width:700px){
  .pas__item:nth-child(n)>.po{overflow:hidden;aspect-ratio:auto}
  .po__q{left:50%;right:auto;width:132px;margin-left:-66px}
  .pas[data-po]{padding-bottom:30px}
  .pas[data-po] .pas__ciclo{writing-mode:horizontal-tb;transform:none;left:28px;top:auto;bottom:4px;width:auto;height:auto;
    font-size:13px;line-height:18px;text-align:left;white-space:nowrap}
  .pas[data-po] .pas__retorno{height:auto;bottom:13px}
}

/* --- sem movimento e na impressão: a cena completa, sempre --- */
@media (prefers-reduced-motion:reduce){
  .po__anim,.po__conta{display:none!important}
  .pas[data-po] .pas__caminho{stroke-dashoffset:0!important}
  .pas[data-po] .pas__volta,.pas[data-po] .pas__seta{opacity:.7!important}
  .pas[data-po] .pas__ciclo,.pas[data-po] .pas__retorno{opacity:1!important}
}
@media print{
  .po__anim,.po__conta{display:none!important}
  .pas[data-po] .pas__caminho{stroke-dashoffset:0!important}
  .pas[data-po] .pas__volta,.pas[data-po] .pas__seta{opacity:.7!important}
  .pas[data-po] .pas__ciclo,.pas[data-po] .pas__retorno{opacity:1!important}
}