.amazing-menu
    each val in [1, 2, 3, 4, 5]
        .menu-item
            .container
                .icon
                    span.ion-icecream
                .title icecream 
                .arrow
                    span.ion-chevron-right
                .rating.-r2
                    .stars
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                    .text 56 Votes
        .menu-item
            .container
                .icon
                    span.ion-pizza
                .title pizza
                .arrow
                    span.ion-chevron-right
                .rating.-r5
                    .stars
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                    .text 786 Votes
        .menu-item
            .container
                .icon
                    span.ion-beer
                .title beer
                .arrow
                    span.ion-chevron-right
                .rating.-r4
                    .stars
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                    .text 71 Votes
        .menu-item
            .container
                .icon
                    span.ion-ios-wineglass
                .title wine
                .arrow
                    span.ion-chevron-right
                .rating.-r4
                    .stars
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                    .text 26 Votes
        .menu-item
            .container
                .icon
                    span.ion-coffee
                .title coffee
                .arrow
                    span.ion-chevron-right
                .rating.-r2
                    .stars
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                        span.ion-star
                    .text 125 Votes

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-size: 18px;
    font-family: 'Capriola', sans-serif;
    line-height: 1.5;

    --white:  #FBFBFB;
    --blue:   #3E989B;
    --green:  #6DB465;
    --yellow: #F2C14E;
    --red:    #F78154;
    --violet: #C87694;
    --black:  #3C3C3C;
    --shadow-color: rgb(0 0 0, .5);
}

body {
    background: var(--black);
    min-width: 360px;
}

._disable-pointer-events {
    pointer-events: none !important;
}

.amazing-menu {
    overflow-x: hidden;

    &.-scrolled {
        .menu-item {
            transform: perspective(40rem) translateY(-.5rem) scaleX(.95) rotateX(-40deg);
        }
    }
}

.menu-item {
    position: relative;
    width: 100%;
    color: var(--white);
    transition: all 210ms cubic-bezier(.8, .1, .2, .9);

    &:nth-of-type(5n + 1) { background: var(--blue);   }
    &:nth-of-type(5n + 2) { background: var(--green);  }
    &:nth-of-type(5n + 3) { background: var(--yellow); }
    &:nth-of-type(5n + 4) { background: var(--red);    }
    &:nth-of-type(5n    ) { background: var(--violet); }

    &:hover,
    &:focus {
        z-index: 1;
        transform: scale(1.1);
        box-shadow: 0 0 1rem var(--shadow-color);
        cursor: pointer;
    }

    .container {
        margin: 0 auto;
        width: 100%;
        max-width: 30rem;
        padding: 2rem 1rem 1rem;

        &:after {
            display: table;
            content: '';
            clear: both;
        }
    }

    .icon {
        float: left;
        font-size: 2rem;
        margin-top: -.5rem;
        margin-right: .5rem;
    }

    .title {
        float: left;
        text-transform: uppercase;
        font-weight: 600;
    }

    .rating {
        float: right;

        &.-r1 {
            .stars span {
                &:nth-of-type(2),
                &:nth-of-type(3),
                &:nth-of-type(4),
                &:nth-of-type(5){
                    opacity: .5;
                }
            }
        }

        &.-r2 {
            .stars span {
                &:nth-of-type(3),
                &:nth-of-type(4),
                &:nth-of-type(5){
                    opacity: .5;
                }
            }
        }

        &.-r3 {
            .stars span {
                &:nth-of-type(4),
                &:nth-of-type(5){
                    opacity: .5;
                }
            }
        }

        &.-r4 {
            .stars span {
                &:nth-of-type(5){
                    opacity: .5;
                }
            }
        }

        &.-r5 {

        }

        .text {
            font-size: .7rem;
            opacity: .8;
        }
    }

    .arrow {
        float: right;
        margin-left: .5rem;
    }
}

let scrollTimeout = null,
    menu = document.querySelector('.amazing-menu');

window.addEventListener('scroll', () => {
    if (!scrollTimeout) {
        document.body.classList.add('_disable-pointer-events');
        menu.classList.add('-scrolled');
    } else {
        clearTimeout(scrollTimeout);
    }

    scrollTimeout = setTimeout(() => {
        document.body.classList.remove('_disable-pointer-events');
        menu.classList.remove('-scrolled');
        scrollTimeout = null;
    }, 150);
});