/**
 * Member list + profile action modals — avatar tiles & score rings only.
 * Scoped so member dashboard / KMS apps never load homepage body layout CSS.
 */

/* ─── 1. 基礎樣式 ─── */
@keyframes kmsModalAvatarGlowBreathe {
    0%,
    100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--glow-color) 45%, transparent),
            0 0 6px 1px color-mix(in srgb, var(--glow-color) 45%, transparent),
            0 0 14px 3px color-mix(in srgb, var(--glow-color) 22%, transparent),
            inset 0 0 10px 1px color-mix(in srgb, var(--glow-color) 30%, transparent);
        filter: brightness(1.03) saturate(1.05);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--glow-color) 65%, #fff 15%),
            0 0 10px 2px color-mix(in srgb, var(--glow-color) 55%, transparent),
            0 0 20px 5px color-mix(in srgb, var(--glow-color) 28%, transparent),
            inset 0 0 14px 2px color-mix(in srgb, var(--glow-color) 40%, transparent);
        filter: brightness(1.08) saturate(1.1);
    }
}

@keyframes kmsModalAvatarGlowBreatheLegacy {
    0%,
    100% {
        box-shadow:
            0 0 0 1px var(--glow-legacy-edge),
            0 0 6px 1px var(--glow-legacy-mid),
            0 0 14px 3px var(--glow-legacy-outer),
            inset 0 0 10px 1px var(--glow-legacy-in);
        filter: brightness(1.03) saturate(1.05);
    }
    50% {
        box-shadow:
            0 0 0 1px var(--glow-legacy-edge2),
            0 0 10px 2px var(--glow-legacy-mid2),
            0 0 20px 5px var(--glow-legacy-outer),
            inset 0 0 14px 2px var(--glow-legacy-in3);
        filter: brightness(1.08) saturate(1.1);
    }
}

@keyframes kmsModalAvatarBulbChase {
    to {
        background-position: 8px 0, -8px 0;
    }
}

@keyframes kmsModalAvatarBulbFlicker {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.9; filter: brightness(1.1); }
}

#memberListModal #modalMembersGrid .avatar-glow-ring,
#memberActionsModal .avatar-glow-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
    border: 3px solid var(--glow-color, #00b8a8);
    background: transparent !important;
    animation: kmsModalAvatarGlowBreathe 2.2s ease-in-out infinite;
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
    #memberListModal #modalMembersGrid .avatar-glow-ring,
    #memberActionsModal .avatar-glow-ring {
        animation: kmsModalAvatarGlowBreatheLegacy 2.2s ease-in-out infinite;
    }
}

#memberListModal #modalMembersGrid .avatar-glow-ring::before,
#memberActionsModal .avatar-glow-ring::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 22px;
    z-index: -1;
    padding: 5px;
    box-sizing: border-box;
    background:
        radial-gradient(
            circle at center,
            #ffffff 0 0.8px,
            var(--glow-bulb) 0.8px 1.6px,
            var(--glow-color) 1.6px 2.2px,
            transparent 2.6px
        ) 0 0 / 8px 8px,
        radial-gradient(
            circle at center,
            #ffffff 0 0.6px,
            var(--glow-bulb) 0.6px 1.3px,
            transparent 2px
        ) 4px 4px / 8px 8px;
    filter:
        drop-shadow(0 0 1px var(--glow-bulb))
        drop-shadow(0 0 1.5px var(--glow-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation:
        kmsModalAvatarBulbChase 0.8s steps(8) infinite,
        kmsModalAvatarBulbFlicker 1.4s ease-in-out infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#memberListModal .avatar-glow-ring.ring-score-5,
#memberActionsModal .avatar-glow-ring.ring-score-5 {
    --glow-color: #ffcc00;
    --glow-bulb: #fff3a0;
    --glow-legacy-edge: rgba(255, 204, 0, 0.65);
    --glow-legacy-mid: rgba(255, 200, 0, 0.6);
    --glow-legacy-mid2: rgba(255, 230, 100, 0.75);
    --glow-legacy-outer: rgba(255, 200, 0, 0.4);
    --glow-legacy-outer2: rgba(255, 180, 0, 0.22);
    --glow-legacy-in: rgba(255, 200, 0, 0.4);
    --glow-legacy-in2: rgba(255, 200, 0, 0.2);
    --glow-legacy-in3: rgba(255, 220, 120, 0.5);
    --glow-legacy-edge2: rgba(255, 220, 80, 0.8);
}

#memberListModal .avatar-glow-ring.ring-score-4,
#memberActionsModal .avatar-glow-ring.ring-score-4 {
    --glow-color: #ff4a9a;
    --glow-bulb: #ffc2e0;
    --glow-legacy-edge: rgba(255, 90, 160, 0.7);
    --glow-legacy-mid: rgba(255, 100, 170, 0.6);
    --glow-legacy-mid2: rgba(255, 160, 200, 0.78);
    --glow-legacy-outer: rgba(255, 100, 160, 0.4);
    --glow-legacy-outer2: rgba(255, 80, 150, 0.22);
    --glow-legacy-in: rgba(255, 120, 180, 0.42);
    --glow-legacy-in2: rgba(255, 100, 150, 0.22);
    --glow-legacy-in3: rgba(255, 160, 200, 0.5);
    --glow-legacy-edge2: rgba(255, 200, 220, 0.88);
}

#memberListModal .avatar-glow-ring.ring-score-3,
#memberActionsModal .avatar-glow-ring.ring-score-3 {
    --glow-color: #00b8a8;
    --glow-bulb: #8efaf0;
    --glow-legacy-edge: rgba(0, 200, 185, 0.7);
    --glow-legacy-mid: rgba(0, 200, 185, 0.6);
    --glow-legacy-mid2: rgba(100, 230, 215, 0.78);
    --glow-legacy-outer: rgba(0, 180, 170, 0.4);
    --glow-legacy-outer2: rgba(0, 160, 155, 0.25);
    --glow-legacy-in: rgba(0, 190, 175, 0.42);
    --glow-legacy-in2: rgba(0, 170, 160, 0.22);
    --glow-legacy-in3: rgba(100, 230, 220, 0.48);
    --glow-legacy-edge2: rgba(120, 255, 240, 0.8);
}

#memberListModal .avatar-glow-ring.ring-score-2,
#memberActionsModal .avatar-glow-ring.ring-score-2 {
    --glow-color: #4b1a8a;
    --glow-bulb: #c4a6ff;
    --glow-legacy-edge: rgba(110, 60, 180, 0.8);
    --glow-legacy-mid: rgba(120, 70, 200, 0.65);
    --glow-legacy-mid2: rgba(170, 130, 255, 0.78);
    --glow-legacy-outer: rgba(100, 50, 180, 0.4);
    --glow-legacy-outer2: rgba(60, 30, 120, 0.35);
    --glow-legacy-in: rgba(130, 80, 210, 0.4);
    --glow-legacy-in2: rgba(80, 50, 150, 0.3);
    --glow-legacy-in3: rgba(180, 150, 255, 0.5);
    --glow-legacy-edge2: rgba(200, 180, 255, 0.9);
}

/* ─── 2. 布局樣式 ─── */
#memberListModal .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    user-select: none;
    height: auto;
    min-height: 0;
    cursor: pointer;
}

#memberListModal #modalMembersGrid .ios-icon {
    width: 100%;
    flex-shrink: 0;
    border-radius: 14px;
    background: #fff center/cover no-repeat;
    box-shadow:
        0 8px 8px rgba(0, 0, 0, 0.6),
        0 5px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: visible;
    user-select: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

#memberListModal .ios-icon::before,
#memberListModal .ios-icon::after {
    display: none;
}

/* ─── 3. 交互樣式 ─── */
@media (hover: hover), screen and (min-width: 769px) {
    #memberListModal .icon-item:hover .ios-icon {
        transform: translateY(-6px) scale(1.04);
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.45),
            0 8px 16px rgba(0, 0, 0, 0.28);
    }

    #memberListModal .icon-item:hover .icon-label {
        transform: translateY(-3px);
        color: #00e5ff;
        text-shadow: 0 0 6px rgba(0, 229, 255, 0.45);
    }
}

/* ─── 4. 響應式樣式 ─── */
@media screen and (min-width: 769px) {
    #memberListModal #modalMembersGrid .avatar-glow-ring {
        animation: kmsModalAvatarGlowBreathe 2.2s ease-in-out infinite !important;
        border: 3px solid var(--glow-color) !important;
        filter: none !important;
    }

    @supports not (color: color-mix(in srgb, white 50%, black)) {
        #memberListModal #modalMembersGrid .avatar-glow-ring {
            animation: kmsModalAvatarGlowBreatheLegacy 2.2s ease-in-out infinite !important;
        }
    }

    #memberListModal #modalMembersGrid .avatar-glow-ring::before {
        content: "" !important;
        display: block !important;
        animation:
            kmsModalAvatarBulbChase 0.8s steps(8) infinite,
            kmsModalAvatarBulbFlicker 1.4s ease-in-out infinite !important;
    }

    #memberListModal .modal-member-scroll-list {
        overflow-x: visible !important;
    }

    #memberListModal #modalMembersGrid.icons-container {
        overflow: visible;
    }
}

@media screen and (max-width: 768px) {
    #memberListModal .avatar-glow-ring {
        animation: none !important;
        -webkit-filter: none !important;
        filter: none !important;
        box-shadow: none !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 14px;
    }

    #memberListModal .avatar-glow-ring::before {
        content: none !important;
        display: none !important;
        animation: none !important;
    }
}

/* ─── Profile modal (Avatar → Profile) — homepage hero text shadow ─── */
#profileDetailContent :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    label,
    small,
    strong,
    em,
    li,
    .profile-stat-value,
    .profile-stat-label,
    .profile-info-item,
    .profile-user-info-title,
    .profile-posts-tab-label,
    .profile-grid-status-msg,
    .dna-match-label,
    .dna-match-copy,
    .dna-match-denom,
    .dna-match-score
):not(.premium-btn):not(.premium-btn *):not(input):not(textarea):not(select):not(option):not(svg):not(canvas):not(img):not(video) {
    text-shadow: var(--kms-hero-button-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 234, 211, 0.5)) !important;
}

#profileDetailContent .profile-bio-area p,
#profileDetailContent .profile-dna-section,
#profileDetailContent .profile-dna-section span,
#profileDetailContent .profile-summary-info > div {
    text-shadow: var(--kms-hero-button-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 234, 211, 0.5)) !important;
}