/* Premium Light Theme - Global Styles */

/* 1. Ambient Background Animation */
@keyframes blob-bounce {
       0% {
              transform: translate(0, 0) scale(1);
       }

       33% {
              transform: translate(30px, -50px) scale(1.1);
       }

       66% {
              transform: translate(-20px, 20px) scale(0.9);
       }

       100% {
              transform: translate(0, 0) scale(1);
       }
}

.animate-blob {
       animation: blob-bounce 20s infinite ease-in-out alternate;
}

/* Card Transitions & Hover Lift */
.bento-card,
.card-hover {
       transition-property: all;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 300ms;
}

.bento-card:hover,
.card-hover:hover {
       transform: translateY(-4px);
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.animation-delay-2000 {
       animation-delay: 2s;
}

.animation-delay-4000 {
       animation-delay: 4s;
}

/* 2. Noise Texture (Grain) */
.bg-noise {
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
       opacity: 0.4;
       pointer-events: none;
}

/* 3. Glassmorphism Utilities */
.glass-panel {
       background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card-inner {
       background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
       backdrop-filter: blur(8px);
}

.nav-scrolled {
       background-color: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border-color: rgba(229, 231, 235, 1);
       box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
}

/* 4. Scroll Reveal Animations */
.reveal-on-scroll {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

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

/* 5. Components */
.bento-card {
       background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.6);
       border-radius: 1.5rem;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
       position: relative;
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.bento-card:hover {
       border-color: rgba(139, 92, 246, 0.3);
       box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(139, 92, 246, 0.1);
       transform: translateY(-4px) scale(1.005);
}

.mask-fade-sides {
       mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
       -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Global Overrides (Optional, mostly handled by classes) */
.spotlight-purple,
.spotlight-blue,
.grid-pattern {
       display: none !important;
}

/* Text Gradients */
.animate-gradient-text {
       background-size: 200% 200%;
       animation: gradient-pan 4s ease infinite;
}

@keyframes gradient-pan {
       0% {
              background-position: 0% 50%;
       }

       50% {
              background-position: 100% 50%;
       }

       100% {
              background-position: 0% 50%;
       }
}