/* W33Keys CSS Logo Component */
/* This file contains the key logo that can be used throughout the site */

.css-key-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-image: url('../images/Key.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-15deg);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.css-key-logo:hover {
    transform: rotate(-15deg) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.6)) brightness(1.1);
}

.css-key-logo.small {
    width: 24px;
    height: 24px;
}

.css-key-logo.large {
    width: 56px;
    height: 56px;
}

/* Animation for key logo */
@keyframes keyGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.8));
    }
}

@keyframes keyRotate {
    0% {
        transform: rotate(-15deg) scale(1);
    }
    50% {
        transform: rotate(-10deg) scale(1.05);
    }
    100% {
        transform: rotate(-15deg) scale(1);
    }
}

.css-key-logo:hover {
    animation: keyGlow 2s ease-in-out infinite, keyRotate 1s ease-in-out infinite;
}

/* Logo with text combinations */
.logo-with-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-with-text:hover {
    text-decoration: none;
}

.logo-with-text .brand-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    transition: all 0.3s ease;
}

.logo-with-text:hover .brand-text {
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* Specific theme variants */
.logo-with-text.light .brand-text {
    color: #6d28d9;
}

.logo-with-text.light:hover .brand-text {
    color: #5b21b6;
}

.logo-with-text.dark .brand-text {
    color: #ffffff;
}

.logo-with-text.dark .brand-text .accent {
    color: #22c55e;
}

.logo-with-text.purple .brand-text {
    color: #8b5cf6;
}

.logo-with-text.purple .brand-text .accent {
    color: #22c55e;
}