/* 
  Custom styles extending Tailwind
  Focusing on high performance and smooth UI 
*/

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Base custom animations built on Tailwind utilities */
@layer utilities {
    .animate-fade-in {
        animation: fadeIn 1s ease-out forwards;
    }
    
    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
    }
    
    .animate-bounce-slow {
        animation: bounceSlow 3s infinite;
    }
}

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

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

@keyframes bounceSlow {
    0%, 100% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
}

/* Intersection Observer Transitions */
.js-scroll-animate {
    transition-property: opacity, transform;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}