/* ========================================================= */
/* 🔱 AstralGuard Nitro Tier Styles - Unified Final Version  */
/* For: writeup-content page (avatars + tier badges)         */
/* ========================================================= */

/* ------------------------------ */
/* PHANTOM - Top Tier (Majestic Purple Glow) */
/* ------------------------------ */
.tier-phantom {
  --tier-color: #9b30ff;
  border-radius: 50%;
  border: 3px solid var(--tier-color);
  box-shadow:
    0 0 25px var(--tier-color),
    0 0 50px rgba(155, 48, 255, 0.7),
    0 0 80px rgba(155, 48, 255, 0.5);
  animation: phantom-pulse 2.5s ease-in-out infinite;
}

@keyframes phantom-pulse {
  0%, 100% {
    box-shadow:
      0 0 25px var(--tier-color),
      0 0 50px rgba(155, 48, 255, 0.7),
      0 0 80px rgba(155, 48, 255, 0.5);
  }
  50% {
    box-shadow:
      0 0 40px var(--tier-color),
      0 0 80px rgba(155, 48, 255, 0.8),
      0 0 120px rgba(155, 48, 255, 0.6);
  }
}

/* ------------------------------ */
/* ELITE - Golden Majesty Glow */
/* ------------------------------ */
.tier-elite {
  --tier-color: #ffd700;
  border-radius: 50%;
  border: 3px solid var(--tier-color);
  box-shadow:
    0 0 20px var(--tier-color),
    0 0 40px rgba(255, 215, 0, 0.7),
    0 0 70px rgba(255, 215, 0, 0.4);
  animation: elite-pulse 2.5s ease-in-out infinite;
}

@keyframes elite-pulse {
  0%, 100% {
    box-shadow:
      0 0 15px var(--tier-color),
      0 0 30px rgba(255, 215, 0, 0.7);
  }
  50% {
    box-shadow:
      0 0 30px var(--tier-color),
      0 0 60px rgba(255, 215, 0, 0.9);
  }
}

/* ------------------------------ */
/* RED TEAM - Intense Crimson Energy */
/* ------------------------------ */
.tier-red-team {
  --tier-color: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--tier-color);
  box-shadow:
    0 0 15px var(--tier-color),
    0 0 35px rgba(239, 68, 68, 0.6);
  animation: red-pulse 2.5s ease-in-out infinite;
}

@keyframes red-pulse {
  0%, 100% {
    box-shadow:
      0 0 15px var(--tier-color),
      0 0 35px rgba(239, 68, 68, 0.6);
  }
  50% {
    box-shadow:
      0 0 25px var(--tier-color),
      0 0 50px rgba(239, 68, 68, 0.8);
  }
}

/* ------------------------------ */
/* BLUE TEAM - Cool Royal Blue Glow */
/* ------------------------------ */
.tier-blue-team {
  --tier-color: #1d4ed8; /* Rich royal blue */
  border-radius: 50%;
  border: 2px solid var(--tier-color);
  box-shadow:
    0 0 15px var(--tier-color),
    0 0 35px rgba(29, 78, 216, 0.6);
  animation: blue-pulse 3s ease-in-out infinite;
}

@keyframes blue-pulse {
  0%, 100% {
    box-shadow:
      0 0 15px var(--tier-color),
      0 0 35px rgba(29, 78, 216, 0.6);
  }
  50% {
    box-shadow:
      0 0 30px var(--tier-color),
      0 0 55px rgba(29, 78, 216, 0.8);
  }
}

/* ------------------------------ */
/* GHOST - Radiant Neon Green */
/* ------------------------------ */
.tier-ghost {
  --tier-color: #10b981;
  border-radius: 50%;
  border: 2px solid var(--tier-color);
  box-shadow:
    0 0 15px var(--tier-color),
    0 0 30px rgba(16, 185, 129, 0.5);
  animation: ghost-pulse 3s ease-in-out infinite;
}

@keyframes ghost-pulse {
  0%, 100% {
    box-shadow:
      0 0 15px var(--tier-color),
      0 0 30px rgba(16, 185, 129, 0.5);
  }
  50% {
    box-shadow:
      0 0 25px var(--tier-color),
      0 0 50px rgba(16, 185, 129, 0.7);
  }
}

/* ------------------------------ */
/* PEASANT - Faded Minimal Tier */
/* ------------------------------ */
.tier-peasant {
  --tier-color: #6b7280;
  border-radius: 50%;
  border: 1px solid var(--tier-color);
  box-shadow:
    0 0 5px var(--tier-color),
    0 0 10px rgba(107, 114, 128, 0.3);
  animation: none;
}

@keyframes peasant-pulse {
  0%, 100% {
    box-shadow:
      0 0 5px var(--tier-color),
      0 0 10px rgba(107, 114, 128, 0.3);
  }
  50% {
    box-shadow:
      0 0 8px var(--tier-color),
      0 0 16px rgba(107, 114, 128, 0.4);
  }
}

/* ========================================================= */
/* ✨ Avatar Glow Base + Rotation Effect                     */
/* ========================================================= */
.avatar-glow {
  border-radius: 50%;
  transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.avatar-glow img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  animation: avatar-rotate 10s linear infinite;
  transform-origin: center center;
}

.avatar-glow:hover img {
  animation-duration: 20s;
}

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

/* ========================================================= */
/* 🏷️ Author Name & Tier Labels - Rectangular Glowing Badges */
/* ========================================================= */
.author-name,
.tier-label,
span.font-bold[class*="tier-"] {
  display: inline-block;
  border-radius: 8px;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--tier-color);
  color: var(--tier-color);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
}

.author-name:hover,
.tier-label:hover,
span.font-bold[class*="tier-"]:hover {
  box-shadow: 0 0 12px var(--tier-color);
}

/* ------------------------------ */
/* PHANTOM */
span.font-bold.tier-phantom {
  background: linear-gradient(135deg, #4c0099, #9b30ff);
  color: #f8ecff;
  box-shadow: 0 0 18px #9b30ff;
}

/* ELITE */
span.font-bold.tier-elite {
  background: linear-gradient(135deg, #b8860b, #ffd700);
  color: #fff9e6;
  box-shadow: 0 0 15px #ffd700;
}

/* RED TEAM */
span.font-bold.tier-red-team {
  background: linear-gradient(135deg, #7f1d1d, #ef4444);
  color: #fff;
  box-shadow: 0 0 12px #ef4444;
}

/* BLUE TEAM */
span.font-bold.tier-blue-team {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  box-shadow: 0 0 12px #2563eb;
}

/* GHOST */
span.font-bold.tier-ghost {
  background: linear-gradient(135deg, #065f46, #10b981);
  color: #eafff6;
  box-shadow: 0 0 12px #10b981;
}

/* PEASANT */
span.font-bold.tier-peasant {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
  box-shadow: 0 0 6px #6b7280;
}

/* ========================================================= */
/* 🧩 Remove Unwanted Rotation/Animation on Text Elements     */
/* ========================================================= */
span.tier-phantom,
span.tier-elite,
span.tier-red-team,
span.tier-blue-team,
span.tier-ghost,
span.tier-peasant {
  animation: none !important;
  transform: none !important;
}

/* ========================================================= */
/* 🧠 Dynamic Tier Inheritance for Single Writeup Page       */
/* Applies Nitro tier colors & glow when tier class is on   */
/* avatar or author name directly                            */
/* ========================================================= */
.avatar-glow.tier-phantom img,
.avatar-glow.tier-elite img,
.avatar-glow.tier-red-team img,
.avatar-glow.tier-blue-team img,
.avatar-glow.tier-ghost img,
.avatar-glow.tier-peasant img {
  border-color: var(--tier-color);
  box-shadow: 0 0 20px var(--tier-color);
}

.author-name.tier-phantom,
.author-name.tier-elite,
.author-name.tier-red-team,
.author-name.tier-blue-team,
.author-name.tier-ghost,
.author-name.tier-peasant,
.tier-label.tier-phantom,
.tier-label.tier-elite,
.tier-label.tier-red-team,
.tier-label.tier-blue-team,
.tier-label.tier-ghost,
.tier-label.tier-peasant {
  border-color: var(--tier-color);
  color: var(--tier-color);
  text-shadow: 0 0 8px var(--tier-color);
  transition: all 0.3s ease-in-out;
}

.author-name[class*="tier-"]:hover,
.tier-label[class*="tier-"]:hover {
  box-shadow: 0 0 12px var(--tier-color), 0 0 24px var(--tier-color);
}

/* Match avatar pulse to tier animation */
.avatar-glow.tier-phantom img { animation: avatar-rotate 10s linear infinite, phantom-pulse 2.5s ease-in-out infinite; }
.avatar-glow.tier-elite img   { animation: avatar-rotate 10s linear infinite, elite-pulse 2.5s ease-in-out infinite; }
.avatar-glow.tier-red-team img{ animation: avatar-rotate 10s linear infinite, red-pulse 2.5s ease-in-out infinite; }
.avatar-glow.tier-blue-team img{ animation: avatar-rotate 10s linear infinite, blue-pulse 3s ease-in-out infinite; }
.avatar-glow.tier-ghost img   { animation: avatar-rotate 10s linear infinite, ghost-pulse 3s ease-in-out infinite; }
.avatar-glow.tier-peasant img { animation: avatar-rotate 10s linear infinite; }

/* ========================================================= */
/* ✅ Responsive Avatar Sizing                                */
/* ========================================================= */
@media (max-width: 600px) {
  .avatar-glow img {
    width: 55px;
    height: 55px;
  }
}