/* Social App Download Styles - haoxuekeji.cn 2025 */

.social-download-layout {
    --social-download-accent: #06b6d4;
    --social-download-highlight: #3b82f6;
}

.social-download-showcase {
    backdrop-filter: blur(20px);
    transition: all 0.6s ease;
}

.social-download-showcase:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(6, 182, 212, 0.25);
}

.social-download-ios,
.social-download-android {
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.social-download-ios::before,
.social-download-android::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.social-download-ios:hover::before,
.social-download-android:hover::before {
    left: 100%;
}

.social-qr-section {
    transition: all 0.5s ease;
}

.social-qr-section:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
}

.social-phone-frame {
    transition: all 0.6s ease;
}

.social-phone-frame:hover {
    transform: scale(1.05) rotateY(10deg);
}

.social-phone-glow {
    animation: social-phone-glow 4s ease-in-out infinite;
}

@keyframes social-phone-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.social-feature-highlight {
    transition: all 0.4s ease;
}

.social-feature-highlight:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25);
}

.social-review-card {
    transition: all 0.5s ease;
}

.social-review-card:hover {
    transform: translateY(-8px) rotateX(3deg);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
}

.social-overall-rating {
    transition: all 0.6s ease;
}

.social-overall-rating:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(245, 158, 11, 0.25);
}

.social-store-logo {
    transition: all 0.4s ease;
}

.social-store-logo:hover {
    transform: scale(1.1) rotate(10deg);
}

@keyframes social-rating-shine {
    0% { color: #fbbf24; }
    50% { color: #f59e0b; text-shadow: 0 0 10px #fbbf24; }
    100% { color: #fbbf24; }
}

.social-rating i:hover {
    animation: social-rating-shine 1s ease-in-out;
}