/* Custom styles for Mahashunya website */

/* Global styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
}

/* Enhanced Header Styles */
.mobile-menu-btn.active .line1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active .line2 {
    opacity: 0;
}

.mobile-menu-btn.active .line3 {
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-menu {
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.mobile-menu.show {
    transform: translateY(0);
    opacity: 1;
}

/* Glassmorphism enhancements */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Enhanced Logo Styles */
.logo-glow {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.4), 0 0 90px rgba(59, 130, 246, 0.2);
    animation: logoFloat 3s ease-in-out infinite;
}

.logo-glow:hover {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.9), 0 0 80px rgba(59, 130, 246, 0.6), 0 0 120px rgba(59, 130, 246, 0.3);
    animation: logoGlow 2s ease-in-out infinite;
}

.logo-shine {
    animation: logoShine 2s linear infinite;
}

.logo-text-glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4);
}

/* Brand Mathematical Effects */
.brand-infinity {
    position: relative;
    animation: brandInfinityGlow 6s ease-in-out infinite;
}

.brand-infinity::before {
    content: '∞';
    position: absolute;
    right: -25px;
    top: -5px;
    font-size: 0.7em;
    opacity: 0;
    color: rgba(59, 130, 246, 0.8);
    animation: infinityReveal 6s ease-in-out infinite;
}

.brand-zero {
    position: relative;
    animation: brandZeroGlow 4s ease-in-out infinite;
}

.brand-zero::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border: 1px solid rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: zeroReveal 4s ease-in-out infinite;
}

@keyframes brandInfinityGlow {
    0%, 100% { 
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(59, 130, 246, 0.6); 
    }
    50% { 
        text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 30px rgba(59, 130, 246, 0.9), 0 0 40px rgba(147, 51, 234, 0.5); 
    }
}

@keyframes brandZeroGlow {
    0%, 100% { 
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 15px rgba(59, 130, 246, 0.4); 
    }
    50% { 
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 25px rgba(59, 130, 246, 0.7); 
    }
}

@keyframes infinityReveal {
    0%, 70% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    80%, 90% { opacity: 0.8; transform: scale(1) rotate(180deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(360deg); }
}

@keyframes zeroReveal {
    0%, 60% { opacity: 0; transform: translateY(-50%) scale(0.5); }
    70%, 85% { opacity: 0.6; transform: translateY(-50%) scale(1.2); }
    100% { opacity: 0; transform: translateY(-50%) scale(0.5); }
}

@keyframes logoGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 50px rgba(59, 130, 246, 0.8), 0 0 100px rgba(59, 130, 246, 0.6); }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes logoShine {
    0% { filter: brightness(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 40px rgba(255, 255, 255, 0.7)); }
    100% { filter: brightness(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)); }
}

/* Elegant Wave Effect for Logo */
.logo-glow::before {
    content: '';
    position: absolute;
    inset: -15px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(59, 130, 246, 0.2), 
        rgba(147, 51, 234, 0.2), 
        rgba(59, 130, 246, 0.2), 
        transparent
    );
    border-radius: inherit;
    z-index: -1;
    animation: logoWave 3s ease-in-out infinite;
}

.logo-glow::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: linear-gradient(-90deg, 
        transparent, 
        rgba(59, 130, 246, 0.1), 
        rgba(147, 51, 234, 0.1), 
        rgba(59, 130, 246, 0.1), 
        transparent
    );
    border-radius: inherit;
    z-index: -2;
    animation: logoWave 4s ease-in-out infinite reverse;
}

@keyframes logoWave {
    0%, 100% { 
        transform: scaleX(1) scaleY(1);
        opacity: 0.3;
    }
    50% { 
        transform: scaleX(1.1) scaleY(0.9);
        opacity: 0.6;
    }
}

/* Floating Wave Effect for the entire logo container */
.float-animation {
    animation: logoFloatWave 6s ease-in-out infinite;
}

@keyframes logoFloatWave {
    0%, 100% { 
        transform: translateY(0px) scale(1);
        filter: brightness(1);
    }
    25% { 
        transform: translateY(-3px) scale(1.02);
        filter: brightness(1.1);
    }
    50% { 
        transform: translateY(-1px) scale(1.01);
        filter: brightness(1.05);
    }
    75% { 
        transform: translateY(-2px) scale(1.02);
        filter: brightness(1.1);
    }
}

/* Infinity and Zero Brand Effects */
.infinity-symbol {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.6);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.zero-circle {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), inset 0 0 15px rgba(59, 130, 246, 0.3);
}

/* Floating Infinity Animations */
.infinity-float-1 {
    animation: infinityFloat1 8s ease-in-out infinite;
}

.infinity-float-2 {
    animation: infinityFloat2 10s ease-in-out infinite reverse;
}

.infinity-float-3 {
    animation: infinityFloat3 12s ease-in-out infinite;
}

@keyframes infinityFloat1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
    25% { transform: translateY(-20px) rotate(90deg); opacity: 0.15; }
    50% { transform: translateY(-10px) rotate(180deg); opacity: 0.1; }
    75% { transform: translateY(-30px) rotate(270deg); opacity: 0.2; }
}

@keyframes infinityFloat2 {
    0%, 100% { transform: translateX(0px) scale(1); opacity: 0.1; }
    33% { transform: translateX(30px) scale(1.2); opacity: 0.15; }
    66% { transform: translateX(-20px) scale(0.8); opacity: 0.12; }
}

@keyframes infinityFloat3 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0.1; }
    25% { transform: translateY(-15px) translateX(20px) rotate(45deg); opacity: 0.18; }
    50% { transform: translateY(-25px) translateX(-10px) rotate(90deg); opacity: 0.1; }
    75% { transform: translateY(-5px) translateX(15px) rotate(135deg); opacity: 0.15; }
}

/* Zero Circle Orbit Animations */
.zero-orbit {
    animation: zeroOrbit1 15s linear infinite;
}

.zero-orbit-2 {
    animation: zeroOrbit2 20s linear infinite reverse;
}

.zero-orbit-3 {
    animation: zeroOrbit3 25s linear infinite;
}

@keyframes zeroOrbit1 {
    0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes zeroOrbit2 {
    0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@keyframes zeroOrbit3 {
    0% { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

.zero-pulse {
    animation: zeroPulse 3s ease-in-out infinite;
}

@keyframes zeroPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); 
        opacity: 0.8; 
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(255, 255, 255, 0.2); 
        opacity: 1; 
    }
}

/* Custom Tailwind Animation Classes */
.animate-spin-slow {
    animation: spin 8s linear infinite;
}

.animate-pulse-ring {
    animation: pulseRing 2s ease-in-out infinite;
}

@keyframes pulseRing {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); 
    }
    70% { 
        transform: scale(1.1); 
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); 
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); 
    }
}

/* Navigation link effects */
.nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #60a5fa, #a855f7);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::before {
    width: 80%;
}

/* Floating animation for header elements */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

/* Enhanced gradient animations */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Mobile menu slide animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-down {
    animation: slideDown 0.3s ease-out;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.slide-in-left {
    animation: slideInLeft 1s ease-in-out;
}

@keyframes slideInLeft {
    0% { transform: translateX(-50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
    animation: slideInRight 1s ease-in-out;
}

@keyframes slideInRight {
    0% { transform: translateX(50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.slide-in-up {
    animation: slideInUp 1s ease-in-out;
}

@keyframes slideInUp {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1a365d, #7e22ce);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0f2746, #6b21a8);
}