/* =============================================================================
Main CSS File - by David Gabriel
============================================================================= */
:root {
    /* color variables */
    --night-sky: #212136;
    --dim-white: #ffffffaa;
    --extra-dim-white: #ffffff55;
    --dim-black: #000000aa;
    --extra-dim-black: #00000055;

    /* misc variables */
    --margin: min(4dvh,10vw);
    --icon-size: clamp(1.5rem, 4dvh + 0.25rem, min(4rem,10vw));
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-margin: 0;
}
body {
    margin: 0;
    font-family: "Montserrat", Helvetica, sans-serif;
    background: var(--night-sky);

    /* disable the ability to select/copy text */
    user-select: none;
    /* hide scrollbar */
    -ms-overflow-style: none; /* IE 10+ */
    scrollbar-width: none; /* Firefox */
    scroll-margin: 0;
}
::-webkit-scrollbar { display: none; }
.scroll-snap { scroll-snap-align: start; } /* see showWebsite()




/*******************************************************************************
    Typography
*******************************************************************************/
b { font-weight: 700; }
h1 { /* Section Titles */
    position: absolute;
    text-align: center;
    text-transform: capitalize;
    cursor: default;
    font-weight: 400;
    font-size: clamp(1rem, 4dvh + 2vw + 1rem, 5rem);
}
h2 { /* Film Titles */
    position: absolute;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    font-size: clamp(0.5rem, 4dvh + 1vw +  0.1rem, 3rem);
    line-height: 1;
}
h3 { /* Gallery Entry/Exit Text */
    margin: 0;
    text-transform: capitalize;
    cursor: default;
    font-weight: 300;
    font-size: clamp(0.5rem, 3dvh + 0.5rem, 3rem);
}
h4 { /* Intro Text */
    margin: 0;
    color: white;
    cursor: default;
    font-weight: 400;
    font-size: clamp(0.5rem, 1dvh + 1vw + 1rem, 2.5rem);
}
p {
    margin: 0;
    text-align: left;
    color: white;
    cursor: default;
    font-weight: 300;
    font-size: clamp(0.6rem, 1.5dvh + 0.5rem, 1.5rem);
}
h2 span {
    text-transform: capitalize;
    font-weight: 200;
    font-size: clamp(0.5rem, 2.5dvh + 0.5rem, 3rem);
    line-height: 1;
    letter-spacing: 1px;
    opacity: 0.8;
}
p span { font-weight: 500; }


/*******************************************************************************
    Animations
*******************************************************************************/

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.fade-in {
    opacity: 0;
    animation: fadeIn 0.7s linear 0.5s forwards;
}
.fade-out {
    animation: fadeOut 0.3s linear forwards;
}

@keyframes blinkIn {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes showText {
    0% { display: block; opacity: 0; }
    10% { display: block; opacity: 1; }
    90% { display: block; opacity: 1; }
    100% { display: block; opacity: 0; }
}

@keyframes drawPath {
    0% { stroke-dashoffset: var(--length); }
    100% { stroke-dashoffset: 0; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes twinkle {
    0% {
        transform: scale(1);
        background: rgba(var(--background-color),0.0);
        animation-timing-function: ease-in;
    }
    60% {
        transform: scale(0.8);
        background: var(--background-color);
        animation-timing-function: ease-out;
    }
    80% {
        background: rgba(var(--background-color),0.0);
        transform: scale(1);
    }
    100% {
        background: rgba(var(--background-color),0.0);
        transform: scale(1);
    }
}

@keyframes bounce {
    0% { padding: 0; }
    50% { padding: 1dvh 0; }
    100% { padding: 0; }
}
@keyframes glow {
    0% { filter: drop-shadow(0px 0px 90px #ffffff); }
    50% { filter: drop-shadow(0px 0px 30px #ffffff); }
    100% { filter: drop-shadow(0px 0px 90px #ffffff); }
}
@keyframes bob {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3dvh); }
    100% { transform: translateY(0); }
}

@keyframes circle_hide {
    0% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    100%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
}
@keyframes circle_show {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}

@keyframes move_across {
    0% { left: -100px;}
    100% { left: 5000px;}
}


/*******************************************************************************
    Universal/MISC
*******************************************************************************/
.disabled { display: none; }

.hidden {
    opacity: 0;
    pointer-events: none;
user-select: none;
    user-select: none;
}

.day-only, .day-only-flex, .day .night-only, .day .night-only-flex {
    display: none;
}
.day .day-only, .night-only {
    display: block;
}
.day .day-only-flex, .night-only-flex {
    display: flex;
}

@media not (pointer: fine) {
    .mouse-only {display: none !important; }
}

.noscroll { overflow: hidden; }

.paused { --animation-play-state: paused; }

.background {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    pointer-events: none;
    user-select: none;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.reflection {
    /* reflect */
    transform: rotateX(180deg) translateY(2px);
    transform-origin: bottom;
    /* filter */
    filter: brightness(1.1) blur(2px);
    opacity: 0.9;
}

/* Vignette */
.vignette {
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 7;
    pointer-events: none;
    user-select: none;
    background: rgba(0, 0, 0, 0.8);
    transition: opacity 0.5s ease-in;
}
.vignette.active {
    opacity: 1;
    transition: opacity 5s ease-out;
}

.vignette.active ~ #music-control .music-bar {
    --bar-color: #ffffff33;
    transition: 5s ease-out;
}


/* Arrows ************************************************************** */
/* Down/Up Arrow */
.vertical-arrow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: absolute;
    height: 5dvh;
    aspect-ratio: 2;
    z-index: 5;

    cursor: pointer;
    transition: 0.5s ease-out;
}
@media(hover: hover) and (pointer: fine) {
    .vertical-arrow:hover > .arrow:before { transform: rotate(30deg); }
    .vertical-arrow:hover > .arrow:after { transform: rotate(-30deg); }
}
.down {
    bottom: 0;
    border-radius: 7.5dvh 7.5dvh 0 0;
}
.up {
    top: 0;
    border-radius: 0 0 7.5dvh 7.5dvh;
}
.vertical-arrow > .arrow {
    --arrow-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;

    position: relative;
    height: 50%;
    width: 1px;
    background: var(--arrow-color);
    transition: 0.5s ease-out;
}
.vertical-arrow > .arrow:before, .vertical-arrow > .arrow:after {
    content: "";
    position: absolute;
    height: 1dvh;
    width: 1px;
    background: var(--arrow-color);
    transition: 0.5s ease-out;
}
.down > .arrow { margin-top: 5%; }
.up > .arrow { margin-bottom: 5%; }
@media(hover: hover) and (pointer: fine) {
    .down:hover > .arrow { transform: translateY(10%); }
    .up:hover > .arrow { transform: translateY(-10%); }
}
.down > .arrow:before, .down > .arrow:after { bottom: 0; }
.up > .arrow:before, .up > .arrow:after { top: 0; }
.down > .arrow:before {
    transform: rotate(40deg);
    transform-origin: bottom left;
}
.down > .arrow:after {
    transform: rotate(-40deg);
    transform-origin: bottom right;
}
.up > .arrow:before {
    transform: rotate(40deg);
    transform-origin: top right;
}
.up > .arrow:after {
    transform: rotate(-40deg);
    transform-origin: top left;
}
/* Left/Right Arrow */
.horizontal-arrow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    height: 3dvh;
    aspect-ratio: 3;

    cursor: pointer;
    transition: 0.5s ease-out;
}
@media(hover: hover) and (pointer: fine) {
    .horizontal-arrow:hover > .arrow:before { transform: rotate(30deg); }
    .horizontal-arrow:hover > .arrow:after { transform: rotate(-30deg); }
}
.horizontal-arrow > .arrow {
    --arrow-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;

    position: relative;
    width: 50%;
    height: 1px;
    background: var(--arrow-color);
    transition: 0.5s ease-out;
}
.horizontal-arrow > .arrow:before, .horizontal-arrow > .arrow:after {
    content: "";
    position: absolute;
    width: 1dvh;
    height: 1px;
    background: var(--arrow-color);
    transition: 0.5s ease-out;
}
.left > .arrow { margin-right: 5%; }
.right > .arrow { margin-left: 5%; }
@media(hover: hover) and (pointer: fine) {
    .left:hover > .arrow { transform: translateX(-10%); }
    .right:hover > .arrow { transform: translateX(10%); }
}
.left > .arrow:before, .left > .arrow:after { left: 0; }
.right > .arrow:before, .right > .arrow:after { right: 0; }

.left > .arrow:before {
    transform: rotate(40deg);
    transform-origin: top left;
}
.left > .arrow:after {
    transform: rotate(-40deg);
    transform-origin: bottom left;
}
.right > .arrow:before {
    transform: rotate(40deg);
    transform-origin: top right;
}
.right > .arrow:after {
    transform: rotate(-40deg);
    transform-origin: bottom right;
}



/* Mask Section Button ****************************************************** */
.section-button-container {
    position: absolute;
    width: 100vw;
    height: 100dvh;
    z-index: 6;

    display: flex;
    justify-content: center;
    /* filter: drop-shadow(0px 0px 100px var(--dim-accent-color)); */
    pointer-events: none;
    user-select: none;
}
.section-button {
    position: absolute;
    top: var(--mask-top);

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;

    transition: 0.5s ease-out;
}
@media(hover: hover) and (pointer: fine) {
    .section-button:hover { top: calc(var(--mask-top) - 1dvh); }
    .section-button:hover > .button-mask {
        height: calc(var(--mask-height) + 2dvh);
        clip-path: var(--clip-path-fill);
    }
    .section-button:hover > .click-dot { --padding: 0.5dvh; }
}
.button-mask {
    position: relative;
    aspect-ratio: 1;
    height: var(--mask-height);

    clip-path: var(--clip-path);

    transition: 0.5s ease-out;
}
.mask-image {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    background-image: var(--background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.mask-image:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--tint);

    transition: background 0.5s;
}
.zoomed {
    top: calc(var(--mask-top) - 9.5*var(--mask-height));
    pointer-events: none;
    user-select: none;
    transition: 1s ease-out;
    animation: none;
}
.zoomed > .button-mask {
    height: calc(20*var(--mask-height));
    transition: 1s ease-out;
    animation: none;
}
.zoomed .mask-image:after { background: var(--zoomed-tint); }
.filled-mask > .click-dot { opacity: 0; }
.filled-mask > .button-mask {
    clip-path: var(--clip-path-fill);
}
/* Click Dot */
.click-dot {
    --padding: 0.4dvh;
    position: absolute;
    padding: var(--padding);

    background: white;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;

    transition: padding 0.5s ease-out, opacity 0.5s;
}
/* Button Line */
.button-line {
    position: absolute;
    width: 1px;
    height: var(--mask-top);
    top: calc(-1*var(--mask-top));
    background: #ffffff66;
}
@keyframes rotateY {
    0% { transform: rotateY(360deg); }
    10% { transform: rotateY(0deg); }
}
@keyframes maskShrink {
    0% { height: var(--mask-height); }
    15% { height: calc(0.95*var(--mask-height)); }
    30% { height: var(--mask-height); }
}
@keyframes maskShift {
    0% { top: var(--mask-top); }
    15% { top: calc(var(--mask-top) + 0.025*var(--mask-height)); }
    30% { top: var(--mask-top); }
}

.showButton > .button-mask {
    animation: showButton 2s linear forwards;
}
.showButton > .button-line {
    animation: drawLine 1.5s linear forwards;
}
@keyframes showButton {
    0% { height: 0; }
    75% { height: 0; }
    100% { height: var(--mask-height); }
}
@keyframes drawLine {
    0% { height: 0; }
    25% { height: 0; }
    100% { height: var(--mask-top); }
}


/* Section Tag ************************************************************** */
section {
    position: relative;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    background: var(--night-sky);
    overflow-x: hidden;
    @supports (overflow-x: clip) { overflow-x: clip; }  /* clip if supported */
}

subsection {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    top: 0;
    z-index: 10;

    overflow-y: clip;
    overscroll-behavior: contain;
}

/* Loader ******************************************************************* */
.loading-icon {
    position: absolute;
    aspect-ratio: 1;
    height: 8dvh;

    clip-path: inset(0 0 50% 0);
    transition: opacity 0.5s ease;
}
.loading-icon:after {
    content: '';
    position: absolute;
    width: 120%;
    top: calc(50% - 1px);
    left: -10%;
    border-top: 1px solid white;
}
.loading-icon > .sun-and-moon {
    height: 100%;
    width: 100%;
    transform: rotate(0deg);
    animation: spin 3s linear infinite;
    background: none;
}

/* Stars ******************************************************************** */
.stars {
    position: absolute;
    width: 100vw;
    height: 100dvh;
    z-index: 2;
}
.star {
    --animation-duration: 0s; /* set in createStars() */
    --animation-delay: 0s; /* set in createStars() */
    --background-color: white;
    position: absolute;
    width: 2.5px;
    height: 2.5px;
    border-radius: 5px;
    @media (pointer: fine) {
        animation: twinkle var(--animation-duration) linear var(--animation-delay) infinite;
        animation-play-state: var(--animation-play-state);
    }
}
.background-stars { 
    z-index: 2;
    @media (pointer: fine) { filter: brightness(0.7); }
}

/* Slideshow **************************************************************** */
.slideshow {
    display: flex;
    flex-direction: row;

    overflow: hidden;
    scroll-behavior: smooth;
}
.slide {
    position: relative;
    min-width: 100vw;
    height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    scroll-snap-align: start;
}
/* 1040 px */
@media (min-width:60rem) {
    .slide { background-attachment: fixed; }
}


/*******************************************************************************
    Nav
*******************************************************************************/
/* Music-Control ************************************************************ */
#music-control {
    --bar-color: var(--dim-white);
    --dim-bar-color: var(--extra-dim-white);
    --hover-bar-color: white;

    display: flex;
    position: fixed;
    aspect-ratio: 1;
    width: var(--icon-size);
    margin: var(--margin);
    top: 0;
    left: 0;
    z-index: 8;

    justify-content: space-between;
    align-items: center;

    cursor: pointer;
    transition: opacity 0.5s ease, transform 0.5s ease-out;
}
.intro #music-control {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}
@media(hover: hover) and (pointer: fine) {
    #music-control:hover { transform: scale(1.1); }
    #music-control:hover > .music-bar { background: var(--hover-bar-color); }
}
.music-bar {
    width: 2px;
    height: 10%;
    background: var(--bar-color);
    border-radius: 2px;
    transition: background-color 0.5s ease-out;
}
.animated-music-bar {
    animation: scaleMusicBar var(--duration) linear infinite;
}
#music-control span:nth-child(1) {
    --base-height: 15%;
    --duration: 0.7s;
}
#music-control span:nth-child(2) {
    --base-height: 100%;
    --duration: 1.2s;
}
#music-control span:nth-child(3) {
    --base-height: 80%;
    --duration: 0.8s;
}
#music-control span:nth-child(4) {
    --base-height: 50%;
    --duration: 2s;
}
#music-control span:nth-child(5) {
    --base-height: 100%;
    --duration: 0.7s;
}
#music-control span:nth-child(6) {
    --base-height: 65%;
    --duration: 0.9s;
}
#music-control span:nth-child(7) {
    --base-height: 25%;
    --duration: 1.5s;
}
@keyframes scaleMusicBar {
    0% { height: calc(0.5*var(--base-height)); }
    50% { height: calc(1.0*var(--base-height)); }
    70% { height: calc(0.7*var(--base-height)); }
    80% { height: calc(0.9*var(--base-height)); }
    100% { height: calc(0.5*var(--base-height)); }
}




/* Nav Bar ********************************************************************** */
#nav {
    position: fixed;
    height: 100dvh;
    right: 0;
    top: 0;
    z-index: 8;
}
#nav-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(2*var(--margin) + var(--icon-size));
    width: calc(var(--margin));
    padding: 0 calc(1.5*var(--margin));
    transition: opacity 0.5s ease, height 1s ease;
}
.intro #nav-bar {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}
.open-nav #nav-bar {
    @media(pointer: fine) { height: 100dvh; }
}
#nav-icon {
    --angle: 0deg;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(var(--angle));
    transition: opacity 0.5s ease, color 0.5s ease-out, transform 0.5s ease;
}
.day #nav-icon { --angle: 180deg; }
#DG {
    height: var(--icon-size);

    text-transform: capitalize;
    line-height: var(--icon-size);
    color: var(--dim-white);

    cursor: pointer;

    transform: rotate(calc(-1*var(--angle)));

    transition: opacity 0.5s ease, color 0.5s ease-out, transform 0.5s ease;
}

#sun {
    --color: var(--dim-white);
    aspect-ratio: 1;
    height: 1.5dvh;
    margin: calc((var(--margin) - 1.5dvh)/2);
    z-index: 6;

    background: var(--color);
    border-radius: 50%;
    cursor: pointer;

    transform: rotate(calc(-1*var(--angle)));
    transition: opacity 0.5s ease, background-color 0.5s ease-out, transform 0.5s ease;
}
.day #sun { --color: white; }

#moon {
    --color: white;
    aspect-ratio: 1;
    height: 1.5dvh;
    margin: calc((var(--margin) - 1.5dvh)/2);
    z-index: 6;

    border-radius: 50%;
    box-shadow: 0.225dvh -0.225dvh 0 0.075dvh var(--color) inset;
    cursor: pointer;

    transform: rotate(calc(-1*var(--angle)));
    transition: opacity 0.5s ease, box-shadow 0.5s ease-out, transform 0.5s ease;
}
.day #moon { --color: var(--dim-white); }

#orbit {
    position: absolute;
    aspect-ratio: 1;
    height: 70%;
    top: 15%;
    border: 2px solid var(--extra-dim-white);
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    
    transform: rotate(225deg);
    
    animation: circle_show 0.75s forwards ease;
}
.day #orbit { transform: rotate(45deg); }
.open-nav #orbit {
    @media(pointer: fine) { animation: circle_hide 1s forwards ease; }
}

@media(hover: hover) and (pointer: fine) {
    #DG:hover { color: white; }
    #sun:hover { --color: white; transform: rotate(calc(-1*var(--angle))) scale(1.1) ; }
    #moon:hover { --color: white; transform: rotate(calc(-1*var(--angle))) scale(1.1) ; }
}


/* Star Scroll Bar */
#star-scroll-bar {
    --top: 0dvh;
    position: relative;
    height: 0dvh;
    width: calc(1.5*var(--margin));

    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    transition: height 1s ease;
}
.open-nav #star-scroll-bar {
    @media(pointer: fine) { height: 70dvh; }
}

#star-scroll-line {
    position: absolute;
    background-color: var(--extra-dim-white);
    border-radius: 2dvh;
    width: 2px;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.star-button {
    height: 0dvh;
    cursor: pointer;
    transition: height 1s ease;
}
.star-button > path {
    fill: var(--dim-white);
    transition: fill 0.5s ease;
}
.star-button.active > path {
    fill: white;
}
@media(hover: hover) and (pointer: fine) {
    .star-button:hover > path { fill: white; }
}
.open-nav .star-button {
    @media(pointer: fine) { height: 2dvh; }
}


#star-scroll-pick-point {
    opacity: 0;
    position: absolute;
    top: calc(var(--top) - 1dvh);
    pointer-events: none;
    user-select: none;
    transition: opacity 0.25s ease;
}
#star-scroll-pick-point > path {
    fill: none;
    stroke: var(--dim-white);
    stroke-width: 10px;
}
.open-nav #star-scroll-pick-point {
    @media(pointer: fine) { height: 2dvh; }
}
@media(hover: hover) and (pointer: fine) {
    #star-scroll-bar:hover > #star-scroll-pick-point  { opacity: 1; }
    .star-button:hover ~ #star-scroll-pick-point { opacity: 0 !important; }
}


/* Nav Sun & Moon Switch */
#nav-sun-and-moon-switch {
    position: relative;
    height: var(--icon-size);
    aspect-ratio: 1;
    top: auto;
    margin: var(--margin) 0;
    border-radius: 50%;

    box-shadow: 0.6dvh -0.6dvh 0 0.2dvh white inset;
    filter: drop-shadow(0px 0px 10px #ffffff);
    /* transform: translateY(0%); */
}