/* DragonPrivate Branding Styles */

/* Logo Animations */
.logo img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

/* Hero Logo Animation */
.hero-content img {
    animation: logoFloat 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.hero-content img:hover {
    transform: scale(1.1);
    animation-play-state: paused;
}

@keyframes logoFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Footer Logo */
.footer-col img {
    transition: transform 0.3s ease;
}

.footer-col img:hover {
    transform: rotate(360deg);
}

/* Admin Logo */
.sidebar .logo img {
    transition: all 0.3s ease;
}

.sidebar .logo img:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.7);
}

/* Login/Register Logo Pulse Effect */
.login-container .logo img,
.register-container .logo img {
    animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

/* Responsive Logo Sizes */
@media (max-width: 768px) {
    .logo img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hero-content img {
        width: 80px !important;
        height: 80px !important;
    }
    
    .login-container .logo img,
    .register-container .logo img {
        width: 60px !important;
        height: 60px !important;
    }
}

@media (max-width: 480px) {
    .logo img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .hero-content img {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Favicon Animation (for browsers that support it) */
@keyframes faviconBlink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Logo Loading Effect */
.logo-loading {
    position: relative;
    overflow: hidden;
}

.logo-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.3), transparent);
    animation: logoShine 2s infinite;
}

@keyframes logoShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Brand Colors for Logos */
.logo-primary {
    border-color: var(--primary) !important;
}

.logo-gold {
    border-color: var(--gold) !important;
}

.logo-gradient {
    border: 3px solid;
    border-image: linear-gradient(45deg, var(--primary), var(--gold)) 1;
}

/* Logo Text Effects */
.logo h1, .logo h2 {
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    transition: text-shadow 0.3s ease;
}

.logo:hover h1, .logo:hover h2 {
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.8);
}

/* Special Effects for Different Pages */
.admin-logo {
    position: relative;
}

.admin-logo::after {
    content: '👑';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 16px;
    animation: crownFloat 2s ease-in-out infinite;
}

@keyframes crownFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

/* Profile Page Logo */
.profile-logo {
    position: relative;
}

.profile-logo::after {
    content: '⚡';
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 14px;
    animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Checkout Page Logo */
.checkout-logo {
    position: relative;
}

.checkout-logo::after {
    content: '💎';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 14px;
    animation: gemGlow 2s ease-in-out infinite;
}

@keyframes gemGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}