/* 🌈✨ BONKERS MODE ANIMATIONS ✨🌈 */
@keyframes rainbowGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes discoFlash {
    0%, 100% { 
        background-color: var(--bs-pink);
        box-shadow: 0 0 20px var(--bs-pink), 0 0 40px var(--bs-pink);
    }
    16.66% { 
        background-color: var(--bs-purple);
        box-shadow: 0 0 20px var(--bs-purple), 0 0 40px var(--bs-purple);
    }
    33.33% { 
        background-color: var(--bs-cyan);
        box-shadow: 0 0 20px var(--bs-cyan), 0 0 40px var(--bs-cyan);
    }
    50% { 
        background-color: var(--bs-yellow);
        box-shadow: 0 0 20px var(--bs-yellow), 0 0 40px var(--bs-yellow);
    }
    66.66% { 
        background-color: var(--bs-green);
        box-shadow: 0 0 20px var(--bs-green), 0 0 40px var(--bs-green);
    }
    83.33% { 
        background-color: var(--bs-orange);
        box-shadow: 0 0 20px var(--bs-orange), 0 0 40px var(--bs-orange);
    }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rainbowText {
    0% { color: var(--bs-red); }
    14.28% { color: var(--bs-orange); }
    28.57% { color: var(--bs-yellow); }
    42.85% { color: var(--bs-green); }
    57.14% { color: var(--bs-cyan); }
    71.42% { color: var(--bs-purple); }
    85.71% { color: var(--bs-pink); }
    100% { color: var(--bs-red); }
}

@keyframes shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes slayFloat {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateY(-60px) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

/* 🎭 BONKERS MODE CLASSES 🎭 */
.bonkers-mode {
    background: linear-gradient(270deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red), var(--bs-pink));
    background-size: 1600% 1600%;
    animation: rainbowGradient 10s ease infinite;
    transition: all 0.3s ease-in-out;
}

.bonkers-mode .btn {
    animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
    background-size: 400% 400%;
    animation: discoFlash 0.3s infinite, wiggle 0.2s infinite, rainbowGradient 1s ease infinite;
    border: 4px solid var(--bs-white);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.bonkers-mode .btn:hover {
    animation: discoFlash 0.2s infinite, wiggle 0.1s infinite, rainbowGradient 0.5s ease infinite;
    box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple);
}

.bonkers-mode .btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: rotate(45deg);
    animation: spin 0.5s linear infinite;
}

.bonkers-mode .navbar {
    background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
    background-size: 200% 200%;
    animation: rainbowGradient 2s ease infinite;
    box-shadow: 0 0 50px rgba(255, 105, 180, 0.9);
    height: auto !important;
    min-height: 56px;
}

.bonkers-mode .navbar-brand {
    animation: rainbowText 0.8s infinite, wiggle 0.4s infinite;
    font-size: 1.8em;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.bonkers-mode .navbar-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: spin 2s linear infinite;
}

.bonkers-mode .navbar-nav .nav-link {
    animation: rainbowText 1.2s infinite, wiggle 0.3s infinite;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 16px;
    margin: 0 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bonkers-mode .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 1.5s ease-in-out infinite;
}

.bonkers-mode .navbar-nav .nav-link:hover {
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
    border-color: var(--bs-white);
    box-shadow: 0 0 20px var(--bs-pink);
    animation: discoFlash 0.5s infinite, wiggle 0.2s infinite;
}

.bonkers-mode .navbar-nav .nav-link.active {
    background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
    border-color: var(--bs-white);
    box-shadow: 0 0 25px var(--bs-yellow);
    animation: discoFlash 0.8s infinite, wiggle 0.3s infinite;
}

.bonkers-mode .navbar-text {
    animation: rainbowText 1.5s infinite, wiggle 0.5s infinite;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    border: 2px solid var(--bs-white);
    border-radius: 8px;
    padding: 6px 12px;
    background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue));
    box-shadow: 0 0 15px var(--bs-cyan);
}

.bonkers-mode .navbar-toggler {
    border: 3px solid var(--bs-white);
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
    animation: discoFlash 0.6s infinite, wiggle 0.4s infinite;
    box-shadow: 0 0 20px var(--bs-pink);
}

.bonkers-mode .navbar-toggler:focus {
    box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5);
}

.bonkers-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    animation: spin 1s linear infinite;
}

.bonkers-mode .dropdown-menu {
    background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
    border: 3px solid var(--bs-white);
    box-shadow: 0 0 30px rgba(255,105,180,0.8);
    animation: rainbowGradient 2s ease infinite;
}

.bonkers-mode .dropdown-item {
    animation: rainbowText 1.8s infinite, wiggle 0.6s infinite;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.bonkers-mode .dropdown-item:hover {
    background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
    color: var(--bs-white);
    box-shadow: 0 0 15px var(--bs-yellow);
    animation: discoFlash 0.5s infinite, wiggle 0.3s infinite;
}

.bonkers-mode .navbar-collapse {
    background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1));
    border-radius: 8px;
    margin-top: 8px;
    padding: 8px;
    border: 2px solid var(--bs-pink);
}

.bonkers-mode h1, .bonkers-mode h2, .bonkers-mode h3 {
    animation: rainbowText 1.5s infinite;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.bonkers-mode .table {
    background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2));
    animation: rainbowGradient 3s ease infinite;
    border: 3px solid var(--bs-pink);
    box-shadow: 0 0 30px rgba(255,105,180,0.5);
}

.bonkers-mode .table th {
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
    color: var(--bs-white);
    animation: discoFlash 0.8s infinite;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-size: 1.1em;
}

.bonkers-mode .form-control {
    border: 3px solid var(--bs-pink);
    box-shadow: 0 0 15px var(--bs-pink);
    animation: pulse 0.6s infinite;
}

.bonkers-mode .alert {
    animation: discoFlash 0.6s infinite, wiggle 0.3s infinite;
    border: 4px solid var(--bs-white);
    font-weight: bold;
    font-size: 1.1em;
}

.bonkers-mode .card {
    background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2));
    border: 3px solid var(--bs-purple);
    box-shadow: 0 0 35px rgba(138,43,226,0.6);
    animation: pulse 1s infinite;
}

.bonkers-mode .modal-content {
    background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
    border: 4px solid var(--bs-white);
    box-shadow: 0 0 50px rgba(255,105,180,0.8);
    animation: rainbowGradient 2s ease infinite;
}

.bonkers-mode .modal-header {
    background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange));
    animation: discoFlash 0.8s infinite;
    font-size: 1.2em;
}

.bonkers-mode .number-input-wrapper {
    animation: wiggle 0.4s infinite;
}

.bonkers-mode .number-input-wrapper .btn {
    animation: discoFlash 0.3s infinite, wiggle 0.2s infinite;
}

/* Enhanced mode styles (for future use) */
[data-website-mode="enhanced"] .btn {
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
    background-size: 400% 400%;
    animation: rainbowGradient 1s ease infinite;
    border: 4px solid var(--bs-white);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

[data-website-mode="enhanced"] .btn:hover {
    animation: rainbowGradient 0.5s ease infinite;
    box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple);
}

[data-website-mode="enhanced"] .btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: rotate(45deg);
    animation: spin 0.5s linear infinite;
}

[data-website-mode="enhanced"] .navbar {
    background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red));
    background-size: 200% 200%;
    animation: rainbowGradient 2s ease infinite;
    box-shadow: 0 0 50px rgba(255, 105, 180, 0.9);
    height: auto !important;
    min-height: 56px;
}

[data-website-mode="enhanced"] .navbar-brand {
    animation: rainbowText 0.8s infinite;
    font-size: 1.8em;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

[data-website-mode="enhanced"] .navbar-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: spin 2s linear infinite;
}

[data-website-mode="enhanced"] .navbar-nav .nav-link {
    animation: rainbowText 1.2s infinite;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 16px;
    margin: 0 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

[data-website-mode="enhanced"] .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 1.5s ease-in-out infinite;
}

[data-website-mode="enhanced"] .navbar-nav .nav-link:hover {
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
    border-color: var(--bs-white);
    box-shadow: 0 0 20px var(--bs-pink);
}

[data-website-mode="enhanced"] .navbar-nav .nav-link.active {
    background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
    border-color: var(--bs-white);
    box-shadow: 0 0 25px var(--bs-yellow);
}

[data-website-mode="enhanced"] .navbar-text {
    animation: rainbowText 1.5s infinite;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    border: 2px solid var(--bs-white);
    border-radius: 8px;
    padding: 6px 12px;
    background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue));
    box-shadow: 0 0 15px var(--bs-cyan);
}

[data-website-mode="enhanced"] .navbar-toggler {
    border: 3px solid var(--bs-white);
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
    animation: rainbowGradient 0.6s ease infinite;
    box-shadow: 0 0 20px var(--bs-pink);
}

[data-website-mode="enhanced"] .navbar-toggler:focus {
    box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5);
}

[data-website-mode="enhanced"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    animation: spin 1s linear infinite;
}

[data-website-mode="enhanced"] .dropdown-menu {
    background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
    border: 3px solid var(--bs-white);
    box-shadow: 0 0 30px rgba(255,105,180,0.8);
    animation: rainbowGradient 2s ease infinite;
}

[data-website-mode="enhanced"] .dropdown-item {
    animation: rainbowText 1.8s infinite;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

[data-website-mode="enhanced"] .dropdown-item:hover {
    background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange));
    color: var(--bs-white);
    box-shadow: 0 0 15px var(--bs-yellow);
}

[data-website-mode="enhanced"] .navbar-collapse {
    background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1));
    border-radius: 8px;
    margin-top: 8px;
    padding: 8px;
    border: 2px solid var(--bs-pink);
}

[data-website-mode="enhanced"] h1, [data-website-mode="enhanced"] h2, [data-website-mode="enhanced"] h3 {
    animation: rainbowText 1.5s infinite;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

[data-website-mode="enhanced"] .table {
    background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2));
    animation: rainbowGradient 3s ease infinite;
    border: 3px solid var(--bs-pink);
    box-shadow: 0 0 30px rgba(255,105,180,0.5);
}

[data-website-mode="enhanced"] .table th {
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple));
    color: var(--bs-white);
    animation: rainbowGradient 0.8s ease infinite;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-size: 1.1em;
}

[data-website-mode="enhanced"] .form-control {
    border: 3px solid var(--bs-pink);
    box-shadow: 0 0 15px var(--bs-pink);
}

[data-website-mode="enhanced"] .alert {
    animation: rainbowGradient 0.6s ease infinite;
    border: 4px solid var(--bs-white);
    font-weight: bold;
    font-size: 1.1em;
}

[data-website-mode="enhanced"] .card {
    background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2));
    border: 3px solid var(--bs-purple);
    box-shadow: 0 0 35px rgba(138,43,226,0.6);
}

[data-website-mode="enhanced"] .modal-content {
    background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan));
    border: 4px solid var(--bs-white);
    box-shadow: 0 0 50px rgba(255,105,180,0.8);
    animation: rainbowGradient 2s ease infinite;
}

[data-website-mode="enhanced"] .modal-header {
    background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange));
    animation: rainbowGradient 0.8s ease infinite;
    font-size: 1.2em;
}

[data-website-mode="enhanced"] .number-input-wrapper {
}

[data-website-mode="enhanced"] .number-input-wrapper .btn {
    animation: rainbowGradient 0.3s ease infinite;
}

/* Emoji Footprint Animation */
.emoji-footprint {
    position: absolute;
    font-size: 1.6rem;
    pointer-events: none;
    animation: emojiFade 1s ease-out forwards;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 9999;
    text-shadow:
        0 0 4px #ff00bf,
        0 0 8px #ff80df,
        0 0 12px #ffccff;
}

@keyframes emojiFade {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* 💅 SLAY TEXT EFFECTS 💅 */
.slay-text {
    position: fixed;
    font-size: 2rem;
    font-weight: bold;
    pointer-events: none;
    z-index: 10000;
    animation: slayFloat 3s ease-out forwards;
    text-shadow: 
        0 0 10px #ff00bf,
        0 0 20px #ff80df,
        0 0 30px #ffccff,
        2px 2px 4px rgba(0,0,0,0.5);
    background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: slayFloat 3s ease-out forwards, rainbowGradient 1s ease infinite;
}