/* Base Styles and Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
}

/* Custom Effects */
.glass-effect {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.shape-blob {
    background: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #4F46E5 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: blob-bounce 10s infinite ease-in-out alternate;
}

@keyframes blob-bounce {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        transform: translateY(0);
    }

    50% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
        transform: translateY(-20px);
    }

    100% {
        border-radius: 40% 60% 70% 30% / 40% 40% 60% 60%;
        transform: translateY(0);
    }
}

/* Marquee Animation */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-content {
    display: flex;
    gap: 2rem;
    animation: marquee 20s linear infinite;
    width: max-content;
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Scroll Reveal Animation */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Stagger delays for children */
.fade-up-delay-100 {
    transition-delay: 100ms;
}

.fade-up-delay-200 {
    transition-delay: 200ms;
}

.fade-up-delay-300 {
    transition-delay: 300ms;
}

/* Typewriter Cursor */
.typing-cursor {
    border-right: 2px solid #A855F7;
    /* Primary color */
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {

    from,
    to {
        border-color: transparent
    }

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