@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');

:root {
    --background: 210 40% 98%;
    --foreground: 215 30% 10%;
    --primary: 217 91% 50%;
    --muted: 210 30% 94%;
    --muted-foreground: 215 15% 45%;
    --border: 210 25% 88%;
    --radius: 0.75rem;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-heading {
    font-family: 'Inter', sans-serif;
}

/* Custom Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes float-delayed {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes rise-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
}

.animate-rise {
    animation: rise-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Marquee Animation */
@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }

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

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

    100% {
        transform: translateX(0);
    }
}

.marquee-container {
    overflow: hidden;
    display: flex;
    position: relative;
    width: 100%;
}

.marquee-content {
    display: flex;
    gap: 1.25rem;
    /* 20px */
    width: max-content;
}

.marquee-left {
    animation: marquee-left 35s linear infinite;
}

.marquee-right {
    animation: marquee-right 40s linear infinite;
}

.marquee-content>div {
    /* Fix for border-radius clipping glitch during scale transition */
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}



/* Accordion Transitions */
.accordion-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.accordion-content.active {
    opacity: 1;
}

.accordion-icon {
    transition: transform 0.30s ease;
}

.accordion-icon.active,
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* Gradient Text Utility */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to bottom right, #60a5fa, #2563eb);
}

/* Hide Scrollbar */
html {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, and Opera */
}