/* ==========================================================================
   CopyGo Live Kit  —  chosen live-indicator motifs (dark theme)
   --------------------------------------------------------------------------
   Canonical deployed copy (served from /public). Design reference lives in
   Other info/copygo_live_kit.css — edit THIS file for the live site.
   All classes namespaced `cgk-` and keyframes `cgk-*` so nothing collides with
   the existing page CSS. Two motifs need a 1-line JS call (copygo_live_kit.js):
   the P/L tint-flash and the counter slide-roll.

   1 Flowing-stream chip  .cgk-live-chip + .cgk-flow     (active copying/mirroring)
   2 Sonar ping dot       .cgk-sonar                     (online / live)
   3 P/L tint flash       .cgk-pl  (+ cgkFlash)          (live P/L on tick)
   4 Slide-roll counter   .cgk-roll (+ cgkRoll)          (live numbers)
   5 Gradient-drift bar    .cgk-prog / .cgk-prog-fill    (profit-target progress)
   6 Emitting-rings marker .cgk-risk (+ .cgk-risk-rings) (risk near drawdown)
   7 Shimmer sweep chip   .cgk-soon                      (marketing / launching soon)
   ========================================================================== */

/* 1. Active copying / mirroring chip (flowing stream) */
.cgk-live-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;
  background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.42);color:#6ee7b7;
  font-weight:800;font-size:12px;line-height:1;white-space:nowrap}
.cgk-flow{position:relative;display:inline-block;width:30px;height:8px;flex:none}
.cgk-flow i{position:absolute;top:1px;width:6px;height:6px;border-radius:50%;
  background:#34d399;box-shadow:0 0 7px #34d399;animation:cgk-flow 1.4s linear infinite}
.cgk-flow i:nth-child(2){animation-delay:.46s}
.cgk-flow i:nth-child(3){animation-delay:.93s}
@keyframes cgk-flow{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}

/* 2. Online / live dot (sonar ping). Modifiers: .cgk-sonar--amber / .cgk-sonar--off */
.cgk-sonar{position:relative;display:inline-grid;place-items:center;width:12px;height:12px;vertical-align:middle}
.cgk-sonar .cgk-core{width:10px;height:10px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}
.cgk-sonar .cgk-ring{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #34d399;
  animation:cgk-ping 2.3s ease-out infinite}
.cgk-sonar .cgk-ring:nth-child(3){animation-delay:.77s}
.cgk-sonar .cgk-ring:nth-child(4){animation-delay:1.54s}
@keyframes cgk-ping{0%{transform:scale(.5);opacity:.85}100%{transform:scale(3);opacity:0}}
.cgk-sonar--amber .cgk-core{background:#fbbf24;box-shadow:0 0 8px #fbbf24}
.cgk-sonar--amber .cgk-ring{border-color:#fbbf24}
.cgk-sonar--off .cgk-core{background:#64748b;box-shadow:none}
.cgk-sonar--off .cgk-ring{display:none}

/* 3. Live P/L (tint flash). Call cgkFlash(el, isUp, "+$124") on each tick. */
.cgk-pl{display:inline-block;padding:4px 9px;border-radius:8px;background:#0c1424;border:1px solid #1e2c47;
  font-weight:800;font-variant-numeric:tabular-nums}
.cgk-pl.cgk-up{color:#34d399}
.cgk-pl.cgk-down{color:#f87171}
.cgk-pl.cgk-flash-up{animation:cgk-fu .7s ease}
.cgk-pl.cgk-flash-down{animation:cgk-fd .7s ease}
@keyframes cgk-fu{0%{background:rgba(16,185,129,.35);box-shadow:0 0 12px rgba(16,185,129,.5)}100%{background:#0c1424;box-shadow:none}}
@keyframes cgk-fd{0%{background:rgba(239,68,68,.35);box-shadow:0 0 12px rgba(239,68,68,.5)}100%{background:#0c1424;box-shadow:none}}

/* 3b. Inline P/L flash (no box) for foot/inline text. Text color via .up/.down (by sign);
   add .cgk-plx-up / .cgk-plx-down to flash by CHANGE direction (settles to transparent). */
.cgk-plx{font-weight:800;font-variant-numeric:tabular-nums;border-radius:5px;padding:0 3px}
.cgk-plx.up{color:#34d399}
.cgk-plx.down{color:#f87171}
.cgk-plx-up{animation:cgk-fux .7s ease}
.cgk-plx-down{animation:cgk-fdx .7s ease}
@keyframes cgk-fux{0%{background:rgba(16,185,129,.35);box-shadow:0 0 10px rgba(16,185,129,.45)}100%{background:transparent;box-shadow:none}}
@keyframes cgk-fdx{0%{background:rgba(239,68,68,.35);box-shadow:0 0 10px rgba(239,68,68,.45)}100%{background:transparent;box-shadow:none}}

/* 4. Live counter (slide roll). Call cgkRoll(el, "$1,258,300") on change. */
.cgk-roll{display:inline-grid;place-items:center;overflow:hidden;height:1.5em;line-height:1.5em;vertical-align:bottom}
.cgk-roll>span{display:block;font-weight:800;font-variant-numeric:tabular-nums}
.cgk-roll.cgk-tk>span{animation:cgk-roll .5s ease}
@keyframes cgk-roll{0%{transform:translateY(-.9em);opacity:0}100%{transform:none;opacity:1}}

/* 5. Profit-target progress (gradient drift). Set width via style="--cgk-pct:62%". */
.cgk-prog{position:relative;height:12px;border-radius:99px;background:#0c1424;border:1px solid #243352;overflow:hidden}
.cgk-prog-fill{position:absolute;left:0;top:0;height:100%;border-radius:99px;width:var(--cgk-pct,62%);
  background:linear-gradient(90deg,#10b981,#fbbf24,#10b981);background-size:200% 100%;
  box-shadow:0 0 10px rgba(52,211,153,.45);animation:cgk-drift 2s linear infinite;transition:width .5s ease}
@keyframes cgk-drift{0%{background-position:0 0}100%{background-position:200% 0}}

/* 6. Risk marker (emitting rings, near drawdown). Set --cgk-pos to the live risk %. */
.cgk-risk{position:relative;height:10px;border-radius:99px;background:linear-gradient(90deg,#10b981 0%,#fbbf24 55%,#ef4444 100%)}
.cgk-risk-mark{position:absolute;top:-4px;left:var(--cgk-pos,70%);width:5px;height:18px;border-radius:3px;
  background:#fff;transform:translateX(-2px);box-shadow:0 0 6px rgba(255,255,255,.6)}
.cgk-risk-rings{position:absolute;top:50%;left:var(--cgk-pos,70%);transform:translate(-50%,-50%);
  width:12px;height:12px;pointer-events:none}
.cgk-risk-rings i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--cgk-ring-c,#ef4444);
  animation:cgk-ping2 1.5s ease-out infinite}
.cgk-risk-rings i:nth-child(2){animation-delay:.75s}
@keyframes cgk-ping2{0%{transform:scale(.4);opacity:.85}100%{transform:scale(2.8);opacity:0}}

/* 7. Marketing chip (shimmer sweep). Gold default; add .cgk-soon--cyan to retint. */
.cgk-soon{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:8px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);
  color:#fcd34d;font-weight:800;font-size:12px;letter-spacing:.4px}
.cgk-soon::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);animation:cgk-sweep 2.1s ease-in-out infinite}
@keyframes cgk-sweep{0%{left:-60%}55%,100%{left:130%}}
.cgk-soon--cyan{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.4);color:#a5f3fc}

/* Accessibility: honor reduced-motion (settle to the static state) */
@media (prefers-reduced-motion:reduce){
  .cgk-flow i,.cgk-sonar .cgk-ring,.cgk-prog-fill,.cgk-risk-rings i,.cgk-soon::after,
  .cgk-pl,.cgk-plx-up,.cgk-plx-down,.cgk-roll>span{animation:none!important}
  .cgk-flow i{opacity:1}
  .cgk-risk-rings{display:none}
}