* {
    margin: 0;
    padding: 0;
}

:root {
    --boxGradientCol: linear-gradient(to top, rgb(89, 90, 179), #ff0201);
    --boxCol: #575bb4;
    /* --boxCol: #E29706; */
    --ribbonCol: #575bb4;
    /* --ribbonCol: rgb(255, 255, 255); */
}

/* first_scene start */
.first_scene {
    position: fixed;
    width: 20%;
    height: 20%;
    bottom: 20%;
    left: 50%;
    perspective: 1200px;
    opacity: 0;
    z-index: 2147483647;
    will-change: transform;
    /* border: 2px solid red; */
}

.box {
    width: 200px;
    height: 120px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(-35deg) translateZ(0);
    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    animation: two-turns 2s ease-out forwards;
    transform: translate3d(0, 0, 0) rotateX(-15deg) rotateY(-35deg);
}

@keyframes two-turns {
    from {
        transform: rotateX(-25deg) rotateY(0deg) translateZ(0);
        ;
    }

    to {
        transform: rotateX(-15deg) rotateY(500deg) translateZ(0);
        ;
    }
}

.face {
    position: absolute;
    width: 200px;
    height: 120px;
    /* kraft texture fallback */
    border: 2px solid #6a3d15;
    box-sizing: border-box;
    transform: translateZ(0);
    /* makes texture blend nicely with color */
}

.face-inner {
    position: absolute;
    width: 199px;
    height: 119px;
    background: #d1c19c;
    border: 2px solid #6a3d15;
    box-sizing: border-box;
    transform: translateZ(0);
    /* makes texture blend nicely with color */
}

/* Add your own images here – replace URLs */
.front {
    background-size: 100% 100%;
    transform: translateZ(100px);
    background-image: url('//showcase.infostation.co/2026/march/lotto/welcome/v2/images/lottoFace.jpg');

}

.front-inner {
    background-size: 100% 100%;
    transform: translateZ(99px);
}

/* example product */
.back {
    background-size: 100% 100%;
    transform: rotateY(180deg) translateZ(100px);
    background-image: url('//showcase.infostation.co/2026/march/lotto/welcome/v2/images/lottoFace.jpg');
}

.back-inner {
    background-size: 100% 100%;
    transform: rotateY(180deg) translateZ(99px);

}

.right {
    background-size: 100% 100%;
    transform: rotateY(90deg) translateZ(100px);
    background-image: url('//showcase.infostation.co/2026/march/lotto/welcome/v2/images/leeCooperFace.jpg');
}

.right-inner {
    background-size: 100% 100%;
    transform: rotateY(90deg) translateZ(99px);
    background-image: url('//showcase.infostation.co/2026/march/lotto/welcome/v2/images/Rectangle_inner.jpg');
}

.left {
    background-size: 100% 100%;
    transform: rotateY(-90deg) translateZ(100px);
    background-image: url('//showcase.infostation.co/2026/march/lotto/welcome/v2/images/leeCooperFace.jpg');
}

.left-inner {
    background-size: 100% 100%;
    transform: rotateY(-90deg) translateZ(99px);
    background-image: url('//showcase.infostation.co/2026/march/lotto/welcome/v2/images/Rectangle_inner.jpg');


}

.bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background-image: none;
}

/* keep plain or add texture only */

/* flaps – kept simple */
.flap {
    position: absolute;
    width: 200px;
    height: 70px;
    background: #ead8ad;
    border: .5px solid #6a3d15;
    background-blend-mode: multiply;
    transform: translateZ(0);
}

.front-flap {
    height: 125px;
    top: -125px;
    transform-origin: bottom;
    transform: translateZ(100px) rotateX(90deg);
}

.back-flap {
    top: -71px;
    transform-origin: bottom;
    transform: rotateY(180deg) translateZ(100px) rotateX(90deg);
}

.left-flap {
    width: 77px;
    height: 201px;
    left: -77px;
    transform-origin: right;
    transform: rotateX(90deg) rotateZ(180deg) translateZ(102px);
}

.right-flap {
    width: 110px;
    height: 200px;
    right: -110px;
    transform-origin: left;
    transform: rotateX(90deg) rotateZ(-180deg) translateZ(100px);
}

/* first_scene stop */



:root {
    --holderWidth: 500px;
    --holderHeight: 450px;
    --holderWidth2: 300px;
    --holderHeight2: 320px;

}

#confetti {
    z-index: 2147483647;
    width: 100%;
    height: 81%;
    bottom: 20%;
    left: 0;
    position: fixed;

    pointer-events: none;
    will-change: transform;
}




.iisw_wrapper {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    display: none;
    z-index: 2147483646;
    display: none;
    contain: layout style paint;
    /* opacity: ; */
}

.iisw_element_bg {
    width: 100vw;
    height: 100vh;
    top: 0 !important;
    left: 0 !important;
    background: url(//showcase.infostation.co/2026/march/lotto/welcome/v2/images/bg1.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: 2147483640;
    display: none;
}

.iisw_close_btn {
    width: 38px;
    height: 38px;
    top: 2%;
    right: 2%;
    position: absolute;
    cursor: pointer;
    z-index: 214748364999;
}

.iisw_info_logo {
    width: 38px;
    height: 38px;
    top: 0%;
    left: 0%;
    position: absolute;
    cursor: pointer;
}

.iisw_boxContainer {
    position: absolute;
    width: 38%;
    height: 33%;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);

}

.iisw_light {
    position: absolute;
    width: 85%;
    height: auto;
    top: -84%;
    left: 8%;
    /* text-orientation: mixed; */
    mix-blend-mode: screen;
    opacity: 0;
    display: none;
}

.iisw_box_shadow {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: -55%;
    left: 50%;
    transform: translateX(-50%);
}

.iisw_box {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}


.iisw_ribbon {
    position: absolute;
    width: 53%;
    height: auto;
    bottom: 54%;
    left: 32%;
    display: none;
    opacity: 0;
}

.iisw_ribbonDouble {
    position: absolute;
    width: 53%;
    height: auto;
    bottom: 51%;
    left: 15%;
    display: none;
    opacity: 0;
}

.iisw_ribbon_red {
    position: absolute;
    width: 11%;
    height: auto;
    bottom: 66%;
    right: 31%;
    display: none;
    opacity: 0;
}

.iisw_ribbon_blue {
    position: absolute;
    width: 4%;
    height: auto;
    bottom: 80%;
    left: 28%;
    display: none;
    opacity: 0;
}

.iisw_ribbon_purple {
    position: absolute;
    width: 8%;
    height: auto;
    bottom: 84%;
    right: 40%;
    display: none;
    opacity: 0;
}

.iisw_ribbon_round_red {
    position: absolute;
    width: 7%;
    height: auto;
    bottom: 89%;
    left: 34%;
    display: none;
    opacity: 0;
}

.iisw_box_front {
    position: absolute;
    width: 80%;
    height: auto;
    top: 10%;
    left: 49%;
    transform: translateX(-50%);
}

.iisw_packet_ribbon1 {
    position: absolute;
    width: 29%;
    height: auto;
    bottom: 7%;
    left: 7%;
}

.iisw_packet_ribbon2 {
    position: absolute;
    width: 29%;
    height: auto;
    bottom: 6%;
    right: 11%;
}

.iisw_fire1 {
    width: 12%;
    height: auto;
    top: 10%;
    left: 17%;
    position: absolute;
    display: none;
    opacity: 0;
}

.iisw_fire2 {
    width: 7%;
    height: auto;
    top: 34%;
    right: 29%;
    position: absolute;
    mix-blend-mode: screen;
    display: none;
    opacity: 0;
}

.iisw_fire3 {
    position: absolute;
    width: 20%;
    height: auto;
    top: 0;
    right: 2%;
    display: none;
    opacity: 0;
}


.iisw_ribbonBG {
    position: absolute;
    width: 17%;
    height: auto;
    top: 0;
    left: 0;
}

.iisw_ribbonBG2 {
    position: absolute;
    width: 27%;
    height: auto;
    top: -1%;
    right: -1%;
    rotate: -2deg;
}

.iisw_shoe1 {
    position: absolute;
    width: 40%;
    bottom: 7%;
    left: 9%;
    height: auto;
    rotate: -3deg;
    display: none;
    opacity: 0;
}

.iisw_shoe2 {
    position: absolute;
    width: 38%;
    height: auto;
    right: 10%;
    bottom: 8%;
    rotate: 3deg;
    display: none;
    opacity: 0;
}

.iisw_text {
    position: absolute;
    width: 20%;
    height: auto;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    opacity: 0;
}


.iisw_cta {
    position: absolute;
    width: 24.5%;
    height: auto;
    bottom: 2%;
    left: 38%;
    display: none;
    opacity: 0;
}


@media (max-width: 1820px) {

    .first_scene {
        transform: scale(0.9);
        left: 45%;
        bottom: 20%;
    }

    @keyframes two-turns {
        from {
            transform: rotateX(-25deg) rotateY(0deg);
        }

        to {
            transform: rotateX(-15deg) rotateY(496deg);
        }
    }

    .iisw_box_shadow {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: -66%;
        left: 50%;
        transform: translateX(-50%);
    }

    .iisw_cta {
        position: absolute;
        width: 23.5%;
        height: auto;
        bottom: 2%;
        left: 39%;
        display: none;
        opacity: 0;
    }

}

@media (max-width: 600px) {
    .first_scene {
        transform: scale(0.75);
        left: 30%;
        bottom: 30%;
    }

    @keyframes two-turns {
        from {
            transform: rotateX(-25deg) rotateY(0deg);
        }

        to {
            transform: rotateX(-15deg) rotateY(492deg);
        }
    }


    .iisw_element_bg {
        width: 100dvw;
        height: 100dvh;
        top: 0 !important;
        left: 0 !important;
        background: url(//showcase.infostation.co/2026/march/lotto/welcome/v2/images/bgPhone3.jpg) no-repeat;
        background-size: 100% 100%;
        isolation: isolate;
        z-index: 2147483640;
        display: none;
    }

    .iisw_ribbonBG {
        position: absolute;
        width: 36%;
        height: auto;
        top: 0;
        left: 0;
    }

    .iisw_ribbonBG2 {
        position: absolute;
        width: 40%;
        height: auto;
        top: -1%;
        right: 0%;
        rotate: -2deg;
    }

    .iisw_bottom_container {
        width: max(17vw, 500px);
        height: 35vh;
        bottom: 0;
        left: 38%;
        position: fixed;
        margin: 0 auto;
        z-index: 2147483642;
        transform: translate(-50%, 0);
        cursor: pointer;
        display: none;
        /* opacity: ; */
        scale: 0.8 !important;
    }

    .iisw_boxContainer {
        position: absolute;
        width: 100%;
        height: 33%;
        bottom: 30%;
        left: 50%;
        transform: translateX(-50%);
        isolation: isolate;
    }

    .iisw_box_shadow {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 6%;
        left: 50%;
        transform: translateX(-50%);
    }

    .iisw_light {
        position: absolute;
        width: 85%;
        height: auto;
        top: -41%;
        left: 8%;
        /* text-orientation: mixed; */
        mix-blend-mode: screen;
        opacity: 0;
        display: none;
    }

    .iisw_box {
        width: 100%;
        height: auto;
        position: fixed;
        top: 4%;
        left: 50%;
        transform: translateX(-50%);
    }

    .iisw_text {
        position: absolute;
        width: 55%;
        height: auto;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        opacity: 0;
    }

    .iisw_fire1 {
        width: 22%;
        height: auto;
        top: 10%;
        left: 7%;
        position: absolute;
        display: none;
        opacity: 0;
    }

    .iisw_fire2 {
        width: 17%;
        height: auto;
        top: 31%;
        right: 23%;
        position: absolute;
        mix-blend-mode: screen;
        display: none;
        opacity: 0;
    }

    .iisw_fire3 {
        position: absolute;
        width: 40%;
        height: auto;
        top: 0;
        right: 0%;
        display: none;
        opacity: 0;
    }

    .iisw_packet_ribbon1 {
        position: absolute;
        width: 37%;
        height: auto;
        bottom: 40%;
        left: 4%;
    }

    .iisw_packet_ribbon2 {
        position: absolute;
        width: 37%;
        height: auto;
        bottom: 40%;
        right: 2%;
    }

    .iisw_shoe1 {
        position: absolute;
        width: 71%;
        bottom: 23%;
        left: 0%;
        height: auto;
        rotate: -3deg;
        display: none;
        opacity: 0;
    }

    .iisw_shoe2 {
        position: absolute;
        width: 65%;
        height: auto;
        right: 0%;
        bottom: 23%;
        rotate: 3deg;
        display: none;
        opacity: 0;
    }

    .iisw_cta {
        position: absolute;
        width: 65.5%;
        height: auto;
        bottom: 15%;
        left: 17%;
        display: none;
        opacity: 0;
    }

    .iisw_info_logo {
        width: 24px;
        height: 24px;
        top: 0%;
        left: 0%;
        position: absolute;
        cursor: pointer;
    }

    .iisw_close_btn {
        width: 24px;
        height: 24px;
        top: 2%;
        right: 2%;
        position: absolute;
        cursor: pointer;
    }
}

.face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}