/* STARLORD PRO GOLD — effects layer.
   Load after common.css. Purely presentational: preloader, particles,
   shimmer, reveal-on-scroll, ripples, glow-follow, count-up support. */

/* ---------------- Preloader ---------------- */
#sl-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1c1608 0%, #07050200 70%), #07050280;
  background-color: #05040200;
  backdrop-filter: blur(2px);
  transition: opacity .6s ease, visibility .6s ease;
}
#sl-preloader.sl-hide { opacity: 0; visibility: hidden; pointer-events: none; }
#sl-preloader::before {
  content: ""; position: absolute; inset: 0;
  background: #07050a;
}
.sl-loader-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sl-ring-wrap { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.sl-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f5c542; border-right-color: #ffe27a55;
  animation: sl-spin 1.1s linear infinite;
}
.sl-ring.sl-ring-2 { inset: 12px; border-top-color: #ffe27a; border-right-color: transparent; animation-duration: 1.6s; animation-direction: reverse; }
.sl-ring.sl-ring-3 { inset: 24px; border-top-color: #b9861e; animation-duration: 2.1s; }
.sl-loader-mark {
  position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font: 700 20px Orbitron, sans-serif;
  background: linear-gradient(145deg, #3a2c0e, #17110a);
  color: #ffe27a; box-shadow: 0 0 24px #f5c54270;
  animation: sl-pulse 1.6s ease-in-out infinite;
}
.sl-loader-text {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(100deg, #fff3cf, #f5c542, #b9861e, #ffe27a, #fff3cf);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sl-goldshift 3s linear infinite;
}
.sl-loader-bar { width: 160px; height: 3px; border-radius: 3px; background: #241b0c; overflow: hidden; }
.sl-loader-bar > span {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #ffe27a, #f5c542, transparent);
  animation: sl-barslide 1.2s ease-in-out infinite;
}
@keyframes sl-spin { to { transform: rotate(360deg); } }
@keyframes sl-pulse { 0%, 100% { box-shadow: 0 0 18px #f5c54255; } 50% { box-shadow: 0 0 32px #f5c542aa; } }
@keyframes sl-goldshift { to { background-position: 200% center; } }
@keyframes sl-barslide { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }

/* ---------------- Gold particle canvas ---------------- */
#sl-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .55;
}

/* ---------------- Page entrance ---------------- */
body.sl-ready { animation: sl-body-in .5s ease both; }
@keyframes sl-body-in { from { opacity: 0; } to { opacity: 1; } }

.sl-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.sl-reveal.sl-in { opacity: 1; transform: translateY(0); }

/* ---------------- Shimmer sweep on cards/panels ---------------- */
.panel, .stat, .plan-card, .team-panel, .member-panel, .login-card,
.team-summary article, .member-summary article, .balance, .limit-card {
  position: relative;
}
.panel::before, .stat::before, .plan-card::before, .team-panel::before, .member-panel::before,
.login-card::before, .team-summary article::before, .member-summary article::before,
.balance::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255,226,122,.14) 45%, transparent 70%);
  background-size: 250% 250%;
  background-position: -120% -120%;
  transition: background-position 1.1s ease;
}
.panel:hover::before, .stat:hover::before, .plan-card:hover::before, .team-panel:hover::before,
.member-panel:hover::before, .login-card:hover::before, .team-summary article:hover::before,
.member-summary article:hover::before, .balance:hover::before {
  background-position: 120% 120%;
}

/* hover lift */
.plan-card, .stat, .team-summary article, .member-summary article, .product, .network-card, .wallet-option {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.plan-card:hover, .stat:hover, .team-summary article:hover, .member-summary article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px #f5c54233, 0 0 0 1px var(--gold-line, rgba(245,197,66,.35));
}

/* glowing animated border pulse for featured / limit cards */
.plan-card.featured, .limit-card {
  animation: sl-border-pulse 3.4s ease-in-out infinite;
}
@keyframes sl-border-pulse {
  0%, 100% { box-shadow: 0 0 22px #f5c54233, var(--sl-shadow, 0 18px 46px #00000080); }
  50% { box-shadow: 0 0 44px #f5c542aa, var(--sl-shadow, 0 18px 46px #00000080); }
}

/* number count-up ready state (JS toggles data-counted) */
[data-count] { font-variant-numeric: tabular-nums; }

/* ripple on click for buttons */
.sl-ripple { position: relative; overflow: hidden; }
.sl-ripple-dot {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.55);
  transform: scale(0); animation: sl-ripple .6s ease-out forwards;
}
@keyframes sl-ripple { to { transform: scale(2.6); opacity: 0; } }

/* cursor-follow glow (desktop only) */
#sl-cursor-glow {
  position: fixed; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,66,.10), transparent 70%);
  pointer-events: none; z-index: 1; transform: translate(-50%, -50%);
  transition: opacity .3s ease; opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  #sl-cursor-glow.sl-active { opacity: 1; }
}

/* gold confetti/spark burst */
.sl-spark {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: #ffe27a; box-shadow: 0 0 8px #ffe27a;
  pointer-events: none; z-index: 60;
  animation: sl-spark-fly .9s ease-out forwards;
}
@keyframes sl-spark-fly {
  to { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

/* toast glow-up */
.toast.show { animation: sl-toast-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes sl-toast-in { from { transform: translateY(30px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #sl-particles, #sl-cursor-glow, .sl-spark { display: none !important; }
  .sl-reveal { opacity: 1 !important; transform: none !important; }
}