/* styles.css */
html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(-45deg, #ffffff, rgba(236, 203, 88, 0.15), rgba(125, 5, 24, 0.1), #fdfbf7);
    background-size: 400% 400%;
    animation: fadeInPage 0.8s ease forwards,
        gradientBG 15s ease infinite;
    color: #350103;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Page Transition */
@keyframes fadeInPage {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Glassmorphism Effect for Modern Look */
.glass-effect {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Scroll Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Modal specific */
body.modal-open {
    overflow: hidden;
    /* Prevent scrolling when modal is open */
}

/* Modern Animated Blobs */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(50px, -100px) scale(1.1);
    }

    66% {
        transform: translate(-80px, 60px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite alternate ease-in-out;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Premium Buttons */
.premium-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.premium-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: all 0.6s;
}

.premium-btn:hover::before {
    left: 100%;
}

.premium-btn:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}