/* =================================================
   AIVELLE PREMIUM CARD
   Homepage member-only card invitation
================================================= */

.premium-card {
    position: relative;
}

.premium-card-media {
    position: relative;
    overflow: hidden;
}

/*
 * The main card link remains fully usable for members.
 * For guests, JavaScript prevents navigation.
 */

.premium-card-main-link {
    display: block;
}

/* Image movement */

.premium-card-media img {
    transition:
        transform 1.05s var(--ease),
        filter .75s ease;
}

/* Small permanent member marker */

.premium-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 7;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 10px;

    border: 1px solid rgba(200, 162, 90, .75);

    color: var(--accent);
    background: rgba(5, 5, 5, .74);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 8px;
    line-height: 1;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.premium-card-badge::before {
    content: "";

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 7px rgba(200, 162, 90, .55);
}

/* =================================================
   Slide-in invitation
================================================= */

.premium-card-panel {
    position: absolute;
    inset: 0;
    z-index: 8;

    display: flex;
    align-items: center;

    padding:
        clamp(18px, 1.8vw, 28px)
        clamp(17px, 1.7vw, 26px);

    overflow-y: auto;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            rgba(7, 7, 7, .91),
            rgba(5, 5, 5, .82)
        );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(100%);

    transition:
        transform .72s var(--ease),
        opacity .48s ease,
        visibility .48s ease;
}

.premium-card-panel-inner {
    width: 100%;
}

.premium-card-status {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 17px;

    color: var(--accent);

    text-transform: uppercase;
    letter-spacing: .17em;
    font-size: 8px;
    line-height: 1.25;
}

.premium-card-status-dot {
    width: 4px;
    height: 4px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 8px rgba(200, 162, 90, .55);
}

.premium-card-title {
    margin: 0;

    color: var(--white);

    font-size: clamp(24px, 2.15vw, 36px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.035em;
}

.premium-card-copy {
    margin: 17px 0 0;

    color: var(--mist);

    font-size: clamp(11px, .84vw, 13px);
    line-height: 1.58;
}

.premium-card-actions {
    margin-top: 21px;
}

.premium-card-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 16px;

    border: 1px solid var(--accent);

    color: var(--black);
    background: var(--accent);

    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 8px;
    line-height: 1;

    transition:
        color .35s ease,
        background-color .35s ease,
        transform .4s var(--ease);
}

.premium-card-join:hover,
.premium-card-join:focus-visible {
    color: var(--accent);
    background: transparent;
    transform: translateY(-2px);
}

.premium-card-signin {
    display: block;

    width: fit-content;

    margin-top: 14px;

    color: var(--muted);

    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 7px;
    line-height: 1.35;

    transition: color .35s ease;
}

.premium-card-signin:hover,
.premium-card-signin:focus-visible {
    color: var(--accent);
}

/* =================================================
   Locked-card interaction
   Applies to both guests and signed-in inactive members.
================================================= */

.premium-card:is(
    [data-access="guest"],
    [data-access="inactive"]
):hover .premium-card-panel,
.premium-card:is(
    [data-access="guest"],
    [data-access="inactive"]
):focus-within .premium-card-panel,
.premium-card:is(
    [data-access="guest"],
    [data-access="inactive"]
).is-open .premium-card-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);
}

.premium-card:is(
    [data-access="guest"],
    [data-access="inactive"]
):hover .premium-card-media img,
.premium-card:is(
    [data-access="guest"],
    [data-access="inactive"]
):focus-within .premium-card-media img,
.premium-card:is(
    [data-access="guest"],
    [data-access="inactive"]
).is-open .premium-card-media img {
    transform: scale(1.04);
    filter: brightness(.76);
}

.premium-card[data-access="inactive"] .premium-card-badge {
    opacity: 1;
    visibility: visible;
}

/* =================================================
   Signed-in member state
================================================= */

.premium-card[data-access="member"] .premium-card-panel,
.premium-card[data-access="member"] .premium-card-badge {
    display: none;
}

.premium-card[data-access="member"] .premium-card-main-link {
    cursor: pointer;
}

/* =================================================
   Tablet and mobile
================================================= */

@media (max-width: 992px) {

    .premium-card-panel {
        padding: 24px;
    }

    .premium-card-title {
        font-size: clamp(27px, 4vw, 38px);
    }

    .premium-card-copy {
        font-size: 13px;
        line-height: 1.62;
    }

}

@media (max-width: 600px) {

    .premium-card-panel {
        padding: 20px;
    }

    .premium-card-title {
        font-size: 29px;
    }

    .premium-card-copy {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.55;
    }

    .premium-card-actions {
        margin-top: 18px;
    }

}

/* =================================================
   Reduced motion
================================================= */

@media (prefers-reduced-motion: reduce) {

    .premium-card-panel,
    .premium-card-media img,
    .premium-card-join {
        transition: none;
    }

}