@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Yeseva+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

/* Fade-in animation styles with blur effect */
.fade-in {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(2px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.5s ease-out;
}

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

/* Special animation for title with blur */
.title.fade-in {
    transform: translateY(50px);
    transition-duration: 1.2s;
}

/* Special animation for header image with blur */
header .fade-in {
    filter: blur(6px);
    transition: opacity 1s ease-out, transform 1s ease-out, filter .1s ease-out;
}

header .fade-in.visible {
    transform: scale(1) translateY(0);
    filter: blur(0px);
}