/* =================================================
   AIVELLE MEMBER NAVIGATION STATE
   Load after global.css.
================================================= */

.members-link,
.mobile-members-link {
    transition:
        color .55s ease,
        opacity .35s ease,
        filter .55s ease;
}

.members-link[data-member-state="member"],
.members-link[data-member-state="member"] i,
.mobile-members-link[data-member-state="member"],
.mobile-members-link[data-member-state="member"] i {
    color: var(--accent);
}

.members-link[data-member-state="member"] i {
    filter: drop-shadow(0 0 7px rgba(200, 162, 90, .22));
}

.member-is-authenticated .members-link[data-member-state="member"] i {
    animation: aivelleMemberArrival 1.25s var(--ease) both;
}

.members-link[data-member-state="member"] .members-popup {
    min-width: 174px;
    padding: 14px 18px 15px;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

.members-popup-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.members-status-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(200, 162, 90, .52);
}

.members-popup-welcome,
.members-popup-name {
    display: block;
}

.members-popup-welcome {
    margin-top: 11px;
    color: var(--mist);
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: .08em;
}

.members-popup-name {
    margin-top: 2px;
    color: var(--paper);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .025em;
}

@keyframes aivelleMemberArrival {
    0% {
        opacity: .45;
        transform: scale(.82);
        filter: drop-shadow(0 0 0 rgba(200, 162, 90, 0));
    }

    55% {
        opacity: 1;
        transform: scale(1.08);
        filter: drop-shadow(0 0 10px rgba(200, 162, 90, .38));
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 7px rgba(200, 162, 90, .22));
    }
}

@media (prefers-reduced-motion: reduce) {
    .member-is-authenticated .members-link[data-member-state="member"] i {
        animation: none;
    }
}