/* Theme: Chrome Liquid — Liquid metal reflections, polished chrome */

.theme-chrome-liquid {
    --profile-hover-lift: -4px;
    --profile-hover-scale: 1.01;
    --profile-transition-speed: 0.3s;
    --profile-font-weight-name: 800;
    --profile-letter-spacing: -0.02em;
    --profile-shadow-color: rgba(168, 168, 184, 0.1);
}

/* Background: subtle silver ambient */
.theme-chrome-liquid .profile-bg-decor::before {
    background: #A8A8B8;
    opacity: 0.04;
    filter: blur(200px);
}
.theme-chrome-liquid .profile-bg-decor::after {
    background: #D4D4E0;
    opacity: 0.03;
    filter: blur(200px);
}

/* Avatar: chrome ring glow */
.theme-chrome-liquid .profile-avatar-glow {
    background: conic-gradient(from 0deg, #A8A8B8, #D4D4E0, #FFFFFF, #A8A8B8);
    filter: blur(38px);
    opacity: 0.15;
}
.theme-chrome-liquid .profile-avatar {
    box-shadow:
        0 0 0 3px rgba(212, 212, 224, 0.5),
        0 0 0 6px rgba(8, 8, 10, 0.85),
        0 0 20px rgba(168, 168, 184, 0.15),
        0 0 50px rgba(212, 212, 224, 0.06),
        0 8px 30px rgba(0, 0, 0, 0.3);
}
.theme-chrome-liquid .profile-avatar:hover {
    box-shadow:
        0 0 0 3px rgba(212, 212, 224, 0.7),
        0 0 0 6px rgba(8, 8, 10, 0.75),
        0 0 30px rgba(168, 168, 184, 0.22),
        0 0 65px rgba(212, 212, 224, 0.1),
        0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Display name: metallic gradient text */
.theme-chrome-liquid .profile-display-name {
    background: linear-gradient(
        135deg,
        #A8A8B8 0%,
        #FFFFFF 25%,
        #A8A8B8 50%,
        #D4D4E0 75%,
        #A8A8B8 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chromeShift 4s ease-in-out infinite;
    text-shadow: none;
}

@keyframes chromeShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Verified badge: keep visible despite gradient text */
.theme-chrome-liquid .verified-badge {
    -webkit-text-fill-color: initial;
}
.theme-chrome-liquid .profile-badge {
    -webkit-text-fill-color: #fff;
}

/* Link cards: chrome borders with liquid shine sweep */
.theme-chrome-liquid .profile-link-card {
    border-color: rgba(168, 168, 184, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.1);
}
.theme-chrome-liquid .profile-link-card::after {
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(212, 212, 224, 0.04) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(212, 212, 224, 0.04) 60%,
        transparent 75%
    );
}
.theme-chrome-liquid .profile-link-card:hover {
    border-color: rgba(168, 168, 184, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 18px rgba(168, 168, 184, 0.08),
        0 8px 28px rgba(0, 0, 0, 0.2);
}

/* Highlighted: chrome shimmer */
.theme-chrome-liquid .profile-link-card.highlighted {
    border-color: rgba(168, 168, 184, 0.2);
}
.theme-chrome-liquid .profile-link-card.highlighted::before {
    background: linear-gradient(90deg, #A8A8B8, #FFFFFF, #D4D4E0, #A8A8B8);
    background-size: 200% 100%;
}

/* Liquid reflection on highlighted hover */
@keyframes liquidReflect {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.theme-chrome-liquid .profile-link-card.highlighted:hover::after {
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.06) 35%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 65%,
        transparent 80%
    );
    background-size: 200% 100%;
    animation: liquidReflect 2s ease-in-out infinite;
    left: 0;
    width: 100%;
}

/* Social: chrome hover */
.theme-chrome-liquid .profile-social-icon:hover {
    background: rgba(168, 168, 184, 0.1);
    border-color: rgba(168, 168, 184, 0.3);
    box-shadow: 0 4px 16px rgba(168, 168, 184, 0.12);
}

/* Contact: chrome accent */
.theme-chrome-liquid .profile-contact-btn:hover {
    box-shadow:
        0 0 18px rgba(168, 168, 184, 0.12),
        0 8px 28px rgba(0, 0, 0, 0.2);
}

/* Reduced motion: disable metallic animation */
@media (prefers-reduced-motion: reduce) {
    .theme-chrome-liquid .profile-display-name {
        animation: none;
        background-position: 0% 50%;
    }
    .theme-chrome-liquid .profile-link-card.highlighted:hover::after {
        animation: none;
    }
}