/* ==========================================================================
   src/styles/bible-reader.css
   Scripture Typography, Verse Items, Verse Badges, Highlights, Search Marks,
   and Context-Aware RTL Book/Chapter/Verse Transitions
   ========================================================================== */

.scripture-text {
  font-family: var(--reading-font);
  font-size: var(--reading-size);
  line-height: var(--reading-line-height);
  color: var(--text-primary);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  word-spacing: 0.04em;
  transition: font-size var(--motion-micro) var(--ease-standard),
              line-height var(--motion-micro) var(--ease-standard);
}

.reading-container {
  max-width: var(--reading-max-width);
  margin-inline: auto;
  width: 100%;
  transition: max-width var(--motion-normal) var(--ease-out-smooth);
}

/* Context-Aware RTL Transitions for Book & Chapter Navigation */
@keyframes chapterEnterNextRTL {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes chapterEnterPrevRTL {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes chapterEnterBookSwitch {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chapter-transition-next {
  animation: chapterEnterNextRTL var(--motion-page) var(--ease-out-smooth);
}

.chapter-transition-prev {
  animation: chapterEnterPrevRTL var(--motion-page) var(--ease-out-smooth);
}

.chapter-transition-book {
  animation: chapterEnterBookSwitch var(--motion-page) var(--ease-out-smooth);
}

.verse-item {
  position: relative;
  transition: background-color var(--motion-micro) var(--ease-standard),
              outline-color var(--motion-micro) var(--ease-standard);
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
}

.verse-item.mode-block {
  display: block;
  margin-bottom: var(--reading-para-gap);
  padding: 6px 10px;
}

.verse-item.mode-inline {
  display: inline;
  padding: 2px 4px;
}

@media (hover: hover) and (pointer: fine) {
  .verse-item:hover {
    background-color: var(--bg-hover);
  }
}

.verse-item.selected {
  background-color: var(--accent-soft);
  outline: 1px dashed var(--accent);
}

@keyframes targetVersePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 79, 53, 0.35);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(107, 79, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(107, 79, 53, 0);
  }
}

.verse-item.verse-target-pulse {
  animation: targetVersePulse 900ms var(--ease-out-smooth);
}

.verse-num-badge {
  font-family: var(--ui-font);
  font-size: 0.65em;
  font-weight: 600;
  color: var(--verse-num);
  margin-inline-end: 6px;
  margin-inline-start: 4px;
  vertical-align: super;
  user-select: none;
  display: inline-block;
  line-height: 1;
}

.hide-verse-nums .verse-num-badge {
  display: none !important;
}

.hl-yellow { background-color: var(--hl-yellow) !important; }
.hl-green  { background-color: var(--hl-green) !important; }
.hl-blue   { background-color: var(--hl-blue) !important; }
.hl-rose   { background-color: var(--hl-rose) !important; }

mark.search-match {
  background-color: var(--hl-yellow);
  color: var(--text-primary);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
}

/* Staggered card entrance for search results and saved items */
@keyframes listItemFadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-list-card {
  animation: listItemFadeIn var(--motion-normal) var(--ease-out-smooth) both;
}