/* ============================================
   OUR STORY & OUR DIRECTION - SCROLL ANIMATIONS
   ============================================
   
   Priority 1 - Our Story Section:
   - Smooth scrolling up/down
   - Images slide in from sides on scroll
   - All content visible, no hiding
   - Works on desktop and mobile
   
   Priority 2 - Our Direction & Principles:
   - Bubbles appear one by one on scroll down
   - Each bubble's popup slides in from side
   - Triggers only on scroll interaction
   ============================================ */

/* ============================================
   1. OUR STORY SECTION - SCROLL & ANIMATIONS
   ============================================ */

/* Enable smooth scrolling for story section */
#story {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
}

/* Ensure all content is visible */
#story .container,
#story .story-content,
#story .division-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Division cards - base state for slide animations */
#story .division-card {
    opacity: 1;
    transform: translateY(0);
}

/* Images - side slide animation setup */
#story .division-image {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
}

/* Reverse card images slide from right */
#story .division-card.reverse .division-image {
    transform: translateX(100px);
}

/* Images visible when scrolled into view */
#story .division-image.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Content text animations */
#story .division-content h4,
#story .division-content p,
#story .division-content ul {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

#story .division-content h4.visible,
#story .division-content p.visible,
#story .division-content ul.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for content */
#story .division-content h4.visible { transition-delay: 0.1s; }
#story .division-content p.visible { transition-delay: 0.2s; }
#story .division-content ul.visible { transition-delay: 0.3s; }

/* Story intro animation */
#story .story-intro {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

#story .story-intro.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Portfolio highlights heading */
#story .division-content h3 {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s ease-out;
}

#story .division-content h3.visible {
    opacity: 1;
    transform: scale(1);
}

/* Ensure images are responsive */
#story .division-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   2. OUR DIRECTION & PRINCIPLES - TIMELINE
   ============================================ */

/* Timeline container */
#story .history-section {
    overflow: visible;
}

/* Timeline items - base hidden state */
#story .timeline-item {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease-out;
}

/* Even items slide from right */
#story .timeline-item:nth-child(even) {
    transform: translateX(50px);
}

/* Timeline items visible when scrolled */
#story .timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Timeline year bubbles */
#story .timeline-year {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s ease-out;
}

#story .timeline-year.visible {
    opacity: 1;
    transform: scale(1);
}

/* Timeline content popup slide */
#story .timeline-content {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s ease-out;
}

/* Content slides from left for odd items */
#story .timeline-item:nth-child(odd) .timeline-content {
    transform: translateX(-30px);
}

/* Content visible */
#story .timeline-content.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation delays for timeline */
#story .timeline-item.visible:nth-child(1) { transition-delay: 0s; }
#story .timeline-item.visible:nth-child(2) { transition-delay: 0.15s; }
#story .timeline-item.visible:nth-child(3) { transition-delay: 0.3s; }
#story .timeline-item.visible:nth-child(4) { transition-delay: 0.45s; }
#story .timeline-item.visible:nth-child(5) { transition-delay: 0.6s; }

#story .timeline-year.visible { transition-delay: 0.1s; }
#story .timeline-content.visible { transition-delay: 0.2s; }

/* ============================================
   TIMELINE NODES CENTERED ON LINE
   ============================================ */

/* Position timeline items as relative for absolute positioning of nodes */
#story .timeline-item {
    position: relative !important;
}

/* Center circular nodes exactly on the vertical line */
#story .timeline-year {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    margin: 0 !important;
}

/* Move Vision button upward more */
#story .timeline-item:first-child .timeline-year {
    top: 30% !important;
    transform: translate(-50%, -50%) !important;
}

/* Ensure content boxes stay on their respective sides */
#story .timeline-item:nth-child(odd) .timeline-content {
    margin-right: auto !important;
    margin-left: 0 !important;
}

#story .timeline-item:nth-child(even) .timeline-content {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* History section heading */
#story .history-section h3 {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s ease-out;
}

#story .history-section h3.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   3. MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Story section mobile */
    #story .division-card {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    #story .division-card.reverse {
        direction: ltr !important;
    }
    
    /* Reduce slide distance on mobile */
    #story .division-image {
        transform: translateX(-50px);
    }
    
    #story .division-card.reverse .division-image {
        transform: translateX(50px);
    }
    
    /* Timeline mobile adjustments */
    #story .timeline-item {
        transform: translateX(-30px);
    }
    
    #story .timeline-item:nth-child(even) {
        transform: translateX(30px);
    }
    
    #story .timeline-content {
        transform: translateX(20px);
    }
    
    #story .timeline-item:nth-child(odd) .timeline-content {
        transform: translateX(-20px);
    }
}

/* ============================================
   4. PERFORMANCE OPTIMIZATIONS
   ============================================ */

#story .division-image,
#story .timeline-item,
#story .timeline-year,
#story .timeline-content,
#story .story-intro,
#story .division-content h4,
#story .division-content p,
#story .division-content ul {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Ensure content is accessible even if JS fails */
#story .division-image,
#story .timeline-item,
#story .timeline-year,
#story .timeline-content,
#story .story-intro,
#story .division-content h4,
#story .division-content p,
#story .division-content ul,
#story .division-content h3,
#story .history-section h3 {
    opacity: 1;
}

/* Animation active state - only animate when JS adds visible class */
#story.js-animations-enabled .division-image:not(.visible),
#story.js-animations-enabled .timeline-item:not(.visible),
#story.js-animations-enabled .timeline-year:not(.visible),
#story.js-animations-enabled .timeline-content:not(.visible),
#story.js-animations-enabled .story-intro:not(.visible),
#story.js-animations-enabled .division-content h4:not(.visible),
#story.js-animations-enabled .division-content p:not(.visible),
#story.js-animations-enabled .division-content ul:not(.visible),
#story.js-animations-enabled .division-content h3:not(.visible),
#story.js-animations-enabled .history-section h3:not(.visible) {
    opacity: 0;
}