/**
 * Simple Horizontal Scroll for Book CPT
 * No tricks, no hacks - just the essentials
 */

/* Container - pins when scrolling */
#title_scroll_container
{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* Note: ScrollTrigger's pin-spacer controls buffer space via dynamic 'end' parameter in book.js */
    /* No manual margin-bottom needed - pin-spacer height is auto-calculated */
}


/* CRITICAL: Disable transitions - prevents popping */
#title_scroll_container,
#title_scroll_container *,
.horizontal-scroll-wrapper,
.horizontal-scroll-wrapper *
{
    transition: none !important;
}

/* Wrapper - holds 3 sections horizontally */
.horizontal-scroll-wrapper
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    width: 300vw;
    padding-top: clamp(40px, 8vh, 120px); /* Responsive: saves 34-48px on short screens */

}

/* Panels fill viewport width */
#book-cover, #book-video, #book-copy
{
    width: 100vw;
}

#book-video
{
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Animation wrapper - contains placeholder and canvas */
#book-animation-wrapper
{
    position: relative;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
}

#book-animation-placeholder
{
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

#book-animation
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Legacy video support (for rollback) */
#book-video video
{
    width: 100%;
    object-fit: contain;
}

#sample-images{
    opacity: 0;
    height: 1px;
    margin:0;
}

/* Short screen optimization - prevents CTA clipping on 1920x1080, 1440x900, etc. */
@media (min-width: 769px) and (max-height: 1100px)
{
    .horizontal-scroll-wrapper
    {
        align-items: flex-start; /* Anchor to top instead of center - prevents bottom clipping */
        padding-top: clamp(30px, 5vh, 80px); /* Further reduce padding on short screens */
        padding-bottom: 40px; /* Add bottom breathing room for CTA visibility */
    }

    /* Safety: ensure panels don't overflow even with internal padding */
    #book-cover, #book-video, #book-copy
    {
        max-height: 95vh; /* Leave room for wrapper padding */
    }
}

/* Mobile: stack vertically */
@media (max-width: 4096px)
{
    #title_scroll_container{
        position: static;
        height: fit-content;
        margin-bottom: 0;
    }
    .horizontal-scroll-wrapper
    {
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    #book-cover,
    #book-video,
    #book-copy
    {
        width: 100%;
        height: fit-content;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Hide horizontal scroll sections, show grid */
    #book-copy,
    #book-video
    {
        display: none !important;
    }
    #sample-images{
        opacity:1;
        height: fit-content;
        margin: 60px 0 60px 0;
    }
}