/* SLOT MACHINE */
.slot-machine__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slot-machine__neon-bar {
    position: relative;
    width: 100%;
    height: clamp(.5em, .5em + 2vw, 1em)
}

/*
#slot-machine.win .slot-machine__neon-bar {
    -webkit-animation: shine 200ms steps(2, end) infinite;
    animation: shine 200ms steps(2, end) infinite;
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}*/
.slot-machine__neon-bar::before {
    content: "";
    position: absolute;
    top: 0;
    z-index: 1;
    width: 60px;
    height: 100%;
    border-radius: 50%;
    /*background: #ffbc00;
    box-shadow: 0 0 5px #ffbc00, 0 0 15px #ffbc00, 0 0 30px #ffbc00, 0 0 60px #ffbc00;*/
}

.slot-machine__neon-bar .glass {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.slot-machine__neon-bar .glass::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
    transition: 0.8s;
    transform: skewX(45deg) translate3d(-150%, 0, 0);
}

.slot-machine__reels {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    justify-content: space-between;
    width: 100%;
    padding: .25em 0;
    gap: clamp(.25em, .25em + .25vw, .5em);
}

.slot-machine__reels::after {
    z-index: 1;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.slot-machine__reel {
    z-index: 2;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 6.5em;
    background-color: white;
}

.slot-machine__reel-frame {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: clamp(.125em, .125em + .5vw, .5em) solid var(--color-accent);
    border-image-source: linear-gradient(126deg, rgba(186, 168, 133, 1) 28%, rgba(249, 233, 201, 1) 33%, rgba(248, 227, 188, 1) 50%, rgba(186, 168, 133, 1) 54%);
    border-image-slice: 1;
}

.slot-machine__reel::before,
.slot-machine__reel::after {
    z-index: 2;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, transparent 33%, transparent 66%, rgba(0, 0, 0, 0.4) 100%);
    box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3);
}

.slot-machine__reel::after {
    z-index: 3;
    background-image: none;
    box-shadow: none;
    border: 5px solid transparent;
}

#slot-machine.win .slot-machine__reel::after {
    animation: shine2 200ms steps(2, end) infinite;
    animation-delay: 0.75s;
}

@keyframes shine {
    0% {
        background-color: white;
        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--color-accent),
            inset 0 0 2rem var(--color-accent),
            0 0 4rem var(--color-accent),
            inset 0 0 4rem var(--color-accent);
    }

    100% {
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
        background-color: var(--color-dark-background);
    }
}

@keyframes shine2 {
    0% {
        border-color: white;
        box-shadow: 0 0 .75rem #fff, inset 0 0 .75rem #fff, 0 0 5rem white, inset 0 0 4rem rgba(0, 0, 0, 0.2), 0 0 4rem white, inset 0 0 4rem rgba(0, 0, 0, 0.2)
    }

    100% {
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
        border-color: hsla(0, 0%, 0%, .05);
    }
}

.slot-machine__icons {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    width: 100%;
    background-color: white;
    list-style: none;
    margin: 0;
    padding: 0;
    transform: translate3d(0, var(--reel-offset-percent), 0);
}

.slot-machine__item {
    height: 100%;
    padding: 1em;
}

.slot-machine__picture {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.slot-machine__img {
    width: auto;
    height: 100%;
    user-select: none;
}

.slot-machine__service-link {
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 1em;
    line-height: 1.2;
    font-size: clamp(1.25rem, 1rem + 1vw, 2.125rem);
    font-weight: 800;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    transition: opacity 0.35s, visibility 0.35s;
}

.reel--revealed .slot-machine__service-link {
    opacity: 1;
    visibility: visible;
}

.slot-machine__service-title {
    opacity: 0;
    text-transform: uppercase;
    color: black;
    font-family: var(--font-heading);
    font-weight:600;
    text-shadow: 2px 2px 0 white, -2px 2px 0 white, -2px -2px 0 white, 2px -2px 0 white;
    transform: translate3d(0, 1em, 0);
    transition: opacity .15s 0.35s, transform .15s 0.35s;
}

.reel--revealed .slot-machine__service-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@keyframes blur {
    0% {
        filter: blur(0);
    }

    10% {
        filter: blur(6px);
    }

    80% {
        filter: blur(0);
    }
}

.slot-machine__button {
    position: relative;
    border: 2px solid var(--color-accent);
    border-image-source: linear-gradient(118deg, rgba(186, 168, 133, 1) 63%, rgba(248, 227, 188, 1) 81%, rgba(249, 233, 201, 1) 88%, rgba(186, 168, 133, 1) 100%);
    border-image-slice: 1;
    background: transparent;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: 500;
    color: white;
    padding: 1.325em 2em;
    margin: 0 auto 0;
    font-size: clamp(1.125rem, .5rem + 1vw, 1.25rem);
    width: 100%;
    margin-top: clamp(3rem, 2rem + 2vw, 4rem);
    cursor: pointer;
}

.slot-machine__button.win {
    pointer-events: none;
}

.slot-machine__button [class$="_text"] {
    display: inline-block;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    width: 0;
    transition: width .35s;
}

.slot-machine__button.win .default_text,
.slot-machine__button.spinning .default_text,
.slot-machine__button.spinning .winning_text {
    opacity: 0;
    width: 0;
    position: absolute;
    visibility: hidden;
}

.slot-machine__button .default_text,
.slot-machine__button.win .winning_text,
.slot-machine__button.spinning .spinning_text {
    opacity: 1;
    position: relative;
    visibility: visible;
    width: auto;
}

.slot-machine__icons.spinning {
    opacity: 0.9;
    transition: opacity 0.3s ease, filter 0.3s ease;
    animation: blur 4s cubic-bezier(.5, 0, .5, 1) 1;
}

@media only screen and (min-width: 28.75rem) {
    .slot-machine__button {
        width: auto;
        min-width: 16em;
    }
}

@media only screen and (min-width: 30rem) {
    .slot-machine__reels {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 48rem) {

    .slot-machine__body {
        position: relative;
    }
    .slot-machine__body::after {
        content:"";
        z-index: 3;
        position: absolute;
        top:50%;
        width: 100%;
        height:.125em;
        background-color: hsla(40, 28%, 63%, 0.75);
        transform:translate3d(0,-50%,0)
    }

    .slot-machine__reels {
        grid-template-columns: repeat(4, 1fr);
    }

    .slot-machine__reel {
        --height-reel: clamp(20em, 20em + 15vw, 35em);
        height: var(--height-reel);
    }

    .slot-machine__item {
        display: flex;
        justify-content: center;
        height: calc(var(--height-reel)/3);
        padding: 1.5em 0;
    }

    .slot-machine__picture {
        width: 90%;
    }

}

@media only screen and (min-width: 64rem) {

    .slot-machine__button .shimmer {
        opacity: 0;
        position: absolute;
        inset: -40px;
        border-radius: inherit;
        mix-blend-mode: plus-lighter;
        pointer-events: none;
        mask-image: linear-gradient(90deg, transparent 15%, black 45%, black 55%, transparent 85%);
        mask-size: 200% 200%;
        mask-position: center;
        transition: opacity .5s;
    }


    @keyframes wave {
        0% {
            mask-position: 200% center;
        }

        100% {
            mask-position: 0% center;
        }
    }

    .slot-machine__button .shimmer::before,
    .slot-machine__button .shimmer::after {
        content: "";
        position: absolute;
        inset: 38px;
        border-radius: inherit;
        opacity: 1;
        transition: all 0.5s ease;
    }

    .slot-machine__button .shimmer::before {
        box-shadow:
            0 0 3px 2px #F8E3BC,
            0 0 7px 4px #F9E9C9,
            0 0 13px 8px #BAA885,
            0 0 22px 6px #665c48;
        z-index: -1;
    }

    .slot-machine__button .shimmer::after {
        box-shadow:
            inset 0 0 0 1px #F9E9C9,
            inset 0 0 3px 1px #BAA885,
            inset 0 0 9px 1px #665c48;
        z-index: 2;
    }

    .slot-machine__button:focus .shimmer,
    .slot-machine__button:active .shimmer {
        animation-play-state: paused !important;
        mask-image: none !important;
    }

    .slot-machine__reel,
    .slot-machine__reel:last-child {
        height: clamp(27em, calc(27em + 10vw), 45em);
    }

}

@media (hover:hover) {
    .slot-machine__button:hover {
        border-image-source: var(--color-accent);
    }

    .slot-machine__button:hover .shimmer {
        opacity: 1;
        animation: wave 3s linear infinite;
    }

}