@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700&display=swap');

/* Base Styles */
body {
    font-family: 'Zen Maru Gothic', sans-serif;
    background-color: #000000;
    overflow-x: hidden;
    color: #ffffff;
}

/* Custom Animation Keyframes */

/* Floating Animation (Logo) */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

/* Glow Animation (Text / Logo) */
@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 10px #FF6EC7, 0 0 20px #FF6EC7, 0 0 30px #9F2BFA;
    }
    50% {
        text-shadow: 0 0 20px #54F6E7, 0 0 30px #54F6E7, 0 0 40px #54F6E7;
    }
}

.animate-glow {
    animation: glow 3s ease-in-out infinite alternate;
}

/* Button Pulse */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 110, 199, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 110, 199, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 110, 199, 0);
    }
}

.btn-pulse:hover {
    animation: pulse-shadow 1.5s infinite;
}

/* Background Canvas */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}