/* =====================================================
   01. ATMOSPHERE CONTAINER
===================================================== */

#amv-bf-luxe {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;

    height: 100vh !important;

    height: 100dvh !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 80 !important;

    isolation: isolate;

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    margin: 0 !important;

    padding: 0 !important;

}

#amv-bf-luxe * {

    box-sizing: border-box;

    pointer-events: none !important;

}


/* =====================================================
   02. AMBIENT LIGHT
===================================================== */

.bf-luxe__glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(65px);

    pointer-events: none;

    mix-blend-mode: screen;

}

.bf-luxe__glow--one {

    width: 230px;

    height: 230px;

    top: 14%;

    left: -115px;

    background: radial-gradient(
        circle,
        rgba(229,193,94,.14),
        rgba(229,193,94,.025) 48%,
        transparent 72%
    );

    animation: bfGlow 13s ease-in-out infinite alternate;

}

.bf-luxe__glow--two {

    width: 260px;

    height: 260px;

    bottom: 8%;

    right: -135px;

    background: radial-gradient(
        circle,
        rgba(229,193,94,.12),
        rgba(229,193,94,.025) 50%,
        transparent 75%
    );

    animation: bfGlow 16s ease-in-out infinite alternate-reverse;

}

.bf-luxe__glow--three {

    width: 170px;

    height: 170px;

    top: 48%;

    left: 42%;

    background: radial-gradient(
        circle,
        rgba(229,193,94,.045),
        transparent 72%
    );

    animation: bfGlow 19s ease-in-out infinite alternate;

}

@keyframes bfGlow {

    from {
        transform: translate3d(0,0,0) scale(.85);
        opacity: .55;
    }

    to {
        transform: translate3d(18px,-15px,0) scale(1.15);
        opacity: 1;
    }

}


/* =====================================================
   03. FLOAT ANIMATION
===================================================== */

.bf-luxe__float {

    position: absolute;

    display: block;

    transform-origin: center;

    animation: bfLuxeFloat var(--duration, 12s)
        ease-in-out infinite;

    animation-delay: var(--delay, 0s);

    will-change: transform;

}

@keyframes bfLuxeFloat {

    0% {

        transform:
            translate3d(0,0,0)
            rotate(var(--rotation, 0deg));

    }

    30% {

        transform:
            translate3d(9px,-15px,0)
            rotate(calc(var(--rotation, 0deg) + 4deg));

    }

    65% {

        transform:
            translate3d(-8px,-23px,0)
            rotate(calc(var(--rotation, 0deg) - 3deg));

    }

    100% {

        transform:
            translate3d(0,0,0)
            rotate(var(--rotation, 0deg));

    }

}


/* =====================================================
   04. 3D GIFT BOXES
===================================================== */

.bf-luxe__gift {

    position: absolute;

    overflow: visible;

    filter:
        drop-shadow(0 12px 17px rgba(0,0,0,.22));

}

.bf-luxe__gift--one {

    width: 79px;

    height: 79px;

    top: 13%;

    right: 7%;

    --rotation: -9deg;

    --duration: 13s;

    --delay: -4s;

}

.bf-luxe__gift--two {

    width: 51px;

    height: 51px;

    bottom: 13%;

    left: 8%;

    --rotation: 10deg;

    --duration: 16s;

    --delay: -8s;

    opacity: .83;

}


/* =====================================================
   05. FLOATING METALLIC RIBBONS
===================================================== */

.bf-luxe__ribbon {

    overflow: visible;

    filter:
        drop-shadow(0 4px 8px rgba(0,0,0,.1));

}

.bf-luxe__ribbon--one {

    width: 145px;

    height: 95px;

    top: 39%;

    left: 2%;

    --rotation: -10deg;

    --duration: 15s;

    --delay: -5s;

    opacity: .82;

}

.bf-luxe__ribbon--two {

    width: 160px;

    height: 100px;

    bottom: 13%;

    right: 0%;

    --rotation: 13deg;

    --duration: 17s;

    --delay: -9s;

    opacity: .72;

}


/* =====================================================
   06. ORBIT RINGS
===================================================== */

.bf-luxe__orbit {

    width: 112px;

    height: 37px;

    border: 1px solid rgba(229,193,94,.4);

    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(229,193,94,.06),
        inset 0 0 8px rgba(229,193,94,.04);

}

.bf-luxe__orbit span {

    position: absolute;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #E5C15E;

    box-shadow: 0 0 8px rgba(229,193,94,.7);

    top: 1px;

    left: 20px;

}

.bf-luxe__orbit--one {

    top: 22%;

    left: 6%;

    --rotation: -27deg;

    --duration: 18s;

    --delay: -5s;

    opacity: .55;

}

.bf-luxe__orbit--two {

    top: 72%;

    right: 5%;

    width: 79px;

    height: 28px;

    --rotation: 24deg;

    --duration: 20s;

    --delay: -11s;

    opacity: .45;

}


/* =====================================================
   07. GOLD FOIL SHARDS
===================================================== */

.bf-luxe__shard {

    background: linear-gradient(
        135deg,
        #FFF1C6 0%,
        #E5C15E 34%,
        #9E762F 70%,
        #F1D58B 100%
    );

    border-radius: 1px;

    box-shadow: 0 0 6px rgba(229,193,94,.12);

}

.shard-01 {

    width: 4px;

    height: 17px;

    top: 18%;

    right: 18%;

    --rotation: 34deg;

    --duration: 11s;

    --delay: -3s;

}

.shard-02 {

    width: 3px;

    height: 12px;

    top: 34%;

    left: 15%;

    --rotation: -40deg;

    --duration: 14s;

    --delay: -7s;

}

.shard-03 {

    width: 5px;

    height: 19px;

    top: 57%;

    right: 8%;

    --rotation: 54deg;

    --duration: 13s;

    --delay: -5s;

}

.shard-04 {

    width: 3px;

    height: 10px;

    top: 81%;

    left: 24%;

    --rotation: 22deg;

    --duration: 12s;

    --delay: -8s;

}

.shard-05 {

    width: 4px;

    height: 15px;

    top: 9%;

    left: 32%;

    --rotation: -30deg;

    --duration: 16s;

    --delay: -4s;

}

.shard-06 {

    width: 3px;

    height: 11px;

    bottom: 26%;

    right: 25%;

    --rotation: 46deg;

    --duration: 13s;

    --delay: -9s;

}

.shard-07 {

    width: 3px;

    height: 13px;

    top: 64%;

    left: 4%;

    --rotation: -20deg;

    --duration: 15s;

    --delay: -6s;

}

.shard-08 {

    width: 4px;

    height: 12px;

    top: 43%;

    right: 29%;

    --rotation: 40deg;

    --duration: 14s;

    --delay: -2s;

}


/* =====================================================
   08. FINE SPARKLES
===================================================== */

.bf-luxe__spark {

    width: 9px;

    height: 9px;

    background: linear-gradient(
        135deg,
        #FFF1C6,
        #E5C15E 60%,
        #B58A38
    );

    clip-path: polygon(
        50% 0%,
        59% 39%,
        100% 50%,
        59% 61%,
        50% 100%,
        41% 61%,
        0% 50%,
        41% 39%
    );

    filter: drop-shadow(0 0 4px rgba(229,193,94,.4));

}

.spark-01 {

    top: 27%;

    left: 23%;

    --duration: 8s;

    --delay: -2s;

}

.spark-02 {

    top: 48%;

    right: 17%;

    width: 6px;

    height: 6px;

    --duration: 10s;

    --delay: -6s;

}

.spark-03 {

    top: 78%;

    left: 15%;

    width: 7px;

    height: 7px;

    --duration: 9s;

    --delay: -4s;

}

.spark-04 {

    top: 12%;

    right: 29%;

    width: 6px;

    height: 6px;

    --duration: 11s;

    --delay: -8s;

}

.spark-05 {

    bottom: 18%;

    right: 13%;

    width: 8px;

    height: 8px;

    --duration: 12s;

    --delay: -5s;

}


/* =====================================================
   09. AMBIENT DUST
===================================================== */

.bf-luxe__dust {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #E5C15E;

    box-shadow: 0 0 7px rgba(229,193,94,.65);

    animation: bfDust 5s ease-in-out infinite alternate;

}

@keyframes bfDust {

    from {

        opacity: .15;

        transform: scale(.7);

    }

    to {

        opacity: .8;

        transform: scale(1.5);

    }

}

.dust-01 { top: 12%; left: 13%; animation-delay: 0s; }
.dust-02 { top: 29%; right: 11%; animation-delay: 1.2s; }
.dust-03 { top: 43%; left: 9%; animation-delay: 2.1s; }
.dust-04 { top: 55%; right: 22%; animation-delay: .7s; }
.dust-05 { top: 68%; left: 27%; animation-delay: 1.7s; }
.dust-06 { top: 84%; right: 9%; animation-delay: 2.5s; }
.dust-07 { top: 91%; left: 39%; animation-delay: .4s; }
.dust-08 { top: 19%; right: 34%; animation-delay: 1.4s; }
.dust-09 { top: 73%; right: 37%; animation-delay: 2.8s; }
.dust-10 { top: 37%; left: 36%; animation-delay: .9s; }


/* =====================================================
   10. MOBILE ADAPTATION
===================================================== */

@media screen and (max-width: 767px) {

    .bf-luxe__glow--one {

        width: 140px;

        height: 140px;

        left: -80px;

    }

    .bf-luxe__glow--two {

        width: 150px;

        height: 150px;

        right: -85px;

    }

    .bf-luxe__glow--three {

        display: none;

    }

    .bf-luxe__gift--one {

        width: 49px;

        height: 49px;

        top: 13%;

        right: 4%;

        opacity: .9;

    }

    .bf-luxe__gift--two {

        display: none;

    }

    .bf-luxe__ribbon--one {

        width: 95px;

        height: 65px;

        top: 43%;

        left: -15px;

        opacity: .7;

    }

    .bf-luxe__ribbon--two {

        width: 100px;

        height: 68px;

        bottom: 15%;

        right: -20px;

        opacity: .6;

    }

    .bf-luxe__orbit--one {

        width: 75px;

        height: 26px;

        top: 24%;

        left: 3%;

        opacity: .4;

    }

    .bf-luxe__orbit--two {

        width: 62px;

        height: 23px;

        right: 2%;

        top: 73%;

        opacity: .35;

    }

    .shard-05,
    .shard-06,
    .shard-08 {

        display: none;

    }

    .spark-04,
    .spark-05 {

        display: none;

    }

    .bf-luxe__dust {

        width: 2px;

        height: 2px;

    }

}


/* =====================================================
   11. REDUCED MOTION
===================================================== */

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

    #amv-bf-luxe * {

        animation: none !important;

    }

}