@charset "UTF-8";

/* ===================================
   MOTION VIDEO CASE STUDY PAGES
   DOE DESIGNS
=================================== */


/* ===================================
   PAGE
=================================== */

body.motion-video-page {

    background:#08251A;

    overflow-x:hidden;

}


/* ===================================
   RIPPLE CANVAS
=================================== */

body.motion-video-page #effects {

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:0;

    opacity:.65;

}

body.motion-video-page header {

    position:relative;

    z-index:5;

}

/* ===================================
   MAIN WRAPPER
=================================== */

.video-case-study {

    position:relative;

    z-index:3;

    width:100%;

    max-width:850px;

    margin:0 auto;

    padding-top:120px;

    padding-bottom:80px;

}



/* ===================================
   TITLE + NAVIGATION
=================================== */

.video-navigation {

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    margin-bottom:45px;

}



.video-navigation h1 {

    margin:0;

    color:#00E5FF;

    font-family:"Barlow Condensed",sans-serif;

    font-size:58px;

    font-weight:900;

    letter-spacing:.15em;

    text-transform:uppercase;

}



/* ===================================
   ARROWS
=================================== */

.video-arrow {

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

}



.arrow-circle {

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:45px;

    height:45px;

    color:white;

    font-size:42px;

    line-height:1;

    transition:.35s ease;

}



.arrow-circle::before {

    content:"";

    position:absolute;

    inset:-13px;

    border-radius:50%;

    border:2px solid transparent;

    border-top-color:#00E5FF;

    opacity:0;

}



.video-arrow:hover .arrow-circle {

    color:#00E5FF;

}



.video-arrow:hover .arrow-circle::before {

    opacity:1;

    animation:

    arrowSpin 5s linear infinite;

}



@keyframes arrowSpin {


    from {

        transform:rotate(0deg);

    }


    to {

        transform:rotate(360deg);

    }

}



/* ===================================
   VIDEO
=================================== */

.video-player {

    width:100%;

    margin-bottom:45px;

}



.video-player video {

    width:100%;

    height:auto;

    display:block;

    border:

    2px solid rgba(255,255,255,.15);


    box-shadow:

    0 20px 50px rgba(0,0,0,.45);

}



/* ===================================
   PAPER DESCRIPTION
=================================== */

.video-paper {

    position:relative;

    width:100%;

    box-sizing:border-box;


    padding:

    55px

    65px

    60px;


    background:

    linear-gradient(

        rgba(30,30,30,.82),

        rgba(30,30,30,.82)

    ),

    url("../images/paper-texture.png");



    background-size:cover;


    box-shadow:

    0 20px 45px rgba(0,0,0,.45);


}



/* ===================================
   CYAN TAPE
=================================== */

.paper-tape {

    position:absolute;

    top:-18px;

    left:50%;


    width:170px;

    height:42px;


    transform:

    translateX(-50%)

    rotate(-3deg);


    background:

    rgba(0,229,255,.22);


    opacity:.85;


    backdrop-filter:blur(2px);


    box-shadow:

    0 8px 15px rgba(0,0,0,.25);


}





/* ===================================
   PAPER TEXT
=================================== */

.video-paper h2 {

    margin:0 0 25px;


    color:#00E5FF;


    font-family:"Barlow Condensed",sans-serif;


    font-size:46px;


    font-weight:900;


    letter-spacing:.12em;


    text-transform:uppercase;


}



.video-paper h3 {


    margin-top:40px;


    color:#00E5FF;


    font-family:"Barlow Condensed",sans-serif;


    font-size:28px;


    letter-spacing:.12em;


    text-transform:uppercase;


}



.video-paper p {


    color:rgba(255,255,255,.85);


    font-family:"Jost",sans-serif;


    font-size:16px;


    line-height:1.8;


}



/* ===================================
   PROCESS IMAGES
=================================== */

.project-gallery {


    display:flex;


    flex-direction:column;


    gap:55px;


    margin-top:60px;


}



.project-gallery figure {


    margin:0;


}



.project-gallery img {


    width:100%;


    height:auto;


    display:block;


}



.project-gallery figcaption {


    margin-top:18px;


    color:white;


    font-family:"Jost",sans-serif;


    font-size:15px;


    line-height:1.7;


    letter-spacing:.04em;


}





/* ===================================
   CONTACT
=================================== */

.motion-video-page .page-contact-link {


    position:relative;


    z-index:2;


    margin:

    60px auto

    30px;


    text-align:center;


}



.motion-video-page .page-contact-link p {


    color:white;


    font-size:18px;


}



/* ===================================
   FOOTER
=================================== */

.motion-video-page footer {


    position:relative;

}



/* ===================================
   MOBILE
=================================== */

@media(max-width:900px){


.video-case-study {


    padding-left:25px;

    padding-right:25px;

}



.video-navigation h1 {


    font-size:40px;

}



.video-paper {


    padding:

    40px

    30px;

}



}