/* MP Fit · arte das insígnias (SAGGA · Kai). Sem dependências: as fontes vêm embutidas no insignias-arte.js.
   Animações só em transform e opacity. Respeita prefers-reduced-motion. */

/* ---------- insígnia ---------- */
.mpi{position:relative;display:block;width:100%;aspect-ratio:1/1;isolation:isolate;-webkit-user-select:none;user-select:none}
.mpi>svg,.mpi-brilho{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.mpi-svg{z-index:1;overflow:visible}
.mpi-halo{position:absolute;inset:-16%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,106,19,.62),rgba(255,106,19,.2) 52%,rgba(255,106,19,0));
  animation:mpi-pulso 2.6s ease-in-out infinite;will-change:opacity,transform}
.mpi-aro{z-index:2;opacity:0;pointer-events:none;overflow:visible}
.mpi--neon .mpi-aro{opacity:.55;animation:mpi-aro 2.6s ease-in-out infinite;will-change:opacity}
.mpi-brilho{z-index:3;overflow:hidden;pointer-events:none}
.mpi-brilho i{position:absolute;top:0;bottom:0;left:0;width:42%;opacity:0;transform:translateX(-130%) skewX(-14deg);
  background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.12) 60%,rgba(255,255,255,0) 82%)}
.mpi:hover .mpi-brilho i,.mpi--brilhar .mpi-brilho i{animation:mpi-brilho 1.05s cubic-bezier(.3,.6,.3,1)}
.mpi--neon .mpi-brilho i{animation:mpi-brilho-loop 6s ease-in-out 1.2s infinite}
.mpi--bloq .mpi-svg{filter:none}

@keyframes mpi-pulso{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@keyframes mpi-aro{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes mpi-brilho{0%{opacity:1;transform:translateX(-130%) skewX(-14deg)}100%{opacity:1;transform:translateX(330%) skewX(-14deg)}}
@keyframes mpi-brilho-loop{0%{opacity:1;transform:translateX(-130%) skewX(-14deg)}18%{opacity:1;transform:translateX(330%) skewX(-14deg)}18.1%,100%{opacity:0;transform:translateX(330%) skewX(-14deg)}}

/* ---------- celebração ---------- */
.mpic{position:fixed;inset:0;z-index:2147483000;overflow:hidden;color:#f5f5f6;font-family:'MPI Sans','Barlow',system-ui,sans-serif;
  --b:min(68vw,340px,40vh);--lc:#ffd84a;-webkit-tap-highlight-color:transparent}
.mpic--bronze{--lc:#ffa25c}.mpic--prata{--lc:#dff2ff}.mpic--ouro{--lc:#ffd84a}.mpic--neon{--lc:#ff6a13}
.mpic-fundo{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#170c05,#040405 70%);animation:mpic-in .4s ease both}
.mpic-brasas{position:absolute;inset:0;pointer-events:none}
.mpic-brasa{position:absolute;left:var(--x);bottom:-12px;width:6px;height:6px;border-radius:50%;background:#ff8a3d;box-shadow:0 0 10px 2px rgba(255,106,19,.8);
  opacity:0;transform:scale(var(--s));animation:mpic-brasa var(--d) linear var(--dl) infinite}
.mpic-conteudo{position:relative;z-index:1;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:max(28px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));text-align:center}
.mpic-col{margin:auto;display:flex;flex-direction:column;align-items:center;max-width:560px;width:100%}
.mpic-palco{position:relative;width:var(--b);height:var(--b);perspective:1000px;margin:6px 0 22px}
.mpic-luz{position:absolute;left:50%;top:50%;width:260%;height:260%;margin:-130% 0 0 -130%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,106,19,.42),rgba(255,106,19,.12) 45%,rgba(255,106,19,0));opacity:0;animation:mpic-in .9s ease 1.25s both}
.mpic-raios{position:absolute;left:50%;top:50%;width:250%;height:250%;margin:-125% 0 0 -125%;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,150,70,.13) 0deg 5deg,rgba(255,150,70,0) 5deg 15deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 35%,transparent 70%);mask-image:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 35%,transparent 70%);
  opacity:0;animation:mpic-in 1s ease 1.3s both,mpic-rot-in 3.2s cubic-bezier(.2,.7,.3,1) 1.3s both}
.mpic-parts{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.mpic-p{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px;background:var(--c);opacity:0;border-radius:1.5px;
  animation:mpic-p var(--d) cubic-bezier(.12,.75,.3,1) var(--dl) both}
.mpic-p--r{width:4px;height:13px;margin:-6.5px -2px}
.mpic-p--c{width:6px;height:6px;margin:-3px;border-radius:50%;box-shadow:0 0 10px 2px var(--c)}
.mpic-onda{position:absolute;inset:4%;border-radius:50%;border:3px solid var(--lc);box-shadow:0 0 30px var(--lc),inset 0 0 24px var(--lc);opacity:0;pointer-events:none;
  animation:mpic-onda 1.1s cubic-bezier(.2,.7,.3,1) 1.32s both}
.mpic-onda--2{animation-delay:1.55s;border-width:2px}
.mpic-flutua{position:absolute;inset:0;transform-style:preserve-3d;animation:mpic-flutua 5s ease-in-out 1.95s infinite;z-index:2}
.mpic-gira{position:absolute;inset:0;transform-style:preserve-3d;animation:mpic-gira 1.55s cubic-bezier(.14,.82,.22,1) .2s both}
.mpic-frente{position:absolute;inset:0;transform:translateZ(1px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mpic-esp{position:absolute;inset:0;transform:translateZ(calc(var(--z) * -1.5px));
  background:linear-gradient(90deg,var(--e1),var(--e2) 45%,var(--e1))}
.mpic--bronze .mpic-esp{--e1:#3a1c0a;--e2:#b8743f}.mpic--prata .mpic-esp{--e1:#3b4049;--e2:#e9eef3}
.mpic--ouro .mpic-esp{--e1:#5a3c03;--e2:#ffd75a}.mpic--neon .mpic-esp{--e1:#000;--e2:#3a2416}
.mpic-verso{position:absolute;inset:0;display:grid;place-items:center;transform:translateZ(-11px) rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:radial-gradient(circle at 40% 30%,var(--e2),var(--e1) 75%)}
.mpic-verso img{width:46%;height:auto;opacity:.9}
.mpic--neon .mpic-verso{background:radial-gradient(circle at 40% 30%,#2a2a32,#050506 75%)}
.mpic .mpi-aro{animation:mpic-acende 1.3s ease 1.32s both}
.mpic--neon .mpi-aro{animation:mpic-acende 1.3s ease 1.32s both,mpi-aro 2.6s ease-in-out 2.7s infinite}
.mpic .mpi-brilho i{animation:mpi-brilho 1.1s cubic-bezier(.3,.6,.3,1) 1.75s both}
.mpic--neon .mpi-brilho i{animation:mpi-brilho 1.1s cubic-bezier(.3,.6,.3,1) 1.75s both}
.mpic .mpi-halo{animation:mpic-in .8s ease 1.3s both,mpi-pulso 2.6s ease-in-out 2.2s infinite}

.mpic-kicker,.mpic-titulo,.mpic-frase,.mpic-nivel,.mpic-acoes{animation:mpic-sobe .6s cubic-bezier(.2,.75,.2,1) both}
.mpic-kicker{margin:0 0 10px;font-weight:700;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#ff8a3d;animation-delay:1.05s}
.mpic-titulo{margin:0;font-family:'MPI Cond','Barlow Condensed','Arial Narrow',sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,9vw,60px);line-height:.92;letter-spacing:.005em;color:#fff;text-shadow:0 4px 30px rgba(255,106,19,.35);animation-delay:1.2s;overflow-wrap:anywhere}
.mpic-frase{margin:12px 0 0;font-size:clamp(15px,4.2vw,18px);line-height:1.4;color:#d4d4da;max-width:30ch;animation-delay:1.35s}
.mpic-nivel{margin:18px 0 0;display:inline-flex;align-items:center;gap:7px;padding:7px 16px 6px;border-radius:999px;font-family:'MPI Cond','Barlow Condensed',sans-serif;font-style:italic;font-weight:800;
  font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:#1a0c03;animation-delay:1.5s}
.mpic-nivel span{opacity:.7;font-size:15px}
.mpic--bronze .mpic-nivel{background:linear-gradient(#f6c79c,#a35c2b)}
.mpic--prata .mpic-nivel{background:linear-gradient(#fff,#9aa4b1)}
.mpic--ouro .mpic-nivel{background:linear-gradient(#fff3b0,#c28a0e)}
.mpic--neon .mpic-nivel{background:#0b0b0d;color:#ffb37a;box-shadow:0 0 0 2px #ff6a13,0 0 26px rgba(255,106,19,.65)}
.mpic-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;width:100%;animation-delay:1.7s}
.mpic-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 22px;border-radius:15px;border:1.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:#fff;font:italic 800 19px/1 'MPI Cond','Barlow Condensed',sans-serif;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;
  transition:transform .15s ease,opacity .15s ease;flex:1 1 240px;max-width:340px;white-space:nowrap}
.mpic-btn:active{transform:scale(.97)}
.mpic-btn[disabled]{opacity:.6}
.mpic-btn--pri{background:#ff6a13;border-color:#ff6a13;color:#140600;box-shadow:0 10px 34px -10px rgba(255,106,19,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.mpic-btn:focus-visible,.mpic-x:focus-visible{outline:3px solid #ffb37a;outline-offset:3px}
.mpic-x{position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));right:12px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;animation:mpic-in .4s ease .6s both}
.mpic--saindo{animation:mpic-out .25s ease both}

@keyframes mpic-in{from{opacity:0}to{opacity:1}}
@keyframes mpic-out{from{opacity:1}to{opacity:0}}
@keyframes mpic-rot-in{from{transform:rotate(-50deg) scale(.7)}to{transform:none}}
@keyframes mpic-gira{0%{opacity:0;transform:translateY(40px) rotateY(-900deg) scale(.12)}14%{opacity:1}78%{transform:translateY(0) rotateY(-8deg) scale(1.06)}100%{opacity:1;transform:translateY(0) rotateY(0) scale(1)}}
@keyframes mpic-flutua{0%,100%{transform:translateY(0) rotateY(-9deg) rotateX(2deg)}50%{transform:translateY(-9px) rotateY(9deg) rotateX(-2deg)}}
@keyframes mpic-p{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.3)}65%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rz)) scale(1)}}
@keyframes mpic-onda{0%{opacity:0;transform:scale(.55)}15%{opacity:1}100%{opacity:0;transform:scale(2.1)}}
@keyframes mpic-acende{0%{opacity:0}35%{opacity:1}100%{opacity:.6}}
@keyframes mpic-sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mpic-brasa{0%{opacity:0;transform:translateY(0) scale(var(--s))}10%{opacity:.9}100%{opacity:0;transform:translateY(-105vh) scale(var(--s))}}

@media (max-height:640px){.mpic{--b:min(52vw,220px,34vh)}.mpic-acoes{margin-top:16px}}

/* com a celebração aberta, as insígnias da página ficam paradas (economiza bateria e GPU) */
.mpic-aberta .mpi-halo,.mpic-aberta .mpi-aro,.mpic-aberta .mpi-brilho i{animation-play-state:paused}
.mpic-aberta .mpic .mpi-halo,.mpic-aberta .mpic .mpi-aro,.mpic-aberta .mpic .mpi-brilho i{animation-play-state:running}

/* movimento reduzido: sem giro, sem partículas, sem pulsos */
.mpic--calmo .mpic-raios,.mpic--calmo .mpic-parts,.mpic--calmo .mpic-brasas,.mpic--calmo .mpic-onda,.mpic--calmo .mpic-esp,.mpic--calmo .mpic-verso{display:none}
.mpic--calmo *,.mpic--calmo{animation-duration:.2s!important;animation-delay:0s!important;animation-iteration-count:1!important}
.mpic--calmo .mpic-gira,.mpic--calmo .mpic-flutua{animation:mpic-in .2s ease both!important}
.mpic--calmo .mpi-aro{animation:none!important;opacity:.6}
.mpic--calmo .mpi-brilho i{animation:none!important}
.mpic--calmo .mpic-luz{animation:none!important;opacity:1}
@media (prefers-reduced-motion:reduce){
  .mpi-halo,.mpi-aro,.mpi-brilho i{animation:none!important}
  .mpi--neon .mpi-aro{opacity:.7}
  .mpi-halo{opacity:.8}
}