html, body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      height: 100%;
      overflow-x: hidden;
      overflow-y: visible;
    }

		.lobster-two-regular-italic {
		  font-family: "Lobster Two", sans-serif;
		  font-weight: 400;
		  font-style: italic;
		}
			
		.redUndead {
		  font-family: "IntoTheDarkness", sans-serif;
		  font-weight: 400;
		  font-style: italic;
		}

		.montserrat {
		  font-family: "Montserrat", sans-serif;
		  font-optical-sizing: auto;
		  font-weight: 500;
		  font-style: normal;
		}
		
		body {
			background-image:url(/images/bg3.jpg);
			background-size:cover;
			background-position: 75% 20%;
		}
    .main {
      max-width: 1440px;
      margin: 0 auto;
      position: relative;
      min-height: 100vh;
      z-index: 1;
    }

    .books {
      position: fixed;
      bottom: -800px; /* Only 100px of the 900px books will show */
      left: 0px;
      width: 100%;
      max-width: 1440px;
      display: flex;
      justify-content: space-between;
      z-index: 10;
      overflow: visible;
    }

		.book {
		  height: 900px;
		  width: 100%;
		  margin-right: 2px;
		  border-radius: 6px;
		  position: relative;
		  transition: transform 0.3s ease, box-shadow 0.3s ease;
		  cursor: pointer;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background-clip: padding-box;
		  opacity: 0.75;
		
		  /* New: subtle texture and lighting */
			background-image: 
			  linear-gradient(
			    to right,
			    rgba(255, 255, 255, 0.08),
			    rgba(255, 255, 255, 0) 25%,
			    rgba(0, 0, 0, 0.1) 75%,
			    rgba(0, 0, 0, 0.2)
			  ),
			  repeating-linear-gradient(
			    45deg,
			    rgba(255,255,255,0.02),
			    rgba(255,255,255,0.02) 2px,
			    transparent 2px,
			    transparent 4px
			  );
	
		
		  box-shadow:
		    0 8px 12px rgba(0, 0, 0, 0.25),                 /* outer shadow */
		    inset 4px 0 8px rgba(255, 255, 255, 0.15),      /* spine edge left */
		    inset -4px 0 8px rgba(0, 0, 0, 0.25);           /* spine edge right */
		
		}
	
		.book:hover {
		  transform: scale(1.03);
		  box-shadow:
		    0 12px 20px rgba(0, 0, 0, 0.4),
		    inset 6px 0 12px rgba(255, 255, 255, 0.2),
		    inset -6px 0 12px rgba(0, 0, 0, 0.4);
		  opacity: 1;
		}
	
    .book.lifted {
      transform: translateY(-800px); /* Reveal full book on click */
      z-index: 20;
			opacity:1;
    }
		
    /* Book colors */
    .red    { background: #FF0000; }
    .orange { background: #FF7F00; }
    .yellow { background: #FFFF00; color: black; }
    .green  { background: #00FF00; color: black; }
    .blue   { background: #0000FF; }
    .indigo { background: #4B0082; }
    .violet { background: #8B00FF; }
    .black  { background: #000; }

    .book::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.2) 0px,
        rgba(0, 0, 0, 0.05) 8px,
        rgba(255, 255, 255, 0) 12px
      );
      border-radius: 12px 12px 0 0;
      pointer-events: none;
      z-index: 1;
    }

    .book::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0)
      );
      border-radius: 12px 12px 0 0;
      pointer-events: none;
      z-index: 2;
    }

    .book span {
      writing-mode: vertical-lr;
      font-weight: bold;
      font-size: 4em;
      color: #000;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      height: 100%;
      padding-top: 60px;
      box-sizing: border-box;
    }

		.book.yellow span {font-size:3.7em;}
		.book.violet span {font-size:3.7em;}
		
    .book b {
      font-weight: bold;
			font-family:times new roman;
      font-size: 1.5em;
			padding:0px 20px 0px 20px;
      color: #000;
      line-height: 1;
			position:absolute; 
			top:30px;
			text-align:center;
    }
		
		.book a {color:#000; text-decoration:none;}
		
		.book a i {display:none;}
		.book a u {text-decoration:none;}
		
    /* Special text colors */
    .book.red span,
    .book.blue span,
    .book.indigo span,
    .book.violet span,
    .book.black span { color: #FFF; }
    .book.red b,
    .book.blue b,
    .book.indigo b,
    .book.violet b,
    .book.black b { color: #FFF; }
    .book.red a,
    .book.blue a,
    .book.indigo a,
    .book.violet a,
    .book.black a { color: #FFF;}

.growth-series {
		display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    align-items: center;
}
.growth-series h3 {width:285px;}
ul.age-track {
  list-style: none;
  padding: 0;
  margin: 0;
	display:inline-block;
}
ul.age-track li {display:flex; margin-bottom:10px; text-align:left;}
ul.age-track li .age {width:65px; font-weight:bold;}
ul.age-track li span {width:220px; display:block; padding:2px;}
		
    /* Fullscreen overlay */
.fullscreen {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;  /* Start invisible */
  transition: opacity 0.5s ease;
  padding: 40px 20px 100px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none; /* Prevent clicks until visible */
}

.fullscreen.show {
  opacity: 1;          /* Fade in */
  pointer-events: auto; /* Enable clicks when visible */
}
		.dark-world h1,
    .fullscreen h1 {
      font-size: 2.2em;
      color: #000;
      margin-bottom: 1em;
			font-family:montserrat;
    }

		.dark-world p,
		.fullscreen p {
      max-width: 800px;
      font-size: 1.2em;
      color: #000;
			margin-bottom:3em;
			font-family:montserrat;
    }
		
		.fullscreen.indigo h1,
		.fullscreen.red h1,
		.fullscreen.violet h1,
		.fullscreen.blue h1,
		.fullscreen.indigo p,
		.fullscreen.red p,
		.fullscreen.violet p,
		.fullscreen.blue p {color:#FFF;}

		.dark-world h1, .dark-world p {color:#DDD;}
				
		.dark-world img,
    .fullscreen img {
      max-width: 500px;
      border-radius: 12px;
      margin-bottom: 1em;
    }

		.fullscreen.red .bookDetails a {background:#4d0000; color:#FFF;}
		.fullscreen.orange .bookDetails a {background:#935614; color:#FFF;}
		.fullscreen.yellow .bookDetails a {background:#8c8407; color:#FFF;}
		.fullscreen.green .bookDetails a {background:#005500; color:#FFF;}
		.fullscreen.blue .bookDetails a {background:#8e91ed; color:#000;}
		.fullscreen.indigo .bookDetails a {background:#9B59B6; color:#000;}
		.fullscreen.violet .bookDetails a {background:#5C007A; color:#FFF;}

		.dark-world .bookDetails a {color:#DDD;}


.textOverlay {
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent black */
  padding: 10px 25px 10px 25px;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
	margin-bottom:40px;
}
		
		.buy-btn {
			text-decoration:none;
			font-family:montserrat;
			padding: 14px 44px;
			font-size: 1.1rem;
			font-weight: bold;
			color: #fff;
			background-color: var(--button-bg, #333); /* Will be set dynamically */
			border: none;
			border-radius: 50px;
			cursor: pointer;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
			transition: transform 0.2s ease, background-color 0.2s ease;
		}
		
		.close-btn {
		  position: absolute;
		  top: 20px;
		  right: 15px;
		  width: 40px;
		  height: 40px;
		  border: none;
		  border-radius: 50%;
		  background: rgba(0, 0, 0, 0.4);
		  cursor: pointer;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  transition: background 0.3s ease, transform 0.3s ease;
		  z-index: 1000;
		}
		
		.close-btn::before,
		.close-btn::after {
		  content: '';
		  position: absolute;
		  width: 14px;
		  height: 2px;
		  background: white;
		  border-radius: 2px;
		  transition: background 0.3s ease;
		}
		
		.close-btn-dark {
			background: rgba(255,255,255, 0.4)
		}
		.close-btn-dark::before,
		.close-btn-dark::after {
		  background: black;
		}
		

		.close-btn::before {
		  transform: rotate(45deg);
		}
		
		.close-btn::after {
		  transform: rotate(-45deg);
		}
		
		.close-btn:hover {
		  background: rgba(0, 0, 0, 0.7);
		  transform: scale(1.1);
		}
		.close-btn-dark:hover {
		  background: rgba(255,255,255, 0.7);
		  transform: scale(1.1);
		}
	
    @keyframes slideIn {
      from { transform: translateY(100%); }
      to   { transform: translateY(0%); }
    }

.dark-world {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;          /* Horizontal center */
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 20px 20px 60px;       /* Reduce top padding */
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  color: #fff;
  overflow-y: auto;             /* Enable scroll if content exceeds height */
	background:#11081a;
  inset: 0;
	display:none;
}

.dark-world.show {
  opacity: 1;
  pointer-events: auto;
	display:flex;
}

.dark-title {
  color: #fff;
  font-size: 3rem;
  letter-spacing: 0.1em;
}

.dark-world h1 {
  font-size: 2.2em;
  margin-bottom: 1em;
  font-family: montserrat;
  color: #fff;
}

.dark-world p {
  max-width: 800px;
  font-size: 1.2em;
  line-height: 1.4;
  margin-bottom: 3em;
  font-family: montserrat;
  color: #ddd;
}

.dark-world .buy-btn {
  background-color: #6b21a8; /* deep purple tone for contrast */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.dark-world .bookDetails {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  width: 100%;
  text-align: left;
}

.dark-world .bookLeft {
  width: 40%;
  display: flex;
  justify-content: center;
}

.dark-world .bookRight {
  width: 60%;
  padding-left: 40px;
}

.info-section {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.95);
  color: #000;
  padding: 80px 20px;
  box-sizing: border-box;
  z-index: 999;
  overflow-y: auto;
}

.info-section-dark {
	background: rgba(0,0,0,0.95);
	color:#FFF;
}

.info-section.active {
  display: block;
}

.section-inner {
  max-width: 800px;
  margin: 0 auto;
}

.info-section h2 {
  font-size: 2.4em;
  margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif;
}

.info-section p {
  font-size: 1.1em;
  line-height: 1.6;
  font-family: 'Montserrat', sans-serif;
}



		@font-face {
		  font-family: 'EvilWizard';
		  src: url('/fonts/EvilWizard.TTF') format('truetype');
		}

		@font-face {
		  font-family: 'BlackOoze';
		  src: url('/fonts/BlackOoze.ttf') format('truetype');
		}

		@font-face {
		  font-family: 'DeadlySnakes';
		  src: url('/fonts/DeadlySnakes.otf') format('opentype');
		}

		@font-face {
		  font-family: 'EnchantedTree';
		  src: url('/fonts/EnchantedTree.TTF') format('truetype');
		}

		@font-face {
		  font-family: 'MazeOfMirrors';
		  src: url('/fonts/MazeOfMirrors.ttf') format('truetype');
		}

		@font-face {
		  font-family: 'ThreeSisters';
		  src: url('/fonts/ThreeSisters.ttf') format('truetype');
		}

		@font-face {
		  font-family: 'ForestDwellers';
		  src: url('/fonts/ForestDwellers.ttf') format('truetype');
		}

		@font-face {
		  font-family: 'IntoTheDarkness';
		  src: url('/fonts/IntoTheDarkness.otf') format('opentype');
		}

		.EvilWizard {font-family: 'EvilWizard', serif;}	
		.BlackOoze {font-family: 'BlackOoze', serif;}	
		.DeadlySnakes {font-family: 'DeadlySnakes', serif;}	
		.EnchantedTree {font-family: 'EnchantedTree', serif;}	
		.MazeOfMirrors {font-family: 'MazeOfMirrors', serif;}	
		.ThreeSisters {font-family: 'ThreeSisters', serif;}	
		.ForestDwellers {font-family: 'ForestDwellers', serif;}	
		.IntoTheDarkness {font-family: 'IntoTheDarkness', serif;}	

		
		.header {height:76px; position:absolute; left:0px; top:0px; width:100%; z-index:3;}
		.dark-mode .header {z-index:901;}
		.header #headerBG {height:76px; width:100%; opacity:.1; position:absolute; z-index:1;}
		.header #headerBG.darkMode {background:#FFF;}
		.header #headerBG.lightMode {background:#000;}
		.header .logo {line-height:76px; width:100%; height:76px; background-size:auto; background-repeat: no-repeat; z-index:2; position:absolute; left:40px; top:9px;}
		.header .logo {
		  background-image: url('/images/logo.png');
		}
		body.dark-mode .header .logo {
		  background-image: url('/images/logo-dark.png');
		}

 		.header .nav {z-index:3; position:absolute; right:40px; line-height:50px; white-space:nowrap; top:13px;}

		.header .nav ul {
		  margin: 0;
		  padding: 0;
		  display: inline-block;
		}
		
		.header .nav li {
		  display: inline-block;
		  margin: 0;
		  padding: 0 30px;
		  border-right: 2px solid #FFF;
		}
		
		.header .nav li:last-child {
		  border-right: none;
		}
		
 		.header .nav a {font-family:montserrat; font-weight:bold; color:#FFF; text-decoration:none; font-size:1.4em;}

		.once, .darkness {font-size:4em; color:#FFF; position:absolute; top:20%; left:20%; z-index:1;}
		.darkness {left:35%; top:40%; opacity:.4; display:none; z-index:902; color:#9b87b0 !important;}
					
			.fs-dots {display:none;}

.author-bio {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px;
  font-family: 'Montserrat', sans-serif;
  color: #333;
  font-size: 1.1em;
  line-height: 1.7;
}

.bio-section {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 20px;
}

.bio-section.reverse {
  flex-direction: row-reverse;
}

.bio-img-container {
	text-align:center;
	margin-bottom:1em;
}
.img-caption {
	font-size:.9em;
	color:#CCC;
	margin-top: 0.5em;
	font-style:italic;
}

.bio-img {
  flex: 0 0 300px;
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.bio-img2 {
  flex: 0 0 300px;
  max-width: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.bio-text {
  flex: 1;
}

.bio-text p {
  margin-bottom: 1.2em;
}
.bio-text p:first-child {
  margin-top: 0;
}

.fs-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 6px;
}
.fs-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background .2s;
}
.fs-dots button.active {
  background: rgba(255,255,255,0.9);
}


.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4); /* Subtle dark background */
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.nav-btn::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}

.prev-btn::before {
  transform: rotate(-135deg); /* Left arrow */
	margin-left:10px;
}

.next-btn::before {
  transform: rotate(45deg); /* Right arrow */
	margin-left:5px;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.1); /* Slight grow on hover */
}
.nav-btn:hover::before {
  box-shadow: 0 0 4px rgba(255,255,255,0.8);
}

.prev-btn { left: 15px; }
.next-btn { right: 15px; }

.fullscreen.show:hover .nav-btn,
.fullscreen.show.nav-visible .nav-btn {
  opacity: 0.75;                  /* show on hover (desktop) or when we force-visible (mobile tap) */
  pointer-events: auto;
}

.fs-progress {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: .9rem;
}
	
.bookDetails {width:1400px; display:flex;}
.bookLeft {width:500px;}
.bookRight {position:relative; margin-left:100px; width:800px; text-align:left; align-items:left;}

.book-image {
  border-radius: 4px; /* subtle rounding */
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.5),  /* main drop shadow */
    inset 0 1px 2px rgba(255, 255, 255, 0.3), /* top highlight */
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);      /* bottom bevel */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-icon {
	position:absolute;
	right:0px;
	width:80px;
	cursor:pointer;
	pointer-events:auto;
	
}
.book-icon-mobile {display:none;}

.book-image:hover {
  transform: translateY(-4px); /* slight lift on hover */
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}

.info-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.info-close-btn::before,
.info-close-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  background-color: #000;
  transform-origin: center;
  transition: background-color 0.2s ease;
}


.info-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.info-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.info-close-btn:hover::before,
.info-close-btn:hover::after {
  background-color: #ccc;
}
.info-close-return {
  display: block;
  margin: 40px auto 0 auto; /* center horizontally */
  padding: 12px 24px;
  font-size: 1rem;
  background-color: rgba(0,0,0, 0.1);
  color: #000;
  border: 1px solid #000;
  border-radius: 30px;
  cursor: pointer;
  font-family: montserrat;
  letter-spacing: 1px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.info-close-return:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.info-section-dark .info-close-btn::before,
.info-section-dark .info-close-btn::after {
  background-color: #FFF;
}
.info-section-dark .info-close-btn:hover::before,
.info-section-dark .info-close-btn:hover::after {
  background-color: #333;
}
.info-section-dark .info-close-return {
  background-color: rgba(255,255,25, 0.1);
  color: #FFF;
  border: 1px solid #FFF;
}

.info-section-dark .info-close-return:hover {
  background-color: rgba(0,0,0, 0.25);
  transform: scale(1.05);
}


	
		.page-curl {
			position:absolute;
			bottom:0px;
			right:30px;
			cursor:pointer;
		}
		.page-curl img {
			transform-origin: bottom right;
		  animation: curlPulse 3s ease-in-out infinite; /* Added pulse animation */
			z-index:2;
		}
		
		@keyframes curlPulse {
		  0%, 100% {
		    transform: scale(1) rotate(0deg);
		  }
		  50% {
		    transform: scale(1.05) rotate(2deg); /* Slight zoom and tilt */
		  }
		}		

		.page-curl-dark {
			position:absolute;
			bottom:0px;
			left:0px;
			cursor:pointer;
			display:none;
			z-index:901;
			cursor:pointer;
		}
		.page-curl-dark img {
			transform-origin: bottom right;
		  animation: curlPulse 3s ease-in-out infinite; /* Added pulse animation */
			z-index:2;
		}
		
		@keyframes curlPulse {
		  0%, 100% {
		    transform: scale(1) rotate(0deg);
		  }
		  50% {
		    transform: scale(1.05) rotate(2deg); /* Slight zoom and tilt */
		  }
		}		
		
@keyframes darknessFlicker {
  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 6px #222,
      0 0 14px #333,
      0 0 24px #000;
  }
  40% {
    opacity: 0.8;
    text-shadow:
      0 0 3px #111,
      0 0 8px #000;
  }
  50% {
    opacity: 0.6;
    text-shadow:
      0 0 1px #000,
      0 0 4px #111;
  }
  60% {
    opacity: 0.8;
    text-shadow:
      0 0 3px #111,
      0 0 8px #000;
  }
}
		
		.page-curl b {
			position: absolute;
	    bottom: 20px;
	    right: -5px;
	    font-size: .9em;
			width:80px;
			white-space:wrap;
			text-align:right;
	    font-family: times new roman;
			z-index:3;
			color:#bbb;
			text-shadow:
			    0 0 4px #222,
			    0 0 8px #333,
			    0 0 12px #000;
			  animation: darknessFlicker 5s infinite;
			  opacity: 0.9;
			}

		.page-curl-dark b {
			position: absolute;
	    bottom: 20px;
	    left: -5px;
	    font-size: .9em;
			width:80px;
			white-space:wrap;
			text-align:right;
	    font-family: times new roman;
			z-index:3;
			color:#FFF;
			text-shadow:
			    0 0 4px #222,
			    0 0 8px #333,
			    0 0 12px #000;
			  animation: darknessFlicker 5s infinite;
			  opacity: 0.9;
			}
			
body.dark-mode {
  background: #000 url(/images/bgDark.jpg) center/cover no-repeat;
}

/* The page overlay that “turns” */
.page-flip {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 120%;
  height: 120%;
  background: linear-gradient(135deg, #666 0%, #333 50%, #000 100%);
  transform-origin: bottom right;
  transform: rotateY(0deg);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 0 0 12px;
}

.page-flip.active {
  animation: flipPage 1.2s ease forwards;
}

@keyframes flipIn {
  0% {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(0.8);
    transform-origin: bottom right;
    opacity: 0.6;
  }
  40% {
    transform: perspective(1200px) rotateX(-10deg) rotateY(-80deg) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: perspective(1200px) rotateX(-20deg) rotateY(-180deg) scale(1.05);
    opacity: 1;
  }
}


/* Flip to dark */
.page-flip.flip-in {
  opacity: 1;
  animation: flipIn 0.9s cubic-bezier(.65,.05,.36,1) forwards;
}

/* Flip back to rainbow */
.page-flip.flip-out {
  opacity: 1;
  animation: flipOut 0.9s cubic-bezier(.65,.05,.36,1) forwards;
}

@keyframes flipIn {
  0%   { transform: perspective(1600px) rotateY(0deg);   opacity: 1; }
  100% { transform: perspective(1600px) rotateY(-180deg); opacity: 1; }
}

@keyframes flipOut {
  0%   { transform: perspective(1600px) rotateY(-180deg); opacity: 1; }
  100% { transform: perspective(1600px) rotateY(0deg);    opacity: 1; }
}

.black-smoke {
  position: absolute;
  bottom: 100px;
  right: 100px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4), rgba(0,0,0,0) 70%);
  opacity: 0;
  animation: none;
  z-index: 5;
  filter: blur(10px);
}

.black-smoke.show {
  animation: smokeRise 2s ease-out forwards;
}

@keyframes smokeRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-150px) scale(1.5);
    opacity: 0;
  }
}
.shudder {
  animation: flicker 3s;
}

.magical {
  background: linear-gradient(90deg, #fff, #CCC, #FFF);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sparkleFlow 2s linear;
}

@keyframes sparkleFlow {
  0% { background-position: 0% 0; }
  100% { background-position: 400% 0; }
}

@keyframes flicker {
  0%   { opacity: 1; text-shadow: 0 0 5px #fff; }
  10%  { opacity: 0.6; text-shadow: 0 0 10px #444; }
  20%  { opacity: 0.8; text-shadow: 0 0 15px #666; }
  30%  { opacity: 0.4; text-shadow: 0 0 5px #222; }
  40%  { opacity: 1; text-shadow: 0 0 20px #aaa; }
  50%  { opacity: 0.7; text-shadow: 0 0 5px #555; }
  100% { opacity: 1; text-shadow: 0 0 10px #fff; }
}

.email-link {color:#0033cc; text-decoration:underline;}
.dark-mode .email-link {color:#ccccff !important; text-decoration:underline;}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-flip {
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
  }
}

/* Optional: hide the bookshelf when in dark mode */
.books.hidden {
  display:none;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Back button on the dark side can reuse your .back-btn, add a small tweak */
.back-from-dark {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 901;
}

/* ---------- Base hamburger styles ---------- */
.hamburger {
  display: none;               /* shown only on mobile */
  position: absolute;
  right: 16px;
  top: 18px;
  width: 36px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1001;               /* above the sliding panel */
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  margin: 6px 0;
  transition: transform .25s ease, opacity .2s ease;
}

/* X animation */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.easter-egg-gallery {
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  animation: fadeIn 0.3s ease;
	padding-bottom:50px;
}

.gallery-images {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding-bottom: 10px;
}

.gallery-images img {
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.gallery-images img:hover {
  transform: scale(1.05);
}

.gallery-content {
	color:#FFF;
	max-width:600px;
	font-size:1.2em;
	margin-bottom:10px;
}
.gallery-content-bottom {
	color:#FFF;
	text-align:center;
	max-width:600px;
	font-size:1em;
	position:relative; 
	top:-20px;
}

.orange .gallery-content {
	color:#000;
}
.yellow .gallery-content {
	color:#000;
}
.green .gallery-content {
	color:#000;
}

#galleryClose {
  position: absolute;
  top: 0px;
  right: 50px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 1000;	
}

#galleryClose:hover {
  background: #222;
}

#galleryClose::before,
#galleryClose::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: background 0.3s ease;
}

#galleryClose::before {
  transform: rotate(45deg);
}

#galleryClose::after {
  transform: rotate(-45deg);
}

#galleryClose:hover::before,
#galleryClose:hover::after {
  background-color: #ccc;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#chest-container {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 998;
  cursor: pointer;
	display:none;
}

#chest-container:hover #chest {
	content: url('/images/chest-peek-bw3.png');
}
@media (hover: none) and (pointer: coarse) {
  #chest-container:hover #chest {
    content: url('/images/chest-closed-bw3.png');
  }
}

#chest {
  max-width:400px;
  height: auto;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.jiggle {
  animation: jiggle 0.4s ease-in-out;
}

@keyframes jiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
  75% { transform: rotate(-1deg); }
}

@keyframes chestShake {
  0%   { transform: translate(0, 0) rotate(0); }
  10%  { transform: translate(-5px, 0) rotate(-5deg); }
  20%  { transform: translate(5px, 0) rotate(5deg); }
  30%  { transform: translate(-5px, 0) rotate(-5deg); }
  40%  { transform: translate(5px, 0) rotate(5deg); }
  50%  { transform: translate(-5px, 0) rotate(-3deg); }
  60%  { transform: translate(5px, 0) rotate(3deg); }
  70%  { transform: translate(-3px, 0) rotate(-2deg); }
  80%  { transform: translate(3px, 0) rotate(2deg); }
  90%  { transform: translate(-2px, 0) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

#chest.shake {
  animation: chestShake 0.8s ease-in-out;
}


#smoke-overlay {
  position: absolute;
  top: 0px;
  left: 20%;
  transform: translateX(-50%);
  width: 380px;
  height: 180px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.2), transparent 100%);
  opacity: 1;
  animation: smoke-rise 3s infinite ease-in-out;
  z-index: 3;
  pointer-events: none;
}

#smoke-overlay img {
  width: 100%;
  height: auto;
  opacity: 0.6;
  filter: blur(4px);
  animation: smoke-rise-img 8s ease-out infinite;
}
@keyframes smoke-rise-img {
  0% {
    transform: scale(1) translateY(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3) translateY(-80px);
    opacity: 0;
  }
}


.smoke-frame {
  width: 150px;
  height: 150px;
  animation: smoke-fade 5s infinite;
  opacity: 0.4;
  filter: blur(8px);
}

.smoke-wisp {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(0,0,0,0.5), transparent);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: smoke-rise 4s ease-out infinite;
  filter: blur(8px);
  opacity: 0.4;
  animation-delay: calc(var(--i) * 0.7s);
}
@keyframes smoke-rise {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-50%) translateY(-150px) scale(2);
    opacity: 0;
  }
}

@keyframes smoke-rise {
  0% {
    transform: translate(-50%, 0) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -120px) scale(2);
    opacity: 0;
  }
}

@keyframes smoke-pulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

#smoke-extra {
  animation: smoke-rise 4s infinite;
  opacity: 0;
}

#chest-container:hover #smoke-extra {
  opacity: 0.6; /* More visible on hover */
}

@keyframes smoke-rise {
  0% {
    transform: translate(-50%, 0) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -100px) scale(1.5);
    opacity: 0;
  }
}

@keyframes smoke-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}



@keyframes smoke-rise {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(-30px) scale(1.2);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-50%) translateY(-60px) scale(1.5);
    opacity: 0;
  }
}


@media (max-width: 1440px) {
	.books, .bookDetails {max-width:1240px;}
	.book-image {width:400px;}
	.bookLeft {width:400px;}
	.bookRight {width:740px;}
	.fullscreen {
	  overflow-y: auto;
		 box-sizing: border-box;
		 max-height: 100vh;
	}
  .bookDetails {
		padding-top:5%;
  }
}

@media (max-width: 1280px) {
	.books {max-width:1080px;}
	.book-image {width:350px;}
	.bookLeft {width:350px;}
	.bookRight {width:630px;}
	.fullscreen {
	  overflow-y: auto;
		 box-sizing: border-box;
		 max-height: 100vh;
	}
  .bookDetails {
		padding-top:10%;
  }
	#chest {
	  max-width:300px;
	}
}

@media (max-width: 1024px) {
	.books {max-width:824px;}
	.book-image {width:250px;}
	.bookLeft {width:250px;}
	.bookRight {width:530px;}
	.fullscreen {
	  overflow-y: auto;
		 box-sizing: border-box;
		 max-height: 100vh;
	}
  .bookDetails {
		padding-top:10%;
  }
	#chest {
	  max-width:250px;
	}
}

@media (max-height:400px) {
	body {
		background-size:contain;
		background-position:center bottom;
		background-color:#000;
	}
}

/* ---------- Mobile layout ---------- */
@media (max-width: 820px),(max-height:400px) {
  /* Show burger, hide desktop nav initially */
  .hamburger { display: block; }

  .header .nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transform: translateY(-100%);
    backdrop-filter: blur(6px);
    transition: transform .25s ease;
    padding: 40px 24px 24px; /* leave room for the button */
    text-align: left;
    z-index: 1000;
    background: rgba(255,255,255,0.95);
  }
	
  .header .nav.open {
    transform: translateY(0);
  }

  .header .nav ul {
    display: block;      /* stack links */
  }

  .header .nav li {
    display: block;
    border-right: 0;     /* remove desktop divider */
    border-bottom: 1px solid rgba(0,0,0,.12);
    padding: 14px 0;
    margin: 0;
  }

  .header .nav li a {
		color:#000;
  }
	
	.dark-mode .header .nav {
    background: rgba(0,0,0,0.95);
	}
  .dark-mode .header .nav li {
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
	
  .dark-mode .header .nav li a {
		color:#FFF;
  }
	
  .header .nav li:last-child {
    border-bottom: 0;
  }

  .header .nav a {
    font-size: 1.25em;
    display: block;
  }

  .books {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 60%;
    max-width: 500px;
    display: flex;
    overflow-x: auto;
    overflow-y: visible; /* No clipping */
    padding: 0 3px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0px;
    height: 500px; /* Let it match book height */
    align-items: flex-end; /* Align bottoms of books */
    z-index: 10;
  }

  .books::-webkit-scrollbar {
    display: none;
  }

	.book {
	  height: 500px;
	  border-radius: 4px 4px 0 0;
	  opacity: 0.85;
	  transform: translateY(440px); /* Show just the spine */
	  transition: transform 0.4s ease, box-shadow 0.3s ease;
	  scroll-snap-align: start;
	  position: relative;
	  cursor: pointer;
	
	  display: flex;
	  align-items: center;
	  justify-content: center;
	
	  background-clip: padding-box;
	
	  /* Simulated texture and lighting */
	  background-image:
	    linear-gradient(
	      to right,
	      rgba(255, 255, 255, 0.05),
	      rgba(255, 255, 255, 0) 30%,
	      rgba(0, 0, 0, 0.1) 70%,
	      rgba(0, 0, 0, 0.2)
	    ),
	    repeating-linear-gradient(
	      45deg,
	      rgba(255,255,255,0.015),
	      rgba(255,255,255,0.015) 2px,
	      transparent 2px,
	      transparent 4px
	    );
	
	  box-shadow:
	    0 6px 10px rgba(0, 0, 0, 0.25),
	    inset 2px 0 4px rgba(255, 255, 255, 0.15),
	    inset -2px 0 4px rgba(0, 0, 0, 0.25);
	
	}
	
.book:hover {
  transform: translateY(410px);
  opacity: 1;
  box-shadow:
    0 10px 14px rgba(0, 0, 0, 0.35),
    inset 3px 0 6px rgba(255, 255, 255, 0.2),
    inset -3px 0 6px rgba(0, 0, 0, 0.3);
}

/*
  .book {
    flex: 0 0 30px;
    height: 500px; 
    border-radius: 4px 4px 0 0;
    opacity: 0.9;
    transform: translateY(440px); 
    transition: transform 0.4s ease;
    scroll-snap-align: start;
  }

  .book:hover {
    transform: translateY(410px);
    opacity: 1;
  }
*/
  .book.lifted {
    z-index: 100;
    transform: translateY(0); /* Reveal full book */
  }

  .book span {
    display: none;
  }

	.book.lifted span {
    font-size: 1.3em;
		display:inline;
	}
	.book.lifted a i {display:none;}
	.book.lifted a u {display:none;}
	
	.book a i {display:inline; position:relative; top:-10px;}
	.book a u {display:none;}
	
		.header {height:76px; position:absolute; left:0px; top:0px; width:100%; z-index:3;}
		.header #headerBG {height:76px; width:100%; opacity:.1; position:absolute; z-index:1;}
		.header #headerBG.darkMode {background:#FFF;}
		.header #headerBG.lightMode {background:#000;}
		.header .logo {line-height:76px; width:100%; height:76px; background-size:40%; background-position:0px 10px; z-index:2; position:absolute; left:20px; top:9px;}

		.once, .darkness {
			font-size:2.5em; 
			white-space:nowrap;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  text-align: center; /* Ensures text is centered if multi-line */
		}
	
		.page-curl img {width:80px;}
		.page-curl b {
			position: absolute;
	    bottom: 8px;
	    right: -20px;
	    font-size: .6em;
			width:60px;
		}
		.page-curl-dark img {
			width:80px;
		}

		.page-curl-dark b {
	    bottom: 8px;
	    left: -15px;
	    font-size: .6em;
			width:60px;
		}

			
  .fullscreen {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 15px 60px;
    text-align: center;
    overflow-y: auto;
  }

  .bookDetails {
    flex-direction: column;
    width: 84%;
		padding:0% 8% 0% 8%;
    max-width: 100%;
    align-items: center;
  }

  .bookLeft {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .bookRight {
    width: 100%;
    margin-left: 0;
    text-align: center;
		position:relative;
  }
	
	

  .fullscreen h1 {
    font-size: 1.8em;
    margin-bottom: 0.6em;
  }

  .fullscreen p {
    font-size: 1em;
    padding: 0 10px;
    line-height: 1.4;
  }

  .buy-btn {
    width: 80%;
    max-width: 240px;
    margin-top: 20px;
  }

  .book-image {
    max-width: 65%;
		width:90%;
    height: auto;
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.5),
      inset 0 1px 2px rgba(255, 255, 255, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  }

  .fs-progress {
    font-size: 0.8em;
    bottom: 12px;
  }

	.nav-btn {
	  top: 80%;
	  width: 30px;
	  height: 30px;
	}
	
	.nav-btn::before {
	  width: 9px;
	  height: 9px;
	}
	
	.prev-btn::before {
		margin-left:0px;
	}
	
	.next-btn::before {
		margin-left:0px;
	}
	

  .dark-world {
    flex-direction: column;
    padding: 20px 15px 60px;
    text-align: center;
    overflow-y: auto;
  }

  .dark-world .bookDetails {
    flex-direction: column;
    width: 84%;
    padding: 0% 8%;
    max-width: 100%;
    align-items: center;
  }

  .dark-world .bookLeft {
    width: 100%;
    margin-bottom: 20px;
  }

  .dark-world .bookRight {
    width: 100%;
    padding-left: 0;
    text-align: center;
  }

  .dark-world h1 {
    font-size: 1.8em;
    margin-bottom: 0.6em;
  }

  .dark-world p {
    font-size: 1em;
    padding: 0 10px;
  }

  .dark-world .buy-btn {
    width: 80%;
    max-width: 240px;
    margin-top: 20px;
  }

 .dark-world {
    padding: 10px 10px 40px; /* tighter padding */
    justify-content: flex-start;
    align-items: center;
  }

  .dark-world img.book-image {
    max-width: 80%;
    height: auto;
  }

	.close-btn {
	  width: 30px;
	  height: 30px;
	}
	.book-icon {display:none;}
	.book-icon-mobile {display:block; margin-bottom:22px;}
	.book-icon-mobile img {width:60px;}

	.info-section {
	  padding: 60px 16px;
	}
	
	.info-section h2 {
	  font-size: 1.8em;
	}
	
	.info-section p {
	  font-size: 1em;
	}

.info-close-btn {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  font-size: 1.3em;
}
	
  .bio-section,
  .bio-section.reverse {
    flex-direction: column-reverse;
    gap: 20px;
  }

	.section-inner h2 {text-align:center;}
	
  .bio-img {
    max-width: 50%;
    width: 50%;
		margin:0 auto;
  }
  .bio-img2 {
    max-width: 40% !important;
    width: 40% !important;
		margin:0 auto;
	  flex-basis: auto;
  }

  .bio-text {
    text-align: center;
		margin: 0 auto;
  }

  #galleryClose {
		padding-top:5px;
		text-align:center; 
		margin: 0 auto;
		position:static;
		margin-top:20px;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 28px;
  }
	#galleryClose::before,
	#galleryClose::after {
		margin-bottom:6px;
	}
  .fullscreen-gallery img {
    max-height: 50vh; /* prevent overflow on short screens */
  }

	#chest {
	  max-width:200px;
	}
	.gallery-content-bottom {
		top:-90px;
	}
}

/* ---------- Mobile layout ---------- */
@media (max-width: 640px) {
	.header .logo {background-size:50%;}
  .books {
    max-width: 350px;
	}
	.once, .darkness {
		font-size:2em;
	}
	#chest {
	  max-width:150px;
	}
 .page-curl-dark {
	 	bottom:-3px;
	}
}

/* ---------- Mobile layout ---------- */
@media (max-width: 420px) {
	.header .logo {background-size:70%;}
  .books {
    max-width: 300px;
	}
	.once {
		font-size:2em;
	}
  .bio-img {
    max-width: 80%;
    width: 80%;
	}
  .bio-img2 {
    max-width: 60% !important;
    width: 60% !important;
	  flex-basis: auto;
	}
}