/* ═══════ RODADA 6 · movimento na página dos 13 aos 18 ═══════ */

/* os três cartões sobem em cascata */
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:m18Selo 5.5s ease-in-out infinite;
  animation-delay:calc(var(--k,0) * .4s + 1s)}
@keyframes m18Selo{
  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)}
}

/* a arte de cada cartão */
.fnt-art .m18{width:100%;max-width:190px;height:auto;display:block;position:relative;z-index:1}

/* 1 · os cinco níveis acendem do branco ao diamante */
.lv1{fill:#CBD5E1}.lv2{fill:#C2410C}.lv3{fill:#94A3B8}.lv4{fill:#F59E0B}.lv5{fill:#22D3EE}
.lv{opacity:.22;transform-box:fill-box;transform-origin:bottom}
html.js .fontes.in .lv{animation:m18Nivel 5s ease-in-out infinite}
.lv2{animation-delay:.22s}.lv3{animation-delay:.44s}
.lv4{animation-delay:.66s}.lv5{animation-delay:.88s}
@keyframes m18Nivel{
  0%,62%,100%{opacity:.22;transform:scaleY(.82)}
  18%,52%{opacity:1;transform:scaleY(1)}
}
html.js .fontes.in .m18-rot{animation:m18Rot 5s ease-in-out infinite}
@keyframes m18Rot{0%,100%{width:62px}50%{width:104px}}

/* 2 · XP e L$ flutuam em contratempo e nunca se encostam */
html.js .fontes.in .tk{transform-box:fill-box;transform-origin:center;
  animation:m18Ficha 4.6s ease-in-out infinite}
.tk-ls{animation-delay:-2.3s}
@keyframes m18Ficha{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
html.js .fontes.in .m18-x{animation:m18Nao 4.6s ease-in-out infinite}
@keyframes m18Nao{0%,100%{opacity:.25}50%{opacity:.85}}

/* 3 · a carteira da Mesa redistribui o L$ */
.ms{transform-box:fill-box;transform-origin:left}
html.js .fontes.in .ms{animation:m18Mesa 6s ease-in-out infinite}
.ms2{animation-delay:-2s}.ms3{animation-delay:-4s}
@keyframes m18Mesa{
  0%,100%{transform:scaleX(.42)}
  33%{transform:scaleX(.86)}
  66%{transform:scaleX(.58)}
}

/* os pares de "o que 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}
html.js .contra .contra-c{border-color:var(--stage-line)}
html.js .contra.in .contra-sim{animation:m18Sim 6s ease-in-out infinite;animation-delay:1.4s}
@keyframes m18Sim{
  0%,80%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}
  90%{box-shadow:0 0 18px 0 rgba(249,115,22,.28)}
}

@media (prefers-reduced-motion:reduce){
  html.js .fontes.in .fnt-n,html.js .fontes.in .lv,html.js .fontes.in .m18-rot,
  html.js .fontes.in .tk,html.js .fontes.in .m18-x,html.js .fontes.in .ms,
  html.js .contra.in .contra-sim{animation:none}
  html.js .fontes .fnt,html.js .contra .contra-c{opacity:1;transform:none;transition:none}
  .lv{opacity:1}
  .ms{transform:scaleX(.62)}
}


/* ═══════ RODADA 7 · o herói dos 13 aos 18 se mexe ═══════ */
.h18 svg{overflow:visible}
.h18-card,.h18-b,.h18-tag,.h18-p,.h18-ponta,.h18-val{transform-box:fill-box}

/* o cartão inteiro boia devagar */
html.js .h18-card{transform-origin:center;animation:h18Boia 7s ease-in-out infinite}
@keyframes h18Boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* as seis barras respiram em cascata */
html.js .h18-b{transform-origin:bottom;animation:h18Barra 6s ease-in-out infinite}
.b2{animation-delay:.16s}.b3{animation-delay:.32s}
.b4{animation-delay:.48s}.b5{animation-delay:.64s}.b6{animation-delay:.8s}
@keyframes h18Barra{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* a linha do resultado se redesenha a cada volta */
html.js .h18-linha{stroke-dasharray:340;stroke-dashoffset:340;
  animation:h18Risca 6s ease-in-out infinite}
@keyframes h18Risca{
  0%{stroke-dashoffset:340}
  46%,78%{stroke-dashoffset:0}
  100%{stroke-dashoffset:340}
}

/* os pontos acendem na ordem, junto com a linha */
html.js .h18-p{opacity:0;transform-origin:center;animation:h18Ponto 6s ease-in-out infinite}
.p1{animation-delay:.5s}.p2{animation-delay:1.1s}.p3{animation-delay:1.7s}
.p4{animation-delay:2.3s}.p5{animation-delay:2.8s}
@keyframes h18Ponto{0%{opacity:0;transform:scale(.4)}8%,68%{opacity:1;transform:scale(1)}
  80%,100%{opacity:0;transform:scale(.4)}}

/* a última ponta chega e pulsa */
html.js .h18-ponta{opacity:0;transform-origin:center;animation:h18Ponta 6s ease-in-out infinite}
@keyframes h18Ponta{
  0%,44%{opacity:0;transform:scale(.3)}
  52%{opacity:1;transform:scale(1.45)}
  60%,74%{opacity:1;transform:scale(1)}
  86%,100%{opacity:0;transform:scale(.3)}
}

/* a etiqueta laranja e o valor do canto acompanham */
html.js .h18-tag{transform-origin:left center;animation:h18Tag 6s ease-in-out infinite}
@keyframes h18Tag{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.28)}}
html.js .h18-val{transform-origin:left center;animation:h18Val 6s ease-in-out infinite}
@keyframes h18Val{0%,100%{transform:scaleX(.55);opacity:.4}52%{transform:scaleX(1);opacity:.85}}

@media (prefers-reduced-motion:reduce){
  html.js .h18-card,html.js .h18-b,html.js .h18-linha,html.js .h18-p,
  html.js .h18-ponta,html.js .h18-tag,html.js .h18-val{animation:none}
  html.js .h18-linha{stroke-dashoffset:0}
  html.js .h18-p,html.js .h18-ponta{opacity:1}
}