/* Golnetix motion layer — phase 1 (2026-11-14). Additive only: no layout or theme change.
   Loaded after styles.css. Remove the <link> in index.html to disable. */

.gx-meter{display:block;height:4px;margin-top:7px;border-radius:99px;overflow:hidden;background:rgba(59,182,245,.16)}
.gx-meter>i{display:block;height:100%;width:var(--gx-w,0%);border-radius:inherit;background:linear-gradient(90deg,#2C6B96,#3BB6F5,#7FD4FF)}

/* ---------- phase 2: data-driven heroes (static layout; motion lives in the media query below) ---------- */
.gx-net{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:.7}
.gx-hero-host{margin:10px 0 12px}
.gx-hero{position:relative;overflow:hidden;border:1px solid rgba(59,182,245,.22);border-radius:14px;padding:12px 14px;background:linear-gradient(180deg,rgba(15,33,51,.55),rgba(12,26,41,.35))}
.gx-goals-hero .gx-hero{margin:0 0 12px}
.gx-hero-k{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7FD4FF;margin-bottom:8px}
.gx-sub{font-size:11.5px;color:#8FA6BC;margin-top:6px}
.gx-sub strong{color:#EAF2FB;font-weight:600}
.gx-big{display:flex;align-items:baseline;gap:6px;font-weight:700;line-height:1}
.gx-big b{font-size:30px;font-variant-numeric:tabular-nums}
.gx-big small{font-size:12px;font-weight:500;color:#8FA6BC}
.gx-odds{display:inline-flex;align-items:baseline;gap:6px;margin-top:8px;padding:4px 9px;border-radius:9px;border:1px solid rgba(59,182,245,.4);background:rgba(59,182,245,.1);font-weight:700;color:#7FD4FF}
.gx-odds small{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#8FA6BC}
.gx-goals-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gx-gauge{width:150px;height:86px;flex:0 0 auto}
.gx-g-trk{fill:none;stroke:rgba(59,182,245,.14);stroke-width:10;stroke-linecap:round}
.gx-g-arc{fill:none;stroke:url(#gxGaugeGrad);stroke-width:10;stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:var(--gx-off)}
.gx-balls{display:flex;gap:7px;margin-top:9px}
.gx-balls span{width:18px;height:18px;border-radius:50%;border:2px solid rgba(59,182,245,.3)}
.gx-balls span.on{border-color:#7FD4FF;background:radial-gradient(circle at 35% 30%,#fff,#3BB6F5 60%,#1B6FA3)}
.gx-hist{position:relative;display:flex;align-items:flex-end;gap:8px;height:62px;margin-top:8px;border-bottom:1px solid rgba(59,182,245,.25)}
.gx-hist::after{content:"2.5";position:absolute;left:0;right:0;bottom:var(--gx-line);border-top:1px dashed rgba(127,212,255,.45);font-size:9.5px;color:#8FA6BC;text-align:right;line-height:0;padding-right:2px;pointer-events:none}
.gx-hist b{position:relative;flex:1;max-width:46px;height:var(--gx-h);border-radius:4px 4px 0 0;background:#3BB6F5}
.gx-hist b.lo{background:#3A546B}
.gx-hist b em{position:absolute;top:-15px;left:0;right:0;text-align:center;font-style:normal;font-size:10px;color:#CDEBFB}
.gx-cards{display:flex;align-items:center;gap:18px}
.gx-cards3d{position:relative;width:92px;height:86px;flex:0 0 auto;perspective:600px}
.gx-pc{position:absolute;top:8px;width:46px;height:66px;border-radius:7px;box-shadow:0 10px 22px rgba(0,0,0,.45)}
.gx-pc.y{left:6px;background:linear-gradient(160deg,#FFE08A,#FFC24B);transform:rotate(-12deg)}
.gx-pc.r{left:38px;background:linear-gradient(160deg,#FF8A95,#FF4D5E);transform:rotate(10deg)}
.gx-cards-meta{min-width:0}
.gx-seg{display:flex;gap:5px;margin-top:7px;max-width:180px}
.gx-seg i{flex:1;height:8px;border-radius:3px;background:rgba(255,194,75,.14)}
.gx-seg i.on{background:#FFC24B}
.gx-heat-hot .gx-seg i.on{background:#FF8A5B}
.gx-pitch{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 4px}
.gx-line{fill:none;stroke:rgba(59,182,245,.35);stroke-width:2}
.gx-ballpath{fill:none;stroke:#7FD4FF;stroke-width:2;stroke-dasharray:5 7;opacity:.65}
.gx-cball{offset-path:path("M30 92 Q120 6 262 52");offset-distance:100%}
.gx-ticks{display:flex;gap:4px;margin-top:8px}
.gx-ticks i{flex:1;height:8px;border-radius:3px;background:rgba(59,182,245,.14)}
.gx-ticks i.on{background:#3BB6F5}
.gx-scan-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.gx-scan{position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(180deg,transparent,rgba(127,212,255,.06),transparent)}
.gx-corners .gx-big{margin-top:2px}
:root[data-theme="light"] .gx-hero{background:linear-gradient(180deg,#F1F8FE,#E6F1FA);border-color:rgba(27,111,163,.28)}
:root[data-theme="light"] .gx-hero-k{color:#1B6FA3}
:root[data-theme="light"] .gx-big b{color:#0E2236}
:root[data-theme="light"] .gx-sub,:root[data-theme="light"] .gx-big small,:root[data-theme="light"] .gx-odds small,:root[data-theme="light"] .gx-hist::after{color:#4B6178}
:root[data-theme="light"] .gx-sub strong{color:#0E2236}
:root[data-theme="light"] .gx-odds{color:#1B6FA3;background:rgba(59,182,245,.12)}
:root[data-theme="light"] .gx-hist b em{color:#17304D}
:root[data-theme="light"] .gx-line{stroke:rgba(27,111,163,.4)}
:root[data-theme="light"] .gx-cball{fill:#1B6FA3}
:root[data-theme="light"] .gx-g-trk,:root[data-theme="light"] .gx-ticks i,:root[data-theme="light"] .gx-seg i{opacity:.9}

@media (prefers-reduced-motion:no-preference){
  .gx-scan{animation:gxScan 7s linear infinite}
  @keyframes gxScan{to{top:120%}}
  .gx-play .gx-g-arc{animation:gxArc 1.5s cubic-bezier(.2,.8,.2,1) .15s both}
  @keyframes gxArc{from{stroke-dashoffset:188.5}}
  .gx-play .gx-balls span.on{animation:gxBall .45s ease both}
  .gx-play .gx-balls span.on:nth-child(1){animation-delay:.6s}.gx-play .gx-balls span.on:nth-child(2){animation-delay:.85s}.gx-play .gx-balls span.on:nth-child(3){animation-delay:1.1s}
  @keyframes gxBall{from{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}
  .gx-play .gx-hist b{animation:gxHist .9s cubic-bezier(.2,.8,.2,1) both}
  .gx-play .gx-hist b:nth-child(2){animation-delay:.08s}.gx-play .gx-hist b:nth-child(3){animation-delay:.16s}.gx-play .gx-hist b:nth-child(4){animation-delay:.24s}.gx-play .gx-hist b:nth-child(5){animation-delay:.32s}.gx-play .gx-hist b:nth-child(6){animation-delay:.4s}
  @keyframes gxHist{from{height:0}}
  .gx-pc.y{animation:gxCardY 4.5s ease-in-out infinite}
  .gx-pc.r{animation:gxCardR 4.5s ease-in-out infinite}
  @keyframes gxCardY{0%,100%{transform:rotate(-12deg) rotateY(0)}50%{transform:rotate(-12deg) rotateY(180deg)}}
  @keyframes gxCardR{0%,100%{transform:rotate(10deg) rotateY(0)}50%{transform:rotate(10deg) rotateY(-180deg)}}
  .gx-play .gx-seg i.on,.gx-play .gx-ticks i.on{animation:gxTick .32s ease both;animation-delay:calc(.3s + var(--gx-i,0) * 60ms)}
  .gx-play .gx-seg i.on:nth-child(2){--gx-i:1}.gx-play .gx-seg i.on:nth-child(3){--gx-i:2}.gx-play .gx-seg i.on:nth-child(4){--gx-i:3}.gx-play .gx-seg i.on:nth-child(5){--gx-i:4}
  @keyframes gxTick{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
  .gx-flag{transform-origin:22px 96px;animation:gxWave 2.2s ease-in-out infinite}
  @keyframes gxWave{50%{transform:rotate(7deg)}}
  .gx-cball{animation:gxFly 2.8s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes gxFly{0%{offset-distance:0%;opacity:0}10%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
  .ax-cn-row.gx-row{animation:gxRowIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--gx-delay,0ms)}
  @keyframes gxRowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
  .gx-fade{animation:gxFadeIn 1.2s ease both}
  @keyframes gxFadeIn{from{opacity:0}}
  .gx-flip{display:inline-block;animation:gxFlip .8s cubic-bezier(.2,.8,.2,1)}
  @keyframes gxFlip{0%{transform:none}40%{transform:translateY(-55%);opacity:0}55%{transform:translateY(55%);opacity:0}100%{transform:none;opacity:1}}

  .compact-fixture-card.gx-enter{animation:gxEnter .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--gx-delay,0ms)}
  @keyframes gxEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  @media (hover:hover) and (pointer:fine){
    .compact-fixture-card{transition:transform .18s ease,box-shadow .18s ease,background .14s ease,border-color .14s ease}
    .compact-fixture-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(59,182,245,.13)}
  }

  .gx-meter>i{animation:gxGrow 1s cubic-bezier(.2,.8,.2,1) .1s both}
  .gx-meter.gx-static>i{animation:none}
  @keyframes gxGrow{from{width:0}}

  .compact-fixture-card.gx-goal{animation:gxGoalGlow 1.5s ease-out}
  @keyframes gxGoalGlow{0%{box-shadow:0 0 0 0 rgba(59,182,245,.75)}35%{box-shadow:0 0 0 7px rgba(59,182,245,.28)}100%{box-shadow:0 0 0 18px rgba(59,182,245,0)}}
  .pn-score-goal-flash::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #7FD4FF;pointer-events:none;animation:gxShock .9s ease-out forwards}
  @keyframes gxShock{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(9)}}

  .axsm-grid>.gx-cell{animation:gxCell .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--gx-delay,0ms)}
  @keyframes gxCell{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

  .fixture-pick-pill.gx-settle-won{animation:gxWon 1.3s ease}
  @keyframes gxWon{0%{transform:scale(1);text-shadow:none}30%{transform:scale(1.12);text-shadow:0 0 16px rgba(46,227,154,.85)}100%{transform:scale(1);text-shadow:none}}
  .fixture-pick-pill.gx-settle-lost{animation:gxLost 1s ease}
  @keyframes gxLost{0%{opacity:1}40%{opacity:.45}100%{opacity:1}}
}