/* --- GLOBAL --- */

body {
  margin: 0;
  font-family: 'Cinzel', serif;
  background: #0b0b0d url("images/dark_texture2.png");
  background-size: cover;
  color: #e6e0f8;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  animation: fadeIn 1.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- NAVIGATION --- */

nav {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  justify-content: center;
  font-size: 1.1rem;
}

nav a {
  text-decoration: none;
  color: #c7b4ff;
  font-weight: 600;
  transition: color .3s ease;
}

nav a:hover {
  color: #8a63ff;
}

/* --- HERO SECTION --- */

.hero {
  position: relative;
  height: 70vh;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(40%) contrast(120%);
}

.hero-text {
  position: absolute;
  bottom: 20%;
  left: 10%;
  color: #f0eaff;
  text-shadow: 0 0 20px rgba(0,0,0,0.7);
}

.hero-text h1 {
  font-size: 3.5rem;
  margin: 0;
}

.hero-text p {
  font-size: 1.3rem;
  margin-top: .5rem;
}

/* --- CONTENT --- */

.content {
  position: relative;
}


.content {
  padding: 3rem 15%;
  line-height: 1.8;
}

.content h2 {
  font-size: 2rem;
  color: #d8caff;
  margin-bottom: 1rem;
}


/* --- OPTIONAL FLICKER EFFECT --- */

@keyframes candle {
  0% { opacity: 0.9; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}

.hero-text h1 {
  animation: candle 3s infinite ease-in-out;
}

.corner-skull {
  position: absolute;
  bottom: 10px;
  right: 100px;
  width: 120px;
  opacity: 0.85;
  pointer-events: none;
}



.corner-skull {
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}

.corner-skull {
  animation: fadeInSkull 2s ease;
}

@keyframes fadeInSkull {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 0.85; transform: translateY(0); }
}

/* --- ABOUT PAGE --- */

.about-body {
  background: #0b0b0d url("images/dark_texture.png");
  background-size: cover;
  color: #e6e0f8;
  font-family: 'Cormorant Garamond', serif;
}

.about-container {
  display: flex;
  gap: 3rem;
  padding: 4rem 10%;
  align-items: flex-start;
}

/* Portrait Frame */
.portrait-frame {
  width: 320px;
  height: 420px;
  border: 8px solid #2a1f2f;
  border-image: url("images/frame_border.png") 30 round;
  padding: 10px;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
}

.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text Area */
.about-text h1 {
  font-family: 'UnifrakturCook', serif;
  font-size: 3rem;
  margin-bottom: 0;
  color: #b8a0ff;
}

.about-text h2 {
  font-size: 1.4rem;
  margin-top: .3rem;
  color: #5a0a0a;
  letter-spacing: 2px;
}

.about-text p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

/* Occult Sigil Divider */
.sigil {
  width: 120px;
  height: 120px;
  margin: 2rem auto;
  background-image: url("images/sigil.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  filter: drop-shadow(0 0 10px #5a0a0a);
  animation: pulse 4s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.6; }
}

.closing-line {
  text-align: center;
  font-style: italic;
  margin-top: 2rem;
  color: #c7b4ff;
}

/* --- BOOKSHELF MASTERLIST --- */

.bookshelf {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.tome-link {
  text-decoration: none;
}

.tome-book {
  background: rgba(20, 10, 20, 0.6);
  border-left: 4px solid #5a0a0a;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}

.tome-book:hover {
  transform: translateX(10px);
  box-shadow: 0 0 25px rgba(90,10,10,0.8);
}

.tome-book h2 {
  font-family: 'Cinzel Decorative', serif;
  color: #c7b4ff;
  margin: 0;
}

.tome-icon {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #5a0a0a;
}

/* --- INDIVIDUAL TOME PAGE --- */

.tome-page {
  padding: 4rem 12%;
  background: rgba(20, 10, 20, 0.6);
  margin: 3rem auto;
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
}

.tome-page h1 {
  font-family: 'UnifrakturCook', serif;
  font-size: 3rem;
  color: #b8a0ff;
  margin-bottom: 2rem;
}

.tome-page p {
  font-size: 1.3rem;
  line-height: 1.9;
}

/* --- VAMPIRE GRIMOIRE PAGE --- */

.grimoire-body {
  background: #0a0a0c url("images/dark_texture.png");
  background-size: cover;
  color: #2a1f2f;
  font-family: 'Cormorant Garamond', serif;
}

/* Book container */
.grimoire-book {
  display: flex;
  justify-content: center;
  padding: 4rem 0;
}

/* Page itself */
.grimoire-page {
  width: 70%;
  background: url("images/abstract_flower_texture.jpg");
  background-size: cover;
  padding: 3rem 4rem;
  border: 12px solid #2a1f2f;
  box-shadow:
    0 0 40px rgba(0,0,0,0.9),
    inset 0 0 25px rgba(0,0,0,0.6);
  position: relative;
}

/* Chapter heading */
.chapter-heading {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2rem;
  text-align: center;
  color: #5a0a0a;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(90,10,10,0.6);
}

/* Chapter title */
.chapter-title {
  font-family: 'UnifrakturCook', serif;
  font-size: 3rem;
  text-align: center;
  color: #2a1f2f;
  margin-bottom: 2rem;
}

/* Text */
.page-text p {
  font-size: 1.4rem;
  line-height: 2.1rem;
  margin-bottom: 1.5rem;
  color: #1a0f1a;
}

/* Occult sigil watermark */
.page-sigil {
  width: 160px;
  height: 160px;
  background-image: url("images/sigil.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.25;
  position: absolute;
  bottom: 20px;
  right: 20px;
  filter: drop-shadow(0 0 10px #5a0a0a);
  animation: sigilPulse 6s infinite ease-in-out;
}

@keyframes sigilPulse {
  0% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.1); opacity: 0.35; }
  100% { transform: scale(1); opacity: 0.2; }
}


/* Corner Lampost */

/* Corner Lampost */
.corner-lampost {
  position: absolute;
  bottom: 10px;
  right: 100px;
  width: 120px;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
  animation: fadeInSkull 2s ease forwards;
}

@keyframes fadeInSkull {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.85;
    transform: translateY(0);
  }
}