/* =============================================================================
   pipeline-scroll.css — the scrollytelling layout for pipeline.html only.
   A copy of scrollmap.css (which 22map.html still uses, unchanged) with the
   background maps reworked: always a full screen tall, centered, crossfading.
   ============================================================================= */


body{
    overflow-x:hidden;
}
.scroll-container{
    display:block;
}

/*background/foreground*/
/* -----------------------------------------------------------------------------
   The background maps. Each section's maps are stacked in one box that sticks
   to the screen while the text scrolls over it; js/pipeline-scroll.js gives
   the map for the current text box the class "on", and it fades in over the
   one before (opacity, so every map stays loaded and ready: no blank flash).

   The box is always one screen tall, and each map is fitted whole and centered
   in it, with the page's dark background in any space left over.
   ----------------------------------------------------------------------------- */
.background-item{
    width:100%;
    height:100vh;
    z-index:0;
    position:sticky;
    display:block;
    top:0;
    margin-bottom:20%;
}
.background-item > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;          /* the whole map, centered; "cover" would fill the screen but crop it */
    opacity:0;
    transition:opacity .6s ease; /* the crossfade between maps */
}
.background-item > img.on{
    opacity:1;
}

/* "tall" sections (the opening one): the maps are long, top-aligned and the full
   width of the screen. Only the top shows while the text scrolls; once the
   section ends, the last map scrolls up into view in full (the script leaves
   room for it below the section). */
.background-item.tall > img{
    bottom:auto;
    height:auto;
    object-fit:initial;
}

/* style.css makes the opening section's box 100vw wide, which counts the
   scrollbar too and let the page scroll sideways a few pixels. The page's
   width (100%) is the same thing without the scrollbar. This file loads
   after style.css, so it wins; style.css stays as it is for the other pages. */
.background-item.pipeline{
    width:100% !important;
}
/* Bootstrap gives every .row -12px side margins (meant for inside a
   .container, which this page doesn't use), so each text row stuck out 12px
   past the right edge and the page could scroll sideways. */
.row{
    margin-left:0;
    margin-right:0;
}

@media (prefers-reduced-motion: reduce){
    .background-item > img{ transition:none; }
    .fade-in{ animation:none; }
}

.foreground-item{
    position:relative;
    padding-bottom:50%;
}
/*positioning*/
.center, .center-wide{
    text-align:center;
}
.half-width{
    width:50%;
}
.full-width, .fit{
    width:100%;
}
.half-height{
    height:50%;
}
.full-height, .fill{
    height:100%;
}

/*title*/
.title{
    height:100vh;   
}
.title h1{
    font-size:100px;
}

/*bottom margin styles*/
.row{
    margin-bottom:30%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
}

/*smaller bottom margin for rows in the foreground*/
.foreground-item > .row{
    margin-bottom:60%;
}
.no-margin{
    margin-bottom:0 !important;
}
.lg-margin{
    margin-bottom:100% !important;
}
.sm-margin{
    margin-bottom:25% !important;
}

/*block styles*/
.rounded{
    border-radius:10%;
}
.background-white{
    background-color:white;
    padding:20px;
}
.background-transparent{
    background-color:rgba(255,255,255,0.8);
    padding:20px;
}

/*credits section*/
.credits{
    text-align:left;
    margin-bottom:50px;
}
.credits > p{
    margin-bottom:5px;
}

/*interactions*/
.no-event{
    pointer-events:none;
}

/*temp*/
#map, #background-map, .full-screen{
    height:100vh;
    width:100vw;
}

/*animation*/
.fade-in{
    animation:in 2s; 
}
@keyframes in {
    from {opacity: 0;}
    to {opacity: 1;} 
 } 


@media screen and (min-width: 1200px) {
    .center{
        flex: 0 0 auto;
        margin-left:25%;
        width:50% !important;
    }
    .center-wide{
        flex: 0 0 auto;
        margin-left:15%;
        width:70% !important;
    }
    .left{
        flex: 0 0 auto;
        margin-left: 8.33333333%;
        width: 41.66666667% !important;
    }
    .right{
        flex: 0 0 auto;
        margin-left:50%;
        width: 41.66666667% !important;
    }
    .right-inline{
        width: 41.66666667% !important;
    }
}
    @media screen and (min-width: 720px) and (max-width: 1199px) {
    .center{
        flex: 0 0 auto;
        margin-left: 16.66666667%;
        width: 66.66666667% !important;
    }
    .center-wide{
        flex: 0 0 auto;
        margin-left:15%;
        width:70% !important;
    }
    .left{
        flex: 0 0 auto;
        width: 50% !important;
    }
    .right{
        flex: 0 0 auto;
        margin-left:50%;
        width: 50% !important;
    }
    .right-inline{
        flex: 0 0 auto;
        width: 50% !important;
    }

}
@media screen and (min-width: 540px) and (max-width: 719px) {
    .center, .center-wide{
        flex: 0 0 auto;
        margin-left: 8.33333333%;
        width: 83.333333333% !important;
    }
    .left{
        flex: 0 0 auto;
        width: 50% !important;
    }
    .right{
        flex: 0 0 auto;
        margin-left:50%;
        width: 50% !important;
    }
    .right-inline{
        flex: 0 0 auto;
        width: 50% !important;
    }
}
@media screen and (max-width: 539px) {
    .center, .center-wide{
        width: 100% !important;
    }
    .left{
        width: 100% !important;
    }
    .right{
        width: 100% !important;
    }
    .right-inline{
        width: 100% !important;
    }
    .row{
        margin-bottom:50%;
    }
    .foreground-item > .row{
        margin-bottom:100%;
    }
}

/*bootstrap carousel control*/
#next-button, #prev-button{
    background:rgba(0,0,0,0.1) !important;
    width:75px;
}
#next-button:hover, #prev-button:hover{
    background:rgba(0,0,0,0.2)
}