.profile-friend-starlight-layer {
    position: absolute;
    inset: 48px 0 0;
    z-index: 8;
    overflow: hidden;
    pointer-events: none;
}

.profile-friend-starlight-layer[hidden] {
    display: none;
}

.profile-friend-starlight-layer:not([hidden]) {
    animation: profile-starlight-reveal 560ms ease-out both;
}

.profile-friend-starlight {
    --starlight-x: 78%;
    --starlight-y: 24%;
    width: 72px;
    height: 72px;
    padding: 0;
    position: absolute;
    left: var(--starlight-x);
    top: var(--starlight-y);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 50%;
    color: #fff8c9;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    filter:
        drop-shadow(0 0 4px rgba(255, 255, 244, 0.96))
        drop-shadow(0 0 10px rgba(255, 207, 86, 0.92))
        drop-shadow(0 0 18px rgba(126, 211, 255, 0.58));
    opacity: 1;
    scale: 1;
    animation: profile-starlight-drift 3.8s ease-in-out infinite;
    transition: opacity 420ms ease-out, scale 420ms ease-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.profile-friend-starlight:active {
    animation-play-state: paused;
}

.profile-friend-starlight:focus-visible {
    outline: 2px solid rgba(255, 243, 196, 0.92);
    outline-offset: 3px;
}

.profile-friend-starlight:disabled {
    cursor: default;
}

.profile-friend-starlight.is-claiming {
    animation-play-state: paused;
}

.profile-friend-starlight.is-claiming .profile-friend-starlight-core {
    animation-duration: 620ms;
}

.profile-friend-starlight-halo,
.profile-friend-starlight-orbit,
.profile-friend-starlight-core {
    position: absolute;
    pointer-events: none;
}

.profile-friend-starlight-halo {
    width: 48px;
    height: 48px;
    left: 50%;
    top: 50%;
    margin: -24px 0 0 -24px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 248, 0.98) 0 7%,
            rgba(255, 224, 111, 0.86) 14%,
            rgba(255, 179, 231, 0.5) 31%,
            rgba(105, 211, 255, 0.34) 48%,
            transparent 72%
        );
    animation: profile-starlight-breathe 2.2s ease-in-out infinite;
}

.profile-friend-starlight-orbit {
    width: 32px;
    height: 32px;
    left: 50%;
    top: 50%;
    margin: -16px 0 0 -16px;
    border: 1px solid rgba(255, 239, 174, 0.72);
    border-radius: 50%;
    transform: rotate(-20deg) scaleY(0.46);
    box-shadow:
        9px -5px 0 -6px #fff1a4,
        -10px 5px 0 -6px #8edcff;
}

.profile-friend-starlight-core {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    left: 50%;
    top: 50%;
    margin: -24px 0 0 -24px;
    color: #fffbdc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    line-height: 1;
    text-shadow:
        0 0 3px #ffffff,
        0 0 8px #ffd75d,
        0 0 15px rgba(255, 185, 87, 0.98),
        0 0 23px rgba(106, 211, 255, 0.68);
    animation: profile-starlight-twinkle 1.8s ease-in-out infinite;
}

.profile-friend-starlight.is-collecting {
    opacity: 0;
    scale: 0.42;
}

.profile-friend-starlight-particle {
    --particle-x: 0px;
    --particle-y: -24px;
    width: 4px;
    height: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: #fff1a9;
    box-shadow: 0 0 6px rgba(255, 224, 148, 0.9);
    animation: profile-starlight-particle 620ms ease-out forwards;
}

@keyframes profile-starlight-reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes profile-starlight-drift {
    0%,
    100% {
        transform: translate(-50%, -50%) translate3d(-2px, 3px, 0) rotate(-4deg);
    }
    50% {
        transform: translate(-50%, -50%) translate3d(4px, -8px, 0) rotate(5deg);
    }
}

@keyframes profile-starlight-breathe {
    0%,
    100% {
        opacity: 0.58;
        transform: scale(0.88);
    }
    50% {
        opacity: 1;
        transform: scale(1.16);
    }
}

@keyframes profile-starlight-twinkle {
    0%,
    100% {
        opacity: 0.8;
        transform: scale(0.88) rotate(-5deg);
    }
    48% {
        opacity: 1;
        transform: scale(1.12) rotate(4deg);
    }
}

@keyframes profile-starlight-particle {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--particle-x)),
            calc(-50% + var(--particle-y))
        ) scale(0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-friend-starlight-layer,
    .profile-friend-starlight,
    .profile-friend-starlight-halo,
    .profile-friend-starlight-core {
        animation: none;
    }
}