@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes flow {
    0% {
        background-position: 0 0
    }

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

@keyframes stripes {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(24px)
    }
}

@keyframes glow {
    0% {
        filter: drop-shadow(0 0 4px var(--neon-a))
    }

    100% {
        filter: drop-shadow(0 0 10px var(--neon-c))
    }
}

@keyframes neonPulse {
    0% {
        box-shadow: 0 0 10px var(--neon-a), 0 0 26px rgba(18,255,247,.45), inset 0 0 14px rgba(18,255,247,.06);
        border-color: var(--neon-a);
    }

    100% {
        box-shadow: 0 0 12px var(--neon-c), 0 0 42px rgba(123,97,255,.45), inset 0 0 16px rgba(123,97,255,.10);
        border-color: var(--neon-c);
    }
}

/* 보더 회전은 키프레임 1개로 통일 */
@keyframes spinAngle {
    to {
        --angle: 1turn;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}