/* ─────────────────────────────────────────────────────────────
   Écran « trackmap » — Flow 12 · Track my Buzz, onglet Map
   (Figma 1:11245, 390 × 844). Le globe statique du Figma est remplacé
   par un globe à points qui tourne (cobe, WebGL).
   ───────────────────────────────────────────────────────────── */
.phone .scr.scr--trackmap{background:#050505} /* bat .phone .scr de phone.css */
.scr--trackmap p{margin:0}

/* globe : centre (195, 280), diamètre de la sphère 259 px = 0,8 × le canevas de 324 px */
.scr--trackmap .tm-globe{position:absolute;left:33px;top:118px;width:324px;height:324px}
.scr--trackmap .tm-globe canvas,.scr--trackmap .tm-globe img{position:absolute;left:0;top:0;width:324px;height:324px}
/* le canevas est posé à 80 % : les points saturés de cobe redeviennent le gris du Figma, le magenta celui de ses marqueurs */
.scr--trackmap .tm-globe canvas{opacity:0;transition:opacity .4s ease-out}
.scr--trackmap .tm-globe.is-live canvas{opacity:.8}
.scr--trackmap .tm-globe.is-live img{opacity:0;transition:opacity .4s ease-out .25s}

/* en-tête (au-dessus du canevas) */
.scr--trackmap .tm-back{position:absolute;left:16px;top:40px;width:40px;height:40px;border-radius:999px;
  background:rgba(143,148,158,.08);border:1px solid rgba(143,148,158,.18)}
.scr--trackmap .tm-back svg{position:absolute;left:14px;top:9px;width:10px;height:20px;transform:rotate(180deg)}
.scr--trackmap .tm-title{position:absolute;left:95px;top:50px;width:200px;height:25px;font-size:21px;font-weight:700;
  letter-spacing:-.6176px;line-height:normal;text-align:center;white-space:nowrap;color:#fff}
.scr--trackmap .tm-tab{position:absolute;top:100px;width:130.333px;height:21px;font-size:15px;font-weight:700;line-height:normal;
  text-align:center;color:#8f949e;white-space:nowrap}
.scr--trackmap .tm-tab.is-on{color:#fff}
.scr--trackmap .tm-uline{position:absolute;left:129.833px;top:129px;width:130px;height:2px;border-radius:2px;background:#fff}

/* pastille « Live view » */
.scr--trackmap .tm-chip{position:absolute;left:301px;top:405px;width:69px;height:22px;border-radius:999px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)}
.scr--trackmap .tm-chip i{position:absolute;inset:-1px;border-radius:inherit;border:1px solid #00d4fe;opacity:0;
  animation:tm-halo 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.scr--trackmap .tm-chip p{position:absolute;left:9px;top:3px;font-size:11px;font-weight:700;line-height:normal;color:#00d4fe;
  white-space:nowrap;animation:tm-breathe 2.4s ease-in-out infinite}

/* « Reach by location » */
.scr--trackmap .tm-reach{position:absolute;left:0;width:390px;top:447px;font-size:11px;font-weight:700;letter-spacing:.5px;
  line-height:normal;text-align:center;color:#8f949e;white-space:nowrap}
.scr--trackmap .tm-list{position:absolute;left:21px;top:481px;width:348px;height:248px}
.scr--trackmap .tm-row{position:absolute;left:0;width:342px;height:28px}
.scr--trackmap .tm-row__n{position:absolute;left:0;top:0;font-size:15px;font-weight:700;line-height:normal;color:#fff;white-space:nowrap}
.scr--trackmap .tm-row__p{position:absolute;right:0;top:1px;width:58px;height:20px;font-size:14px;font-weight:700;line-height:normal;
  text-align:right;color:#fe14f3;white-space:nowrap;font-variant-numeric:tabular-nums}
.scr--trackmap .tm-row__tr{position:absolute;left:0;top:24px;width:342px;height:4px;border-radius:2px;background:rgba(143,148,158,.08)}
.scr--trackmap .tm-row__f{position:absolute;left:0;top:24px;height:4px;border-radius:2px;
  background:linear-gradient(to right,#00d4fe,#fe00f2);transform-origin:0 50%;will-change:transform}

/* boucles CSS : figées hors lecture, absentes en mouvement réduit */
.scr--trackmap:not(.is-playing) .tm-chip i,.scr--trackmap:not(.is-playing) .tm-chip p{animation-play-state:paused}
.scr--trackmap.is-still .tm-chip i,.scr--trackmap.is-still .tm-chip p{animation:none}

@keyframes tm-halo{
  0%{transform:scale(1,1);opacity:0}
  8%{transform:scale(1,1);opacity:.7}
  78%,100%{transform:scale(1.16,1.5);opacity:0}
}
@keyframes tm-breathe{
  0%,100%{opacity:1}
  50%{opacity:.62}
}