/* ═══════════════════════════════════════════════════════════════════
   MAIN THEME - PARTICLES & ADVANCED EFFECTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Floating Particles ──────────────────────────────────────────── */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(0, 229, 255, 0.3);
  border-radius: 50%;
  animation: floatUp 20s linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 15s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 22s; width: 5px; height: 5px; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 18s; }
.particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 25s; width: 4px; height: 4px; }
.particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 20s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 17s; width: 6px; height: 6px; }
.particle:nth-child(7) { left: 70%; animation-delay: 2.5s; animation-duration: 23s; }
.particle:nth-child(8) { left: 80%; animation-delay: 4.5s; animation-duration: 19s; width: 4px; height: 4px; }
.particle:nth-child(9) { left: 90%; animation-delay: 1.5s; animation-duration: 21s; }
.particle:nth-child(10) { left: 15%; animation-delay: 6s; animation-duration: 26s; width: 3px; height: 3px; }

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100vh) scale(1.2);
    opacity: 0;
  }
}

/* ── Glowing Orbs Background ────────────────────────────────────── */
.glowing-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.orb-cyan {
  width: 400px;
  height: 400px;
  background: rgba(0, 229, 255, 0.2);
  top: -100px;
  left: -100px;
  animation: orbFloat1 15s ease-in-out infinite;
}

.orb-gold {
  width: 350px;
  height: 350px;
  background: rgba(229, 179, 64, 0.15);
  bottom: -50px;
  right: -50px;
  animation: orbFloat2 18s ease-in-out infinite;
}

.orb-purple {
  width: 300px;
  height: 300px;
  background: rgba(155, 89, 182, 0.1);
  top: 50%;
  left: 50%;
  animation: orbFloat3 20s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, 30px) scale(1.1); }
  66% { transform: translate(-30px, 60px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, -50px) scale(1.05); }
  66% { transform: translate(60px, -30px) scale(1.1); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-45%, -55%) scale(1.15); }
}

/* ── Sparkle Animation ──────────────────────────────────────────── */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #00e5ff, #e5b340);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: sparkleAnim 1s ease-out forwards;
  pointer-events: none;
}

@keyframes sparkleAnim {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0;
  }
}

/* ── Button Ripple Effect ────────────────────────────────────────── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.btn-ripple:active::after {
  width: 200%;
  height: 200%;
}

/* ── Neon Glow Text ──────────────────────────────────────────────── */
.neon-glow {
  animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
  from {
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5),
                 0 0 10px rgba(0, 229, 255, 0.3),
                 0 0 20px rgba(0, 229, 255, 0.2);
  }
  to {
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.8),
                 0 0 20px rgba(0, 229, 255, 0.5),
                 0 0 40px rgba(0, 229, 255, 0.3),
                 0 0 80px rgba(0, 229, 255, 0.1);
  }
}

/* ── Shimmer Effect ──────────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.1) 50%, 
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmerMove 2s linear infinite;
}

@keyframes shimmerMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Floating Animation ──────────────────────────────────────────── */
.float-animation {
  animation: floatGentle 3s ease-in-out infinite;
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ── Pulse Ring ───────────────────────────────────────────────────── */
.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(0, 229, 255, 0.4);
  animation: pulseRingAnim 2s ease-out infinite;
}

@keyframes pulseRingAnim {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* ── Gradient Border Rotate ──────────────────────────────────────── */
.gradient-border-rotate {
  position: relative;
  background: rgba(10, 18, 36, 0.9);
  border-radius: 12px;
  z-index: 1;
}

.gradient-border-rotate::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #00e5ff, #e5b340, #9b59b6, #00e5ff);
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
}

.gradient-border-rotate::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #00e5ff, #e5b340, #9b59b6, #00e5ff);
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
  filter: blur(8px);
  opacity: 0.6;
}

@keyframes rotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Bounce In Animation ──────────────────────────────────────────── */
.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Slide In Animations ──────────────────────────────────────────── */
.slide-in-left {
  animation: slideInLeft 0.5s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.5s ease-out;
}

.slide-in-up {
  animation: slideInUp 0.5s ease-out;
}

.slide-in-down {
  animation: slideInDown 0.5s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Flip Animation ──────────────────────────────────────────────── */
.flip-in {
  animation: flipIn 0.6s ease-out;
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

/* ── Shake Animation ─────────────────────────────────────────────── */
.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ── Wiggle Animation ───────────────────────────────────────────── */
.wiggle {
  animation: wiggle 0.3s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* ── Heartbeat Animation ────────────────────────────────────────── */
.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

/* ── Glitch Effect ────────────────────────────────────────────────── */
.glitch {
  position: relative;
  animation: glitch 1s linear infinite;
}

@keyframes glitch {
  2%, 64% { transform: translate(2px, 0) skew(0deg); }
  4%, 60% { transform: translate(-2px, 0) skew(0deg); }
  62% { transform: translate(0, 0) skew(5deg); }
}

/* ── Magnetic Button Effect ─────────────────────────────────────── */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.magnetic-btn:hover {
  transform: scale(1.05);
}

/* ── Glass Reflection Effect ──────────────────────────────────────── */
.glass-reflection {
  position: relative;
  overflow: hidden;
}

.glass-reflection::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  transition: transform 0.6s;
  pointer-events: none;
}

.glass-reflection:hover::before {
  transform: rotate(45deg) translate(50%, 50%);
}

/* ── Staggered Fade In for Lists ────────────────────────────────── */
.stagger-fade-in > * {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
}

.stagger-fade-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-fade-in > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-fade-in > *:nth-child(8) { animation-delay: 0.8s; }
.stagger-fade-in > *:nth-child(9) { animation-delay: 0.9s; }
.stagger-fade-in > *:nth-child(10) { animation-delay: 1s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}