:root {
    --size: 1000px;
}
.absolute {
    position: absolute;

}
.overlay-bg-wall {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #0008;
    pointer-events: none;
    z-index: 10;
}

.perspective {
    
    perspective:var(--perspective,1100px);
    perspective-origin: center;
    display: grid;
    place-items: center;
    height: 100vh;
    overflow: hidden;
    position: relative;

    @media (width<992px) {
         --multiplier:2;
    perspective:var(--perspective,1100px);
  perspective-origin:center;
  display: grid;
  place-items:center;
  height:100vh;
  overflow:hidden;
  position:relative;
    }
}

.content-div {
    transform-origin: center;
    transform-style: preserve-3d;
    z-index: 10;
    font-size: 5rem;
    text-transform: uppercase;
    font-family: "Dancing Script", cursive;
    color: #fff;
    text-shadow: 0px 0px 10px #000;
    pointer-events: none;
}

.img-cylinder {
    position: absolute;

    animation: animate 90s linear infinite;

    transform-origin: center;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    translate: 0 var(--img-cylinder-y,-175%);

    @media (width<992px) {
        position:absolute;
    will-change: transform;
  animation: animate 60s linear infinite;
  transform-origin: center;
  transform-style: preserve-3d;
  width:100%;
  height:100%;
  top:50%;
  left:50%;
  translate:-50% -80%;


    }

}

.image-bgwall {
     
    position: absolute;
    left: 50%;
    transform-origin: center;
    transform-style: preserve-3d;
    border-radius: 10px;
    translate: -50%;
    will-change: transform;
    /*--deg: 18;*/
    --deg: 54;
    opacity: 0;
    animation: opacity-anim 0.2s linear forwards;
    animation-delay: calc(var(--i) * 50ms);
    transform:
        rotateY(calc(var(--i) * calc(var(--deg) * 1deg))) translatey(calc(calc(var(--i) / calc(1.11 * var(--deg))) * calc(var(--deg) * 5.83%))) translateZ(calc(var(--size) * -3.3));

    /* added negetive translate Z to make backface into frontface and make it hidden*/

    transition: all .2s ease;
     width: var(--size);
    height: var(--size);
    background: var(--url);
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: overlay;
    backface-visibility: hidden;
    @media (width < 992px) {
        --size:200px;
        width: var(--size);
    height: var(--size);
        top:50%;
        translate:-50% -50%;
        --deg:15;
        /*animation: deg 60s linear infinite alternate;*/
        transform: 
            rotateY(calc(var(--i) * calc(var(--deg) * 3deg))) translatey(calc(calc(var(--i) / calc(2 * var(--deg))) * calc(var(--deg) * 26%))) translateZ(calc(var(--size) * -1.3));
        /* added negetive translate Z to make backface into frontface and make it hidden*/
    
    }
}




@keyframes animate {
    0% {
        rotate: y 0deg;
    }

    100% {
        rotate: y 360deg;
    }
}

@keyframes deg {
    0% {

        transform:
            rotateY(calc(var(--i) * calc(28 * 1deg))) translatey(calc(calc(var(--i) / calc(1.11 * 28)) * calc(28 * 5.83%))) translateZ(calc(var(--size) * -3.3));
    }

    100% {

        transform:
            rotateY(calc(var(--i) * calc(18 * 1deg))) translatey(calc(calc(var(--i) / calc(1.11 * 18)) * calc(18 * 5.83%))) translateZ(calc(var(--size) * -3.3));
    }
}

@keyframes opacity-anim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}