/* Custom styling for Bento Grid Homepage Refactoring */

/* WeChat QR Code hover popover */
.wechat-tooltip {
    bottom: calc(100% + 12px);
    width: 146px;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wechat-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #ffffff;
}

.wechat-wrapper:hover .wechat-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

/* Category Tab button styling overrides */
.tab-btn {
    background-color: transparent;
    color: #586e75; /* solarized-content */
}

.tab-btn:hover {
    color: #268bd2; /* solarized-blue */
}

.tab-btn.active {
    background-color: #268bd2 !important; /* solarized-blue */
    color: #ffffff !important;
}

/* Bento card entry slide-up animation */
.bento-card, .bookmark-card, article {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Animation Delays */
.grid > div:nth-child(1) { animation-delay: 0.05s; }
.grid > div:nth-child(2) { animation-delay: 0.1s; }
.grid > div:nth-child(3) { animation-delay: 0.15s; }
.grid > div:nth-child(4) { animation-delay: 0.2s; }

/* Custom Layout control helpers */
.text-3xs { font-size: 0.65rem; }
.text-4xs { font-size: 0.7rem; }

/* Animations definitions */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}