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

.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.smooth-scroll {
    scroll-behavior: smooth;
}

.hero-overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
}

.glass-nav {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

@keyframes blink {

    0%,
    100% {
        border-color: transparent;
    }

    50% {
        border-color: #DA3F3B;
    }
}

.typing-cursor {
    border-right: 4px solid #DA3F3B;
    animation: blink 0.8s step-end infinite;
    padding-right: 2px;
}

.animated-text {
    position: relative;
}