/* ==== GLOBAL ==== */
:root { --mouse-x: 0px; --mouse-y: 0px; }
body { overflow-x: hidden; }
/* In styles.css */
* {
  font-family: 'JetBrains Mono', monospace !important;
}
/* ==== FROSTED GLASS – NAVBAR ==== */
.frosted-nav {
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  border-radius: 9999px;
}
.light .frosted-nav {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ==== DROPDOWN – BLUR + POSITION ==== */
#offensive-dropdown > .frosted-nav {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 1.5rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.light #offensive-dropdown > .frosted-nav {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* ==== TEXT COLOR – LIGHT MODE ==== */
#offensive-dropdown .text-white { color: white; }
.dark #offensive-dropdown .text-white { color: white; }
.light #offensive-dropdown .text-white { color: #000 !important; }

#offensive-dropdown .text-muted { color: #9ca3af; }
.dark #offensive-dropdown .text-muted { color: #9ca3af; }
.light #offensive-dropdown .text-muted { color: #6b7280; }

/* ==== ICON HOVER IN DROPDOWN ==== */
#offensive-dropdown .group:hover .w-8 {
  background: rgba(0, 255, 136, 0.2) !important;
  transition: background 0.3s ease;
}

/* ==== TEAM CARD – GREYSCALE HOVER EFFECT ==== */

 .team-card img.grayscale {
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.team-card:hover img.grayscale {
  filter: grayscale(0%);
  transform: scale(1.05);
} 
.team-card .bg-gradient-to-t {
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* TEAM PHOTOS — GREYSCALE + SMOOTH ZOOM ON HOVER */
.team-photo {
  filter: grayscale(100%);
  transition: filter 0.6s ease, transform 0.6s ease;
  transform: scale(1);
}

/* FULL COLOR + ZOOM WHEN HOVERING IMAGE */
.team-photo:hover {
  filter: grayscale(0%);
  transform: scale(1.08); /* ← Subtle, elegant zoom */
}


/* ==== MAIN ORB — BIGGER & BOLDER ==== */
.orb {
  position: fixed;
  left: 50%; 
  top: 50%;
  width: min(100vw, 1200px);   /* ← BIGGER */
  height: min(100vw, 1200px);  /* ← BIGGER */
  border-radius: 50%;
  background: radial-gradient(circle at center, hsl(272, 100%, 50%) 0%, transparent 90%);
  filter: blur(100px);         /* ← Softer blur for larger size */
  opacity: 0.6;                /* ← Slightly more visible */
  transform: translate(-50%, -50%) translate(var(--mouse-x,0px), var(--mouse-y,0px));
  z-index: 0;
  pointer-events: none;        /* ← Keep this! */
  animation: pulse-orb 6s ease-in-out infinite,
             glow-breath 4s ease-in-out infinite alternate,
             orb-drift 15s ease-in-out infinite;
}
@media (max-width: 768px) {
  .orb { 
    filter: blur(80px); 
    opacity: 0.7; 
    width: min(95vw, 700px);
    height: min(95vw, 700px);
  }
}
/*00ff88
/* ==== GLOW CARDS ==== */
.glow-card {
  position: relative;
  overflow: visible;
  border: 1px solid #1a1a1a;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(8px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border-radius: 1.5rem;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* text-align: center; ← DELETED */
  transform: translateY(0);
}

.dark .glow-card { 
  border-color: #1a1a1a; 
  background: rgba(10,10,10,0.5); 
}
.light .glow-card {
  border-color: #e0e0e0;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.glow-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* ==== THEME COLORS ==== */
.dark  { background:#000; color:#e5e5e5; }
.light { background:#f9f9f9; color:#1a1a1a; }
.dark  .text-muted { color:#9ca3af; }
.light .text-muted { color:#6c757d; }

/* ==== SCROLLBAR ==== */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#111; }
::-webkit-scrollbar-thumb { background:#00ff88; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#00cc70; }