From f1eeab55576a65b1679dfa63abbc27f9d07df571 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Thu, 12 Aug 2021 18:14:47 -0400
Subject: [PATCH] camera tweaks

---
 index.html | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index d0199e2..7664dc8 100644
--- a/index.html
+++ b/index.html
@@ -18,10 +18,10 @@
             text-align:center;
             transition: transform 1s;
         }
-        .Shot[show="cover"]{ transform: perspective(1000px) rotateY(110deg); }
-        .Shot[show="spine"]{ transform: perspective(1000px) rotateY(180deg); }
+        .Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
+        .Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg)   rotateY(180deg); }
         .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
-        .Shot[show="pages"]{ transform: perspective(800px) rotateY(0deg); }
+        .Shot[show="pages"]{ transform: perspective(800px)  rotateX(-7deg)   rotateY(0deg); }
 
         .Book
         {
@@ -60,7 +60,6 @@
             top:0;
             left:0;
             height:100%;
-            box-shadow: 0px -1px 1px rgb(0 0 0 / 30%);
             backface-visibility: hidden;
             transform-style: preserve-3d;
             transform: rotateY(180deg);
@@ -91,15 +90,15 @@
         }
         .Shadow--Drop::before
         {
-            transform: rotateX(90deg);
-            backface-visibility: visible;
+            transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
+            box-shadow: 0px 100px 60px black, 0px 100px 17px black;
+            display: block;
             position: absolute;
             top: 100%;
             content: " ";
-            display: block;
             width: 100%;
-            height: 50px;
-            background: #000;
+            height: 8px;
+            border-radius: 39px;
         }
 
         .Shadow--Sheet::after
@@ -145,18 +144,18 @@
     <div class="Shot" show="cover">
         <div class="Book">
             <img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/>
-            <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
+            <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
             <div class="Spine">
-                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
+                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
                 <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
                 <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
                 <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
                 <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
+                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
                 <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
                 <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
                 <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
-                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity Shadow--Drop"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
+                <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
             </div>
             
         </div>