/* Amiga Check: animacoes das telas de numeros (animacoes.js). So transform/opacity; estado final = o desenho normal. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--rosa:var(--p1);--roxo:var(--p2)}

/* entrada das telas e dos cartoes: titulo, depois numero, depois detalhe */
.nx-in{animation:nxIn .38s var(--ease-out) backwards}
@keyframes nxIn{from{opacity:0;transform:translateX(calc(var(--dir,1)*28px))}}
.nx-a{animation:nxRise .65s var(--ease-out) var(--dl,0ms) backwards}
@keyframes nxRise{from{opacity:0;transform:translateY(20px) scale(.97)}}

/* barras horizontais crescem em sequencia */
.nx-g{transform-origin:left center;animation:nxGrow 1s var(--ease-out) var(--dl,0ms) backwards}
@keyframes nxGrow{from{transform:scaleX(0)}}
/* barras verticais (horas, meses, dias da semana) sobem em onda */
.nx-sy{transform-origin:center bottom;animation:nxUp .8s var(--ease-out) var(--dl,0ms) backwards}
@keyframes nxUp{from{transform:scaleY(0)}}
.nx-gira{animation:nxSpin 1.1s var(--ease-out) var(--dl,0ms) backwards}
@keyframes nxSpin{from{opacity:0;transform:rotate(-140deg) scale(.4)}}
.nx-bola{animation:nxBola .55s cubic-bezier(.3,1.35,.5,1) var(--dl,0ms) backwards;transform-origin:bottom left}
.nx-bola.nx-r{transform-origin:bottom right}
@keyframes nxBola{from{opacity:0;transform:translateY(14px) scale(.7)}}

/* numero que choca: pulso ao fim da contagem; o maior da tela ganha marca-texto */
.nx-pulso{animation:nxPulso .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes nxPulso{40%{transform:scale(1.14)}}
.nx-big,.nx-pl b{transform-origin:left center}
.nx-marca{background:linear-gradient(transparent 80%,rgba(214,36,110,.75) 80%) no-repeat 0 0/100% 100%;animation:nxMarca .9s var(--ease-out) var(--dl,1400ms) backwards;padding:0 4px;margin:0 -4px}
@keyframes nxMarca{from{background-size:0 100%}}

/* horas: o pico acende */
.nx-h{position:relative}
.nx-pico i{background:linear-gradient(180deg,var(--p1),var(--p1-d))!important;box-shadow:0 0 14px rgba(214,36,110,.7)}
.nx-ptag{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font:800 10px/1 system-ui;font-style:normal;background:#14121f;color:#fff;padding:3px 5px;border-radius:6px;white-space:nowrap;animation:nxRise .5s var(--ease-out) var(--dl,0ms) backwards}
.nx-horas{margin-top:22px}
.nx-horas .nx-h i{background:linear-gradient(180deg,#e9c95a,#b99a2e)}
.nx-horas .nx-hn i{background:linear-gradient(180deg,#7a5c00,#4a3600)}

/* calendario: quadradinhos acendem em onda; o dia recorde pulsa */
.nx-cal .nx-c{transition:transform .15s}
.nx-c.nx-on{animation:nxPop .5s cubic-bezier(.3,1.5,.5,1) var(--dl,0ms) backwards}
@keyframes nxPop{from{opacity:0;transform:scale(.15)}}
.nx-c.nx-top{position:relative;z-index:1;box-shadow:0 0 0 2px #14121f,0 0 0 4px var(--p1),0 0 14px 3px rgba(214,36,110,.8);animation:nxPop .5s cubic-bezier(.3,1.5,.5,1) var(--dl,0ms) backwards,nxRing 2.4s ease-in-out calc(var(--dl,0ms) + 600ms) infinite}
@keyframes nxRing{50%{box-shadow:0 0 0 2px #14121f,0 0 0 5px var(--p1),0 0 20px 6px rgba(214,36,110,.55)}}
.nx-cleg{display:flex;align-items:center;gap:3px;justify-content:flex-end;margin-top:12px;font-size:10px;opacity:.85}
.nx-cleg span{margin:0 3px}.nx-cleg i{width:9px;height:9px;border-radius:2px;display:block}
.nx-cleg i:nth-of-type(1){background:#232845}.nx-cleg i:nth-of-type(2){background:rgb(150,130,66)}.nx-cleg i:nth-of-type(3){background:rgb(190,160,78)}.nx-cleg i:nth-of-type(4){background:rgb(225,190,90)}.nx-cleg i:nth-of-type(5){background:rgb(255,212,102)}

/* "A Amiga Check esta lendo a sua conversa" */
.le-anim{position:relative}
.le-anim::before{content:"";position:absolute;left:50%;top:78px;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(214,36,110,.26),rgba(157,92,242,.12) 55%,transparent 70%);animation:leGlow 2.6s ease-in-out infinite;pointer-events:none}
@keyframes leGlow{50%{transform:scale(1.22);opacity:.65}}
.le-num{font-size:58px;line-height:1.05;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.le-num .le-v{font-variant-numeric:tabular-nums;min-width:1ch}
.le-num small{font-size:19px;font-weight:700;letter-spacing:0;background:none;-webkit-text-fill-color:var(--mut);color:var(--mut)}
.le-pop{animation:nxPulso .6s cubic-bezier(.3,1.5,.5,1)}
.le-prog{width:min(300px,80%);height:8px;border-radius:99px;background:#ece7fa;overflow:hidden}
.le-prog i{display:block;height:100%;border-radius:99px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--rosa),var(--roxo))}
.le-ok .le-prog i{box-shadow:0 0 12px rgba(157,92,242,.7)}
.le-f{animation:leFrase .45s var(--ease-out) backwards}
@keyframes leFrase{from{opacity:0;transform:translateY(8px)}}

/* placar do veredito */
.divisao .dtrack i{border-right:2px solid #fff;transition-property:width;transition-timing-function:var(--ease-out)}
.divisao .dtrack i:last-child{border-right:0}
.divisao.dv-pre .dq,.divisao.dv-pre .dli,.divisao.dv-pre .dj{opacity:0;transform:translateY(14px)}
.divisao.dv-on .dq{animation:nxRise .6s var(--ease-out) backwards}
.divisao.dv-on .dli{animation:nxRise .6s var(--ease-out) backwards}
.divisao.dv-on .dli:nth-child(1){animation-delay:.3s}.divisao.dv-on .dli:nth-child(2){animation-delay:.7s}.divisao.dv-on .dli:nth-child(3){animation-delay:1.1s}.divisao.dv-on .dli:nth-child(4){animation-delay:1.5s}
.divisao.dv-on .dj{animation:nxRise .7s var(--ease-out) 1.9s backwards}
.divisao.dv-fim .dli.dv-lider b{animation:nxPulso .6s cubic-bezier(.3,1.5,.5,1)}
.divisao.dv-fim .dli.dv-lider b{font-size:40px}
.divisao.dv-fim .dtrack i.dv-lider{box-shadow:0 0 16px rgba(214,36,110,.55)}
.divisao .dli b{transition:font-size .3s}

/* painel de numeros do relatorio: cada bloco entra quando aparece; se o JS nao liberar em 4 s, o bloco aparece sozinho (nunca em branco) */
.nm-pre{opacity:0;transform:translateY(16px);animation:nmSeguro .01s linear 4s forwards}
@keyframes nmSeguro{to{opacity:1;transform:none}}
.nm-ent{animation:nxRise .6s var(--ease-out) backwards}

@media (prefers-reduced-motion:reduce){
  .nx-in,.nx-a,.nx-g,.nx-sy,.nx-gira,.nx-bola,.nx-pulso,.nx-marca,.nx-ptag,.nx-c.nx-on,.nx-c.nx-top,.le-anim::before,.le-pop,.le-f,
  .divisao *,.nums *{animation:none!important;transition:none!important}
  .nm-pre,.divisao.dv-pre *{opacity:1!important;transform:none!important}
}

/* celular: o painel de numeros e uma grade e o calendario por mes (min-width em px) alargava a coluna inteira (pagina com rolagem lateral) */
.nums>*{min-width:0}
@media(max-width:899px){.nums{grid-template-columns:minmax(0,1fr)}}