/* ============================================
   INFRALAY MODERN TECH ANIMATIONS & EFFECTS
   ============================================ */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Color scheme - Modern Tech */
:root {
    --primary-gradient: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
    --accent-cyan: #06b6d4;
    --accent-blue: #0ea5e9;
    --neon-cyan: #00f0ff;
    --neon-purple: #d946ef;
    --dark-bg: #0f172a;
    --dark-card: #1e293b;
    --text-light: #f1f5f9;
}

/* ============================================
   BLOB ANIMATION
   ============================================ */

@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

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

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

/* ============================================
   FADE IN ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   SCALE & ZOOM ANIMATIONS
   ============================================ */

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   HORIZONTAL SCROLL ANIMATIONS
   ============================================ */

@keyframes scrollFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scrollFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes horizontalScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes slideInHorizontal {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-scroll-from-left {
    animation: scrollFromLeft 0.8s ease-out forwards;
}

.animate-scroll-from-right {
    animation: scrollFromRight 0.8s ease-out forwards;
}

.animate-horizontal-scroll {
    animation: horizontalScroll 20s linear infinite;
}

.animate-slide-horizontal {
    animation: slideInHorizontal 0.8s ease-out forwards;
}

/* ============================================
   PULSE & GLOW ANIMATIONS
   ============================================ */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(37, 99, 235, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.8);
    }
}

@keyframes glowText {
    0%, 100% {
        text-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(37, 99, 235, 0.8);
    }
}

/* ============================================
   COUNTER ANIMATION
   ============================================ */

@keyframes countUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.8s ease-out forwards;
}

.animate-zoom-in {
    animation: zoomIn 0.8s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-glow-text {
    animation: glowText 2s ease-in-out infinite;
}

/* Stagger animations for multiple elements */
.animate-stagger > * {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.animate-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* ============================================
   HOVER EFFECTS
   ============================================ */

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
}

/* ============================================
   GALLERY ANIMATIONS
   ============================================ */

.gallery-item {
    overflow: hidden;
    position: relative;
}

.gallery-item img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover img {
    transform: scale(1.1) rotate(1deg);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(37, 99, 235, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* ============================================
   GRADIENT ANIMATIONS
   ============================================ */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

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

/* ============================================
   LOADING ANIMATIONS
   ============================================ */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   BOUNCE ANIMATIONS
   ============================================ */

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

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

/* ============================================
   PARALLAX & DEPTH EFFECTS
   ============================================ */

@keyframes parallaxMove {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-30px);
    }
}

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

@keyframes scaleRotate {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.animate-parallax {
    animation: parallaxMove 0.6s ease-out forwards;
}

.animate-float {
    animation: floatUp 3s ease-in-out infinite;
}

.animate-scale-rotate {
    animation: scaleRotate 0.8s ease-out forwards;
}

/* ============================================
   ENHANCED HOVER EFFECTS
   ============================================ */

.hover-lift-enhanced {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift-enhanced:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(59, 130, 246, 0.3);
}

.hover-glow-enhanced {
    transition: all 0.4s ease;
    position: relative;
}

.hover-glow-enhanced:hover {
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.6), inset 0 0 20px rgba(96, 165, 250, 0.1);
}

.hover-shine {
    position: relative;
    overflow: hidden;
}

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

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

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

button, a {
    transition: all 0.3s ease;
}

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================
   MODERN HOVER EFFECTS
   ============================================ */

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   STAGGER ANIMATION
   ============================================ */

.animate-stagger > * {
    animation: fadeInUp 0.6s ease-out backwards;
}

.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.animate-stagger > *:nth-child(6) { animation-delay: 0.6s; }
.animate-stagger > *:nth-child(7) { animation-delay: 0.7s; }
.animate-stagger > *:nth-child(8) { animation-delay: 0.8s; }

/* ============================================
   SCROLL REVEAL
   ============================================ */

.scroll-reveal {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out;
}

.animate-zoom-in {
    animation: zoomIn 1s ease-out;
}

/* ============================================
   HOVER LIFT EFFECT
   ============================================ */

.hover-lift-enhanced {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ============================================
   GLOW EFFECT
   ============================================ */

.hover-glow-enhanced {
    transition: all 0.3s ease;
}

.hover-glow-enhanced:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}

/* ============================================
   MODAL ANIMATIONS
   ============================================ */

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal-in {
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   GRADIENT ANIMATIONS
   ============================================ */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

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


/* ============================================
   GLASSMORPHISM EFFECTS
   ============================================ */

@keyframes glassGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), inset 0 0 20px rgba(6, 182, 212, 0.1);
    }
    50% {
        box-shadow: 0 0 40px rgba(6, 182, 212, 0.5), inset 0 0 30px rgba(6, 182, 212, 0.2);
    }
}

.glass-effect {
    backdrop-filter: blur(16px);
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(6, 182, 212, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-effect-hover {
    transition: all 0.3s ease;
}

.glass-effect-hover:hover {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.2);
}

/* ============================================
   NEON GLOW EFFECTS
   ============================================ */

@keyframes neonGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(217, 70, 239, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 240, 255, 0.8), 0 0 40px rgba(217, 70, 239, 0.5);
    }
}

@keyframes neonBorder {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.6), inset 0 0 20px rgba(0, 240, 255, 0.2);
    }
}

.neon-text {
    animation: neonGlow 3s ease-in-out infinite;
}

.neon-border {
    animation: neonBorder 3s ease-in-out infinite;
}

/* ============================================
   ANIMATED GRADIENT MESH
   ============================================ */

@keyframes gradientMesh {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-mesh {
    background: linear-gradient(-45deg, #1e3a8a, #7c3aed, #06b6d4, #1e3a8a);
    background-size: 400% 400%;
    animation: gradientMesh 15s ease infinite;
}

/* ============================================
   PARTICLE EFFECTS
   ============================================ */

@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-40px) translateX(-10px);
    }
    75% {
        transform: translateY(-20px) translateX(10px);
    }
}

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

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

.particle-slow {
    animation: floatSlow 8s ease-in-out infinite;
}

/* ============================================
   TECH LINES & BORDERS
   ============================================ */

@keyframes lineGlow {
    0%, 100% {
        opacity: 0.3;
        box-shadow: 0 0 5px rgba(6, 182, 212, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.8);
    }
}

.tech-line {
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5), transparent);
    animation: lineGlow 3s ease-in-out infinite;
}

/* ============================================
   SMOOTH MICRO-INTERACTIONS
   ============================================ */

@keyframes buttonHoverGlow {
    0% {
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(6, 182, 212, 0.6), 0 0 50px rgba(217, 70, 239, 0.3);
    }
    100% {
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
    }
}

.btn-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glow:hover {
    animation: buttonHoverGlow 1.5s ease-in-out infinite;
    transform: translateY(-2px);
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

@keyframes smoothSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes smoothSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes smoothSlideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.smooth-slide-in {
    animation: smoothSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.smooth-slide-in-left {
    animation: smoothSlideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.smooth-slide-in-right {
    animation: smoothSlideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================
   STAGGER ANIMATIONS
   ============================================ */

.stagger-item {
    animation: smoothSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }
.stagger-item:nth-child(7) { animation-delay: 0.7s; }
.stagger-item:nth-child(8) { animation-delay: 0.8s; }

/* ============================================
   HOVER EFFECTS
   ============================================ */

.hover-lift-tech {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift-tech:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
}

.hover-glow-tech {
    transition: all 0.3s ease;
}

.hover-glow-tech:hover {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.4), inset 0 0 20px rgba(6, 182, 212, 0.1);
}

/* ============================================
   SCALE & TRANSFORM EFFECTS
   ============================================ */

@keyframes scaleInTech {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in-tech {
    animation: scaleInTech 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================
   PULSE EFFECTS
   ============================================ */

@keyframes techPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.tech-pulse {
    animation: techPulse 2s ease-in-out infinite;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================
   LIGHT MODE - COMPLETE SITE TRANSFORMATION
   ============================================ */

body.light-mode {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

body.light-mode * {
    color-scheme: light;
}

/* Light mode backgrounds */
body.light-mode [class*="bg-slate-950"],
body.light-mode [class*="bg-slate-900"] {
    background-color: #f0f7ff !important;
}

body.light-mode [class*="from-slate-950"],
body.light-mode [class*="from-slate-900"] {
    background-image: linear-gradient(to bottom, #f0f7ff, #e0f2fe) !important;
}

body.light-mode [class*="via-slate-950"],
body.light-mode [class*="via-slate-900"] {
    background-image: linear-gradient(to bottom, #f0f7ff, #e0f2fe, #f0f7ff) !important;
}

body.light-mode [class*="to-slate-950"],
body.light-mode [class*="to-slate-900"] {
    background-image: linear-gradient(to bottom, #e0f2fe, #f0f7ff) !important;
}

/* Light mode text colors */
body.light-mode [class*="text-slate-400"] {
    color: #64748b !important;
}

body.light-mode [class*="text-slate-300"] {
    color: #475569 !important;
}

body.light-mode [class*="text-slate-100"],
body.light-mode [class*="text-white"] {
    color: #1e293b !important;
}

body.light-mode p,
body.light-mode span,
body.light-mode li,
body.light-mode td {
    color: #1e293b !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #0f172a !important;
}

/* Light mode gradient text */
body.light-mode .text-gradient-cyan-purple {
    background: linear-gradient(135deg, #0284c7, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.light-mode [class*="text-gradient"] {
    background: linear-gradient(135deg, #0284c7, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Light mode accent colors */
body.light-mode [class*="text-cyan-400"],
body.light-mode [class*="text-cyan-300"] {
    color: #0284c7 !important;
}

body.light-mode [class*="text-cyan-500"] {
    color: #0284c7 !important;
}

body.light-mode [class*="text-purple-400"] {
    color: #7c3aed !important;
}

body.light-mode [class*="text-purple-500"] {
    color: #7c3aed !important;
}

/* Light mode borders */
body.light-mode [class*="border-cyan-500"] {
    border-color: rgba(2, 132, 199, 0.3) !important;
}

body.light-mode [class*="border-purple-500"] {
    border-color: rgba(124, 58, 237, 0.2) !important;
}

body.light-mode [class*="border-cyan-400"] {
    border-color: rgba(2, 132, 199, 0.3) !important;
}

/* Light mode cards and glass effects */
body.light-mode .tech-card,
body.light-mode .glass-effect {
    background-color: rgba(240, 247, 255, 0.9) !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
    backdrop-filter: none !important;
}

body.light-mode .tech-card:hover,
body.light-mode .glass-effect:hover {
    background-color: rgba(240, 247, 255, 1) !important;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.15) !important;
}

/* Light mode modals */
body.light-mode [id*="Modal"] {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

body.light-mode [id*="Modal"] > div {
    background-color: #ffffff !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}

body.light-mode [id*="Modal"] .gradient-neon {
    background-image: linear-gradient(135deg, #0284c7, #06b6d4) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}

body.light-mode [id*="Modal"] h2,
body.light-mode [id*="Modal"] h3 {
    color: #1e293b !important;
}

body.light-mode [id*="Modal"] p {
    color: #475569 !important;
}

body.light-mode [id*="Modal"] .neon-text {
    color: #0284c7 !important;
    text-shadow: none !important;
}

body.light-mode [id*="Modal"] .text-cyan-300,
body.light-mode [id*="Modal"] .text-cyan-400 {
    color: #0284c7 !important;
}

body.light-mode [id*="Modal"] .text-purple-400 {
    color: #7c3aed !important;
}

/* Light mode navbar */
body.light-mode #navbar {
    background-color: transparent !important;
    opacity: 1 !important;
}

body.light-mode #navbar .glass-effect {
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

body.light-mode #navbar * {
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

body.light-mode #navbar a {
    color: #000000 !important;
}

body.light-mode #navbar a:hover {
    color: #0284c7 !important;
}

body.light-mode #navbar button {
    color: #000000 !important;
}

body.light-mode #navbar .neon-text {
    color: #000000 !important;
    text-shadow: none !important;
}

body.light-mode #navbar [class*="text-cyan"],
body.light-mode #navbar [class*="text-purple"],
body.light-mode #navbar [class*="text-white"] {
    color: #000000 !important;
}

/* Light mode footer */
body.light-mode footer,
body.light-mode [class*="footer"] {
    background-color: #f0f7ff !important;
    color: #ffffff !important;
}

body.light-mode footer a,
body.light-mode footer p,
body.light-mode footer span,
body.light-mode footer h2,
body.light-mode footer h3,
body.light-mode footer h4 {
    color: #ffffff !important;
}

body.light-mode footer .neon-text {
    color: #ffffff !important;
    text-shadow: none !important;
}

body.light-mode footer [class*="text-cyan"] {
    color: #ffffff !important;
}

body.light-mode footer [class*="text-purple"] {
    color: #ffffff !important;
}

/* Light mode inputs and forms */
body.light-mode input,
body.light-mode textarea,
body.light-mode select {
    background-color: #f0f7ff !important;
    color: #1e293b !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #94a3b8 !important;
}

body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode select:focus {
    border-color: rgba(2, 132, 199, 0.6) !important;
    background-color: #ffffff !important;
}

/* Light mode buttons */
body.light-mode button {
    color: #1e293b !important;
    background-color: rgba(2, 132, 199, 0.1) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}

body.light-mode button:hover {
    background-color: rgba(2, 132, 199, 0.2) !important;
    border-color: rgba(2, 132, 199, 0.5) !important;
}

/* Light mode links */
body.light-mode a {
    color: #0284c7 !important;
}

body.light-mode a:hover {
    color: #0369a1 !important;
}

/* Light mode headings */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #1e293b !important;
}

/* Light mode gradient text */
body.light-mode .text-gradient-cyan-purple {
    background: linear-gradient(135deg, #0284c7, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Light mode neon text */
body.light-mode .neon-text {
    color: #0284c7 !important;
    text-shadow: 0 0 10px rgba(2, 132, 199, 0.3) !important;
}

body.light-mode .text-gradient-cyan-purple {
    background: linear-gradient(135deg, #0284c7, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.light-mode .text-gradient-blue-purple {
    background: linear-gradient(135deg, #3b82f6, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.light-mode .text-gradient {
    background: linear-gradient(135deg, #0284c7, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Light mode gradient neon */
body.light-mode .gradient-neon {
    background: linear-gradient(135deg, #0284c7, #06b6d4) !important;
}

/* Light mode blobs */
body.light-mode [class*="bg-cyan-500"],
body.light-mode [class*="bg-purple-500"] {
    opacity: 0.1 !important;
}

/* Light mode sections */
body.light-mode section {
    background-color: #f8fafc !important;
}

body.light-mode section:nth-child(even) {
    background-color: #f0f7ff !important;
}

/* Light mode hover effects */
body.light-mode .hover-lift-enhanced:hover {
    box-shadow: 0 30px 60px rgba(2, 132, 199, 0.15) !important;
}

body.light-mode .hover-glow-enhanced:hover {
    box-shadow: 0 0 30px rgba(2, 132, 199, 0.2), inset 0 0 20px rgba(2, 132, 199, 0.05) !important;
}

/* Light mode scrollbar */
body.light-mode ::-webkit-scrollbar {
    width: 10px;
}

body.light-mode ::-webkit-scrollbar-track {
    background: #f0f7ff;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: #0284c7;
    border-radius: 5px;
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #0369a1;
}

/* Light mode code blocks */
body.light-mode code,
body.light-mode pre {
    background-color: #f0f7ff !important;
    color: #1e293b !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
}

/* Light mode tables */
body.light-mode table {
    background-color: #ffffff !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
}

body.light-mode th {
    background-color: #f0f7ff !important;
    color: #1e293b !important;
}

body.light-mode td {
    border-color: rgba(2, 132, 199, 0.1) !important;
}

/* Light mode blockquotes */
body.light-mode blockquote {
    border-left-color: #0284c7 !important;
    color: #475569 !important;
    background-color: #f0f7ff !important;
}

/* Light mode hr */
body.light-mode hr {
    border-color: rgba(2, 132, 199, 0.2) !important;
}

/* Light mode animations - adjust for visibility */
body.light-mode .animate-blob {
    opacity: 0.08 !important;
}

body.light-mode .neon-glow {
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.2) !important;
}

body.light-mode .glass-effect {
    background: rgba(240, 247, 255, 0.7) !important;
}


/* Light mode hero section - keep video visible */
body.light-mode [data-hero-section] {
    background-color: #ffffff !important;
}

body.light-mode [data-hero-section] > div:first-child {
    opacity: 1 !important;
    background-color: transparent !important;
}

body.light-mode [data-hero-section] video {
    opacity: 1 !important;
    display: block !important;
}

/* HIDE gradient overlays but keep video */
body.light-mode [data-hero-section] > div:first-child > div[class*="bg-gradient"] {
    display: none !important;
}

/* HIDE ONLY the animated overlay (from-cyan-500/10) that covers the header - NOT the video */
body.light-mode [data-hero-section] > div.absolute.inset-0:not(:has(video)) {
    display: none !important;
}


/* REMOVE ALL BLUR FROM NAVBAR IN LIGHT MODE */
body.light-mode #navbar,
body.light-mode #navbar *,
body.light-mode #navbar .glass-effect,
body.light-mode #navbar [class*="glass"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}


/* Light mode mobile menu */
body.light-mode #mobile-menu {
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

body.light-mode #mobile-menu a,
body.light-mode #mobile-menu button,
body.light-mode #mobile-menu span {
    color: #000000 !important;
    opacity: 1 !important;
}

body.light-mode #mobile-menu .neon-text {
    color: #000000 !important;
    text-shadow: none !important;
}

body.light-mode #mobile-menu [class*="text-cyan"],
body.light-mode #mobile-menu [class*="text-purple"],
body.light-mode #mobile-menu [class*="text-white"] {
    color: #000000 !important;
}


/* ============================================
   SCROLL REVEAL & HOVER ANIMATIONS
   ============================================ */

/* Smooth transitions for all interactive elements */
.tech-card,
[data-gallery-item],
[data-hero-item] {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scroll reveal animation */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Hero items glow on hover */
[data-hero-item]:hover {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

/* Gallery items 3D effect */
[data-gallery-item] {
    perspective: 1000px;
}

/* Stagger animations for multiple elements */
.animate-stagger > * {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.animate-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.animate-stagger > *:nth-child(6) { animation-delay: 0.6s; }
.animate-stagger > *:nth-child(7) { animation-delay: 0.7s; }
.animate-stagger > *:nth-child(8) { animation-delay: 0.8s; }

/* Smooth fade in animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glow effect on hover */
.tech-card:hover,
[data-gallery-item]:hover {
    filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.4));
}

/* Smooth color transitions */
a, button, .tech-card, [data-gallery-item] {
    transition: all 0.3s ease;
}


/* ============================================
   360 SPIN ANIMATION FOR TEAM GRID
   ============================================ */

@keyframes spin360 {
    0% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    50% {
        transform: rotateY(180deg) rotateX(10deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(0deg);
    }
}

/* Team grid spin on hover - handled by JavaScript */
[data-gallery-section] .grid {
    transition: all 0.8s ease-in-out;
    transform-style: preserve-3d;
    perspective: 1000px;
}