.fiesta-fx {
    position: fixed!important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    pointer-events: none!important;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.fiesta-fx,.fiesta-fx * {
    pointer-events: none!important;
    user-select: none;
    -webkit-user-select: none
}

.fiesta-fx svg {
    display: block;
    overflow: visible;
    width: 100%;
    height: auto
}

.fiesta-fx__group {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.fiesta-fx__bat {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    will-change: transform,opacity;
    filter: drop-shadow(0 0 2px rgba(230,194,141,.25))
}

.fiesta-fx__spider {
    position: absolute;
    top: 0;
    width: 30px;
    margin-left: -15px;
    transform-origin: 50% 0;
    animation: fiesta-fx-sway 2.8s ease-in-out infinite alternate
}

.fiesta-fx__thread {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    margin-left: -.5px;
    height: var(--len,200px);
    background: rgba(150,150,150,.85);
    transform-origin: 50% 0;
    transform: scaleY(0);
    animation: fiesta-fx-thread var(--d,9s) ease-in-out forwards
}

.fiesta-fx__spider-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    transform: translateY(-50px);
    animation: fiesta-fx-drop var(--d,9s) ease-in-out forwards;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.5))
}

.fiesta-fx__spider-body svg {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

@keyframes fiesta-fx-thread {
    0% {
        transform: scaleY(0)
    }

    22% {
        transform: scaleY(1)
    }

    26% {
        transform: scaleY(.93)
    }

    30%,78% {
        transform: scaleY(1)
    }

    100% {
        transform: scaleY(0)
    }
}

@keyframes fiesta-fx-drop {
    0% {
        transform: translateY(-50px)
    }

    22% {
        transform: translateY(calc(var(--len,200px) - 10px))
    }

    26% {
        transform: translateY(calc(var(--len,200px) * .93 - 10px))
    }

    30%,78% {
        transform: translateY(calc(var(--len,200px) - 10px))
    }

    100% {
        transform: translateY(-50px)
    }
}

@keyframes fiesta-fx-sway {
    0% {
        transform: rotate(-5deg)
    }

    100% {
        transform: rotate(5deg)
    }
}

.fiesta-fx__web {
    position: absolute;
    opacity: 0;
    transform-origin: var(--ox,0) var(--oy,0);
    animation: fiesta-fx-web var(--d,10s) ease forwards;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.85))
}

.fiesta-fx__web--tl {
    top: 0;
    left: 0;
    --ox: 0%;
    --oy: 0%
}

.fiesta-fx__web--tr {
    top: 0;
    right: 0;
    --ox: 100%;
    --oy: 0%
}

.fiesta-fx__web--bl {
    bottom: 0;
    left: 0;
    --ox: 0%;
    --oy: 100%
}

.fiesta-fx__web--br {
    bottom: 0;
    right: 0;
    --ox: 100%;
    --oy: 100%
}

.fiesta-fx__web--tr svg {
    transform: scaleX(-1)
}

.fiesta-fx__web--bl svg {
    transform: scaleY(-1)
}

.fiesta-fx__web--br svg {
    transform: scale(-1,-1)
}

@keyframes fiesta-fx-web {
    0% {
        opacity: 0;
        transform: scale(.6)
    }

    15% {
        opacity: .88;
        transform: scale(1)
    }

    85% {
        opacity: .88;
        transform: scale(1)
    }

    100% {
        opacity: 0;
        transform: scale(1)
    }
}

.fiesta-fx__flower {
    position: absolute;
    top: 0;
    left: var(--x,50vw);
    width: var(--s,18px);
    opacity: 0;
    will-change: transform,opacity;
    animation: fiesta-fx-fall var(--d,9s) linear var(--delay,0s) both
}

@keyframes fiesta-fx-fall {
    0% {
        opacity: 0;
        transform: translate(0,-40px) rotate(0deg)
    }

    8% {
        opacity: .95
    }

    85% {
        opacity: .9
    }

    100% {
        opacity: 0;
        transform: translate(var(--drift,0),110vh) rotate(var(--r,360deg))
    }
}

.fiesta-fx__garland {
    position: absolute;
    top: 0;
    opacity: 0;
    animation: fiesta-fx-garland var(--d,9s) ease-in-out forwards
}

.fiesta-fx__garland-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.fiesta-fx__flag {
    position: absolute;
    top: 0;
    transform-origin: 50% 0;
    animation: fiesta-fx-flag 2.6s ease-in-out infinite alternate
}

@keyframes fiesta-fx-garland {
    0% {
        opacity: 0;
        transform: translateY(-90px)
    }

    14% {
        opacity: 1;
        transform: translateY(0)
    }

    86% {
        opacity: 1;
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        transform: translateY(-90px)
    }
}

@keyframes fiesta-fx-flag {
    0% {
        transform: rotate(-6deg)
    }

    100% {
        transform: rotate(6deg)
    }
}

.fiesta-fx__skull {
    position: absolute
}

.fiesta-fx__skull--bottom {
    bottom: 0
}

.fiesta-fx__skull--left {
    left: 0;
    transform: rotate(90deg)
}

.fiesta-fx__skull--right {
    right: 0;
    transform: rotate(-90deg)
}

.fiesta-fx__skull-in {
    width: 100%;
    height: 100%;
    transform: translateY(110%);
    transform-origin: 50% 100%;
    animation: fiesta-fx-peek var(--d,7s) ease-in-out forwards;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35))
}

@keyframes fiesta-fx-peek {
    0% {
        transform: translateY(110%) rotate(0)
    }

    18% {
        transform: translateY(4%) rotate(-7deg)
    }

    30% {
        transform: translateY(7%) rotate(6deg)
    }

    44% {
        transform: translateY(5%) rotate(-4deg)
    }

    58%,80% {
        transform: translateY(5%) rotate(0)
    }

    100% {
        transform: translateY(110%) rotate(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    .fiesta-fx {
        display: none!important
    }
}

@media print {
    .fiesta-fx {
        display: none!important
    }
}

.fiesta-fx-storm {
    position: fixed!important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483000;
    pointer-events: none!important;
    overflow: hidden
}

.fiesta-fx-storm * {
    pointer-events: none!important
}

.fiesta-fx-storm__dark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity .5s ease;
    background: radial-gradient(ellipse at 50% 40%,rgba(10,12,30,.22) 0%,rgba(6,8,22,.5) 100%)
}

.fiesta-fx-storm__dark.is-on {
    opacity: 1
}

.fiesta-fx-storm__dark.is-off {
    transition: opacity 1.4s ease;
    opacity: 0
}

.fiesta-fx-storm__flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: radial-gradient(circle at var(--fx,50%) 15%,rgba(235,242,255,.95) 0%,rgba(200,215,255,.6) 45%,rgba(170,190,255,.35) 100%)
}

.fiesta-fx-storm__bolt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.fiesta-fx-storm__bolt.is-fade {
    transition: opacity .7s ease
}

@media (prefers-reduced-motion:reduce) {
    .fiesta-fx-storm {
        display: none!important
    }
}

@media print {
    .fiesta-fx-storm {
        display: none!important
    }
}