/* Post Highlight/Glow Effect - For Direct Links */

.post.highlighted {
    animation: postGlow 2s ease-in-out;
    border-color: rgba(76, 175, 80, 0.6) !important;
    box-shadow: 
        0 0 30px rgba(76, 175, 80, 0.4),
        0 0 60px rgba(76, 175, 80, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(76, 175, 80, 0.1) !important;
}

@keyframes postGlow {
    0% {
        box-shadow: 
            0 0 0 rgba(76, 175, 80, 0),
            0 4px 20px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.06);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(76, 175, 80, 0.6),
            0 0 80px rgba(76, 175, 80, 0.3),
            0 4px 20px rgba(0, 0, 0, 0.3),
            inset 0 0 30px rgba(76, 175, 80, 0.15);
        border-color: rgba(76, 175, 80, 0.8);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(76, 175, 80, 0.3),
            0 0 40px rgba(76, 175, 80, 0.15),
            0 4px 20px rgba(0, 0, 0, 0.3),
            inset 0 0 15px rgba(76, 175, 80, 0.08);
        border-color: rgba(76, 175, 80, 0.4);
    }
}

/* Pulse effect that continues after initial glow */
.post.highlighted::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, 
        rgba(76, 175, 80, 0.2), 
        rgba(76, 175, 80, 0.05),
        rgba(76, 175, 80, 0.2)
    );
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.02);
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Add padding when scrolling to highlighted post */
.post.highlighted {
    scroll-margin-top: 80px;
}