/* Custom Styles for AI NEXUS */

/* Scroll Reveal Animations */
.reveal-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Glow Hover effect */
.glow-hover {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.glow-hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: all 0.5s ease;
}

.glow-hover:hover::after {
    left: 100%;
}

.glow-hover:hover {
    box-shadow: 0 0 20px rgba(0, 227, 253, 0.4);
    transform: translateY(-2px);
}

/* Custom Glassmorphism Card Overlay */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Custom details element styling */
details[open] summary span:last-child {
    transform: rotate(180deg);
}

summary::-webkit-details-marker {
    display: none;
}

summary {
    list-style: none;
}

/* Futuristic Grid & Tech Background Pattern */
.tech-grid {
    background-size: 45px 45px;
    background-image: 
        linear-gradient(to right, rgba(0, 104, 117, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 104, 117, 0.05) 1px, transparent 1px);
}

.tech-dot-pattern {
    background-size: 15px 15px;
    background-image: radial-gradient(rgba(0, 104, 117, 0.08) 1.2px, transparent 1.2px);
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-12px) scale(1.03); }
}

@keyframes float-reverse {
    0%, 100% { transform: translateY(0px) scale(1.03); }
    50% { transform: translateY(12px) scale(0.97); }
}

.animate-float-slow {
    animation: float 10s ease-in-out infinite;
}

.animate-float-reverse {
    animation: float-reverse 12s ease-in-out infinite;
}

/* Rotating Tech Circles */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 50s linear infinite;
}