body { background: #ffffff; }
html {
    scroll-behavior: smooth;
}

/* Notion-like hover effects (use primary color palette) */
.notion-link {
    color: inherit;
    border-bottom: 1px solid rgba(71, 81, 235, 0.12);
    transition: border-color 0.12s ease-in, color 0.12s ease-in;
}

.notion-link:hover {
    border-bottom-color: rgba(49, 57, 166, 0.9); /* primary-dark */
}

/* Fade in animation */
@keyframes fade-in {
    from { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Fade out animation */
@keyframes fade-out {
    from { 
        opacity: 1; 
        transform: translateY(0); 
    }
    to { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

.animate-fade-out {
    animation: fade-out 0.3s ease-out forwards;
}

/* Card hover effect */
.article-card {
    transition: all 0.2s ease-out;
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Search card styles (visuals controlled via Tailwind utility classes for color consistency) */
.search-card {
    border-radius: 12px;
    padding: 16px;
    /* soft white glow + soft dark shadow for subtle elevation */
    box-shadow: 0 6px 18px rgba(255,255,255,0.06), 0 8px 22px rgba(2,6,23,0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    transform: translateZ(0);
}

.search-card:hover {
    transform: translateY(-6px);
    /* brighter white glow on hover for emphasis */
    box-shadow: 0 16px 60px rgba(255,255,255,0.28), 0 26px 70px rgba(2,6,23,0.12);
}

/* Search input styles handled by Tailwind utility classes */

.search-chips { margin-top: 12px; display:flex; gap:8px; flex-wrap:wrap }
.search-chip { background: white; border: 1px solid rgba(15,23,42,0.06); padding:6px 10px; border-radius:9999px; font-size:0.875rem; color:#0f172a; cursor:pointer; transition:all 0.12s; position:relative }
.search-chip:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(2,6,23,0.06) }

/* Tooltip styles */
.search-chip[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: tooltip-fade-in 0.2s ease-out;
    pointer-events: none;
}

.search-chip[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 6px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.95);
    z-index: 1000;
    animation: tooltip-fade-in 0.2s ease-out;
    pointer-events: none;
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px);
    }
}

/* Scroll indicator dots */
.scroll-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.scroll-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.3s ease;
}

.scroll-dot.active {
    background: #4751EB;
    width: 24px;
    border-radius: 4px;
}