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

body {
    overflow: hidden;
}

/* Main Bubble Screen */
.main__div {
    position: absolute;
    width: 320px;
    height: 480px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.ul__img {
    position: fixed;
    z-index: 1;
    left: 7%;
    bottom: 40%;
    list-style-type: none;
    animation-name: main_img;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-direction: alternate;
}

.bubble__img {
    position: absolute;
    cursor: pointer;
    animation: bubble__img 1s linear infinite alternate;
}

@keyframes bubble__img {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

.list__items {
    cursor: pointer;
    float: right;
    position: absolute;
    right: -160px;
    top: -20px;
}

/* Bubble Screen Animation */
@keyframes main_img {
    0% {
        opacity: 0;
        left: 110%;
    }

    50% {
        opacity: 1;
        left: 110%;
    }

    100% {
        left: 7%;
    }
}


/* Second Screens */

.second__screens {
    width: 100%;
    height: 100%;
    position: absolute;
    /* display: none; */
    overflow: hidden;
}

.second__cross {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9999999;
}

/* Inner Screen One */

.int_screen__one {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bg__image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo__img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.logo__one {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: logo 1s ease;
    transition: all 0.8s;
}

.logo__two {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: logo 1s ease;
    transition: all 0.8s;
}

.text__one {
    position: absolute;
    width: 80%;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: textOne 1.6s ease;
    transition: all 1s;
}

.hand__icon {
    position: absolute;
    width: 15%;
    left: 0;
    right: 0;
    top: -50px;
    bottom: 0;
    margin: auto;
    animation: handIcon 4s ease;
    opacity: 0;
}

.logo__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    animation: logoIcon 0.7s ease;
    transition: all 0.7s;
    display: none;
}

.scratch-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#scratch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    animation: logo 1s ease;
    transition: all 0.8s;
}

.int_screen_two {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.top__strip {
    position: absolute;
    top: 0;
    animation: topStrip 0.5s ease;
    width: 100%;
}

.bottom__strip {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 65%;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: bottomStrip 1s ease;
}

.rotate__one {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: opacityImg 0.7s ease;
    transition: all 0.5s;
}

.rotate__two {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: opacityImg 0.7s ease;
    transition: all 0.5s;
}

.rotate__three {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: opacityImg 0.7s ease;
    transition: all 0.5s;
}

.rotate__four {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: opacityImg 0.7s ease;
    transition: all 0.5s;
}

.rotate__five {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: opacityImg 0.7s ease;
    transition: all 0.5s;
}

.myntra__logo {
    top: 0;
    right: 10px;
    width: 30%;
    position: absolute;
    animation: myntraLogo 1.4s ease;
    transition: all 1s;
}

.website__url {
    top: 3%;
    left: 10px;
    width: 55%;
    position: absolute;
    animation: websiteUrl 1.4s ease;
    transition: all 1s;
}

.maharera__img {
    position: absolute;
    bottom: 2%;
    width: 60%;
    animation: mahareraImg 3.5s ease;
    transition: all 1.2s;
}

.scanner__img {
    position: absolute;
    bottom: 0%;
    width: 16%;
    right: 5px;
    animation: scannerImg 2s ease;
    transition: all 1.2s;
}

.mantramagnus__img {
    position: absolute;
    right: 0;
    bottom: 10%;
    width: 40%;
    animation: mantramagnusImg 2.5s ease;
}

.verticle__line {
    position: absolute;
    right: 0;
    margin: 0 auto;
    bottom: 16%;
    left: -15px;
    animation: line 2.5s ease;
}

.text__two {
    position: absolute;
    width: 60%;
    bottom: 30%;
    left: 0px;
    animation: textTwo 2s ease;
}

.text__three {
    position: absolute;
    bottom: 20%;
    width: 45%;
    left: 0px;
    animation: textThree 2.8s ease;
}

.cta__img {
    position: absolute;
    right: 5px;
    bottom: 3%;
    width: 36%;
    margin: 0 auto;
    animation: cta 3.8s ease;
}

.ctaPulse {
    position: absolute;
    right: 5px;
    bottom: 3%;
    width: 36%;
    margin: 0 auto;
    animation: ctaPulse .7s linear infinite alternate;
}

.text4__img {
    position: absolute;
    left: 10px;
    bottom: 10%;
    width: 50%;
    margin: 0 auto;
    animation: textFour 3s ease;
}

.rotate__image {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}

/* Animation Interstatial */

@keyframes logo {
    from {
        transform: translateX(-300px);
    }

    to {
        transform: translateX(0px);
    }
}

@keyframes textOne {
    from {
        transform: translateX(120%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes handIcon {
    0% {
        opacity: 0;
        transform: translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
    }

    10% {
        opacity: 0;
        transform: translate3d(-55.1999px, 18.9201px, 0px);
        animation-timing-function: linear;
    }

    20% {
        opacity: 0;
        transform: translate3d(-55.1999px, 18.9201px, 0px);
        animation-timing-function: linear;
    }

    30% {
        opacity: 1;
        transform: translate3d(-55.1999px, 18.9201px, 0px);
        animation-timing-function: linear;
    }

    40% {
        opacity: 1;
        transform: translate3d(50.0401px, 31.8801px, 0px);
        animation-timing-function: linear;
    }

    50% {
        opacity: 1;
        transform: translate3d(-52.3199px, 56.3602px, 0px);
        animation-timing-function: linear;
    }

    55% {
        opacity: 1;
        transform: translate3d(35.5201px, 72.2002px, 0px);
        animation-timing-function: linear;
    }

    65% {
        opacity: 1;
        transform: translate3d(-47.9999px, 90.9202px, 0px);
        animation-timing-function: linear;
    }

    75% {
        opacity: 1;
        transform: translate3d(47.9999px, 80.9202px, 0px);
        animation-timing-function: linear;
    }

    90% {
        opacity: 1;
        transform: translate3d(36.9601px, 96.6802px, 0px);
        animation-timing-function: linear;
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        animation-timing-function: linear;
    }
}

@keyframes logoIcon {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes topStrip {
    from {
        top: -100px;
    }

    to {
        top: 0;
    }
}

@keyframes bottomStrip {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
        bottom: -70%;
    }

    100% {
        opacity: 1;
        bottom: 0;
    }
}

@keyframes myntraLogo {
    0% {
        opacity: 0;
    }

    40%,
    30% {
        opacity: 1;
        right: -300px;
    }

    100% {
        opacity: 1;
        right: 10px;
    }
}

@keyframes websiteUrl {
    0% {
        opacity: 0;
    }

    40%,
    30% {
        opacity: 1;
        left: -300px;
    }

    100% {
        opacity: 1;
        left: 10px;
    }
}

@keyframes mahareraImg {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60% {
        opacity: 0;
        left: -500px;
    }

    100% {
        opacity: 1;
        left: 0%;
    }
}

@keyframes scannerImg {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60% {
        opacity: 0;
        right: -60%;
    }

    100% {
        opacity: 1;
        right: 5px;
    }
}

@keyframes mantramagnusImg {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60%,
    30%,
    10% {
        opacity: 0;
    }

    40% {
        opacity: 0;
        right: -500px;
    }

    100% {
        opacity: 1;
        right: 0%;
    }
}

@keyframes line {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes textTwo {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60%,
    40%,
    70%,
    20% {
        opacity: 0;
    }

    60% {
        opacity: 1;
        left: -700px;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes textThree {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60%,
    30%,
    10% {
        opacity: 0;
    }

    40% {
        opacity: 1;
        left: -400px;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes cta {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    60% {
        opacity: 0;
        right: -500px;
    }

    100% {
        opacity: 1;
        right: 5px;
    }
}

@keyframes ctaPulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

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


@keyframes textFour {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    60% {
        opacity: 0;
        left: -500px;
    }

    100% {
        opacity: 1;
        left: 10px;
    }
}

@keyframes opacityImg {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}

@keyframes opacityAnimate {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}