/* ═══════ RODADA 5 · movimento na página dos 6 aos 12 ═══════ */

/* os cubos do herói flutuam por trás do Save e do Play */
.phead-art .cubos-flut{z-index:0;overflow:visible}
.phead-art .cubos-flut .fc{opacity:.5}

/* o Play que carrega o cubo respira */
html.js .expl-art img{animation:m13Boia 7s ease-in-out infinite}
@keyframes m13Boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* os três fatos entram um a um, e o quadradinho pulsa */
html.js .expl .fatos li{opacity:0;transform:translateX(-14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--f,0) * .13s + .2s)}
html.js .expl.in .fatos li{opacity:1;transform:none}
html.js .expl.in .fatos li::before{animation:m13Ponto 6s ease-in-out infinite;
  animation-delay:calc(var(--f,0) * .5s + 1.2s)}
@keyframes m13Ponto{
  0%,74%,100%{transform:scale(1);box-shadow:0 0 0 4px rgba(249,115,22,.16)}
  84%{transform:scale(1.22);box-shadow:0 0 0 9px rgba(249,115,22,.05)}
}

/* os dois cartões de como conquistar cubos */
html.js .fontes.rv{opacity:1;transform:none;transition:none}
html.js .fontes .fnt{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .25s var(--ease);
  transition-delay:calc(var(--k,0) * .14s)}
html.js .fontes.in .fnt{opacity:1;transform:none}
html.js .fontes .fnt:hover{transition-delay:0s;transform:translateY(-6px)}
html.js .fontes.in .fnt-n{animation:m13Selo 5.5s ease-in-out infinite;
  animation-delay:calc(var(--k,0) * .4s + 1s)}
@keyframes m13Selo{
  0%,70%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(249,115,22,0)}
  80%{transform:scale(1.16);box-shadow:0 0 0 8px rgba(249,115,22,.18)}
}
html.js .fontes.in .fnt-art::before{animation:m13Aura 8s ease-in-out infinite}
@keyframes m13Aura{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}
html.js .fontes .fnt-art img{transition:transform .45s var(--ease)}
html.js .fontes .fnt:hover .fnt-art img{transform:translateY(-6px) scale(1.04)}

/* o quadro de exemplo, com a borda que respira e o número que acende */
html.js .exemplo{animation:m13Borda 4.5s ease-in-out infinite}
@keyframes m13Borda{
  0%,100%{border-color:rgba(249,115,22,.38)}
  50%{border-color:rgba(249,115,22,.85)}
}
html.js .exemplo-ico{animation:m13Ico 4.5s ease-in-out infinite}
@keyframes m13Ico{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
html.js .exemplo strong{display:inline-block;animation:m13Num 4.5s ease-in-out infinite}
@keyframes m13Num{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* os três passos entram em cascata e o número flutua */
html.js .passos.rv{opacity:1;transform:none;transition:none}
html.js .passos .pss{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
             border-color .25s var(--ease),box-shadow .25s var(--ease);
  transition-delay:calc(var(--p,0) * .14s)}
html.js .passos.in .pss{opacity:1;transform:none}
html.js .passos .pss:hover{transition-delay:0s;transform:translateY(-6px);
  border-color:var(--orange);box-shadow:0 16px 34px rgba(42,30,143,.16)}
html.js .passos.in .pss-n{display:inline-block;animation:m13Passo 6s ease-in-out infinite;
  animation-delay:calc(var(--p,0) * .6s)}
@keyframes m13Passo{
  0%,100%{transform:translateY(0);color:rgba(67,56,202,.22)}
  50%{transform:translateY(-5px);color:rgba(249,115,22,.55)}
}

/* os pares do que existe e do que não existe chegam pelos lados */
html.js .contra.rv{opacity:1;transform:none;transition:none}
html.js .contra .contra-c{opacity:0;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .contra .contra-nao{transform:translateX(-20px)}
html.js .contra .contra-sim{transform:translateX(20px);transition-delay:.1s}
html.js .contra.in .contra-c{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .expl-art img,
  html.js .expl.in .fatos li::before,
  html.js .fontes.in .fnt-n,
  html.js .fontes.in .fnt-art::before,
  html.js .exemplo,html.js .exemplo-ico,html.js .exemplo strong,
  html.js .passos.in .pss-n{animation:none}
  html.js .expl .fatos li,
  html.js .fontes .fnt,
  html.js .passos .pss,
  html.js .contra .contra-c{opacity:1;transform:none;transition:none}
}

.sim-acoes .acao{position:relative}

/* ═════════ O CONVITE DO SIMULADOR ═════════
   O bloco pedia "toque nas ações" e nada na tela pedia junto. A primeira ação
   pulsa com um anel laranja ate o primeiro toque, e para para sempre depois
   dele: convite que insiste depois de aceito vira ruido. */
.sim-acoes.convite .acao:first-child{
  animation:simConvite 2.6s var(--ease) infinite;
  border-color:var(--orange)
}
.sim-acoes.convite .acao:first-child::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  border:2px solid var(--orange);opacity:0;
  animation:simAnel 2.6s var(--ease) infinite
}
.sim-acoes.convite .acao:first-child .acao-ico{
  animation:simIco 2.6s var(--ease) infinite
}
@keyframes simConvite{
  0%,62%,100%{transform:translateX(0)}
  70%{transform:translateX(6px)}
  78%{transform:translateX(2px)}
}
@keyframes simAnel{
  0%,55%{opacity:0;transform:scale(1)}
  68%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.10)}
}
@keyframes simIco{
  0%,60%,100%{transform:scale(1)}
  70%{transform:scale(1.16)}
}
@media (prefers-reduced-motion:reduce){
  .sim-acoes.convite .acao:first-child,
  .sim-acoes.convite .acao:first-child::after,
  .sim-acoes.convite .acao:first-child .acao-ico{animation:none}
  .sim-acoes.convite .acao:first-child{border-color:var(--orange)}
}

/* respiro do herói */
.phead{padding-bottom:clamp(18px,2.2vw,28px)}