/* ═══════════════════════════════════════════════════════════════
   VSIGHT — effects.css  |  Particles, fog, bloom, animations
   © Omry Damari — All Rights Reserved
═══════════════════════════════════════════════════════════════ */

/* ── Particle Canvas ── */
#particle-canvas {
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:2;
  opacity:.7;
}

/* ── Gold Line Dividers ── */
.gold-line {
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--gold-dim) 30%, var(--gold-main) 50%, var(--gold-dim) 70%, transparent 100%);
}

/* ── Glowing Orb (used in logo bg) ── */
.orb {
  position:absolute; border-radius:50%;
  filter:blur(40px); opacity:.6; pointer-events:none;
  animation:orbFloat 8s ease-in-out infinite alternate;
}
.orb-blue   { background:rgba(139,48,255,0.35); }
.orb-gold   { background:rgba(var(--accent-rgb),0.28); }
@keyframes orbFloat {
  from { transform:translateY(0); }
  to   { transform:translateY(-20px); }
}

/* ── Hex grid overlay (very subtle) ── */
.hex-grid {
  position:fixed; inset:0; pointer-events:none; z-index:3;
  opacity:.025;
  background-image:
    repeating-linear-gradient(60deg, rgba(var(--accent-rgb),.5) 0, rgba(var(--accent-rgb),.5) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(120deg, rgba(var(--accent-rgb),.5) 0, rgba(var(--accent-rgb),.5) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(180deg, rgba(var(--accent-rgb),.5) 0, rgba(var(--accent-rgb),.5) 1px, transparent 0, transparent 50%);
  background-size:40px 70px;
}

/* ── Screen entry animations ── */
.screen.active .profile-panel-anim { animation:slideInLeft .5s .1s both cubic-bezier(.22,1,.36,1); }
.screen.active .logo-anim          { animation:fadeInUp .6s .15s both cubic-bezier(.22,1,.36,1); }
.screen.active .cta-anim           { animation:fadeInUp .6s .3s both cubic-bezier(.22,1,.36,1); }
.screen.active .news-anim          { animation:slideInLeft .5s .35s both cubic-bezier(.22,1,.36,1); }
@keyframes slideInLeft {
  from { transform:translateX(-30px); opacity:0; }
  to   { transform:translateX(0);     opacity:1; }
}
@keyframes fadeInUp {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}

/* Hero card hover is handled by 3D carousel transforms in styles.css */

/* ── Shimmer on gold elements ── */
@keyframes shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position:400px 0;  }
}
.shimmer {
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(var(--white-rgb),0.06) 40%,
    rgba(var(--white-rgb),0.12) 50%,
    rgba(var(--white-rgb),0.06) 60%,
    transparent 100%
  );
  background-size:800px 100%;
  animation:shimmer 3s linear infinite;
}

/* weapon slot animations removed — slots replaced by champion-loadout */

/* ── Floating particle individual animations (JS driven, CSS helpers) ── */
.particle {
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(180,80,255,0.65);
  animation:particleFade linear infinite;
}
@keyframes particleFade {
  0%   { opacity:0; transform:translateY(0); }
  15%  { opacity:1; }
  85%  { opacity:.8; }
  100% { opacity:0; transform:translateY(-120px); }
}

/* ── Loading spinner ── */
.spinner {
  width:32px; height:32px;
  border:2px solid rgba(var(--accent-rgb),0.15);
  border-top-color:var(--gold-main);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Corner ornament svg ── */
.corner-ornament {
  position:absolute; width:40px; height:40px;
  pointer-events:none; opacity:.6;
}
.corner-ornament.tl { top:0; left:0; }
.corner-ornament.tr { top:0; right:0; transform:scaleX(-1); }
.corner-ornament.bl { bottom:0; left:0; transform:scaleY(-1); }
.corner-ornament.br { bottom:0; right:0; transform:scale(-1,-1); }

/* ── Text glow utility ── */
.text-glow-gold { text-shadow:0 0 12px rgba(var(--accent-rgb),0.75), 0 0 30px rgba(var(--accent-rgb),0.35); }
.text-glow-blue { text-shadow:0 0 12px rgba(224,85,0,0.85), 0 0 30px rgba(139,48,255,0.35); }

/* ── Responsive ── */
@media (max-width:1100px) {
  .settings-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .game-logo { font-size:52px; }
  #news-panel { display:none; }
  .settings-grid { grid-template-columns:1fr; }
}