/* General Styling & Scrolling */
html { 
    scroll-behavior: smooth; 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9; /* slate-100 */
}

/* Gradient Overlay for Hero Section */
.ai-gradient-overlay { 
    background: linear-gradient(135deg, rgba(107, 33, 168, 0.85), rgba(79, 70, 229, 0.9), rgba(225, 29, 72, 0.8)); 
}

/* Modal Transitions */
.modal { 
    transition: opacity 0.25s ease; 
}

.modal-content { 
    transition: transform 0.25s ease, opacity 0.25s ease; 
}

.modal.opacity-0 .modal-content { 
    transform: scale(0.95); 
    opacity: 0; 
}

/* Spinner Animations */
.spinner { 
    border-color: transparent; 
    border-top-color: white; 
    animation: spin 1s linear infinite; 
}

.image-spinner { 
    border-color: #a78bfa; 
    border-top-color: #6d28d9; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    to { 
        transform: rotate(360deg); 
    } 
}

/* Card Hover Effects */
.feature-card-btn, .link-card, .youtube-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card-btn:hover, .link-card:hover, .youtube-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Mood Buttons */
.mood-button {
    transition: all 0.2s ease-in-out;
}

.mood-button:hover {
    transform: scale(1.05);
}

/* Fonts & Textures */
.font-lora { 
    font-family: 'Lora', serif; 
}

.parchment { 
    background-color: #FDFBF5; 
}

/* Bible Reader Hover Effects */
.verse-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: background-color 0.2s;
}

.verse-line:hover {
    background-color: rgba(233, 213, 255, 0.4); /* Light purple on hover */
}

.verse-actions {
    opacity: 0;
    transition: opacity 0.2s;
}

.verse-line:hover .verse-actions {
    opacity: 1;
}

/* Dropdown Styles */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.dropdown-menu {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}