/* =======================
   STORYBOOK COMMON STYLES
   ======================= */

.storybook { 
  position: relative;
  max-width: 900px;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.95);
  border: 4px solid #3d405b;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
  font-family: "Comic Sans MS", "Poppins", sans-serif;
  color: #2f2f2f;
  overflow: hidden;
  z-index: 10;
}


.background-layer {
  position: absolute;
  inset: 0;
   background: url('/wp-content/uploads/2025/10/background5.jpg') center/cover no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -2;
  animation: panBg 60s linear infinite alternate;
  will-change: transform;
}


@keyframes panBg { 
  0% { background-position: center top; } 
  100% { background-position: center bottom; } 
}

.moon { 
  position: absolute; 
  top: 30px; 
  right: 80px; 
  font-size: 3rem; 
  animation: glowMoon 4s ease-in-out infinite alternate; 
}
@keyframes glowMoon { 
  0% { opacity: 0.8; transform: scale(1); } 
  100% { opacity: 1; transform: scale(1.1); } 
}

.star { 
  position: absolute; 
  font-size: 1.2rem; 
  color: gold; 
  animation: twinkle 3s infinite alternate; 
}
.star1 { top: 60px; left: 100px; animation-delay: 0s; }
.star2 { top: 90px; left: 200px; animation-delay: 1s; }
.star3 { top: 120px; right: 150px; animation-delay: 2s; }
@keyframes twinkle { 
  0% { opacity: 0.4; transform: scale(1); } 
  100% { opacity: 1; transform: scale(1.3); } 
}

.tiger { 
  position: absolute; 
  bottom: 50px; 
  left: 60px; 
  font-size: 2.5rem; 
  animation: moveTiger 12s linear infinite; 
}
.jackal { 
  position: absolute; 
  bottom: 50px; 
  right: 80px; 
  font-size: 2rem; 
  animation: moveJackal 10s linear infinite alternate; 
}
@keyframes moveTiger { 
  0% { transform: translateX(0); } 
  100% { transform: translateX(700px); } 
}
@keyframes moveJackal { 
  0% { transform: translateX(0); } 
  100% { transform: translateX(-150px); } 
}

.story-header h1 { 
  text-align: center; 
  color: #264653; 
  font-size: 2.4rem; 
  animation: bounce 2s infinite alternate; 
}
@keyframes bounce { 
  from { transform: translateY(0); } 
  to { transform: translateY(-8px); } 
}

.story-title{

  font-weight: bold;
  font-size: 2.5rem;
  text-align: center;
  color: #e5270a;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.story-subtitle { 
  text-align: center; 
  color: #555; 
  margin-bottom: 1.5rem; 
  font-size: 1.1rem; 
}

.img-row { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 1rem; 
}
.char-img { 
  max-width: 80%; 
  border-radius: 25px; 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); 
  transition: transform 0.4s ease; 
}
.char-img:hover { transform: scale(1.05); }

.story-content p { 
  background: rgba(255, 255, 255, 0.85); 
  border-radius: 20px; 
  margin: 1rem 0; 
  padding: 1rem 1.5rem; 
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); 
  font-size: 1.05rem; 
  line-height: 1.6; 
}

.story-moral { 
  background: linear-gradient(135deg, #ffcc80, #ffe0b2); 
  padding: 1.5rem; 
  border-radius: 25px; 
  text-align: center; 
  margin-top: 2rem; 
  box-shadow: 0 5px 15px rgba(255, 204, 128, 0.3); 
}
.story-moral h2 { 
  color: #e65100; 
  margin-bottom: 0.5rem; 
  font-size: 1.4rem; 
}

.story-highlight {
  background: #fff8d6 !important;
  border-radius: 16px;
  transform: scale(1.02);
  box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.15),
      0 0 20px rgba(255, 215, 96, 0.6),
      inset 0 0 10px rgba(255, 240, 150, 0.7) !important;
  transition: all 0.25s ease;
}


.btn { 
  padding: 0.8rem 1.4rem; 
  border: none; 
  border-radius: 25px; 
  font-size: 1rem; 
  color: #fff; 
  margin: 0.4rem; 
  cursor: pointer; 
  transition: 0.3s; 
}
.read-btn { background: #1d3557; }
.read-btn:hover { background: #457b9d; transform: scale(1.08); }
.music-btn { background: #2a9d8f; }
.music-btn:hover { background: #21867a; transform: scale(1.08); }

.story-footer {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  z-index: 9999;
}