/* ============================================================
   FansXpress profile page - premium layer
   Targets existing markup only (safe). Theme-aware,
   reduced-motion friendly, zero external resources.
   ============================================================ */

/* ---------- Cover: depth overlay + slow cinematic zoom ---------- */
.profile-cover-bg {
    position: relative;
    overflow: hidden;
}

.profile-cover-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%);
    pointer-events: none;
}

.profile-cover-bg img {
    animation: fxpCoverZoom 18s ease-out forwards;
    transform-origin: center;
}

@keyframes fxpCoverZoom {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

/* ---------- Avatar: theme ring + entrance + hover ---------- */
.avatar-holder {
    animation: fxpRise .55s cubic-bezier(.22, .8, .36, 1) both;
}

@keyframes fxpRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.profile-avatar-wrap {
    transition: transform .25s ease;
}

.profile-avatar-wrap:hover {
    transform: scale(1.04);
}

.profile-avatar-img {
    box-shadow: 0 0 0 3px var(--primary, #d10054), 0 10px 30px rgba(0, 0, 0, .28) !important;
}

/* Story rings keep their own look on top of ours */
.profile-has-stories .profile-avatar-img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28) !important;
}

/* ---------- Online indicator: gentle pulse ---------- */
.online-indicator {
    animation: fxpPulse 2.2s ease-in-out infinite;
}

@keyframes fxpPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, .45); }
    50% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
}

/* ---------- Action pills: premium hover ---------- */
.p-pill {
    transition: transform .18s ease, box-shadow .18s ease, color .18s ease,
        background-color .18s ease, border-color .18s ease;
}

.p-pill:hover {
    transform: translateY(-2px);
    color: var(--primary, #d10054);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

/* ---------- Subscription card: clean transparent background ---------- */
.subscription-holder {
    position: relative;
    border-radius: 1rem;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* Subscribe button: sheen sweep on hover */
.subscription-holder .btn {
    position: relative;
    overflow: hidden;
}

.subscription-holder .btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}

.subscription-holder .btn:hover::after {
    left: 130%;
}

/* ---------- Content tabs (nav-pills): animated active state ---------- */
.profile-page-content .nav-pills .nav-link,
.nav-pills.nav-justified .nav-link {
    border-radius: 2rem;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.nav-pills.nav-justified .nav-link:not(.active):hover {
    transform: translateY(-1px);
    color: var(--primary, #d10054);
}

.nav-pills.nav-justified .nav-link.active {
    box-shadow: none;
}

/* Stacked profile tabs: number on top, label below (Facebook-style) */
.fx-stacked-tabs .nav-link {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    gap: 2px;
    border-radius: 0 !important;
}
.fx-stacked-tabs .fx-tab-num {
    font-size: 1.05rem;
    font-weight: 800;
}
.fx-stacked-tabs .fx-tab-label {
    font-size: .78rem;
    font-weight: 500;
    opacity: .7;
    text-transform: capitalize;
}

/* ---------- Details entrance (name block + bio) ---------- */
.profile-description-holder,
.pt-2.pl-4.pr-4 {
    animation: fxpRise .55s cubic-bezier(.22, .8, .36, 1) both;
    animation-delay: .08s;
}

/* ---------- Highlights ring: theme colored ---------- */
.profile-highlights .swiper-slide .story-ring,
.profile-highlights-swiper .story-ring {
    border-color: var(--primary, #d10054);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .profile-cover-bg img,
    .avatar-holder,
    .online-indicator,
    .profile-description-holder,
    .pt-2.pl-4.pr-4 {
        animation: none !important;
        opacity: 1;
    }

    .subscription-holder .btn::after {
        display: none;
    }
}

/*
    The profile cover has no colour of its own.

    generic.scss gives it #FAFAFA, which shows as a pale band on a dark theme wherever the
    cover image has not loaded or has not been set -- a light rectangle in the middle of a
    dark page. Transparent lets whatever is behind it show instead.

    Set here rather than in the SASS because that would need recompiling; this is the file
    that ships.
*/
.profile-cover-bg {
    background-color: transparent !important;
}