/* ******************************************** */
/** ABOUT: VIDEO
/* ******************************************** */

/* VIDEO */

.c-video{
    position: relative;
    background-color: var(--color-lightgray);
}

.c-video__video{
    display: block;
    width: 100%;
    height: auto;
    /*aspect-ratio: 16/9;*/
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.c-video.is-loading:before{
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 3px solid var(--color-lightest);
    border-top-color: var(--color-lightest-20);
    border-right-color: var(--color-lightest-20);
    border-radius: 50%;
    -webkit-animation: videoLoading 400ms linear infinite;
    animation: videoLoading 400ms linear infinite;
}

@-webkit-keyframes videoLoading{
    from{
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to{
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes videoLoading{
    from{
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to{
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}


/* CONTROLS */

.c-video__btn{
    --x-spacing: 0;
    --y-spacing: 0;

    display: block;
    width: var(--tap-size);
    height: var(--tap-size);
    position: absolute;
    bottom: var(--y-spacing);
    z-index: 10;
    color: var(--color-primary);
    font-size: 2.4rem;
}
.c-video__btn--right{
    right: var(--x-spacing);
}
.c-video__btn--left{
    left: var(--x-spacing);
}
.c-video__sound:before,
.c-video__sound:after{
    opacity: 0;
    -webkit-transition:opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}
.c-video__sound:before{
    content: "";
    background: url(../../images/static/volume-off.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.c-video__sound:after{
    content: "";
    background: url(../../images/static/volume-on.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.c-video.is-muted .c-video__sound:before,
.c-video:not(.is-muted) .c-video__sound:after{
    z-index: 10;
    opacity: 1;
}

.c-video .c-video__pause,
.c-video .c-video__play{
    opacity: 0;
    z-index: 5;
    -webkit-transition:
        opacity 200ms ease-out,
        color 200ms ease-out;
    transition:
        opacity 200ms ease-out,
        color 200ms ease-out;
}
.c-video__play{
    text-indent: 0.1em;
}

.c-video__play:after{
    content: "";
    background: url(../../images/static/play.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.c-video__pause:after{
    content: "";
    background: url(../../images/static/pause.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    aspect-ratio: 1/1;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.c-video.is-playing .c-video__pause,
.c-video.is-paused .c-video__play{
    z-index: 10;
    opacity: 1;
}

/* Has error */

.c-video__error{
    display: none;
    position: absolute;
    padding: 20px;
    background-color: var(--color-lightest-80);
    color: var(--color-error);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border: 2px solid var(--color-error);
    width: 80%;
    max-width: 300px;
    z-index: 1;
}

.c-video.has-error .c-video__error{
    display: block;
}


/* ********************** MOBILE LANDSCAPE ********************** */

@media (orientation: landscape) and (min-width: 500px) and (max-width: 767px) {

    .c-video{
        margin: 0;
    }
    .c-video.is-loading:before{
        width: 28px;
        height: 28px;
    }

    .c-video__btn{
        --x-spacing: calc(var(--space-x)*3);
    }

}




/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-video.is-loading:before{
        width: 28px;
        height: 28px;
    }

    .c-video__btn{
        --x-spacing: calc(var(--space-x)*0.5);
        --y-spacing: calc(var(--space-x)*0.5);
    }

}




/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-video{
        margin: 0;
    }

    .c-about__video.is-playing .c-video__video{
        cursor: url(../../images/static/cursor-pause.svg) 18 18, pointer;
    }
    .c-about__video.is-paused .c-video__video{
        cursor: url(../../images/static/cursor-play.svg) 18 18, pointer;
    }

    .c-video__btn{
        font-size: 2.6rem;
    }
    .c-video__btn:is(:hover, :focus){
        color: var(--color-hover);
    }
    .c-video__video:hover ~ .c-video__btn:not(.c-video__sound){
        color: var(--color-hover);
    }

}




/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

}




/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-video.is-loading:before{
        width: 32px;
        height: 32px;
    }

}




/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1800px) {

    .c-video__btn{
        font-size: 3rem;
    }

}