.elementor-23 .elementor-element.elementor-element-565363e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* ==========================================================
   BTS LUXURY
   PHASE 10.1 — THE SPOTLIGHT EXPERIENCE

   Opening Sequence
   Collection Interlude
   Berry Crush Scroll Film
   ========================================================== */


/* ==========================================================
   BASE
   ========================================================== */

.btsx {
    --x-black: #080808;
    --x-black-soft: #0D0D0D;
    --x-ivory: #F3EFE7;
    --x-gold: #D3AD66;

    --opening-progress: 0;
    --scene-progress: 0;

    position: relative;

    width: 100%;

    overflow: clip;

    background: var(--x-black);

    color: var(--x-ivory);
}


.btsx *,
.btsx *::before,
.btsx *::after {
    box-sizing: border-box;
}


.btsx-container {
    width: min(
        calc(100% - 80px),
        1320px
    );

    margin-inline: auto;
}


/* ==========================================================
   00 — OPENING
   The section is taller than viewport.
   Sticky inner stage stays fixed while scrolling.
   ========================================================== */

.btsx-opening {
    position: relative;

    height: 220vh;

    background: #050505;
}


.btsx-opening__sticky {
    position: sticky;

    top: 0;

    width: 100%;

    height: 100svh;

    overflow: hidden;

    background: #050505;
}


/* ==========================================================
   OPENING SPOTLIGHT
   ========================================================== */

.btsx-opening__light {
    position: absolute;

    z-index: 1;

    left: 50%;
    top: -30%;

    width: 38vw;
    height: 135vh;

    transform:
        translateX(-50%)
        rotate(-3deg);

    opacity:
        calc(
            .08 +
            var(--opening-progress) * .92
        );

    filter: blur(2px);

    background:
        linear-gradient(
            180deg,
            rgba(211,173,102,.00) 0%,
            rgba(211,173,102,.06) 15%,
            rgba(243,239,231,.13) 48%,
            rgba(211,173,102,.055) 72%,
            transparent 100%
        );

    clip-path:
        polygon(
            40% 0%,
            60% 0%,
            100% 100%,
            0% 100%
        );

    pointer-events: none;
}


/* floor glow */

.btsx-opening__light::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -4%;

    width: 95vw;
    height: 32vh;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(211,173,102,.13),
            rgba(211,173,102,.025) 34%,
            transparent 69%
        );
}


/* ==========================================================
   OPENING VIGNETTE
   ========================================================== */

.btsx-opening__vignette {
    position: absolute;

    z-index: 3;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 15%,
            rgba(5,5,5,.14) 50%,
            rgba(5,5,5,.84) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   PRESENTS
   ========================================================== */

.btsx-opening__present {
    position: absolute;

    z-index: 7;

    top: 56px;
    left: 50%;

    transform:
        translateX(-50%)
        translateY(
            calc(
                -15px +
                var(--opening-progress) * 15px
            )
        );

    display: flex;

    align-items: center;

    gap: 13px;

    opacity:
        calc(
            1 -
            var(--opening-progress) * 1.7
        );

    font-family: var(--bts-font-ui);

    font-size: 7px;

    font-weight: 650;

    letter-spacing: .21em;

    white-space: nowrap;

    color:
        rgba(243,239,231,.44);
}


.btsx-opening__present i {
    width: 28px;
    height: 1px;

    background:
        rgba(211,173,102,.55);
}


/* ==========================================================
   OPENING MAIN TITLE
   ========================================================== */

.btsx-opening__title {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 50%;

    width: min(1180px, calc(100% - 80px));

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}


.btsx-opening__line {
    font-family:
        var(--bts-font-ui);

    font-size:
        clamp(58px, 8vw, 124px);

    line-height: .81;

    font-weight: 700;

    letter-spacing: -.067em;

    color: var(--x-ivory);

    will-change:
        transform,
        opacity;
}


/* line 1 */

.btsx-opening__line--1 {
    opacity:
        clamp(
            0,
            calc(
                (var(--opening-progress) - .03) * 5
            ),
            1
        );

    transform:
        translateX(
            calc(
                -90px +
                var(--opening-progress) * 90px
            )
        );
}


/* line 2 */

.btsx-opening__line--2 {
    opacity:
        clamp(
            0,
            calc(
                (var(--opening-progress) - .11) * 5
            ),
            1
        );

    transform:
        translateX(
            calc(
                120px -
                var(--opening-progress) * 120px
            )
        );
}


/* line 3 */

.btsx-opening__line--3 {
    opacity:
        clamp(
            0,
            calc(
                (var(--opening-progress) - .20) * 5
            ),
            1
        );

    transform:
        translateY(
            calc(
                80px -
                var(--opening-progress) * 80px
            )
        );
}


.btsx-opening__line--3 em {
    margin-left: .07em;

    font-family:
        var(--bts-font-display);

    font-weight: 400;

    color: var(--x-gold);
}


/* whole title disappears near end */

.btsx-opening__title {
    opacity:
        clamp(
            0,
            calc(
                1.9 -
                var(--opening-progress) * 1.25
            ),
            1
        );
}


/* ==========================================================
   GIANT GHOST BTS
   ========================================================== */

.btsx-opening__ghost {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(
            calc(
                .76 +
                var(--opening-progress) * .35
            )
        );

    font-family: var(--bts-font-display);

    font-size: min(45vw, 670px);

    line-height: .7;

    letter-spacing: -.08em;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(243,239,231,.028);

    opacity:
        calc(
            .3 +
            var(--opening-progress) * .7
        );

    user-select: none;

    pointer-events: none;
}


/* ==========================================================
   OPENING SCROLL INDICATOR
   ========================================================== */

.btsx-opening__scroll {
    position: absolute;

    z-index: 7;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 13px;

    opacity:
        clamp(
            0,
            calc(
                1.2 -
                var(--opening-progress) * 2
            ),
            1
        );
}


.btsx-opening__scroll > span {
    font-family: var(--bts-font-ui);

    font-size: 6px;

    font-weight: 650;

    letter-spacing: .21em;

    color:
        rgba(243,239,231,.39);
}


.btsx-opening__scroll-line {
    position: relative;

    width: 1px;
    height: 38px;

    overflow: hidden;

    background:
        rgba(243,239,231,.12);
}


.btsx-opening__scroll-line i {
    position: absolute;

    top: -100%;

    width: 100%;
    height: 100%;

    background: var(--x-gold);

    animation:
        btsxScrollLine
        1.8s ease-in-out
        infinite;
}


@keyframes btsxScrollLine {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200%);
    }

}


/* ==========================================================
   OPENING COUNTER
   ========================================================== */

.btsx-opening__counter {
    position: absolute;

    z-index: 7;

    left: 40px;
    bottom: 37px;

    display: flex;

    align-items: center;

    gap: 12px;

    opacity:
        calc(
            .7 -
            var(--opening-progress) * .7
        );
}


.btsx-opening__counter span {
    font-family: var(--bts-font-ui);

    font-size: 8px;

    font-weight: 700;

    color: var(--x-gold);
}


.btsx-opening__counter small {
    font-family: var(--bts-font-ui);

    font-size: 6px;

    font-weight: 650;

    letter-spacing: .18em;

    color:
        rgba(243,239,231,.28);
}


/* ==========================================================
   COLLECTION INTERLUDE
   ========================================================== */

.btsx-interlude {
    position: relative;

    padding: 115px 0 125px;

    background: var(--x-black);

    border-top:
        1px solid rgba(243,239,231,.07);

    border-bottom:
        1px solid rgba(243,239,231,.07);
}


.btsx-interlude__top,
.btsx-interlude__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    font-family: var(--bts-font-ui);

    font-size: 7px;

    font-weight: 650;

    letter-spacing: .18em;
}


.btsx-interlude__top {
    margin-bottom: 75px;

    color:
        rgba(243,239,231,.29);
}


.btsx-interlude__top > span {
    color: var(--x-gold);
}


.btsx-interlude__statement {
    display: flex;

    flex-direction: column;

    margin-bottom: 75px;
}


.btsx-interlude__statement span,
.btsx-interlude__statement em {
    font-size:
        clamp(52px, 6.5vw, 98px);

    line-height: .89;

    letter-spacing: -.055em;
}


.btsx-interlude__statement span {
    font-family: var(--bts-font-ui);

    font-weight: 700;

    color: var(--x-ivory);
}


.btsx-interlude__statement em {
    font-family: var(--bts-font-display);

    font-weight: 400;

    color: var(--x-gold);
}


.btsx-interlude__bottom {
    justify-content: flex-start;

    gap: 18px;

    color:
        rgba(243,239,231,.38);
}


.btsx-interlude__bottom i {
    width: 55px;
    height: 1px;

    background:
        rgba(211,173,102,.48);
}


/* ==========================================================
   SCENE
   ========================================================== */

.btsx-scene {
    position: relative;

    height: 190vh;

    background: #070707;
}


.btsx-scene__sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    background: #070707;

    isolation: isolate;
}


/* ==========================================================
   BERRY BACKGROUND
   ========================================================== */

.btsx-scene--berry
.btsx-scene__background {
    position: absolute;

    z-index: -5;

    inset: 0;

    background:
        radial-gradient(
            circle at
            calc(
                45% +
                var(--scene-progress) * 10%
            )
            53%,

            rgba(94,24,88,.29),

            rgba(52,12,50,.10) 24%,

            rgba(7,7,7,0) 53%
        ),
        #070707;
}


/* ==========================================================
   MOVING LIGHT
   ========================================================== */

.btsx-scene__light {
    position: absolute;

    z-index: -2;

    width: 55vw;
    height: 115vh;

    left:
        calc(
            -15% +
            var(--scene-progress) * 58%
        );

    top: -8%;

    transform: rotate(12deg);

    opacity:
        clamp(
            .12,
            calc(
                .12 +
                var(--scene-progress) * .82
            ),
            .94
        );

    background:
        radial-gradient(
            ellipse,
            rgba(211,173,102,.13),
            rgba(211,173,102,.035) 32%,
            transparent 67%
        );

    filter: blur(1px);

    pointer-events: none;

    will-change:
        left,
        opacity;
}


/* ==========================================================
   PRODUCT MEDIA
   ========================================================== */

.btsx-scene__media {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 50%;

    width:
        min(39vw, 590px);

    transform:
        translate(
            -50%,
            calc(
                -45% -
                var(--scene-progress) * 6%
            )
        );

    will-change:
        transform;
}


.btsx-scene__product {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    transform:
        scale(
            calc(
                .74 +
                var(--scene-progress) * .25
            )
        );

    transform-origin: center;

    opacity:
        clamp(  
            .22,
            calc(
                .22 +
                var(--scene-progress) * 2
            ),
            1
        );

    filter:
        brightness(
            calc(
                .58 +
                var(--scene-progress) * .42
            )
        )
        contrast(1.05);

    will-change:
        transform,
        opacity,
        filter;
}


/* video sits over image when enabled */

.btsx-scene__video {
    position: absolute;

    z-index: 3;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    pointer-events: none;

    transition: opacity .7s ease;
}


.btsx-scene.is-video
.btsx-scene__video {
    opacity:
        clamp(
            0,
            calc(
                (var(--scene-progress) - .42) * 3
            ),
            1
        );
}


/* ==========================================================
   LARGE TYPOGRAPHIC DEPTH
   ========================================================== */

.btsx-scene__type {
    position: absolute;

    left: 50%;

    width: max-content;

    transform: translateX(-50%);

    user-select: none;

    pointer-events: none;

    white-space: nowrap;

    will-change:
        transform,
        opacity;
}


/* BEHIND PRODUCT */

.btsx-scene__type--back {
    z-index: 0;

    top: 31%;

    font-family: var(--bts-font-ui);

    font-size:
        clamp(100px, 15vw, 235px);

    line-height: .8;

    font-weight: 750;

    letter-spacing: -.075em;

    color:
        rgba(243,239,231,.055);

    transform:
        translateX(
            calc(
                -67% +
                var(--scene-progress) * 18%
            )
        );

    opacity:
        clamp(
            .1,
            calc(
                var(--scene-progress) * 1.3
            ),
            .75
        );
}


/* IN FRONT / LOW LAYER */

.btsx-scene__type--front {
    z-index: 6;

    bottom: 6%;

    font-family: var(--bts-font-display);

    font-size:
        clamp(90px, 13vw, 205px);

    line-height: .8;

    font-style: italic;

    font-weight: 400;

    letter-spacing: -.065em;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(211,173,102,.16);

    transform:
        translateX(
            calc(
                -35% -
                var(--scene-progress) * 14%
            )
        );

    opacity:
        clamp(
            0,
            calc(
                (var(--scene-progress) - .06) * 2.6
            ),
            .9
        );
}


/* ==========================================================
   CINEMATIC VIGNETTE
   ========================================================== */

.btsx-scene__vignette {
    position: absolute;

    z-index: 8;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,7,7,.62),
            transparent 30%,
            transparent 70%,
            rgba(7,7,7,.62)
        ),
        linear-gradient(
            0deg,
            rgba(7,7,7,.70),
            transparent 40%,
            rgba(7,7,7,.24)
        );

    pointer-events: none;
}


/* ==========================================================
   CHAPTER LABEL
   ========================================================== */

.btsx-scene__chapter {
    position: absolute;

    z-index: 12;

    left: 40px;
    top: 42px;

    display: flex;

    align-items: center;

    gap: 11px;

    font-family: var(--bts-font-ui);
}


.btsx-scene__chapter span {
    font-size: 8px;

    font-weight: 700;

    color: var(--x-gold);
}


.btsx-scene__chapter small {
    font-size: 6px;

    font-weight: 650;

    letter-spacing: .18em;

    color:
        rgba(243,239,231,.34);
}


/* ==========================================================
   EDITORIAL COPY
   ========================================================== */

.btsx-scene__copy {
    position: absolute;

    z-index: 12;

    left: max(
        40px,
        calc(
            (100vw - 1320px) / 2
        )
    );

    bottom: 70px;

    width: min(370px, 29vw);

    opacity:
        clamp(
            0,
            calc(
                (var(--scene-progress) - .28) * 4
            ),
            1
        );

    transform:
        translateY(
            calc(
                34px -
                var(--scene-progress) * 34px
            )
        );

    will-change:
        opacity,
        transform;
}


.btsx-scene__eyebrow {
    margin-bottom: 14px;

    font-family: var(--bts-font-ui);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .18em;

    color: var(--x-gold);
}


.btsx-scene__copy h2 {
    margin: 0 0 18px;

    font-family: var(--bts-font-ui);

    font-size:
        clamp(42px, 4.5vw, 70px);

    line-height: .83;

    font-weight: 720;

    letter-spacing: -.06em;

    color: var(--x-ivory);
}


.btsx-scene__copy h2 em {
    display: block;

    margin-top: 3px;

    font-family: var(--bts-font-display);

    font-size: 1.14em;

    font-weight: 400;

    color: var(--x-gold);
}


.btsx-scene__copy p {
    max-width: 255px;

    margin: 0 0 22px;

    font-family: var(--bts-font-ui);

    font-size: 11px;

    line-height: 1.75;

    color:
        rgba(243,239,231,.46);
}


.btsx-scene__cta {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 6px;

    border-bottom:
        1px solid rgba(243,239,231,.26);

    font-family: var(--bts-font-ui);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .15em;

    text-decoration: none;

    color: var(--x-ivory);

    transition:
        color .25s ease,
        border-color .25s ease;
}


.btsx-scene__cta span {
    color: var(--x-gold);

    transition:
        transform .25s ease;
}


.btsx-scene__cta:hover {
    color: var(--x-gold);

    border-color: var(--x-gold);
}


.btsx-scene__cta:hover span {
    transform: translateX(4px);
}


/* ==========================================================
   SCENE PROGRESS
   ========================================================== */

.btsx-scene__progress {
    position: absolute;

    z-index: 12;

    right: 40px;
    bottom: 42px;

    display: flex;

    align-items: center;

    gap: 11px;

    font-family: var(--bts-font-ui);

    font-size: 6px;

    color:
        rgba(243,239,231,.30);
}


.btsx-scene__progress > div {
    position: relative;

    width: 75px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(243,239,231,.15);
}


.btsx-scene__progress i {
    position: absolute;

    inset: 0;

    transform:
        scaleX(
            var(--scene-progress)
        );

    transform-origin: left;

    background: var(--x-gold);
}


/* ==========================================================
   NEXT CHARACTER PREVIEW
   ========================================================== */

.btsx-preview {
    padding:
        110px 0 120px;

    background: #0B0B0B;

    border-bottom:
        1px solid rgba(243,239,231,.07);
}


.btsx-preview > .btsx-container {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.btsx-preview span,
.btsx-preview small {
    font-family: var(--bts-font-ui);

    font-size: 7px;

    font-weight: 650;

    letter-spacing: .18em;
}


.btsx-preview span {
    margin-bottom: 24px;

    color: var(--x-gold);
}


.btsx-preview h2 {
    margin: 0 0 22px;

    font-family: var(--bts-font-ui);

    font-size:
        clamp(60px, 8vw, 120px);

    line-height: .82;

    font-weight: 700;

    letter-spacing: -.065em;

    color: var(--x-ivory);
}


.btsx-preview h2 em {
    display: block;

    font-family: var(--bts-font-display);

    font-weight: 400;

    color: var(--x-gold);
}


.btsx-preview small {
    color:
        rgba(243,239,231,.28);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {


    .btsx-container {
        width:
            calc(100% - 36px);
    }


    /* OPENING */

    .btsx-opening {
        height: 185vh;
    }


    .btsx-opening__sticky {
        height:
            calc(100svh - 0px);
    }


    .btsx-opening__light {
        width: 84vw;

        height: 125vh;

        top: -20%;
    }


    .btsx-opening__present {
        top: 38px;

        font-size: 6px;
    }


    .btsx-opening__title {
        width:
            calc(100% - 36px);
    }


    .btsx-opening__line {
        font-size:
            clamp(45px, 15.5vw, 70px);

        line-height: .83;
    }


    .btsx-opening__line--3 em {
        display: block;

        margin:
            5px 0 0;
    }


    .btsx-opening__ghost {
        font-size: 75vw;
    }


    .btsx-opening__counter {
        left: 18px;

        bottom: 25px;
    }


    .btsx-opening__scroll {
        bottom: 24px;
    }


    /* INTERLUDE */

    .btsx-interlude {
        padding:
            76px 0 82px;
    }


    .btsx-interlude__top {
        margin-bottom: 48px;
    }


    .btsx-interlude__statement {
        margin-bottom: 48px;
    }


    .btsx-interlude__statement span,
    .btsx-interlude__statement em {
        font-size:
            clamp(40px, 13.5vw, 60px);

        line-height: .90;
    }


    .btsx-interlude__top small {
        display: none;
    }


    /* SCENE */

    .btsx-scene {
        height: 145vh;
    }


    .btsx-scene__sticky {
        height: 100svh;
    }


    /* Product gets more room on phone */

    .btsx-scene__media {
        width:
            min(88vw, 410px);

        top: 44%;

        transform:
            translate(
                -50%,
                calc(
                    -48% -
                    var(--scene-progress) * 4%
                )
            );
    }


    /* giant background typography */

    .btsx-scene__type--back {
        top: 22%;

        font-size:
            clamp(83px, 29vw, 130px);

        transform:
            translateX(
                calc(
                    -63% +
                    var(--scene-progress) * 14%
                )
            );
    }


    .btsx-scene__type--front {
        bottom: 21%;

        font-size:
            clamp(72px, 26vw, 115px);

        transform:
            translateX(
                calc(
                    -38% -
                    var(--scene-progress) * 10%
                )
            );
    }


    /* stronger vignette for text legibility */

    .btsx-scene__vignette {
        background:
            linear-gradient(
                0deg,
                rgba(7,7,7,.94) 0%,
                rgba(7,7,7,.64) 27%,
                transparent 58%,
                rgba(7,7,7,.23) 100%
            );
    }


    .btsx-scene__chapter {
        top: 28px;
        left: 18px;
    }


    /* Mobile copy sits on bottom */

    .btsx-scene__copy {
        left: 18px;
        right: 18px;
        bottom: 46px;

        width: auto;
    }


    .btsx-scene__copy h2 {
        font-size:
            clamp(38px, 13vw, 55px);
    }


    .btsx-scene__copy p {
        max-width: 240px;

        font-size: 10px;
    }


    .btsx-scene__progress {
        display: none;
    }


    /* NEXT */

    .btsx-preview {
        padding:
            78px 0 84px;
    }


    .btsx-preview h2 {
        font-size:
            clamp(51px, 16vw, 72px);
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .btsx *,
    .btsx *::before,
    .btsx *::after {
        animation: none !important;

        transition: none !important;
    }

}





/* ==========================================================
   02 — MAIN CHARACTER
   ========================================================== */

.btsx-scene--main
.btsx-scene__background {

    position: absolute;

    z-index: -5;

    inset: 0;

    background:
        radial-gradient(
            circle at
            calc(
                45% +
                var(--scene-progress) * 10%
            )
            53%,

            rgba(135,89,29,.27),

            rgba(78,48,15,.09) 26%,

            transparent 54%
        ),
        #070707;
}




/* ==========================================================
   03 — PARTY AFFAIR
   ========================================================== */

.btsx-scene--party
.btsx-scene__background {

    position: absolute;

    z-index: -5;

    inset: 0;

    background:
        radial-gradient(
            circle at
            calc(
                45% +
                var(--scene-progress) * 10%
            )
            53%,

            rgba(15,100,73,.28),

            rgba(8,55,41,.10) 26%,

            transparent 54%
        ),
        #070707;
}




/* ==========================================================
   04 — ROSE AFTER DARK
   ========================================================== */

.btsx-scene--rose
.btsx-scene__background {

    position: absolute;

    z-index: -5;

    inset: 0;

    background:
        radial-gradient(
            circle at
            calc(
                45% +
                var(--scene-progress) * 10%
            )
            53%,

            rgba(120,22,28,.31),

            rgba(65,10,15,.10) 27%,

            transparent 55%
        ),
        #070707;
}





/* ==========================================================
   05 — SUNSET BLUSH
   ========================================================== */

.btsx-scene--sunset
.btsx-scene__background {

    position: absolute;

    z-index: -5;

    inset: 0;

    background:
        radial-gradient(
            circle at
            calc(
                45% +
                var(--scene-progress) * 10%
            )
            53%,

            rgba(120,31,69,.29),

            rgba(72,17,43,.10) 27%,

            transparent 55%
        ),
        #070707;
}





/* ==========================================================
   06 — THE SPOTLIGHT
   ========================================================== */

.btsx-scene--spotlight
.btsx-scene__background {

    position: absolute;

    z-index: -5;

    inset: 0;

    background:
        radial-gradient(
            circle at
            calc(
                45% +
                var(--scene-progress) * 10%
            )
            51%,

            rgba(211,173,102,.17),

            rgba(211,173,102,.035) 27%,

            transparent 53%
        ),
        #050505;
}




/* ==========================================================
   EXPERIENCE FINALE
   ========================================================== */

.btsx-finale {

    position: relative;

    padding:
        125px 0 135px;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(211,173,102,.07),
            transparent 30%
        ),
        #080808;

    border-top:
        1px solid rgba(243,239,231,.08);
}


.btsx-finale__meta {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 62px;

    font-family: var(--bts-font-ui);

    font-size: 7px;

    font-weight: 650;

    letter-spacing: .18em;

    color:
        rgba(243,239,231,.30);
}


.btsx-finale__meta span {

    color: var(--x-gold);
}


.btsx-finale h2 {

    margin:
        0 0 78px;

    max-width: 950px;

    font-family:
        var(--bts-font-ui);

    font-size:
        clamp(60px,7vw,110px);

    line-height: .82;

    font-weight: 700;

    letter-spacing: -.065em;

    color: var(--x-ivory);
}


.btsx-finale h2 em {

    display: block;

    margin-top: 10px;

    font-family:
        var(--bts-font-display);

    font-weight: 400;

    color: var(--x-gold);
}


/* LIST */

.btsx-finale__list {

    margin-bottom: 62px;

    border-top:
        1px solid rgba(243,239,231,.12);
}


.btsx-finale__list a {

    min-height: 76px;

    display: grid;

    grid-template-columns:
        45px 1fr 30px;

    align-items: center;

    gap: 20px;

    border-bottom:
        1px solid rgba(243,239,231,.12);

    text-decoration: none;

    color:
        var(--x-ivory);

    transition:
        padding .3s ease,
        background .3s ease;
}


.btsx-finale__list a:hover {

    padding-left: 13px;

    background:
        rgba(211,173,102,.045);
}


.btsx-finale__list small {

    font-family:
        var(--bts-font-ui);

    font-size: 7px;

    color: var(--x-gold);
}


.btsx-finale__list span {

    font-family:
        var(--bts-font-display);

    font-size:
        clamp(23px,2vw,31px);

    letter-spacing: -.025em;
}


.btsx-finale__list i {

    font-style: normal;

    color: var(--x-gold);

    transition:
        transform .3s ease;
}


.btsx-finale__list a:hover i {

    transform:
        translateX(5px);
}


/* FINAL CTA */

.btsx-finale__cta {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(243,239,231,.25);

    font-family:
        var(--bts-font-ui);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .16em;

    text-decoration: none;

    color: var(--x-ivory);
}


.btsx-finale__cta span {

    color: var(--x-gold);
}


/* MOBILE */

@media (max-width: 767px) {

    .btsx-finale {

        padding:
            80px 0 86px;
    }


    .btsx-finale__meta {

        margin-bottom: 43px;
    }


    .btsx-finale h2 {

        margin-bottom: 52px;

        font-size:
            clamp(46px,14vw,64px);
    }


    .btsx-finale__list {

        margin-bottom: 46px;
    }


    .btsx-finale__list a {

        min-height: 65px;

        grid-template-columns:
            28px 1fr 20px;

        gap: 10px;
    }


    .btsx-finale__list span {

        font-size: 21px;
    }

}/* End custom CSS */