/* --- GENERAL FADE-IN ON LOAD --- */
body.fade-in {
    opacity: 0;
    animation: pageFadeIn 1s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes pageFadeIn {
    to {
        opacity: 1;
    }
}

/* --- ANIMATED TITLE --- */
.title span {
    opacity: 0;
    position: relative;
    transform: translateY(-20px);
    animation: letter-anim 0.5s ease-out forwards;
}

@keyframes letter-anim {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- STAGGERED FADE-IN FOR OTHER ELEMENTS --- */
.desc, .social-btn li {
    opacity: 0;
    transform: translateY(20px);
    animation: elementFadeIn 0.9s ease-out forwards;
}

.desc {
    animation-delay: 1.5s; /* Delay after title animation */
}

.social-btn li:nth-child(1) {
    animation-delay: 1.8s;
}
.social-btn li:nth-child(2) {
    animation-delay: 2.0s;
}
.social-btn li:nth-child(3) {
    animation-delay: 2.2s;
}

@keyframes elementFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}