/* ══════════════════════════════════════════════════════════════════════
   FX PACE — batang target yang berlomba dengan jam (lihat js/fx-pace.js)
   Garis jalur putih, takik 25/50/75%, putaran kedua lewat 100% (+ label
   "+53%"), satu baris keterangan. Tanpa backdrop-filter, tanpa loop tanpa
   henti, tanpa flex gap (iOS < 14.5). Semua gerak memakai transform/
   opacity, kecuali lebar putaran kedua (jarang berubah, sama seperti
   #goalFill milik app.js). Awalan "hxpc-" (fx-play memakai "hxp-").
   ══════════════════════════════════════════════════════════════════════ */

/* batang jadi wadah posisi; garis jalur boleh menonjol di atas & bawah.
   #goalFill punya radius sendiri, jadi tidak perlu dipotong batangnya. */
.goal-bar.hxpc-bar{position:relative;overflow:visible}

/* ── takik 25/50/75% ─────────────────────────────────────────────────── */
.hxpc-notch{
  position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;z-index:1;pointer-events:none;
  background:rgba(255,255,255,.16);
  transition:background-color .6s ease,box-shadow .6s ease;
}
.hxpc-notch.lit{background:rgba(255,255,255,.6);box-shadow:0 0 5px rgba(170,255,200,.55)}
.hxpc-notch.lit.hxpc-wait{background:rgba(255,255,255,.16);box-shadow:none;transition:none}
/* kilau saat dilewati: titik cahaya yang mengembang + garis yang menyala */
.hxpc-notch::before,.hxpc-notch::after{content:"";position:absolute;pointer-events:none;opacity:0}
.hxpc-notch::before{
  left:-1px;right:-1px;top:-7px;bottom:-7px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 50%,rgba(255,255,255,0));
  transform:scaleY(.4);
}
.hxpc-notch::after{
  left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:radial-gradient(circle,rgba(225,255,235,.95) 0%,rgba(48,209,88,.55) 30%,rgba(48,209,88,0) 68%);
  transform:scale(.2);
}
.hxpc-notch.hxpc-flare::before{animation:hxpc-streak .85s cubic-bezier(.22,1,.36,1)}
.hxpc-notch.hxpc-flare::after{animation:hxpc-flare 1.1s cubic-bezier(.22,1,.36,1)}
.hxpc-notch.hxpc-flare-s::before{animation:hxpc-streak-s .7s cubic-bezier(.22,1,.36,1)}
.hxpc-notch.hxpc-flare-s::after{animation:hxpc-flare-s .8s cubic-bezier(.22,1,.36,1)}
@keyframes hxpc-flare{0%{opacity:0;transform:scale(.2)}16%{opacity:1}100%{opacity:0;transform:scale(1.55)}}
@keyframes hxpc-flare-s{0%{opacity:0;transform:scale(.2)}20%{opacity:.55}100%{opacity:0;transform:scale(.85)}}
@keyframes hxpc-streak{0%{opacity:0;transform:scaleY(.4)}22%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.25)}}
@keyframes hxpc-streak-s{0%{opacity:0;transform:scaleY(.4)}25%{opacity:.7;transform:scaleY(.8)}100%{opacity:0;transform:scaleY(1)}}

/* ── putaran kedua (lewat 100%) ──────────────────────────────────────────
   Gaya cincin Activity: batang 100% di bawahnya penuh & PALING terang
   (lapisan .hxpc-done hijau utama di dalam #goalFill — gradien app.js
   meredup ke kanan). Putaran kedua = pita hijau LEBIH GELAP & pekat di
   atasnya, dengan bayangan di ujung depan — jadi terbaca "penuh + ekstra",
   bukan "baru setengah" (versi lama: pita paling terang dari kiri membuat
   153% terlihat seperti 53%). */
.hxpc-done{
  display:block;width:100%;height:100%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 62%),#30d158;
  box-shadow:0 0 12px rgba(48,209,88,.28);
  opacity:0;transition:opacity .5s ease;
}
.hxpc-over .hxpc-done{opacity:1}
.hxpc-lap{
  position:absolute;left:0;top:0;bottom:0;width:0;z-index:1;pointer-events:none;
  border-radius:inherit;overflow:hidden;opacity:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(90deg,#0d7d42 0%,#109a53 100%);
  /* bayangan di ujung depan: lapisan ini "menumpuk" di atas putaran pertama */
  box-shadow:2px 0 2px -.5px rgba(0,0,0,.5),5px 0 9px -2px rgba(0,0,0,.55);
  transform-origin:left center;
  transition:width .8s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),opacity .35s ease;
}
.hxpc-lap.on{opacity:1}
.hxpc-sweep{
  position:absolute;top:0;bottom:0;left:0;width:55%;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
  transform:translate3d(-110%,0,0);
}
.hxpc-sweep.go{animation:hxpc-sweep 1.05s cubic-bezier(.45,0,.2,1) backwards}
@keyframes hxpc-sweep{0%{opacity:1;transform:translate3d(-110%,0,0)}100%{opacity:1;transform:translate3d(200%,0,0)}}

/* label kelebihan "+53%" di atas batang, berakhir tepat di ujung putaran
   kedua. Pembungkus selebar putaran (minimal selebar teks) + rata kanan,
   jadi putaran pendek tidak membuat label keluar dari kiri batang. */
.hxpc-tagw{
  position:absolute;left:0;bottom:100%;width:0;margin-bottom:6px;z-index:2;pointer-events:none;
  min-width:-webkit-max-content;min-width:max-content;text-align:right;
  opacity:0;transform:translate3d(0,3px,0);
  transition:width .8s cubic-bezier(.22,1,.36,1),opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.hxpc-tag-on .hxpc-tagw{opacity:1;transform:none;transition-delay:0s,.45s,.45s}
.hxpc-tag{
  display:inline-block;white-space:nowrap;
  font-family:'Space Mono',ui-monospace,Menlo,monospace;font-size:10px;font-weight:700;line-height:12px;
  letter-spacing:.2px;color:#30d158;font-variant-numeric:tabular-nums;
}

/* ── garis jalur ─────────────────────────────────────────────────────── */
/* pembungkus selebar batang: translateX(%) = persen lebar batang, jadi
   garis meluncur di compositor tanpa mengukur apa pun */
.hxpc-tickw{
  position:absolute;top:0;bottom:0;left:0;width:100%;z-index:2;pointer-events:none;
  transform:translate3d(0,0,0);
  transition:transform 1.15s cubic-bezier(.22,1,.36,1);
}
.hxpc-tick{
  position:absolute;left:0;top:50%;width:3px;height:20px;margin:-10px 0 0 -1.5px;border-radius:2px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 10px rgba(255,255,255,.4);
  opacity:0;transition:opacity .4s ease;
}
.hxpc-tick-on .hxpc-tick{opacity:1}

/* ── satu baris keterangan ───────────────────────────────────────────── */
.hxpc-line{
  display:flex;align-items:center;min-width:0;height:0;margin-top:0;overflow:hidden;
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12.5px;font-weight:500;line-height:16px;letter-spacing:.1px;
  color:rgba(255,255,255,.74);font-variant-numeric:tabular-nums;
  opacity:0;transform:translate3d(0,4px,0);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.hxpc-on .hxpc-line{height:16px;margin-top:11px;opacity:1;transform:none}
.hxpc-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hxpc-line b{font-weight:700}
/* kunci legenda = garis jalur di batang, versi kecil */
.hxpc-glyph{
  flex:none;width:3px;height:12px;margin-right:8px;border-radius:1.5px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 7px rgba(255,255,255,.4);
}
.hxpc-up .hxpc-amt{color:#30d158}
.hxpc-dn .hxpc-amt{color:#ff453a}
.hxpc-hit .hxpc-glyph{background:#30d158;box-shadow:0 0 7px rgba(48,209,88,.7)}
.hxpc-hit .hxpc-time{color:#30d158}
.hxpc-hit{color:rgba(255,255,255,.86)}
.hxpc-dot{color:rgba(255,255,255,.38);padding:0 1px}
.hxpc-zero,.hxpc-even{color:rgba(255,255,255,.62)}

/* ── intro: garis diparkir di kiri, baris & putaran kedua menunggu ───── */
.hxpc-intro .hxpc-tick{opacity:0}
.hxpc-intro .hxpc-line{opacity:0;transform:translate3d(0,4px,0)}
.hxpc-intro .hxpc-lap{transform:scaleX(0)}
.hxpc-intro .hxpc-tagw{opacity:0;transform:translate3d(0,3px,0)}
.hxpc-card .hxpc-snap{transition:none}

/* skeleton saat memuat: jangan tampilkan apa pun dari target palsu */
html.lg-loading .hxpc-tick,html.lg-loading .hxpc-line,html.lg-loading .hxpc-lap,html.lg-loading .hxpc-tagw,html.lg-loading .hxpc-done{opacity:0}

/* HP sempit (360px): sedikit lebih kecil supaya satu baris tetap muat */
@media (max-width:380px){
  .hxpc-line{font-size:12px}
  .hxpc-glyph{margin-right:7px}
}

/* "Kurangi Gerak": tanpa luncuran, hanya pudar singkat */
@media (prefers-reduced-motion:reduce){
  .hxpc-tickw{transition:none}
  .hxpc-lap{transition:opacity .3s ease}
  .hxpc-tagw,.hxpc-intro .hxpc-tagw{transform:none;transition:opacity .3s ease}
  .hxpc-tag-on .hxpc-tagw{transition-delay:0s}
  .hxpc-line,.hxpc-intro .hxpc-line{transform:none;transition:opacity .3s ease}
  .hxpc-sweep.go,.hxpc-notch.hxpc-flare::before,.hxpc-notch.hxpc-flare-s::before,.hxpc-notch.hxpc-flare-s::after{animation:none}
  .hxpc-notch::after{transform:none}
  .hxpc-notch.hxpc-flare::after{animation:hxpc-fade .6s ease-out}
}
@keyframes hxpc-fade{0%{opacity:0}30%{opacity:.7}100%{opacity:0}}