/* ============================================
   셀럭미로 - Animations
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px)
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes heroLogoIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(10px)
    }

    50% {
        opacity: 0.8;
        filter: blur(2px)
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0)
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 0, 127, .3), 0 0 20px rgba(255, 0, 127, .1)
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 0, 127, .5), 0 0 40px rgba(255, 0, 127, .2), 0 0 60px rgba(255, 0, 127, .1)
    }
}

@keyframes float {

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

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

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    33% {
        transform: translateY(-15px) rotate(3deg)
    }

    66% {
        transform: translateY(-5px) rotate(-2deg)
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-20px)
    }

    60% {
        transform: translateY(-10px)
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }

    70% {
        transform: scale(.95)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes waveBar {

    0%,
    100% {
        height: 10px
    }

    50% {
        height: 30px
    }
}

.wave-container {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 30px;
}

.wave-bar {
    width: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
    animation: waveBar 1.2s ease-in-out infinite;
}

.wave-bar:nth-child(1) {
    animation-delay: 0s
}

.wave-bar:nth-child(2) {
    animation-delay: .1s
}

.wave-bar:nth-child(3) {
    animation-delay: .2s
}

.wave-bar:nth-child(4) {
    animation-delay: .3s
}

.wave-bar:nth-child(5) {
    animation-delay: .4s
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%
    }

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

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

.animated-gradient-text {
    background: linear-gradient(270deg, #FF007F, #00D4FF, #FFEB3B, #FF007F);
    background-size: 400% 400%;
    animation: gradientShift 4s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0
    }
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    z-index: 10000;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes morphShape {

    0%,
    100% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%
    }

    25% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%
    }

    50% {
        border-radius: 50% 30% 50% 70%/40% 50% 60% 50%
    }

    75% {
        border-radius: 40% 60% 30% 70%/60% 40% 70% 30%
    }
}

.morph-bg {
    animation: morphShape 8s ease-in-out infinite;
}

.stagger-1 {
    animation-delay: .1s
}

.stagger-2 {
    animation-delay: .2s
}

.stagger-3 {
    animation-delay: .3s
}

.stagger-4 {
    animation-delay: .4s
}

.stagger-5 {
    animation-delay: .5s
}

.stagger-6 {
    animation-delay: .6s
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none
    }
}