/* ====================================
   SURF TOGGLE BUTTON - RADIO PURA STYLE
   Colorful, bouncy, fun!
   ==================================== */

.surf-toggle {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    background: linear-gradient(135deg, rgba(0, 217, 217, 0.3), rgba(0, 255, 136, 0.25));
    border: 3px solid rgba(0, 217, 217, 0.5);
    color: #00D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 99;
    box-shadow: 
        0 6px 20px rgba(0, 217, 217, 0.35),
        0 0 30px rgba(0, 217, 217, 0.2),
        0 0 0 2px rgba(255, 255, 255, 0.1);
}

.surf-toggle:hover {
    background: linear-gradient(135deg, rgba(0, 217, 217, 0.45), rgba(0, 255, 136, 0.4));
    transform: translateY(-4px) scale(1.08);
    box-shadow: 
        0 10px 30px rgba(0, 217, 217, 0.5),
        0 0 40px rgba(0, 217, 217, 0.3),
        0 0 0 3px rgba(255, 255, 255, 0.15);
    border-color: rgba(0, 255, 136, 0.6);
}

.surf-toggle:active {
    transform: translateY(-2px) scale(1.05);
}

.surf-toggle svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 2px 8px rgba(0, 217, 217, 0.6));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.surf-toggle:hover svg {
    transform: scale(1.15) rotate(5deg);
}

/* Day theme - Warm sunset vibes */
body[data-theme="day"] .surf-toggle {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.25), rgba(255, 215, 0, 0.2));
    border-color: rgba(255, 107, 53, 0.5);
    color: #FF6B35;
    box-shadow: 
        0 6px 20px rgba(255, 107, 53, 0.3),
        0 0 30px rgba(255, 215, 0, 0.2),
        0 0 0 2px rgba(255, 107, 53, 0.15);
}

body[data-theme="day"] .surf-toggle:hover {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.4), rgba(255, 215, 0, 0.35));
    box-shadow: 
        0 10px 30px rgba(255, 107, 53, 0.45),
        0 0 40px rgba(255, 215, 0, 0.3),
        0 0 0 3px rgba(255, 107, 53, 0.25);
    border-color: rgba(255, 215, 0, 0.6);
}

body[data-theme="day"] .surf-toggle svg {
    filter: drop-shadow(0 2px 8px rgba(255, 107, 53, 0.5));
}

/* Active state - Rainbow glow! */
.surf-toggle.is-active {
    background: linear-gradient(135deg, #00D9D9, #00FF88);
    border-color: #00FF88;
    color: #1A1A2E;
    animation: pulseGlow 2s ease-in-out infinite;
    box-shadow: 
        0 8px 25px rgba(0, 217, 217, 0.5),
        0 0 50px rgba(0, 255, 136, 0.4),
        0 0 0 3px rgba(255, 255, 255, 0.2);
}

body[data-theme="day"] .surf-toggle.is-active {
    background: linear-gradient(135deg, #FF6B35, #FFD700);
    border-color: #FFD700;
    color: #1A1A2E;
    box-shadow: 
        0 8px 25px rgba(255, 107, 53, 0.5),
        0 0 50px rgba(255, 215, 0, 0.4),
        0 0 0 3px rgba(255, 107, 53, 0.25);
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 
            0 8px 25px rgba(0, 217, 217, 0.5),
            0 0 50px rgba(0, 255, 136, 0.4),
            0 0 0 3px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 12px 35px rgba(0, 217, 217, 0.7),
            0 0 70px rgba(0, 255, 136, 0.6),
            0 0 0 4px rgba(255, 255, 255, 0.3);
    }
}

/* Mobile positioning */
@media (max-width: 768px) {
    .surf-toggle {
        bottom: 5.5rem;
        right: 1rem;
        width: 48px;
        height: 48px;
    }
    
    .surf-toggle svg {
        width: 24px;
        height: 24px;
    }
}

/* Fun bounce animation on page load */
@keyframes bounceIn {
    0% {
        transform: scale(0) translateY(100px);
        opacity: 0;
    }
    50% {
        transform: scale(1.15) translateY(-10px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.surf-toggle {
    animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}