@keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes glow {
            from { box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); }
            to { box-shadow: 0 0 30px rgba(0, 255, 65, 0.6), 0 0 40px rgba(0, 255, 65, 0.3); }
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes pulseGreen {
            0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); }
        }
        
        @keyframes matrix {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100vh); }
        }

                @keyframes glowRed {
        from { box-shadow: 0 0 5px #ff4444; }
        to { box-shadow: 0 0 20px #ff0000; }
        }
        button.bg-red-600:hover {
        animation: glowRed 1s alternate infinite;
        }

        #admin-nav-btn {
    z-index: 10;
    position: relative;
}

.admin-active {
    animation: pulseGreen 2s infinite;
    border-color: #00ff41 !important;
    background: rgba(0, 255, 65, 0.1);
}

.admin-active {
  animation: pulseGreen 2s infinite;
  border-color: #00ff41 !important;
  background: rgba(0, 255, 65, 0.15);
}

#lightbox {
  animation: fadeIn 0.4s ease-out;
  background: radial-gradient(circle at center, rgba(0,255,65,0.05) 0%, rgba(0,0,0,0.95) 100%);
  backdrop-filter: blur(8px);
}
#lightbox-media img, #lightbox-media video {
  box-shadow: 0 0 40px rgba(0,255,65,0.25);
}




/* === Pinned Timeline Styles === */
.timeline-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}


.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

#timeline-title {
  position: relative;
  z-index: 9999 !important;
}



#timeline-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, #00ff41, transparent);
  opacity: 0.2;
}

#timeline {
  position: relative;
}


#timeline h2 {
  background: black; /* avoid transparency issues */
  padding: 1rem 0;
  z-index: 9999;
}

#timeline-container {
  padding-top: 3rem;
}


#timeline-fixed {
  top: 0;
  pointer-events: none;
}

        
        .gradient-text {
            background: linear-gradient(135deg, #00ff41, #00cc33, #00ff41);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 3s ease infinite;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            opacity: 0.1;
        }
        
        .matrix-char {
            position: absolute;
            color: #00ff41;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            animation: matrix 20s linear infinite;
        }
        
        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: linear-gradient(90deg, transparent, #00ff41, transparent);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .nav-link:hover {
            color: #00ff41;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
            transform: translateY(-2px);
        }
        
        .team-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid #333;
            position: relative;
            overflow: hidden;
        }
        
        .team-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.1), transparent);
            transition: left 0.5s ease;
        }
        
        .team-card:hover::before {
            left: 100%;
        }
        
        .team-card:hover {
            transform: translateY(-10px) scale(1.02);
            border-color: #00ff41;
            box-shadow: 0 20px 40px rgba(0, 255, 65, 0.2);
        }
        
        .blog-card {
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        
        .blog-card:hover {
            transform: translateY(-8px) rotateX(5deg);
            box-shadow: 0 15px 35px rgba(0, 255, 65, 0.2);
        }
        
        .hero-bg {
            background: radial-gradient(circle at 20% 80%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
                        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
        }
        
        .section-enter {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }
        
        .section-enter.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .typing-effect {
            border-right: 2px solid #00ff41;
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 50% { border-color: #00ff41; }
            51%, 100% { border-color: transparent; }
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #00ff41;
            border-radius: 50%;
            pointer-events: none;
        }
        
        .modal {
            backdrop-filter: blur(10px);
            background: rgba(0, 0, 0, 0.8);
        }

        #department-modal {
            z-index: 50; /* base layer */
        }

        #member-modal {
            z-index: 60; /* above department modal */
        }
        
        .modal-content {
            animation: modalSlideIn 0.3s ease-out;
        }
        
        @keyframes modalSlideIn {
            from { opacity: 0; transform: scale(0.8) translateY(-50px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        
        .btn-glow {
            position: relative;
            overflow: hidden;
        }
        
        .btn-glow::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .btn-glow:hover::before {
            left: 100%;
        }
        
        .loading-spinner {
            border: 2px solid #333;
            border-top: 2px solid #00ff41;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }