/* Custom Tailwind utilities */
@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.5);
    }
    .transition-custom {
        transition: all 0.3s ease;
    }
    .bg-blur {
        backdrop-filter: blur(8px);
    }
    .target-highlight {
        animation: highlight 1s ease;
    }
}

/* Base styles */
body {
    @apply font-sans bg-gray-50 text-gray-800;
}
/* Scroll animation styles */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.active { 
    opacity: 1;
    transform: translateY(0);
}

/* Add staggered animation delays */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

.delay-600 {
    transition-delay: 600ms;
}

/* Highlight animation for target sections */
@keyframes highlight {
    0% {
        box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.2);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(26, 86, 219, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(26, 86, 219, 0);
    }
}

/* Back to top button transitions */
#backToTop {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .text-3xl {
        font-size: 1.875rem;
    }
    
    .text-2xl {
        font-size: 1.5rem;
    }
    
    section {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Overview section improvements */
#overview .scroll-animate.delay-200 > div {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#overview .scroll-animate.delay-200 > div:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}


/* Mobile menu styles */
#mobileMenuBtn {
    @apply transition-all duration-300;
}

#mobileMenuBtn:hover {
    @apply transform scale-110;
}

#mobileMenu a {
    @apply border-b border-gray-100;
}

#mobileMenu a:last-child {
    @apply border-0;
}