/* Hover background image effect for timeline projects */

.timeline__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    border-radius: var(--radius-xl);
}

.timeline__bg-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.75) 20%,
        rgba(255, 255, 255, 0.60) 40%,
        rgba(255, 255, 255, 0.40) 60%,
        rgba(255, 255, 255, 0.20) 80%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border-radius: var(--radius-xl);
}

.timeline__content:hover .timeline__bg-image,
.timeline__content.scrolled-in .timeline__bg-image {
    opacity: 1;
}

/* Ensure content stays above background */
.timeline__content > *:not(.timeline__bg-image) {
    position: relative;
    z-index: 10;
}

/* Base transition for smooth font changes */
.timeline__description {
    transition: font-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                text-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Improve visibility of timeline descriptions only when image is revealed */
.timeline__content:hover .timeline__description,
.timeline__content.scrolled-in .timeline__description {
    font-weight: 500 !important;
    font-size: 1.05em !important;
    color: #2c3e50 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important;
}