@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply antialiased;
    }
}

@layer components {
    .container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }
}

@layer utilities {
    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }

    .transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }

    .transition-colors {
        transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }
}

/* Custom animations */
@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

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

.animate-morph{
    animation: morph 8s ease-in-out infinite;
}

.animate-blink{
    animation: blink 1s step-end infinite;
}

/* Add initial opacity and transform for fade-in animations */
.opacity-0{
    opacity: 0;
}

.translate-y-4{
    transform: translateY(1rem);
}

/* Ensure smooth transitions */
.transition-all{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Add transition classes for sections */
section {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}