.font-serif { font-family: 'Merriweather', serif; }

.animate-fade-in { animation: fadeIn 0.8s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
.animate-slide-down { animation: slideDown 0.3s ease-out; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-bounce-short { animation: bounceShort 0.5s infinite alternate; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes bounceShort { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -5px); } }

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d6bbfb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9333ea; }

/* Interactive text styles */
.interactive-word {
    position: relative;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: all 0.2s;
}
.interactive-word:hover {
    background-color: #fde68a; /* amber-200 */
}
.interactive-word.active {
    background-color: #fcd34d; /* amber-300 */
    color: #581c87; /* purple-900 */
}
.tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background-color: #111827;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: bold;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.interactive-word.active .tooltip {
    visibility: visible;
    animation: bounceShort 0.5s infinite alternate;
}
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
}

.story-text p {
  line-height: 1.75;
}

.story-text em {
  font-style: italic;
  color: #fbbf24; /* amber accent */
}

audio {
  height: 36px;
}