/*

CSS for a virtual Book 
©2025 Thomas Bircher @ Claudiabasel

*/
*{
	box-sizing: border-box;
} 
 .vbook {
	height: 80%;
	 
	aspect-ratio:0.7;
	display:flex;
	align-items: center;
	justify-content: center; 
	background:rgba(255,0,0,0);
}
.vbook.move {
	width:100%;
	aspect-ratio:auto;
}
 .vbook .vb-book{
	position: relative;
	height:100%;
   	aspect-ratio:0.7;
	perspective: 3000px;
	font-size: 5vh;
}
		      
.vbook .vb-body {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	display: flex;
	justify-content: center;
	align-items:center;
	transition: all 1s;    
}

.vbook .vb-body *{
	//pointer-events: none;
	user-select: none;
}
.vbook .vb-body.drag {
    transition: all 0s;    
}  

.vb-face {
  	position: absolute;
	//pointer-events: none;
}
.vb-face > img, .vb-page img{
  	position: absolute !important;
	top:0px !important;
	left:0px !important;
	width:100% !important;
	height:100% !important;
}
.vb-body > .vb-face{
	transform-style: preserve-3d;
	display: flex;
	justify-content: center;
	align-items:center;
}		
	
.vb-cover > .vb-face{
	background-color:rgba(210,210,210,1);
	background-size:cover;
}
/* cover page*/
.vb-cover .vb-page{
	//position: relative;
	//width:100%;
	//height:100%;
	//background:red;
}
.vb-cover .vb-page > div{
	backface-visibility: visible;
}
		
/* cube book --------------------------*/
		
/* vb-front & vb-back */
.vb-body > .vb-front, .vb-body > .vb-back {
	width: 100%;
	height: 100%;
}

.vb-body > .vb-front  { transform: translateZ(0.5em); } /* Move forward */
.vb-body > .vb-back   { transform: rotateY(180deg) translateZ(0.5em); } /* Move vb-backward */

.vb-body > .vb-front{
    transform-origin: top left;
}

/* vb-left & vb-right */
.vb-body > .vb-left, .vb-body > .vb-right {
	width: 1em;
	height: 100%;
}

.vb-body > .vb-left  { transform: rotateY(-90deg) translateZ(calc(40vh * 0.8));}
//.vb-body > .vb-right { transform: rotateY(90deg) translateZ(calc(40vh * 0.8));}

/* vb-top & vb-bottom */
.vb-body > .vb-top, .vb-body > .vb-bottom {
	width: 100%;
	height: 1em;
	//background:rgba(0,255,0,0.5);
}

.vb-body > .vb-top    { transform: rotateX(90deg ) translateZ(40vh); }
.vb-body > .vb-bottom { transform: rotateX(-90deg) translateZ(40vh); }

/* inner body --------------------------- */
		
.vb-body > .inner.vb-top, .vb-body > .inner.vb-bottom{
	///width: calc(100% - 1vh);
    width: 1em;
    height: calc(100% - 1vh);
}
.vb-body > .inner.vb-top    { transform: rotateX(90deg ) rotateZ(90deg ) translateZ(39.5vh); }
.vb-body > .inner.vb-bottom { transform: rotateX(-90deg) rotateZ(-90deg ) translateZ(39.5vh); }	

.vb-body > .inner.vb-right{
	 transform: rotateY(90deg) translateZ(calc(39.4vh * 0.8));
	height: calc(100% - 1vh);
}
	
.vb-face.inner{
	background:rgba(255,255,255,1);
}

/* vb-pages -------------------------------- */
.vb-body .vb-pages {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(0.5em); /* Move forward */
	transform-origin: top left;
	display: flex;
	align-items:center;
}
.vb-body .vb-page {
	//display: none;
	position: absolute;
	width: 100%;
	height: calc(100% - 1vh);	
	
	transform-style: preserve-3d;
	transform: translateZ(1px); /* Move forward */
	//transform: translateZ(0.8em); /* Move forward */
	transform-origin: top left;
}
.vb-body .vb-page > div{
	//position: relative;
	position: absolute;
	//width: calc(100% - 0.5vh);
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	background-repeat: no-repeat;
	background-size:cover;
	
}		
.vb-body .vb-page > .vb-back{
	transform: rotateY(180deg);
	z-index: 200;	
	background-color:rgba(255,250,250,1);
}
.vb-body .vb-page > .vb-front{
	z-index: 100;
	//padding: 1.5% 1.5% 1.5% 0px;
	background-color:rgba(255,250,250,1);
}
.vb-body .vb-page.flip{
	//transform: rotate3d(0,1,0,-179.9deg);
	//transform:rotate3d(0,1,0,-179.9deg);
	transform:translateZ(1px) rotate3d(0,1,0,-179.9deg);		
}
		
.vbook.open .vb-body > .vb-page {	
	display: block;
}
		
/* cover cubes -------------------------- */
		
/* vb-front & vb-back */
.vb-cover > div{
	display: flex;
	align-items: center;
}
.vb-cover .vb-front, .vb-cover .vb-back {
	width: 100%;
	height: 100%;
}
.vb-front.vb-cover .vb-front{
    //background:rgba(0,0,255,0.5);        
}
.vb-cover .vb-front  { transform: translateZ(0.2vh); } /* Move forward */
.vb-cover .vb-back   { transform: rotateY(180deg) translateZ(0.2vh); } /* Move vb-backward */

/* vb-left & vb-right */
.vb-cover .vb-left, .vb-cover .vb-right {
	width: 0.4vh;
	height: 100%;
}

.vb-cover .vb-left  { transform: rotateY(-90deg) translateZ(calc(40vh * 0.8));}
.vb-cover .vb-right { transform: rotateY(90deg) translateZ(calc(40vh * 0.8));}
		
.vb-right .vb-cover .vb-left  {  transform:translateZ(calc(20vh * 0.8));}
.vb-right .vb-cover .vb-right {  transform:translateZ(calc(20vh * 0.8));}


/* vb-top & vb-bottom */
.vb-cover .vb-top, .vb-cover .vb-bottom {
	width: 100%;
	height: 0.4vh;
}
		
.vb-cover .vb-top    { transform: rotateX(90deg ) translateZ(calc(40vh)); }
.vb-cover .vb-bottom { transform: rotateX(-90deg) translateZ(calc(40vh)); }

/* bgs */
.vb-cover .vb-page > div{
	backface-visibility: visible;
}
.vb-cover.vb-back .vb-page > div{
	right:0px;
}
		

/*  cover soft ------------------------------- */
		
		
/* inner body  */
		
.vbook.soft .vb-body > .inner.vb-top, .vbook.soft .vb-body > .inner.vb-bottom{
	width: calc(100%);	
}
.vbook.soft .vb-body > .inner.vb-top    { transform: rotateX(90deg ) translateZ(40vh); }
.vbook.soft .vb-body > .inner.vb-bottom { transform: rotateX(-90deg) translateZ(40vh); }	
		
.vbook.soft .vb-body > .inner.vb-right{
	height: calc(100%);
}
.vbook.soft .vb-body > .inner.vb-right    { transform: rotateY(90deg) translateZ(calc(40vh * 0.8));}
		
/* vb-pages  */
		
.vbook.soft .vb-body > .vb-page {	
	height: 100%;	
	//transform: translateZ(0.01vh);
}
.vbook.soft .vb-body > .vb-page > div{
	width: 100%;
}		
.vbook.soft .vb-body > .vb-page.flip{
	//transform:translateZ(0.01vh) rotate3d(0,1,0,-180deg);		
}

/* cover cubes - */
		
.vbook.soft .vb-cover .vb-front  { transform: translateZ(1px); } 
.vbook.soft .vb-cover .vb-back   { transform: rotateY(180deg) translateZ(1px); }

.vbook.soft .vb-cover .vb-left, .vbook.soft .vb-cover .vb-right {
	width: 1px;
}
.vbook.soft .vb-cover .vb-top, .vbook.soft .vb-cover .vb-bottom {
	height: 1px;
}	
		
/*  cover hard1 ------------------------------- */
		
/* inner body  */
		
.vbook.hard1 .vb-body > .inner.vb-top, .vbook.hard1 .vb-body > .inner.vb-bottom{
	width: calc(99.9%);	
}
.vbook.hard1 .vb-body > .inner.vb-top    { transform: rotateX(90deg ) translateZ(39.9vh); }
.vbook.hard1 .vb-body > .inner.vb-bottom { transform: rotateX(-90deg) translateZ(39.9vh); }	
		
.vbook.hard1 .vb-body > .inner.vb-right{
	height: calc(99.9%);
}
.vbook.hard1 .vb-body > .inner.vb-right    { transform: rotateY(90deg) translateZ(calc(39.9vh * 0.8));}
		
/* vb-pages  */
		
.vbook.hard1 .vb-body > .vb-page {	
	height: 99.9%;	
	//transform: translateZ(0.01vh);
}
.vbook.hard1 .vb-body > .vb-page > div{
	width: 99.9%;
}		
.vbook.hard1 .vb-body > .vb-page.flip{
	//transform:translateZ(0.01vh) rotate3d(0,1,0,-180deg);		
}		
		
/* cover cubes - */
		
.vbook.hard1 .vb-cover .vb-front  { transform: translateZ(0.4vh); } 
.vbook.hard1 .vb-cover .vb-back   { transform: rotateY(180deg) translateZ(0.4vh); }

.vbook.hard1 .vb-cover .vb-left, .vbook.hard1 .vb-cover .vb-right {
	width: 0.8vh;
}
.vbook.hard1 .vb-cover .vb-top, .vbook.hard1 .vb-cover .vb-bottom {
	height: 0.8vh;
}	

.vbook .prehide{
	display:none !important;
}
.vbook.open2 .prehide{
	display:flex !important;
}
/* vbook effects */

.vb-body > .vb-left > .vb-back:after,
.vb-cover .vb-top:after,
.vb-cover .vb-bottom:after,
.vb-cover .vb-left:after,
.vb-cover .vb-right:after,
.vb-body > .vb-face.inner.vb-right:after,
.vb-body > .vb-face.inner.vb-bottom:after
{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	mix-blend-mode: multiply;
	content:'';
}
.vb-cover .vb-top:after{
	mix-blend-mode: normal;
	background:rgba(255,255,255,0.2);
}
.vb-cover .vb-bottom:after{
	background:rgba(0,0,0,0.05);
}
.vb-cover.vb-front .vb-left:after,
.vb-cover.vb-back .vb-right:after
{
	background:rgba(0,0,0,0.05);
}
.vb-body > .vb-face.inner.vb-right:after{
	background:rgba(0,0,0,0.025);
}			
.vb-body > .vb-face.inner.vb-bottom:after{
	background:rgba(0,0,0,0.05);
}


	/* front/back rillen */
    /*
	.vb-body > .vb-front > .vb-front:after, .vb-body > .vb-front > .vb-backx:after, .vb-body > .vb-back > .vb-front:after , .vb-body > .vb-back > .vb-backx:after{
        
		content: '';
        position: absolute;
        top: 0;
        left: 2%;
        bottom: 0;
        width: 0.5%;
        height:100%;
        background: rgba(0,0,0,0.1);
        box-shadow: 1px 0 0.5% rgba(255, 255, 255, 0.1);
        z-index: 0;
		z-index:100;
		mix-blend-mode: multiply;
    }
	.vb-body > .vb-front > .vb-back:after{
        left: auto;
		right: 2%;
    }
	
	.vb-body > .vb-back > .vb-front:after{
        left: auto;
		right: 2%;
    }
	.vb-body > .vb-back > .vb-back:after{
        left: 2%;
		right: auto;
    }
	*/
	/* spine? */
    .vb-body > .vb-left > .vb-back:after {
		background:rgba(0,0,0,0.05);
		/*
		content: '';
        position: absolute;
		top: 0;
        left: 0px;
        bottom: 0;
        width: 100%;
        height:100%;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0) 100%);
		background: rgba(0,0,0,0.1);
		mix-blend-mode: multiply;
		*/
	}
	
	/* pages */
	.vb-body .vb-page > .vb-back:after {
		content: '';
        position: absolute;
		top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
		background: linear-gradient(-90deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.02) 2%, rgba(0,0,0,0) 30%) ;
		mix-blend-mode: multiply;
	}
	.vb-body .vb-page > .vb-front:after {
		content: '';
        position: absolute;
		top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 5%, rgba(0,0,0,0) 30%) ;
		border-left:1px solid rgba(0,0,0,0.1);
		mix-blend-mode: multiply;
	}
		
		
/* book states ------------------------------- */
.vbook.open2 .vb-body > .vb-front, 
.vbook.open2 .vb-body > .vb-back, 
.vbook.open2 .vb-body > .vb-left, 
.vbook.open2 .vb-body > .vb-right,
.vbook.open2 .vb-body > .inner.vb-top, 
.vbook.open2 .vb-body > .inner.vb-bottom,
.vbook.open2 .vb-body > .inner.vb-right,
.vbook.open2 .vb-body .vb-page{
	transition: all 1s;
}
.vbook.open .vb-body{
	transform: translate3d(50%,0,0) ;
}	
.vbook.open .vb-body > .vb-front{
    transform: rotateY(-179.9deg) translateZ(0em) !important;
}
.vbook.open .vb-body > .vb-back{
    transform: rotateY(180deg) translateZ(0em) !important;
}
/*spine*/
.vbook.open .vb-body > .vb-left{
	width:0px;
	
}
.vbook.open .vb-body > .vb-left > .vb-left,
.vbook.open .vb-body > .vb-left > .vb-right,
.vbook.open .vb-body > .vb-left > .vb-top,
.vbook.open .vb-body > .vb-left > .vb-bottom
{
	opacity: 0;	
}
.vbook.open  .vb-face.inner{
    //opacity: 0;
}
.vbook.open .vb-body > .vb-left.inner, .vbook.open .vb-body > .vb-right.inner {
	width: 0em;
	
}
.vbook.open .vb-body > .vb-top.inner, .vbook.open .vb-body > .vb-bottom.inner {
	height: 0em;
	opacity: 0;
}

.vbook.prepos .vb-body{
	transition:all 2s;
	//transform: rotateX(-31deg) rotateY(38.25deg);
	//transform: rotateY(38.25deg);
	transform: rotateX(-30deg) rotateY(40deg);
	//transform: rotateX(55.25deg) rotateY(-29deg);
}

/* pagination */

.vbook .pagination{
	position: absolute;
	bottom:20px;
	left:50%;
	display: flex;
	list-style: none;
	padding:0px;
	margin:0px;
	 transform: translate(-50%);
	mix-blend-mode: difference;
}
.vbook .pagination li{
	position: relative;
	width:4px;
	height:4px;
	margin:2px;
	//border:1px solid red;
}
.vbook .pagination li:after{
	position: absolute;
	top:0px;
	left:0px;
	width:4px;
	height:4px;
	border-radius: 100%;
	background:white;
	opacity: 0.2;
	content:'';
}
.vbook .pagination li.on:after{
	opacity: 1;
}