/* Additional Story Section Enhancements */

/* Story Section Fallback Styles */
.story-section * {
    box-sizing: border-box;
}

/* Ensure proper layout for story header */
.story-header-content {
    opacity: 1;
    visibility: visible;
    width: 100%;
    max-width: 100%;
}

/* Timeline connector animation */
.story-timeline::before {
    animation: drawLine 2s ease-out forwards;
    animation-delay: 1.5s;
    opacity: 0;
}

@keyframes drawLine {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 100%;
    }
}

/* Enhanced story item hover effects */
.story-item:hover .story-content {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(179, 139, 109, 0.3);
}

.story-item:hover .date-circle {
    background: linear-gradient(135deg, #d4af37, #b38b6d);
    box-shadow: 
        0 15px 40px rgba(212, 175, 55, 0.4),
        0 0 0 6px rgba(255, 255, 255, 0.9),
        0 0 0 10px rgba(212, 175, 55, 0.2);
}

/* Loading state for story items */
.story-item-animate:not(.animate-in) {
    pointer-events: none;
}

.story-item-animate.animate-in {
    pointer-events: auto;
}

/* Smooth scrolling for story section */
.story-section {
    scroll-behavior: smooth;
}

/* Enhanced text readability */
.story-content-title {
    text-shadow: 1px 1px 2px rgba(179, 139, 109, 0.1);
}

.story-content-text {
    text-shadow: 0.5px 0.5px 1px rgba(107, 91, 115, 0.1);
}

/* Animation timing refinements */
.story-header-animate,
.story-title-animate,
.story-subtitle-animate,
.story-ornament-animate,
.story-timeline-animate,
.story-item-animate {
    will-change: transform, opacity;
}

.story-header-animate.animate-in,
.story-title-animate.animate-in,
.story-subtitle-animate.animate-in,
.story-ornament-animate.animate-in,
.story-timeline-animate.animate-in,
.story-item-animate.animate-in {
    will-change: auto;
}

/* Prevent layout shift during animations */
.story-section .container {
    min-height: 600px;
}

/* Enhanced mobile experience */
@media (max-width: 480px) {
    .story-title {
        font-size: 2.5rem;
    }
    
    .story-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .story-content-inner {
        padding: 1.5rem;
    }
    
    .date-circle {
        width: 60px;
        height: 60px;
        font-size: 0.7rem;
    }
    
    .story-item {
        padding-left: 80px;
    }
    
    .story-timeline::before {
        left: 30px;
    }
}