.turning-book-wrapper{--book-angle:60deg;--speed:5s;--border-color:#555;transform-origin:top;width:420px;height:300px;margin:0 auto;position:relative}.turning-book-title{text-align:center;color:#555;z-index:20;pointer-events:none;width:100%;font-family:Indie Flower,cursive;font-size:2em;font-weight:400;line-height:1;position:absolute;top:45px;left:0}.turning-book{perspective:630px;perspective-origin:50% 50px;filter:drop-shadow(0 10px 5px #00000040);position:relative;transform:scale(1.2)}.turning-book .page{transform-origin:100% 100%;border:solid var(--border-color)2px;width:210px;height:300px;transform-style:preserve-3d;background-color:#bbb;background-position:50%;background-size:420px 300px;background-image:var(--img-1);will-change:transform;position:absolute;top:0;right:50%}.turning-book .page:first-child{transform:rotateX(var(--book-angle))rotateY(3deg);background-image:var(--img-1);background-position:0 0}.turning-book .page:nth-child(2){transform:rotateX(var(--book-angle))rotateY(4.5deg);background-image:var(--img-1);background-position:0 0}.turning-book .page:nth-child(3){transform:rotateX(var(--book-angle))rotateY(6deg);background-position:-2px -2px;background-size:420px 300px;animation:none}.is-animating .turning-book .page:nth-child(3){animation:nextPage calc(var(--speed)*5)infinite calc(var(--speed)*-4.8)steps(1)}.turning-book .page:nth-child(4){transform:rotateX(var(--book-angle))rotateY(177deg);background-image:var(--img-2);background-position:100% 0}.turning-book .page:nth-child(5){transform:rotateX(var(--book-angle))rotateY(175.5deg);background-image:var(--img-2);background-position:100% 0}.turning-book .page:nth-child(6){transform:rotateX(var(--book-angle))rotateY(174deg);background-image:var(--img-2);background-position:100% 0;overflow:hidden}.turning-book .page:nth-child(6):after{content:"";transform-origin:50%;background-position:100% -2px;background-size:420px 300px;width:210px;height:300px;animation:none;position:absolute;top:0;right:0%;transform:rotateY(180deg)}.is-animating .turning-book .page:nth-child(6):after{animation:nextPage calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}@keyframes nextPage{0%{background-image:var(--img-1)}20%{background-image:var(--img-2)}40%{background-image:var(--img-3)}60%{background-image:var(--img-4)}80%{background-image:var(--img-5)}to{background-image:var(--img-1)}}.turning-book .gap{width:10px;height:300px;transform:rotateX(var(--book-angle));transform-origin:bottom;background:0 0;position:absolute;top:0;left:calc(50% - 5px)}.turning-book .gap:after{content:"";background-color:var(--border-color);border-radius:50%;width:10px;height:5px;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}.turning-book .pages,.turning-book .flips{transform-style:preserve-3d}.turning-book .flip{transform-origin:100% 100%;border:solid var(--border-color);perspective:4200px;perspective-origin:50%;width:32px;height:300px;transform-style:preserve-3d;will-change:transform;background-size:420px 300px;border-width:2px 0;position:absolute;top:0;right:100%}.turning-book .flip:after{content:"";transform-origin:50%;background-size:420px 300px;width:100%;height:100%;position:absolute;top:0;right:0%}.turning-book .flip.flip1{border-width:2px 2px 2px 0;animation:none;right:50%}.is-animating .turning-book .flip.flip1{animation:flip1 var(--speed)infinite ease-in-out}.turning-book .flip.flip1:after{animation:none}.is-animating .turning-book .flip.flip1:after{animation:nextFlip1 calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}.turning-book .flip:not(.flip1){transform-origin:100%;animation:none;top:-2px;right:calc(100% - 2px)}.is-animating .turning-book .flip:not(.flip1){animation:flip2 var(--speed)ease-in-out infinite}.turning-book .flip.flip2:after,.turning-book .flip.flip3:after,.turning-book .flip.flip4:after,.turning-book .flip.flip5:after,.turning-book .flip.flip6:after,.turning-book .flip.flip7:after{animation:none}.is-animating .turning-book .flip.flip2:after{animation:nextFlip2 calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}.is-animating .turning-book .flip.flip3:after{animation:nextFlip3 calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}.is-animating .turning-book .flip.flip4:after{animation:nextFlip4 calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}.is-animating .turning-book .flip.flip5:after{animation:nextFlip5 calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}.is-animating .turning-book .flip.flip6:after{animation:nextFlip6 calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}.is-animating .turning-book .flip.flip7:after{animation:nextFlip7 calc(var(--speed)*5)calc(var(--speed)*-4)infinite steps(1)}.turning-book .flip.flip7{border-width:2px 0 2px 2px;width:30px}@keyframes flip1{0%,20%{transform:rotateX(var(--book-angle))rotateY(6deg)}80%,to{transform:rotateX(var(--book-angle))rotateY(174deg)}}@keyframes flip2{0%,20%{transform:rotateY(0)translateY(0)}50%{transform:rotateY(-15deg)translateY(0)}}@keyframes nextFlip1{0%{background-image:var(--img-1);background-position:-178px -2px;transform:rotateY(0)}10%{background-image:var(--img-2);background-position:-210px -2px;transform:rotateY(180deg)}20%{background-image:var(--img-2);background-position:-178px -2px;transform:rotateY(0)}30%{background-image:var(--img-3);background-position:-210px -2px;transform:rotateY(180deg)}40%{background-image:var(--img-3);background-position:-178px -2px;transform:rotateY(0)}50%{background-image:var(--img-4);background-position:-210px -2px;transform:rotateY(180deg)}60%{background-image:var(--img-4);background-position:-178px -2px;transform:rotateY(0)}70%{background-image:var(--img-5);background-position:-210px -2px;transform:rotateY(180deg)}80%{background-image:var(--img-5);background-position:-178px -2px;transform:rotateY(0)}90%{background-image:var(--img-1);background-position:-210px -2px;transform:rotateY(180deg)}to{background-image:var(--img-1);background-position:-178px -2px;transform:rotateY(0)}}@keyframes nextFlip2{0%{background-image:var(--img-1);background-position:-148px -2px;transform:rotateY(0)}10.5%{background-image:var(--img-2);background-position:-238px -2px;transform:rotateY(180deg)}20%{background-image:var(--img-2);background-position:-148px -2px;transform:rotateY(0)}30.5%{background-image:var(--img-3);background-position:-238px -2px;transform:rotateY(180deg)}40%{background-image:var(--img-3);background-position:-148px -2px;transform:rotateY(0)}50.5%{background-image:var(--img-4);background-position:-238px -2px;transform:rotateY(180deg)}60%{background-image:var(--img-4);background-position:-148px -2px;transform:rotateY(0)}70.5%{background-image:var(--img-5);background-position:-238px -2px;transform:rotateY(180deg)}80%{background-image:var(--img-5);background-position:-148px -2px;transform:rotateY(0)}90.5%{background-image:var(--img-1);background-position:-238px -2px;transform:rotateY(180deg)}to{background-image:var(--img-1);background-position:-148px -2px;transform:rotateY(0)}}@keyframes nextFlip3{0%{background-image:var(--img-1);background-position:-118px -2px;transform:rotateY(0)}11%{background-image:var(--img-2);background-position:-268px -2px;transform:rotateY(180deg)}20%{background-image:var(--img-2);background-position:-118px -2px;transform:rotateY(0)}31%{background-image:var(--img-3);background-position:-268px -2px;transform:rotateY(180deg)}40%{background-image:var(--img-3);background-position:-118px -2px;transform:rotateY(0)}51%{background-image:var(--img-4);background-position:-268px -2px;transform:rotateY(180deg)}60%{background-image:var(--img-4);background-position:-118px -2px;transform:rotateY(0)}71%{background-image:var(--img-5);background-position:-268px -2px;transform:rotateY(180deg)}80%{background-image:var(--img-5);background-position:-118px -2px;transform:rotateY(0)}91%{background-image:var(--img-1);background-position:-268px -2px;transform:rotateY(180deg)}to{background-image:var(--img-1);background-position:-118px -2px;transform:rotateY(0)}}@keyframes nextFlip4{0%{background-image:var(--img-1);background-position:-88px -2px;transform:rotateY(0)}11.5%{background-image:var(--img-2);background-position:-298px -2px;transform:rotateY(180deg)}20%{background-image:var(--img-2);background-position:-88px -2px;transform:rotateY(0)}31.5%{background-image:var(--img-3);background-position:-298px -2px;transform:rotateY(180deg)}40%{background-image:var(--img-3);background-position:-88px -2px;transform:rotateY(0)}51.5%{background-image:var(--img-4);background-position:-298px -2px;transform:rotateY(180deg)}60%{background-image:var(--img-4);background-position:-88px -2px;transform:rotateY(0)}71.5%{background-image:var(--img-5);background-position:-298px -2px;transform:rotateY(180deg)}80%{background-image:var(--img-5);background-position:-88px -2px;transform:rotateY(0)}91.5%{background-image:var(--img-1);background-position:-298px -2px;transform:rotateY(180deg)}to{background-image:var(--img-1);background-position:-88px -2px;transform:rotateY(0)}}@keyframes nextFlip5{0%{background-image:var(--img-1);background-position:-58px -2px;transform:rotateY(0)}12%{background-image:var(--img-2);background-position:-328px -2px;transform:rotateY(180deg)}20%{background-image:var(--img-2);background-position:-58px -2px;transform:rotateY(0)}32%{background-image:var(--img-3);background-position:-328px -2px;transform:rotateY(180deg)}40%{background-image:var(--img-3);background-position:-58px -2px;transform:rotateY(0)}52%{background-image:var(--img-4);background-position:-328px -2px;transform:rotateY(180deg)}60%{background-image:var(--img-4);background-position:-58px -2px;transform:rotateY(0)}72%{background-image:var(--img-5);background-position:-328px -2px;transform:rotateY(180deg)}80%{background-image:var(--img-5);background-position:-58px -2px;transform:rotateY(0)}92%{background-image:var(--img-1);background-position:-328px -2px;transform:rotateY(180deg)}to{background-image:var(--img-1);background-position:-58px -2px;transform:rotateY(0)}}@keyframes nextFlip6{0%{background-image:var(--img-1);background-position:-28px -2px;transform:rotateY(0)}12.5%{background-image:var(--img-2);background-position:-358px -2px;transform:rotateY(180deg)}20%{background-image:var(--img-2);background-position:-28px -2px;transform:rotateY(0)}32.5%{background-image:var(--img-3);background-position:-358px -2px;transform:rotateY(180deg)}40%{background-image:var(--img-3);background-position:-28px -2px;transform:rotateY(0)}52.5%{background-image:var(--img-4);background-position:-358px -2px;transform:rotateY(180deg)}60%{background-image:var(--img-4);background-position:-28px -2px;transform:rotateY(0)}72.5%{background-image:var(--img-5);background-position:-358px -2px;transform:rotateY(180deg)}80%{background-image:var(--img-5);background-position:-28px -2px;transform:rotateY(0)}92.5%{background-image:var(--img-1);background-position:-358px -2px;transform:rotateY(180deg)}to{background-image:var(--img-1);background-position:-28px -2px;transform:rotateY(0)}}@keyframes nextFlip7{0%{background-image:var(--img-1);background-position:-2px -2px;transform:rotateY(0)}13%{background-image:var(--img-2);background-position:-388px -2px;transform:rotateY(180deg)}20%{background-image:var(--img-2);background-position:-2px -2px;transform:rotateY(0)}33%{background-image:var(--img-3);background-position:-388px -2px;transform:rotateY(180deg)}40%{background-image:var(--img-3);background-position:-2px -2px;transform:rotateY(0)}53%{background-image:var(--img-4);background-position:-388px -2px;transform:rotateY(180deg)}60%{background-image:var(--img-4);background-position:-2px -2px;transform:rotateY(0)}73%{background-image:var(--img-5);background-position:-388px -2px;transform:rotateY(180deg)}80%{background-image:var(--img-5);background-position:-2px -2px;transform:rotateY(0)}93%{background-image:var(--img-1);background-position:-388px -2px;transform:rotateY(180deg)}to{background-image:var(--img-1);background-position:-2px -2px;transform:rotateY(0)}}