/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */

/* Post Update Notification Badge */
.post-update-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background-color: #ff4757;
    border-radius: 50%;
    border: 2px solid var(--color-background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 10;
    animation: badge-pulse 2s ease-in-out infinite;
}

/* Pulse animation for the notification badge */
@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

/* Optional: Add subtle highlight to new post cards */
.post-card--new {
    background-color: var(--color-background-300);
    animation: fade-highlight 3s ease-out forwards;
}

@keyframes fade-highlight {
    from {
        background-color: rgba(255, 71, 87, 0.08);
    }
    to {
        background-color: transparent;
    }
}

/* Slide in animation for new posts */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}