/* =========================================
   Scroll Story Experience (Phase E.3G - Cinematic Entry)
   ========================================= */

.story-scroll-section {
    position: relative;
    color: #fff;
    width: 100%;
    overflow: hidden;
    height: auto;
    padding-top: 50vh;
    /* Cinematic Buffer */
}

/* Scroll Rail - The Window */
.story-scroll-rail {
    height: 100vh;
    position: relative;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: auto;
    /* Allow scroll chaining to body */
    /* Create scroll usage of 500vh total via pseudo element to allow sticky sibling */
}

.story-scroll-rail::after {
    content: "";
    display: block;
    height: 400vh;
    /* 400vh + 100vh container = 500vh total scroll */
    pointer-events: none;
}

/* Sticky Container - Pins to top of Rail */
.story-sticky-container {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 5;
}

/* Background Visual Layer */
.story-visual-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.story-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.story-visual.active {
    opacity: 1;
}

/* Visual Overlay */
.story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.2) 30%,
            rgba(0, 0, 0, 0.2) 70%,
            rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Text Content Layer */
.story-content-layer {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    padding: 2rem;
    width: 100%;
}

/* Individual Content Blocks (Chapters) */
.story-chapter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(30px);
    /* Soft rise effect */
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.8s;
    pointer-events: none;
    padding: 0 1rem;
}

.story-chapter.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) translateY(0);
    transition-delay: 0.4s;
    /* Pacing: Visual leads, thought follows */
}

.story-chapter h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.story-chapter p {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    margin: 0 auto;
}

/* Ghost Scroll Sections (The invisible parts that create height) */
/* This is placed AFTER the sticky container in the HTML flow usually, 
   but with the sticky method, we put triggers inside the parent but absolutely positioned or just stacked?
   Actually, the standard sticky pattern:
   <section class="scroll-section"> (Height = 500vh)
     <div class="sticky-wrapper"> (Sticky, Top 0, Height 100vh)
        ...visuals...
     </div>
   </section>
   Then we just detect scroll progress of the main section.
*/

/* Scroll Trigger Blocks - Invisible height providers for scroll segmentation */
.story-scroll-trigger {
    height: 100vh;
    width: 100%;
    pointer-events: none;
    background: transparent;
    /* Each trigger represents one chapter's scroll segment */
}

/* Progress Indicator (Optional but helpful) */
.story-progress {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.story-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: background 0.3s;
}

.story-dot.active {
    background: #fff;
}

/* CTA in Final Chapter */
.story-cta {
    margin-top: 2rem;
    pointer-events: auto;
    /* Enable clicking */
}

/* Mobile Refinements (Phase C.3) */
@media (max-width: 480px) {
    .story-chapter h2 {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }

    .story-chapter p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .story-content-layer {
        padding: 1rem;
    }
}