/* =========================================================
   ROOT
   ========================================================= */
.amv-b10-celebration {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    pointer-events: none;
    overflow: hidden;

    z-index: 9990;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   LARGE GOLD PARTICLES
   ========================================================= */
.amv-celebrate-particle {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #E5C15E;

    box-shadow:
        0 0 6px rgba(229,193,94,.95),
        0 0 14px rgba(229,193,94,.65),
        0 0 28px rgba(229,193,94,.30);

    opacity: 0;

    animation:
        amvCelebrateFloat 10s linear infinite,
        amvCelebratePulse 2s ease-in-out infinite;
}


/* Larger particles */
.amv-celebrate-particle.big {
    width: 11px;
    height: 11px;

    box-shadow:
        0 0 8px rgba(229,193,94,1),
        0 0 18px rgba(229,193,94,.85),
        0 0 35px rgba(229,193,94,.42);
}


/* =========================================================
   SMALL PARTICLES
   ========================================================= */
.amv-celebrate-dot {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #F5D985;

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

    opacity: 0;

    animation:
        amvDotRise 7s linear infinite,
        amvDotTwinkle 1.8s ease-in-out infinite;
}


/* =========================================================
   STAR SPARKLES
   ========================================================= */
.amv-celebrate-star {
    position: absolute;

    color: #E5C15E;

    font-size: 20px;
    line-height: 1;

    text-shadow:
        0 0 7px rgba(229,193,94,.95),
        0 0 18px rgba(229,193,94,.75),
        0 0 34px rgba(229,193,94,.35);

    opacity: 0;

    animation:
        amvStarFloat 8s ease-in-out infinite,
        amvStarGlow 2.2s ease-in-out infinite;
}

.amv-celebrate-star.large {
    font-size: 30px;
}


/* =========================================================
   CELEBRATION DIAMONDS
   ========================================================= */
.amv-celebrate-diamond {
    position: absolute;

    width: 8px;
    height: 8px;

    background: #E5C15E;

    transform: rotate(45deg);

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

    opacity: 0;

    animation:
        amvDiamondFloat 9s ease-in-out infinite,
        amvDiamondSpin 4s linear infinite;
}


/* =========================================================
   LARGE SOFT GLOW
   ========================================================= */
.amv-celebrate-glow {
    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229,193,94,.20) 0%,
            rgba(229,193,94,.09) 32%,
            rgba(229,193,94,.025) 58%,
            transparent 74%
        );

    filter: blur(10px);

    opacity: .65;

    animation:
        amvGlowMove 12s ease-in-out infinite,
        amvGlowPulse 4s ease-in-out infinite;
}


/* =========================================================
   TOP / SIDE LIGHT STREAKS
   ========================================================= */
.amv-celebrate-streak {
    position: absolute;

    width: 180px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229,193,94,.15),
            rgba(229,193,94,.75),
            rgba(229,193,94,.15),
            transparent
        );

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

    opacity: 0;

    transform: rotate(-25deg);

    animation: amvStreakMove 8s ease-in-out infinite;
}


/* =========================================================
   FLOAT ANIMATIONS
   ========================================================= */
@keyframes amvCelebrateFloat {

    0% {
        transform: translate3d(0,120vh,0) scale(.5);
        opacity: 0;
    }

    8% {
        opacity: .9;
    }

    50% {
        transform: translate3d(
            45px,
            50vh,
            0
        ) scale(1);
        opacity: .85;
    }

    90% {
        opacity: .55;
    }

    100% {
        transform: translate3d(
            -30px,
            -15vh,
            0
        ) scale(.7);
        opacity: 0;
    }
}


@keyframes amvCelebratePulse {

    0%,
    100% {
        filter: brightness(.8);
    }

    50% {
        filter: brightness(1.45);
    }
}


@keyframes amvDotRise {

    0% {
        transform: translate3d(0,110vh,0) scale(.4);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    50% {
        transform: translate3d(
            -35px,
            50vh,
            0
        ) scale(1);
    }

    100% {
        transform: translate3d(
            35px,
            -10vh,
            0
        ) scale(.3);
        opacity: 0;
    }
}


@keyframes amvDotTwinkle {

    0%,
    100% {
        opacity: .2;
    }

    50% {
        opacity: 1;
    }
}


@keyframes amvStarFloat {

    0% {
        transform:
            translate3d(0,110vh,0)
            rotate(0deg)
            scale(.4);

        opacity: 0;
    }

    12% {
        opacity: .95;
    }

    50% {
        transform:
            translate3d(
                40px,
                50vh,
                0
            )
            rotate(120deg)
            scale(1);
    }

    85% {
        opacity: .65;
    }

    100% {
        transform:
            translate3d(
                -30px,
                -12vh,
                0
            )
            rotate(240deg)
            scale(.5);

        opacity: 0;
    }
}


@keyframes amvStarGlow {

    0%,
    100% {
        filter: brightness(.7);
    }

    50% {
        filter: brightness(1.7);
    }
}


@keyframes amvDiamondFloat {

    0% {
        transform:
            translate3d(0,110vh,0)
            rotate(45deg)
            scale(.4);

        opacity: 0;
    }

    10% {
        opacity: .9;
    }

    50% {
        transform:
            translate3d(
                35px,
                48vh,
                0
            )
            rotate(180deg)
            scale(1);
    }

    100% {
        transform:
            translate3d(
                -30px,
                -10vh,
                0
            )
            rotate(315deg)
            scale(.4);

        opacity: 0;
    }
}


@keyframes amvDiamondSpin {

    from {
        filter: brightness(.75);
    }

    50% {
        filter: brightness(1.5);
    }

    to {
        filter: brightness(.75);
    }
}


@keyframes amvGlowMove {

    0% {
        transform:
            translate3d(-15vw,20vh,0)
            scale(.8);
    }

    30% {
        transform:
            translate3d(25vw,10vh,0)
            scale(1.05);
    }

    60% {
        transform:
            translate3d(55vw,55vh,0)
            scale(.9);
    }

    100% {
        transform:
            translate3d(105vw,20vh,0)
            scale(.75);
    }
}


@keyframes amvGlowPulse {

    0%,
    100% {
        opacity: .30;
    }

    50% {
        opacity: .75;
    }
}


@keyframes amvStreakMove {

    0% {
        transform:
            translate3d(-30vw,0,0)
            rotate(-25deg);

        opacity: 0;
    }

    15% {
        opacity: .6;
    }

    45% {
        opacity: .8;
    }

    70% {
        opacity: .3;
    }

    100% {
        transform:
            translate3d(130vw,40vh,0)
            rotate(-25deg);

        opacity: 0;
    }
}


/* =========================================================
   DESKTOP POSITIONS
   ========================================================= */

/* particles */
.amv-p1 { left: 5%;  animation-delay: 0s; }
.amv-p2 { left: 13%; animation-delay: 2.5s; }
.amv-p3 { left: 22%; animation-delay: 5s; }
.amv-p4 { left: 31%; animation-delay: 1.5s; }
.amv-p5 { left: 42%; animation-delay: 4s; }
.amv-p6 { left: 52%; animation-delay: 7s; }
.amv-p7 { left: 62%; animation-delay: 3s; }
.amv-p8 { left: 72%; animation-delay: 6s; }
.amv-p9 { left: 82%; animation-delay: 1s; }
.amv-p10 { left: 92%; animation-delay: 4.5s; }


/* stars */
.amv-s1 {
    left: 9%;
    animation-delay: 1s;
}

.amv-s2 {
    left: 25%;
    animation-delay: 4s;
}

.amv-s3 {
    left: 46%;
    animation-delay: 7s;
}

.amv-s4 {
    left: 67%;
    animation-delay: 2s;
}

.amv-s5 {
    left: 87%;
    animation-delay: 5.5s;
}


/* dots */
.amv-d1 {
    left: 17%;
    animation-delay: .5s;
}

.amv-d2 {
    left: 35%;
    animation-delay: 3s;
}

.amv-d3 {
    left: 55%;
    animation-delay: 5.5s;
}

.amv-d4 {
    left: 75%;
    animation-delay: 2s;
}

.amv-d5 {
    left: 95%;
    animation-delay: 6s;
}


/* diamonds */
.amv-x1 {
    left: 18%;
    animation-delay: 2s;
}

.amv-x2 {
    left: 58%;
    animation-delay: 5s;
}

.amv-x3 {
    left: 84%;
    animation-delay: 1s;
}


/* glows */
.amv-g1 {
    left: -100px;
    top: 8%;
    animation-delay: 0s;
}

.amv-g2 {
    left: 35%;
    top: 50%;
    animation-delay: 4s;
}

.amv-g3 {
    left: 75%;
    top: 15%;
    animation-delay: 8s;
}


/* streaks */
.amv-st1 {
    top: 18%;
    left: -200px;
    animation-delay: 1s;
}

.amv-st2 {
    top: 45%;
    left: -200px;
    animation-delay: 5s;
}

.amv-st3 {
    top: 72%;
    left: -200px;
    animation-delay: 8s;
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {

    .amv-celebrate-particle {
        width: 5px;
        height: 5px;
    }

    .amv-celebrate-particle.big {
        width: 8px;
        height: 8px;
    }

    .amv-celebrate-star {
        font-size: 16px;
    }

    .amv-celebrate-star.large {
        font-size: 23px;
    }

    .amv-celebrate-diamond {
        width: 6px;
        height: 6px;
    }

    .amv-celebrate-glow {
        width: 180px;
        height: 180px;
    }

    .amv-celebrate-streak {
        width: 120px;
    }

    /* reduce density slightly */
    .amv-p3,
    .amv-p6,
    .amv-p9,
    .amv-d2,
    .amv-d4,
    .amv-x2 {
        display: none;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

    .amv-b10-celebration {
        display: none !important;
    }
}