/* ===== BACKGROUND ANIMATION ===== */
.main-background {
    animation: gradientBG 15s ease infinite;
  }
  
  @keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* ===== CARD GLOW ===== */
  .glow-card {
    animation: glow 2s infinite alternate;
  }
  
  @keyframes glow {
    from { box-shadow: 0 0 10px var(--gold); }
    to { box-shadow: 0 0 20px var(--diamond); }
  }
  
  /* ===== BUTTON EFFECTS ===== */
  .pulse-on-hover:hover {
    animation: pulse 1.5s infinite;
  }
  
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(0, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
  }
  
  /* ===== STATUS BADGE GLOW ===== */
  .status-badge.online {
    animation: onlineGlow 2s infinite alternate;
  }
  
  .status-badge.offline {
    animation: offlineGlow 2s infinite alternate;
  }
  
  @keyframes onlineGlow {
    from { box-shadow: 0 0 5px var(--grass); }
    to { box-shadow: 0 0 15px var(--grass); }
  }
  
  @keyframes offlineGlow {
    from { box-shadow: 0 0 5px var(--redstone); }
    to { box-shadow: 0 0 15px var(--redstone); }
  }
  
  /* ===== MOTD GLOW ===== */
  .motd-box {
    animation: motdGlow 3s infinite alternate;
  }
  
  @keyframes motdGlow {
    from { box-shadow: 0 0 5px var(--gold); }
    to { box-shadow: 0 0 15px var(--gold); }
  }
  
  /* ===== LOADING SPINNER ===== */
  .loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: var(--gold);
    animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }