/* Badges, popupen och firandet när man får en ny. Laddas bara av sidor som
   visar badges. Badgesen är ett undantag från färgregeln och från regeln om
   rörelse, se CLAUDE.md. Alla klasser börjar med bm- så att inget krockar
   med stil.css. */

.bm{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.bm-glod,.bm-yttre,.bm-inre{position:absolute}
.bm-glod{inset:-6%;opacity:0}
.bm-glod>span{position:absolute;inset:0}
.bm-yttre{inset:0}
.bm svg{position:relative;overflow:visible}

/* De extremt sällsynta lever hela tiden: stjärnan snurrar ett varv på 18
   sekunder, glöden pulserar och illustrationen rör sig. bm-lev kan också
   sättas på en förälder, som i popupen. */
.bm-lev .bm-glod{animation:bm-glod 2.4s ease-in-out infinite alternate}
.bm-lev .bm-ros{animation:bm-varv 18s linear infinite}

.bm-a-flamma,.bm-a-flamma2,.bm-a-glimt,.bm-a-glimt2,.bm-a-glimt3,.bm-a-bank,.bm-a-stig{transform-box:fill-box}
.bm-a-flamma,.bm-a-flamma2,.bm-a-stig{transform-origin:50% 100%}
.bm-a-glimt,.bm-a-glimt2,.bm-a-glimt3,.bm-a-bank{transform-origin:50% 50%}
.bm-a-svep,.bm-a-pump,.bm-a-pendel,.bm-a-nal{transform-box:view-box}
.bm-a-svep{transform-origin:32px 32px}
.bm-a-pendel,.bm-a-nal{transform-origin:32px 46px}
.bm-a-vaj{transform-box:fill-box;transform-origin:0 50%}
.bm-a-sving{transform-box:view-box;transform-origin:32px 1px}

/* bm-yta sätts på knappen eller länken runt en badge. De andra tagna
   rör sig bara medan man håller över eller fokuserar dem. */
.bm-lev .bm-a-flamma,.bm-yta:hover .bm-a-flamma,.bm-yta:focus-visible .bm-a-flamma{animation:bm-flamma .8s ease-in-out infinite alternate}
.bm-lev .bm-a-flamma2,.bm-yta:hover .bm-a-flamma2,.bm-yta:focus-visible .bm-a-flamma2{animation:bm-flamma .6s ease-in-out infinite alternate-reverse}
.bm-lev .bm-a-puls,.bm-yta:hover .bm-a-puls,.bm-yta:focus-visible .bm-a-puls{animation:bm-puls 1.4s ease-in-out infinite}
.bm-lev .bm-a-puls2,.bm-yta:hover .bm-a-puls2,.bm-yta:focus-visible .bm-a-puls2{animation:bm-puls 1.4s .7s ease-in-out infinite}
.bm-lev .bm-a-glimt{animation:bm-glimt 1.8s ease-in-out infinite}
.bm-lev .bm-a-glimt2{animation:bm-glimt 1.8s .6s ease-in-out infinite}
.bm-lev .bm-a-glimt3{animation:bm-glimt 1.8s 1.2s ease-in-out infinite}
/* 0,4 sekunder är 150 BPM. */
.bm-lev .bm-a-bank,.bm-yta:hover .bm-a-bank,.bm-yta:focus-visible .bm-a-bank{animation:bm-bank .4s ease-out infinite}
.bm-lev .bm-a-svep{animation:bm-varv 2.2s linear infinite}
.bm-lev .bm-a-blixt,.bm-yta:hover .bm-a-blixt,.bm-yta:focus-visible .bm-a-blixt{animation:bm-blixt 1.6s ease-in-out infinite}
.bm-lev .bm-a-pump,.bm-yta:hover .bm-a-pump,.bm-yta:focus-visible .bm-a-pump{animation:bm-pump .4s ease-in-out infinite alternate}
.bm-lev .bm-a-vaj,.bm-yta:hover .bm-a-vaj,.bm-yta:focus-visible .bm-a-vaj{animation:bm-vaj 1.1s ease-in-out infinite alternate}
.bm-lev .bm-a-pendel,.bm-yta:hover .bm-a-pendel,.bm-yta:focus-visible .bm-a-pendel{animation:bm-pendel .8s ease-in-out infinite alternate}
.bm-yta:hover .bm-a-nal,.bm-yta:focus-visible .bm-a-nal{animation:bm-nal .5s ease-in-out infinite alternate}
.bm-yta:hover .bm-a-stig,.bm-yta:focus-visible .bm-a-stig{animation:bm-stig 1s ease-in-out infinite alternate}

@keyframes bm-glod{from{opacity:.2}to{opacity:.75}}
@keyframes bm-varv{to{transform:rotate(360deg)}}
@keyframes bm-flamma{0%{transform:scale(1,1) skewX(0deg)}50%{transform:scale(.96,1.08) skewX(-4deg)}100%{transform:scale(1.03,.93) skewX(3deg)}}
@keyframes bm-puls{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes bm-glimt{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes bm-bank{0%,100%{transform:scale(1)}15%{transform:scale(1.45)}}
@keyframes bm-blixt{0%,44%,56%,100%{opacity:1}50%{opacity:.3}}
@keyframes bm-pump{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
@keyframes bm-vaj{from{transform:skewY(0deg)}to{transform:skewY(-6deg)}}
@keyframes bm-pendel{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes bm-nal{from{transform:rotate(-8deg)}to{transform:rotate(4deg)}}
@keyframes bm-stig{from{transform:scaleY(.6)}to{transform:scaleY(1)}}

/* ---------- Liten popup: glider ner uppifrån och försvinner efter fem sekunder ---------- */

.bm-toast{box-sizing:border-box;position:fixed;z-index:1000;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;max-width:420px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:18px;background:#251D31;color:#F6F2FB;text-decoration:none;box-shadow:0 14px 36px rgba(0,0,0,.5);animation:bm-toast 5s cubic-bezier(.2,.9,.3,1) both}
.bm-toast:focus-visible{outline:2px solid #3DDCF0;outline-offset:2px}
.bm-svep{position:absolute;inset:0;border-radius:18px;background:linear-gradient(100deg,transparent 30%,rgba(246,242,251,.14) 50%,transparent 70%);background-size:250% 100%;animation:bm-svep 1.2s .5s ease-out both}
.bm-pop{display:flex;animation:bm-pop .7s .3s cubic-bezier(.2,1.6,.4,1) both}
.bm-toast-text{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bm-toast-over{font-size:12px;font-weight:600;color:#B9AFC9}
.bm-toast-namn{font-size:17px;font-weight:700}
.bm-toast-under{font-size:13px;line-height:1.35;color:#B9AFC9}
.bm-toast-pil{position:relative;flex:none}
@keyframes bm-toast{0%{transform:translateY(-150%)}8%{transform:translateY(0)}88%{transform:translateY(0)}100%{transform:translateY(-150%)}}
@keyframes bm-pop{0%{transform:scale(.3) rotate(-40deg)}100%{transform:none}}
@keyframes bm-svep{from{background-position:120% 0}to{background-position:-20% 0}}

/* ---------- Firandet: bara för de extremt sällsynta ---------- */

.bm-last{overflow:hidden}
.bm-fira{position:fixed;z-index:1001;inset:0;overflow:hidden;background:#100C17;color:#F6F2FB;animation:bm-tona .2s ease-out}
.bm-fira-inne{box-sizing:border-box;position:relative;height:100%;max-width:440px;margin:0 auto;padding:clamp(40px,11vh,96px) 28px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto}
.bm-fira-over{font-size:15px;font-weight:700;color:#B9AFC9}
/* Lasrarna och blixten utgår från badgens mitt, oavsett skärmens höjd. */
.bm-fira-medalj{position:relative;display:flex;margin-top:18px}
.bm-intro{position:relative;display:flex;animation:bm-intro 1.1s cubic-bezier(.2,1.4,.3,1) both}
.bm-laser{position:absolute;left:50%;top:50%;width:4px;height:820px;margin-left:-2px;transform-origin:50% 0;opacity:.5;animation:bm-laser 5s ease-in-out infinite alternate}
.bm-blixtut{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#F6F2FB;animation:bm-blixtut .9s ease-out both}
.bm-fira-namn{margin:28px 0 0;font-stretch:62%;font-weight:900;font-size:46px;line-height:.92;letter-spacing:-.01em;word-spacing:.05em}
.bm-fira-niva{margin-top:12px;font-size:15px;font-weight:600}
.bm-fira-text{margin:10px 0 0;max-width:30ch;font-size:16px;line-height:1.5;color:#D9D1E6}
.bm-fira-knappar{margin-top:auto;padding-top:24px;width:100%;display:flex;flex-direction:column;gap:10px}
.bm-knapp{display:flex;align-items:center;justify-content:center;min-height:48px;border:0;border-radius:999px;background:#251D31;color:#F6F2FB;font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.bm-knapp-rosa{min-height:52px;background:#FF3B6B;color:#100C17}
.bm-knapp:focus-visible{outline:2px solid #3DDCF0;outline-offset:2px}
.bm-textin{animation:bm-textin .5s .6s ease-out both}
.bm-textin2{animation:bm-textin .5s .8s ease-out both}
@keyframes bm-tona{from{opacity:0}to{opacity:1}}
@keyframes bm-laser{from{transform:rotate(calc(var(--v) - 14deg))}to{transform:rotate(calc(var(--v) + 14deg))}}
@keyframes bm-blixtut{0%{transform:scale(.2);opacity:.9}100%{transform:scale(20);opacity:0}}
@keyframes bm-intro{0%{transform:scale(.25) rotate(-140deg);opacity:0}55%{opacity:1}100%{transform:none}}
@keyframes bm-textin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.bm-dold{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Har man stängt av animationer står allt still. Popupen visas ändå i fem
   sekunder och glöden lyser svagt. */
/* Grundarens passerkort svänger i bandet. */
.bm-lev .bm-a-sving,.bm-yta:hover .bm-a-sving,.bm-yta:focus-visible .bm-a-sving{animation:bm-sving 2.6s ease-in-out infinite alternate}
@keyframes bm-sving{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

@media (prefers-reduced-motion:reduce){
  .bm *,.bm-toast,.bm-toast *,.bm-fira,.bm-fira *{animation:none !important;transition:none !important}
  .bm-svep,.bm-blixtut{display:none}
  .bm-lev .bm-glod{opacity:.5}
}