/* ═══════════════════════════════════════════════════════════════════════════
   View Transitions — Card interactions and morphing elements
   The core @view-transition rules, overlay styles, and keyframes
   are in style.css to keep everything in one file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Result card hover/press with transition ───────────────────────────── */
.result-item {
    view-transition-name: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.result-item:active {
    transform: scale(0.99);
}

/* ─── Featured card transitions ──────────────────────────────────────────── */
.featured-card {
    view-transition-name: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.featured-card:active {
    transform: scale(0.98);
}

/* ─── Category card transitions ──────────────────────────────────────────── */
.category-card {
    view-transition-name: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.category-card:active {
    transform: scale(0.98);
}

/* ─── Visited result highlight ───────────────────────────────────────────── */
.result-item.result-visited {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

/* ─── Morph elements for cross-page transitions ──────────────────────────── */
.sidebar {
    view-transition-name: sidebar;
}

.classification-bar {
    view-transition-name: topbar;
}

.hero-section {
    view-transition-name: hero;
}

.search-results {
    view-transition-name: search-results;
}

.content {
    view-transition-name: content;
}

/* ─── Mobile overlay adjustments ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .reader-overlay-content {
        padding: 0 8px;
    }
}