/* ============================================
   RPG SKILLS — RPG Background Effects
   ============================================ */

/* ── GLOBAL PARTICLES (fixed, covers entire page) ── */
.global-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.gp {
  position: absolute;
  border-radius: 50%;
  animation: gpFloat linear infinite;
}

/* gold particles */
.gp.g { background: rgba(212,136,28,.45); box-shadow: 0 0 6px rgba(212,136,28,.25); }
/* white sparkles */
.gp.w { background: rgba(255,255,255,.35); box-shadow: 0 0 4px rgba(255,255,255,.2); }
/* dim gold dust */
.gp.d { background: rgba(212,136,28,.18); box-shadow: 0 0 3px rgba(212,136,28,.1); }

/* Positions & timings — 30 particles spread across viewport */
.gp:nth-child(1)  { left: 3%;  width: 2px; height: 2px; animation-duration: 22s; animation-delay: 0s; }
.gp:nth-child(2)  { left: 8%;  width: 3px; height: 3px; animation-duration: 18s; animation-delay: -3s; }
.gp:nth-child(3)  { left: 14%; width: 1px; height: 1px; animation-duration: 28s; animation-delay: -7s; }
.gp:nth-child(4)  { left: 20%; width: 2px; height: 2px; animation-duration: 20s; animation-delay: -1s; }
.gp:nth-child(5)  { left: 26%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: -10s; }
.gp:nth-child(6)  { left: 32%; width: 1px; height: 1px; animation-duration: 30s; animation-delay: -5s; }
.gp:nth-child(7)  { left: 38%; width: 2px; height: 2px; animation-duration: 24s; animation-delay: -14s; }
.gp:nth-child(8)  { left: 44%; width: 2px; height: 2px; animation-duration: 19s; animation-delay: -8s; }
.gp:nth-child(9)  { left: 50%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: -2s; }
.gp:nth-child(10) { left: 56%; width: 1px; height: 1px; animation-duration: 26s; animation-delay: -12s; }
.gp:nth-child(11) { left: 62%; width: 2px; height: 2px; animation-duration: 21s; animation-delay: -6s; }
.gp:nth-child(12) { left: 68%; width: 2px; height: 2px; animation-duration: 23s; animation-delay: -9s; }
.gp:nth-child(13) { left: 74%; width: 3px; height: 3px; animation-duration: 15s; animation-delay: -4s; }
.gp:nth-child(14) { left: 80%; width: 1px; height: 1px; animation-duration: 29s; animation-delay: -11s; }
.gp:nth-child(15) { left: 86%; width: 2px; height: 2px; animation-duration: 20s; animation-delay: -1s; }
.gp:nth-child(16) { left: 92%; width: 2px; height: 2px; animation-duration: 25s; animation-delay: -15s; }
.gp:nth-child(17) { left: 6%;  width: 1px; height: 1px; animation-duration: 32s; animation-delay: -8s; }
.gp:nth-child(18) { left: 17%; width: 3px; height: 3px; animation-duration: 14s; animation-delay: -2s; }
.gp:nth-child(19) { left: 41%; width: 1px; height: 1px; animation-duration: 27s; animation-delay: -18s; }
.gp:nth-child(20) { left: 53%; width: 2px; height: 2px; animation-duration: 22s; animation-delay: -13s; }
.gp:nth-child(21) { left: 71%; width: 1px; height: 1px; animation-duration: 35s; animation-delay: -6s; }
.gp:nth-child(22) { left: 83%; width: 2px; height: 2px; animation-duration: 18s; animation-delay: -20s; }
.gp:nth-child(23) { left: 11%; width: 2px; height: 2px; animation-duration: 24s; animation-delay: -16s; }
.gp:nth-child(24) { left: 35%; width: 1px; height: 1px; animation-duration: 30s; animation-delay: -4s; }
.gp:nth-child(25) { left: 59%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: -9s; }
.gp:nth-child(26) { left: 77%; width: 1px; height: 1px; animation-duration: 33s; animation-delay: -14s; }
.gp:nth-child(27) { left: 47%; width: 2px; height: 2px; animation-duration: 21s; animation-delay: -7s; }
.gp:nth-child(28) { left: 95%; width: 1px; height: 1px; animation-duration: 28s; animation-delay: -19s; }
.gp:nth-child(29) { left: 23%; width: 2px; height: 2px; animation-duration: 19s; animation-delay: -11s; }
.gp:nth-child(30) { left: 65%; width: 2px; height: 2px; animation-duration: 25s; animation-delay: -3s; }

@keyframes gpFloat {
  0% {
    bottom: -4%;
    opacity: 0;
    transform: translateX(0) scale(1);
  }
  8% {
    opacity: .7;
    transform: translateX(8px) scale(1.15);
  }
  25% {
    transform: translateX(25px) scale(1);
    opacity: .5;
  }
  50% {
    transform: translateX(-15px) scale(.9);
    opacity: .65;
  }
  75% {
    transform: translateX(20px) scale(1.05);
    opacity: .35;
  }
  92% {
    opacity: .15;
  }
  100% {
    bottom: 104%;
    opacity: 0;
    transform: translateX(-10px) scale(1);
  }
}

/* ── FLOATING RUNES (global) ── */
.global-runes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.gr {
  position: absolute;
  font-family: serif;
  color: rgba(212,136,28,.07);
  animation: grFloat 16s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(212,136,28,.1);
}

.gr:nth-child(1)  { left: 5%;  top: 15%; font-size: 22px; animation-delay: 0s; }
.gr:nth-child(2)  { left: 12%; top: 55%; font-size: 16px; animation-delay: -3s; color: rgba(212,136,28,.05); }
.gr:nth-child(3)  { left: 28%; top: 30%; font-size: 20px; animation-delay: -6s; }
.gr:nth-child(4)  { left: 42%; top: 75%; font-size: 14px; animation-delay: -9s; color: rgba(212,136,28,.04); }
.gr:nth-child(5)  { left: 58%; top: 20%; font-size: 18px; animation-delay: -2s; }
.gr:nth-child(6)  { left: 72%; top: 60%; font-size: 24px; animation-delay: -5s; color: rgba(212,136,28,.06); }
.gr:nth-child(7)  { left: 85%; top: 35%; font-size: 15px; animation-delay: -8s; }
.gr:nth-child(8)  { left: 92%; top: 80%; font-size: 20px; animation-delay: -11s; color: rgba(212,136,28,.05); }
.gr:nth-child(9)  { left: 35%; top: 90%; font-size: 17px; animation-delay: -4s; }
.gr:nth-child(10) { left: 65%; top: 10%; font-size: 21px; animation-delay: -7s; color: rgba(212,136,28,.06); }

@keyframes grFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: .3;
  }
  25% {
    opacity: .6;
  }
  50% {
    transform: translateY(-30px) rotate(10deg);
    opacity: .4;
  }
  75% {
    opacity: .55;
  }
}

/* ── MAGIC CIRCLES (global, subtle) ── */
.global-circles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.gc {
  position: absolute;
  border: 1px solid rgba(212,136,28,.04);
  border-radius: 50%;
}

.gc::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(212,136,28,.03);
  border-radius: 50%;
  animation: gcSpin 40s linear infinite;
}

.gc:nth-child(1) { width: 400px; height: 400px; top: -5%;  left: -5%;  animation: gcSpin 30s linear infinite reverse; }
.gc:nth-child(2) { width: 350px; height: 350px; bottom: -8%; right: -8%; animation: gcSpin 35s linear infinite; border-color: rgba(212,136,28,.03); }
.gc:nth-child(3) { width: 250px; height: 250px; top: 40%; left: 60%;  animation: gcSpin 45s linear infinite reverse; border-color: rgba(212,136,28,.025); }
.gc:nth-child(4) { width: 300px; height: 300px; top: 70%; left: 10%;  animation: gcSpin 50s linear infinite; border-color: rgba(212,136,28,.02); }

@keyframes gcSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── DARK VIGNETTE (global edges) ── */
.global-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, transparent 0%, rgba(0,0,0,.55) 100%);
}

/* ── HERO-ONLY EFFECTS ── */

/* Dark Vignette (hero) */
.rpg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0,0,0,.6) 100%);
  z-index: 2;
}

/* Hero Particles (legacy, inside hero) */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(212,136,28,.4);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(212,136,28,.3);
  animation: particleDrift 15s linear infinite;
}

.particle:nth-child(1)  { left: 10%; animation-delay: 0s; animation-duration: 18s; }
.particle:nth-child(2)  { left: 20%; animation-delay: -2s; animation-duration: 14s; width: 3px; height: 3px; }
.particle:nth-child(3)  { left: 35%; animation-delay: -5s; animation-duration: 20s; }
.particle:nth-child(4)  { left: 50%; animation-delay: -8s; animation-duration: 16s; width: 1px; height: 1px; }
.particle:nth-child(5)  { left: 65%; animation-delay: -3s; animation-duration: 22s; }
.particle:nth-child(6)  { left: 75%; animation-delay: -10s; animation-duration: 13s; width: 3px; height: 3px; }
.particle:nth-child(7)  { left: 85%; animation-delay: -7s; animation-duration: 19s; }
.particle:nth-child(8)  { left: 92%; animation-delay: -12s; animation-duration: 15s; }
.particle:nth-child(9)  { left: 5%;  animation-delay: -4s; animation-duration: 21s; width: 1px; height: 1px; }
.particle:nth-child(10) { left: 45%; animation-delay: -9s; animation-duration: 17s; }
.particle:nth-child(11) { left: 55%; animation-delay: -1s; animation-duration: 24s; width: 2px; height: 2px; }
.particle:nth-child(12) { left: 30%; animation-delay: -6s; animation-duration: 14s; }

@keyframes particleDrift {
  0% {
    bottom: -5%;
    opacity: 0;
    transform: translateX(0) scale(1);
  }
  10% {
    opacity: .7;
    transform: translateX(5px) scale(1.1);
  }
  50% {
    transform: translateX(30px) scale(1);
    opacity: .5;
  }
  90% {
    opacity: .3;
    transform: translateX(-10px) scale(.9);
  }
  100% {
    bottom: 105%;
    opacity: 0;
    transform: translateX(-20px) scale(1);
  }
}

/* HERO BOTTOM FADE */
.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg, transparent, var(--dark));
  pointer-events: none;
  z-index: 5;
}

/* ── SECTION EFFECTS ── */

/* SECTION DIVIDERS */
.section-divider {
  position: relative;
  height: 60px;
  background: var(--dark);
  z-index: 10;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,136,28,.12), transparent);
}

.section-divider::after {
  content: '\25C6  \25C6  \25C6';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(212,136,28,.15);
  font-size: 8px;
  letter-spacing: 8px;
  background: var(--dark);
  padding: 0 20px;
}

/* SECTION GLOW LINES */
.section-glow-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,136,28,.1), transparent);
  z-index: 1;
}

/* SECTION TEXTURE */
.section-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%23c8973a' stroke-width='.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  z-index: 0;
}

/* CARD HOVER MAGIC DUST */
.card-magic {
  position: relative;
  overflow: hidden;
}

.card-magic::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212,136,28,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.card-magic:hover::after {
  opacity: 1;
}