/* ============================================================
   APEX — Enhanced Animations CSS  (apex.css)
   ============================================================ */

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  z-index: 9998; width: 0; transition: width .1s linear;
  pointer-events: none;
}

/* ── Particle canvas ── */
#particle-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
}

/* ── Cursor trail canvas ── */
#c-trail {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9996;
}

/* ── Ripple ── */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.2);
  transform: scale(0);
  animation: rippleAnim .7s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── Multiplier pop ── */
.mult-pulse { animation: multPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes multPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); color: var(--gold2); }
  100% { transform: scale(1); }
}

/* ── Balance flash ── */
.balance-win  { animation: balWin  .7s ease; }
.balance-lose { animation: balLose .7s ease; }
@keyframes balWin  { 0%,100%{color:var(--gold)} 50%{color:var(--green);text-shadow:0 0 20px var(--green)} }
@keyframes balLose { 0%,100%{color:var(--gold)} 50%{color:var(--red);text-shadow:0 0 20px var(--red)} }

/* ── Stat pop ── */
.stat-pop { animation: statPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes statPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ── Toast notifications ── */
#apex-toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9990;
  display: flex; flex-direction: column; gap: .75rem;
  pointer-events: none;
}
.toast-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.25rem; border-radius: 10px;
  font-size: .82rem; backdrop-filter: blur(20px);
  border: 1px solid var(--line2);
  animation: toastIn .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto; max-width: 320px;
  font-family: 'Neue Haas Grotesk Display Pro','Helvetica Neue',sans-serif;
}
.toast-item.leaving { animation: toastOut .35s ease forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { to{opacity:0;transform:translateX(30px)} }
.toast-info { background: rgba(17,17,20,.95); color: var(--text); }
.toast-win  { background: rgba(46,204,113,.15); color: var(--green); border-color: rgba(46,204,113,.3); }
.toast-lose { background: rgba(231,76,60,.12);  color: var(--red);   border-color: rgba(231,76,60,.25); }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ── Hero stat ticker ── */
.hero-stat-ticker {
  display: flex; align-items: center; gap: 2rem;
  margin-top: 1.5rem; padding: 1rem 1.5rem;
  background: rgba(201,168,76,.04);
  border: 1px solid rgba(201,168,76,.12);
  border-radius: 10px;
  opacity: 0; animation: fadeUp .8s 1.1s ease forwards;
  flex-wrap: wrap;
}
.hst-item { text-align: center; }
.hst-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 700; color: var(--gold);
}
.hst-label {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text3); margin-top: 2px;
}
.hst-divider { width: 1px; height: 2rem; background: var(--line2); }

/* ── Section glow line ── */
.section-glow-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.08), transparent);
  transform: scaleX(0); transition: transform 1s ease;
  pointer-events: none;
}
section.in-view .section-glow-line { transform: scaleX(1); }

/* ── Active nav link ── */
.nav-center a.active { color: var(--text); }
.nav-center a.active::after { width: 100%; }

/* ── Active mines board glow ── */
.mines-board.active-game {
  box-shadow: 0 0 40px rgba(201,168,76,.08), inset 0 0 30px rgba(201,168,76,.03);
}

/* ── Split chars (hero eyebrow) ── */
.split-char {
  display: inline-block;
  opacity: 0; transform: translateY(8px);
  animation: splitReveal .5s ease forwards;
}
@keyframes splitReveal { to { opacity: 1; transform: translateY(0); } }

/* ── Loader particles ── */
.loader-particles {
  position: absolute; inset: 0; pointer-events: none;
}
.lp-dot {
  position: absolute; bottom: 0;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  animation: lpRise var(--dur, 4s) var(--delay, 0s) ease-in-out infinite;
}
@keyframes lpRise {
  0%   { transform: translateY(0);    opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .1; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

/* ── Form focused state ── */
.form-group.focused label { color: var(--gold); }

/* ── Mines board CSS vars injected by apex.js ── */
input[type=range].mines-slider {
  --pct: 12%;
}