/* =================================================
   AIVELLE PREMIUM EDITORIAL GATE
================================================= */

.premium-gate {
    position: relative;
    background: var(--black);
}

/*
 * While access is being checked, and when the visitor
 * is not signed in, only a glimpse of the premium
 * editorial is shown.
 */

.premium-gate[data-access="checking"] .premium-gate-content,
.premium-gate[data-access="guest"] .premium-gate-content {
    position: relative;
    max-height: clamp(720px, 92vh, 980px);
    overflow: hidden;
    pointer-events: none;
    user-select: none;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 30%,
            rgba(0, 0, 0, .8) 48%,
            rgba(0, 0, 0, .25) 68%,
            transparent 88%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 30%,
            rgba(0, 0, 0, .8) 48%,
            rgba(0, 0, 0, .25) 68%,
            transparent 88%
        );
}

/*
 * Slightly soften the premium preview without making
 * the image unrecognisable.
 */

.premium-gate[data-access="checking"] .premium-gate-content::after,
.premium-gate[data-access="guest"] .premium-gate-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(5, 5, 5, .08) 28%,
            rgba(5, 5, 5, .6) 66%,
            var(--black) 94%
        );
}

/* =================================================
   Membership invitation
================================================= */

.premium-gate-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: clamp(330px, 44vh, 520px);
    z-index: 10;

    display: grid;
    place-items: center;

    padding:
        clamp(100px, 13vw, 190px)
        var(--page-gutter)
        clamp(80px, 10vw, 140px);

    text-align: center;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 5, 5, 0),
            rgba(5, 5, 5, .76) 18%,
            rgba(5, 5, 5, .96) 46%,
            var(--black) 72%
        );

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

.premium-gate-panel {
    width: min(620px, 100%);
    margin-inline: auto;
}

.premium-gate-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin: 0 0 25px;

    color: var(--accent);

    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 9px;
    line-height: 1.3;
}

.premium-gate-status-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--accent);

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

.premium-gate-title {
    margin: 0;

    color: var(--white);

    font-size: clamp(42px, 5.4vw, 78px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
}

.premium-gate-copy {
    max-width: 560px;

    margin:
        clamp(25px, 3vw, 36px)
        auto
        0;

    color: var(--mist);

    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
}

.premium-gate-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 164px;

    margin-top: 35px;
    padding: 15px 27px;

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

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

    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;

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

.premium-gate-action:hover,
.premium-gate-action:focus-visible {
    color: var(--accent);
    background: transparent;
    transform: translateY(-3px);
}

.premium-gate-signin {
    display: block;

    width: fit-content;

    margin: 22px auto 0;

    color: var(--muted);

    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 9px;

    transition: color .35s ease;
}

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

/* =================================================
   Authenticated member state
================================================= */

.premium-gate[data-access="member"] .premium-gate-content {
    max-height: none;
    overflow: visible;
    pointer-events: auto;
    user-select: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.premium-gate[data-access="member"] .premium-gate-content::after {
    display: none;
}

.premium-gate[data-access="member"] .premium-gate-overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.premium-gate-overlay {
    min-height: clamp(620px, 82vh, 900px);
    overflow: hidden;
    background: #050505;
}

.premium-gate-teaser {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.premium-gate-teaser img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0.28;
    filter: grayscale(1);
    transform: scale(1.02);
}

.premium-gate-teaser::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 5, 5, 0.12) 0%,
            rgba(5, 5, 5, 0.38) 8%,
            rgba(5, 5, 5, 0.82) 18%,
            rgba(5, 5, 5, 0.97) 28%,
            #050505 36%,
            #050505 100%
        );
}

.premium-gate-panel {
    position: relative;
    z-index: 2;
}

/* =================================================
   Mobile
================================================= */

@media (max-width: 600px) {

    .premium-gate[data-access="checking"] .premium-gate-content,
    .premium-gate[data-access="guest"] .premium-gate-content {
        max-height: 690px;
    }

    .premium-gate-overlay {
        top: 270px;

        padding:
            110px
            20px
            85px;
    }

    .premium-gate-title {
        font-size: clamp(39px, 13vw, 58px);
    }

    .premium-gate-copy {
        font-size: 15px;
        line-height: 1.65;
    }

}

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

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

    .premium-gate-overlay,
    .premium-gate-action {
        transition: none;
    }

}