/* index.css - Custom styles for Kniha Vzpomínek */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500&display=swap');

/* Base Styles */
body {
  font-family: 'Lora', Georgia, serif;
  background-color: #0b0c10;
  color: #f5f2eb;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0b0c10;
}
::-webkit-scrollbar-thumb {
  background: #1f2833;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #45f3ff;
}

/* 3D Book Layout */
.book-viewport {
  perspective: 1800px;
  perspective-origin: center center;
}

.book {
  position: relative;
  width: 1160px;
  height: 700px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
}

/* Page Common Styles */
.page {
  position: absolute;
  top: 0;
  width: 580px; /* Exactly half of book width */
  height: 100%;
  background: #f5f2eb;
  color: #1a1a1a;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
  transition: transform 2.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 2.4s ease;
}

/* Left Page Base (Parchment background on left) */
.page-left-base {
  left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: linear-gradient(to right, #e8e3d5 0%, #f5f2eb 10%, #faf8f5 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Right Page (Contains Poem) */
.page-right {
  right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background: linear-gradient(to left, #e8e3d5 0%, #f5f2eb 10%, #faf8f5 100%);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* Flipping Cover Page */
.page-cover-flip {
  right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  transform-origin: left center;
  z-index: 5;
  cursor: pointer;
}

/* When the book is open, rotate the cover 180deg to the left */
.book-open .page-cover-flip {
  transform: rotateY(-180deg);
}

/* 3D Sides of Flipping Page */
.page-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front Side of Cover (Closed Book Cover) */
.page-side-front {
  z-index: 2;
  transform: rotateY(0deg);
  background: linear-gradient(135deg, #2b1f1d 0%, #1f1412 100%);
  color: #dfc15d;
  border: 4px double #dfc15d;
  border-radius: 4px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

/* Back Side of Cover (Becomes Left Page inside - displays Image) */
.page-side-back {
  transform: rotateY(180deg);
  background: #f5f2eb;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* Book Spine depth and shadow */
.book-spine {
  position: absolute;
  left: 579px;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

/* Page textures & visual styling */
.paper-texture {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.poem-container {
  scrollbar-width: none;
}
.poem-container::-webkit-scrollbar {
  display: none;
}

/* Grayscale Image Effect with transition */
.poem-image {
  transition: filter 2.5s ease-in-out;
  filter: grayscale(0%) brightness(100%) contrast(100%) sepia(0%);
}

.poem-image-gray {
  filter: grayscale(100%) brightness(85%) contrast(105%) sepia(10%);
}

/* Stacked pages shadow effect to give thickness */
.book::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 6px;
  right: 6px;
  background: #d4cebe;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  z-index: -1;
}

.book::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 12px;
  right: 12px;
  background: #c0b9a6;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  z-index: -2;
}

/* Ambient glowing backdrops */
.ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(223, 193, 93, 0.08) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* Custom fade-in logic for verses */
.verse-line {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.book-open .verse-line-active {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Responsiveness Styles */
@media (max-width: 960px) {
  .book {
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: auto;
  }
  
  .page {
    position: relative;
    width: 100% !important;
    height: auto;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    border-radius: 8px !important;
    margin-bottom: 20px;
  }
  
  .page-left-base {
    display: none; /* Hide base page on mobile */
  }
  
  .page-cover-flip {
    cursor: default;
    transform-origin: center center;
  }
  
  /* Disable 3D flip on mobile, instead do a beautiful vertical card layout */
  .book-open .page-cover-flip {
    transform: none;
    display: none; /* Hide cover once loaded */
  }
  
  .book-spine {
    display: none;
  }
  
  .book::before, .book::after {
    display: none;
  }
}