/*******************************************************************************
    (2N) Films
*******************************************************************************/
#films {
    --accent-color: #8a8196;
    --dim-accent-color: #41305888;
    --button-top: 15dvh;
    background: linear-gradient(to bottom, #212136, #43435E 70%,  #212136);
    justify-content: center;
}

/* Header */
.films-header {
    top: 55dvh;
    padding-bottom: 1dvh;
    z-index: 5;
    color: white;
}




/* Down Arrow */
#films-arrow {
    background: var(--accent-color);
    box-shadow: 0 1px 6px var(--dim-black) inset;
    z-index: 6;
    transition: 0.5s ease, opacity 1s ease;
}
@media(hover: hover) and (pointer: fine) {
    #films-arrow:hover { box-shadow: 0 1px 10px var(--dim-black) inset; }
}

/* Mask Button */
#films-button {
    --mask-height: min(40dvh,90vw);
    --mask-top: 15dvh;

    --clip-path:  url(#films-mask);
    --clip-path-fill:  url(#films-mask-fill);
    /* --background-image: url(../images/films/every-day.jpg); */

    --tint: var(--dim-accent-color);
    --zoomed-tint: #00000099;

    @media (min-width:60rem) { /* 1040 px */
        --mask-top: 10dvh;
    }
}




/* Background ****************************************************************/
.island {
    position: absolute;
    width: 200vw;
    bottom: 10dvh;
    right: -170vw;
    z-index: 5;
}
.intro .island, .intro .mountain {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}
#fog {
    position: absolute;
    width: 200vw;
    height: 100dvh;
    bottom: -60px;
    z-index: 4;
}
.mountain {
    position: absolute;
    width: 200vw;
    bottom: 50dvh;
}
.reflected-mountain {
    position: absolute;
    width: 200vw;
    top: 50dvh;
    transform-origin: top;
    filter: brightness(1.1);
    opacity: 0.9;
}
.front-mountain { z-index: 3; }
.back-mountain { z-index: 2; }
#overflow-mountain { transition: opacity 0.5s; }
/* 480 px */
@media (min-width:30rem) {
    .mountain { width: 100vw; }
    .reflected-mountain { width: 100vw; }
    #fog { width: 100vw; }
    .island {
        width: 70vw;
        right: -35vw;
    }
}
/* 1040 px */
@media (min-width:60rem) {
    .island {
        width: 50vw;
        right: -20vw;
    }
}



/* Animated GIFs */
.fish {
    position: absolute;
    height: 8dvh;
    bottom: 1dvh;
    left: 8vw;
    z-index: 4;
}
.bird {
    --animation-duration: 37s;
    position: absolute;
    height: 5dvh;
    top: 30dvh;
    left: 5000px;
    z-index: 4;

    transition: opacity 0.5s ease;

    animation: move_across var(--animation-duration) linear 3s infinite;
    animation-play-state: var(--animation-play-state);
}
.reflected-bird { top: 65dvh; }



/* Stars */
#films .stars { z-index: 1 }
#films .background-stars { z-index: 1 }
/* Shooting Stars */
.shooting-stars {
    position: absolute;
    width: 100vw;
    height: 100dvh;
    top: 0;
    transform: rotate(10deg);
    z-index: 1
}
.shooting-stars span {
    opacity: 0;
    position: absolute;
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, white);
}
.reflected-shooting-stars {
    transform: rotateX(180deg) rotate(10deg);
}
.reflected-shooting-stars span {
    filter: brightness(0.6) blur(1px);
}
.shooting-stars span:nth-child(1) {
    top: 3dvh;
    animation: shootingStar1 15s linear 3s infinite;
    animation-play-state: var(--animation-play-state);
}
.shooting-stars span:nth-child(2) {
    top: 25dvh;
    animation: shootingStar2 12s linear infinite;
    animation-play-state: var(--animation-play-state);
}
@keyframes shootingStar1 {
    92% { left: 40vw; opacity: 0;}
    97% { opacity: 1; }
    100% { left: 80vw; opacity: 0; }
}
@keyframes shootingStar2 {
    0% { left: 0vw; opacity: 0;}
    2% { opacity: 1; }
    4% { left: 40vw; opacity: 0; }
}








/*******************************************************************************
    Films Subsection
*******************************************************************************/
#films-subsection {
    overflow-x: scroll;
    /* overflow-y: clip; */
    scroll-snap-type: x mandatory;

    transition: opacity 0.5s ease-out;
}
#films-subsection::-webkit-scrollbar { display: none; }


/* Icons */
#films-close-button {
    position: absolute;
    aspect-ratio: 1;
    height: calc(var(--icon-size)*3/2);
    right: 0;
    top: 0;
    margin: calc(var(--margin) - calc(var(--icon-size)*1/2/2));

    border-radius: 50%;
    background: var(--accent-color);
    filter: drop-shadow(1px 3px 5px var(--extra-dim-black));

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-size);
    font-weight: 300;
    color: white;

    cursor: pointer;
    transition: transform 0.5s ease-out;
}
@media(hover: hover) and (pointer: fine) {
    #films-close-button:hover {
        transform: scale(1.1);
    }
}

/* Loader */
#film-loader {
    display: none;
    top: 50dvh;
    left: 50vw;
    z-index: 6;
    transform: translate(-50%,-50%);
    transition: opacity 0.25s ease;
}


/* YouTube & Instagram Logos */
#youtube-logo {
    position: absolute;
    /* aspect-ratio: 1; */
    top: 0;
    left: 0;
    margin: var(--margin);
    z-index: 1;

    font-size: var(--icon-size);
    line-height: var(--icon-size);
    color: var(--dim-white);

    transition: 0.5s ease-out;
}
#youtube-logo-text, #insta-logo-text {
    position: absolute;
    top: calc(2.5*var(--margin));
    left: var(--margin);
    z-index: 6;

    font-size: calc(var(--icon-size)/2);
    line-height: calc(var(--icon-size)/2);
    font-weight: 300;
    color: var(--dim-white);

    opacity: 0;
    transform: translateX(-25%);
    transition: 0.5s ease;
    pointer-events: none;
}
#insta-logo {
    position: absolute;
    top: 0;
    left: calc(2*var(--margin));
    margin: var(--margin);
    z-index: 1;

    font-size: var(--icon-size);
    line-height: var(--icon-size);
    color: var(--dim-white);

    transition: 0.5s ease-out;
}
@media(hover: hover) and (pointer: fine) {
    #youtube-logo:hover, #insta-logo:hover { color: white; transform: scale(1.1); }
    #youtube-logo:hover ~ #youtube-logo-text, #insta-logo:hover ~ #insta-logo-text {
        opacity: 1;
        color: white;
        transform: translateX(0);
    }
}


/* Indexer */
#film-navigation {
    display: flex;
    justify-content: center;

    position: fixed;
    width: 100vw;
    bottom: calc(2*var(--margin));
    z-index: 2;
}
#films-indexer {
    --bar-width: 3dvh;
    --collapsed-bar-width: 1dvh;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#films-indexer > .index-bar {
    display: inline-block;
    width: var(--bar-width);
    height: 3dvh;
    background: var(--dim-white);
    border-radius: 3px;

    transition: 0.5s ease-out;

    margin: 0 0.5dvh;
    cursor: pointer;
}
#films-indexer > .collapsed {
    width: var(--collapsed-bar-width);
}
@media(hover: hover) and (pointer: fine) {
    #films-indexer > .index-bar:hover { background: white; }
}
#films-indexer > .active-index-bar {
    width: calc(var(--bar-width) + 2px);
    background: white;
}

#films-indexer > .scroll-dot {
    --left: 0;
    position: absolute;
    width: calc((var(--num_films) - 3)*1dvh + 3*var(--bar-width) + (var(--num_films) - 3)*var(--collapsed-bar-width)); 
    height: 1px;
    top: 4.25dvh;
    margin: 0 0.5dvh;

    background: var(--extra-dim-white);
    transition: width 0.5s ease-out;
}
#films-indexer > .scroll-dot:after {
    --offset: 3.25dvh;
    content: "";
    position: absolute;
    width: var(--bar-width);
    height: 3px;
    top: -1px;
    left: var(--left);

    border-radius: 3px;
    background: var(--dim-white);
    transition: width 0.5s ease-out, left 0.5s ease-out;
}






/* Slideshow **************************************************************** */
#films-slideshow {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    overscroll-behavior-x: none;
    scrollbar-width: none;
}
#films-slideshow::-webkit-scrollbar { display: none; }




/* iFrame Video*/
.video {
    display: none;
    position: absolute;
    aspect-ratio: 16 / 9;
    width: min(80vw, calc(60dvh * 16 / 9));
    top: 50dvh;
    left: 50vw;
    z-index: 2;

    box-shadow: 0 3px 20px var(--dim-black);
    border-radius: 3dvh;

    transform: translate(-50%,-50%);

    transition: transform 0.25s ease, opacity 0.5s ease;
}
/* Play Button */
.play-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    aspect-ratio: 2;
    height: 10dvh;
    max-width: 90vw;
    z-index: 1;

    border: 1px solid white;
    border-radius: 10dvh;

    transition: transform 0.5s ease-out;
}
.play-button:after {
    content: "";
    aspect-ratio: 1;
    height: 5dvh;
    margin-left: 1.25dvh; /*make it feel centered*/

    border-style: solid;
    box-sizing: border-box;
    border-width: 2.5dvh 0 2.5dvh 4.5dvh;
    border-color: transparent transparent transparent white;
}
@media(hover: hover) and (pointer: fine) {
    .play-button:hover { transform: scale(1.1); }
}

#see-more-link {
    position: absolute;
}


/* Slides */
#films-slideshow > .slide:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00000099;

    transition: background 0.5s;
}

#films-link {
    top: auto;
    z-index: 3;
}
#films-link > a {
    text-decoration: none;
    color: var(--dim-white);
    transition: 0.5s;
}
#films-link > a:hover { color: white; }

/* Title */
.film-title {
    --delay: 0s;
    opacity: 0;
    position: absolute;
    top: 16dvh;
    max-width: 80vw;
    z-index: 1;
    color: white;
}
/* Caption */
.caption {
    display: none;
    --delay: 0.125s;
    opacity: 0;
    position: absolute;
    max-width: 60vw;
    bottom: 20dvh;
    z-index: 1;

    color: white;
    text-align: center;

    transition: transform 1s ease;
}
/* Text Animation  */
.text-animation {
    -webkit-animation: animateText 0.25s linear var(--delay) forwards;
    animation: animateText  0.25s linear var(--delay) forwards;
}
@keyframes animateText {
    0% { opacity: 0; transform: translateY(50%); }
    100% { opacity: 1; transform: translateY(0); }
}








/* Media Queries ************************************************************ */
@media (min-width:30rem) {
    #films-indexer { --bar-width: 5dvh; }
    .caption { max-width: 80vw; bottom: 12dvh; }
    /* #youtube-logo-text { display: block; } */
}
/* 1040 px */
@media (min-width:60rem) {
    .film-title { top: 4dvh; }
    .caption {
        max-width: 50vw;
        bottom: var(--margin);
        left: var(--margin);
        text-align: left;
    }
    .thumbnail {
        width: auto;
        height: 60dvh;
    }

     #film-loader { display: block; }
    .video { display: block; }
    .thumbnail { display: block; }
    .play-button { display: none; }
}

/* @media(pointer:fine) {
    #film-loader { display: block; }
    .video { display: block; }
    .thumbnail { display: block; }
    .play-button { display: none; } 
} */