/* Animated Button Styles */
.d2c_nav_btn,
.btn {
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.3s ease;
    background: var(--primary_color);
    border: 2px solid var(--primary_color);
    overflow: hidden;
}

/* Random animation assignments */
.btn:nth-of-type(6n+1) {
    animation: floatOne 4.2s ease-in-out infinite;
}
.btn:nth-of-type(6n+2) {
    animation: floatTwo 3.8s ease-in-out infinite;
}
.btn:nth-of-type(6n+3) {
    animation: floatThree 4.5s ease-in-out infinite;
}
.btn:nth-of-type(6n+4) {
    animation: floatFour 3.6s ease-in-out infinite;
}
.btn:nth-of-type(6n+5) {
    animation: floatFive 4.8s ease-in-out infinite;
}
.btn:nth-of-type(6n) {
    animation: floatSix 4.0s ease-in-out infinite;
}

/* Special handling for nav button */
.d2c_nav_btn {
    animation: floatOne 4s ease-in-out infinite;
}

/* Floating animations with different directions and timings */
@keyframes floatOne {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(4px, -4px) rotate(1deg);
    }
    66% {
        transform: translate(-2px, -3px) rotate(-1deg);
    }
}

@keyframes floatTwo {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-4px, -2px) rotate(-1deg);
    }
}

@keyframes floatThree {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(3px, -3px) rotate(1deg);
    }
    66% {
        transform: translate(-3px, -4px) rotate(-0.5deg);
    }
}

@keyframes floatFour {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-3px, -2px) rotate(-1deg);
    }
    75% {
        transform: translate(3px, -4px) rotate(0.5deg);
    }
}

@keyframes floatFive {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(4px, -3px) rotate(0.5deg);
    }
}

@keyframes floatSix {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(-2px, -4px) rotate(-0.5deg);
    }
    66% {
        transform: translate(3px, -2px) rotate(1deg);
    }
}

/* Hover effect */
.d2c_nav_btn:hover,
.btn:hover {
    transform: translateY(-3px);
    animation-play-state: paused;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-width: 2px;
    border-style: solid;
    border-color: #458588;
}


/* Glowing border effect */
.d2c_nav_btn::before,
.btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        var(--accent-yellow, #83a598),
        var(--accent-green, #458588),
        var(--accent-blue, #689d6a),
        var(--accent-purple, #b16286)
    );
    z-index: -1;
    background-size: 400%;
    animation: borderGlow 12s linear infinite;
    filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

@keyframes borderGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Show glowing border on hover */
.d2c_nav_btn:hover::before,
.btn:hover::before {
    opacity: 1;
}

.d2c_nav_btn:active::after {
    width: 200%;
    height: 200%;
}