/* Story Section - CSS Management */
/* This CSS supplements the working Tailwind classes in HTML */

/* Story background animated image */
.story-background-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.story-background-image img {
    position: absolute;
    left: -10%;
    top: 50%;
    height: 80%;
    width: auto;
    object-fit: contain;
    opacity: 0;
    transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.4));
}

/* Story active animation */
#story.active .story-background-image img {
    transform: translateY(-50%) translateX(30%);
    opacity: 0.2;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

/* Story scroll-out animation */
#story.scroll-out .story-background-image img {
    transform: translateY(-50%) translateX(-150%);
    opacity: 0;
}

/* Mobile responsive adjustments for story */
@media (max-width: 768px) {
    /* Mobile story animated image */
    .story-background-image img {
        left: -40%;
        height: 70%;
        transform: translateY(-50%) translateX(-100%);
        transition: all 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    
    /* Mobile active animation */
    #story.active .story-background-image img {
        transform: translateY(-50%) translateX(20%);
        opacity: 0.08;
    }
    
    /* Mobile scroll-out animation */
    #story.scroll-out .story-background-image img {
        transform: translateY(-50%) translateX(-120%);
        opacity: 0;
    }
}

/* Ensure proper text contrast on content box */
#story .bg-white\/80 {
    background: rgba(255, 255, 255, 0.9) !important;
    position: relative;
    overflow: hidden;
}

/* Performance optimizations */
.story-background-image * {
    will-change: transform;
    backface-visibility: hidden;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .story-background-image img {
        opacity: 0.2 !important;
    }
    
    #story.active .story-background-image img {
        opacity: 0.15 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .story-background-image img {
        animation: none;
        transition: none;
    }
    
    #story.active .story-background-image img,
    #story.scroll-out .story-background-image img {
        transition: opacity 0.3s ease;
    }
}