/*

    The following animations are available:
    - Slide up
    - Slide down
    - Slide left
    - Slide right
    - Fade in

*/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        PAGE LOADER (highway.js)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Wiping element */
.loader {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    transform-origin: bottom;
    will-change: transform;
    position: fixed;
    z-index: 9999;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            GENERAL SETTINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.slide-up, .slide-down, .slide-left, .slide-right, .fade-in {
    opacity: 0;
}

.slide-up, .slide-down, .slide-left, .slide-right, .fade-in {
    -webkit-animation-fill-mode: forwards!important;
    animation-fill-mode: forwards!important;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ==== GSAP animations ============== */
[data-slide-up] {
    transform: translateY(100px);
    opacity: 0;
}

[data-slide-left] {
    transform: translateX(100px);
    opacity: 0;
}

[data-slide-right] {
    transform: translateX(-100px);
    opacity: 0;
}

[data-fade-in] {
    opacity: 0;
}

[data-slide-up], [data-slide-left], [data-slide-right] {
    will-change: transform, opacity;
}


/* ==== CSS animations ============== */
/* ---- SLIDE UP ---- */
.fade-in.loaded {
    -webkit-animation: fadeIn 1s cubic-bezier(.33,1,.68,1) 0s;
    animation: fadeIn 1s cubic-bezier(.33,1,.68,1) 0s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* ---- SLIDE UP ---- */
.slide-up.loaded {
    -webkit-animation: slideUp 1s cubic-bezier(.33,1,.68,1) 0s;
    animation: slideUp 1s cubic-bezier(.33,1,.68,1) 0s;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---- SLIDE DOWN ---- */
.slide-down.loaded {
    -webkit-animation: slideDown 1s cubic-bezier(.33,1,.68,1) 0s;
    animation: slideDown 1s cubic-bezier(.33,1,.68,1) 0s;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---- SLIDE LEFT ---- */
.slide-left.loaded {
    -webkit-animation: slideLeft 1s cubic-bezier(.33,1,.68,1) 0s;
    animation: slideLeft 1s cubic-bezier(.33,1,.68,1) 0s;
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(150px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ---- SLIDE Right ---- */
.slide-right.loaded {
    -webkit-animation: slideRight 1s cubic-bezier(.33,1,.68,1) 0s;
    animation: slideRight 1s cubic-bezier(.33,1,.68,1) 0s;
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(-150px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ---- TEXT SLIDE UP ---- */
.split_lines:not(.initialized), .split_chars:not(.initialized), .split_lines_children > *:not(.initialized) {
    color: transparent !important;
}

.split_lines .line, .split_lines_children > * .line {
   /* overflow: hidden;*/
    clip-path: polygon(0 0, 100% 0, 100% calc(100% + 0.2em), 0 calc(100% + 0.2em));
}

.split_lines .line .inner_line, .split_lines_children > * .line .inner_line {
    display: block !important;
}

.split_chars .word {
    overflow: hidden;
    margin-bottom: -0.25em;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        SPECIFIC ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.lined_title.split_chars:not(.finished):after {
    transform: scaleX(0);
}

.lined_title.split_chars.finished:after {
    transition-delay: 0.3s;
}


/* ======= FOOTER ===================== */
.footer-cols:not(.loaded) .footer-col {
    opacity: 0;
}

.footer-cols.loaded #footer-col-2 {
    transition-delay: 0.2s;
}

a.design:not(.loaded) {
    opacity: 0;
}


/* ======= NAVBAR & HEADING ===================== */
.navbar:before, .black_header .content_container {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 0.8s, -webkit-clip-path 0.8s ease;
}

.navbar:not(.loaded):before, .black_header:not(.loaded) .content_container {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

/* ======= HEADING ===================== */
.black_header .bg_img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: top 0.65s, clip-path 0.65s, -webkit-clip-path 0.65s, opacity 0.65s, transform 0.65s ease;
    will-change: clip-path, -webkit-clip-path, top;
}

.black_header:not(.loaded) .bg_img {
    /*top: 150px;*/
    opacity: 0;
    transform: scale(1.15) !important;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.black_header .lined_title.finished:after {
    transition-delay: 0.7s !important;
}

.black_header .lined_title:not(.finished):after {
    transform: scaleX(0);
}

.black_header .scroll_down:before {
    animation-delay: 0.4s !important;
}

.black_header .scroll_down .label {
    opacity: 0;
    transition-delay: 0.6s !important;
}

.black_header .scroll_down.loaded .label {
    opacity: 1;
}


/* ======= HOMPAGE ===================== */
/* BIM */
.main_graph:not(.loaded) .bim_icons .bim_icon {
    opacity: 0;
}

.bim_icons .bim_icon {
    opacity: 1;
    transition: opacity 0.6s ease;
}

.main_graph.loaded .bim_icons .bim_icon {
    transition-delay: calc(var(--index) * 0.15s + 0.6s);
}

.bim_svg .graph_elem {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.6s, transform 0.6s ease;
}

.bim_svg .step_draw, .bim_svg .step_construct, .bim_svg .step_operate {
    transform: rotate(-15deg);
}

.main_graph .bim_svg .step_construct .label {
    transform: translate(-3%, -0.5%);
}

.main_graph.loaded .bim_svg .graph_elem {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.main_graph:not(.loaded) .bim_svg .outer_circle {
    transform: scale(0.8);
}

.main_graph.loaded .bim_svg .title {
    transition-delay: 0.3s;
}

.main_graph.loaded .bim_svg .step_draw {
    transition-delay: 0.6s;
} 

.main_graph.loaded .bim_svg .step_construct {
    transition-delay: 0.9s;
} 

.main_graph.loaded .bim_svg .step_operate {
    transition-delay: 1.2s;
} 


/* ======= ABOUT ===================== */
.slider_footer .controls_pagination:before {
    transition-duration: 0.65s;
}

.slider_footer figure, .slider_footer .controls_pagination > * {
    transition: opacity 0.4s ease;
}

.slider_footer:not(.loaded) figure, .slider_footer:not(.loaded) .controls_pagination > * {
    opacity: 0;
}

.slider_footer:not(.loaded) .controls_pagination:before {
    transform: scaleX(0);
}

.slider_footer.loaded figure {
    transition-delay: 0.65s;
    transition-duration: 0.65s;
}

.slider_footer.loaded .controls_pagination > * {
    transition-delay: 0.4s;
}


/* ======= PORTFOLIO ===================== */
/* Header */
.portfolio_header .header_bg img {
    animation-delay: 0.1s;
    animation-duration: 0.6s;
    animation-timing-function: ease;
}

/* Categories */
.cat_nav li {
    transition: transform 0.6s, opacity 0.6s ease;
    transition-delay: var(--delay);
}

.cat_nav:not(.loaded) li {
    opacity: 0;
    transform: translateY(30px);
}

/* Projects */
.projects_archive .lined_title.finished:after {
    transition-delay: 0.3s;
}

.projects_archive .lined_title:not(.finished):after {
    transform: scaleX(0);
}

.project_square {
    opacity: 0;
}


/* ======= SINGLE PROJECT ===================== */
/* Banner */
.full_screen_banner figure {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: transform 0.65s, clip-path 0.65s, -webkit-clip-path 0.65s, opacity 0.65s ease;
}

.full_screen_banner figure img {
    height: calc(100% + 50px);
}

.full_screen_banner:not(.loaded) figure {
    transform: scale(1.15);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

/* Intro */
.project_intro .return_bttn, .project_intro .about_content > * {
    opacity: 0;
    transform: translateX(75px);
    transition: opacity 0.65s, transform 0.65s ease;
}

.project_intro .return_bttn.loaded, .project_intro .about_content.loaded > * {
    opacity: 1;
    transform: translateX(0);
}

.project_intro .about_content .ornament, .project_intro .about_content.loaded .content_wrapper {
    transition-delay: 0.2s;
}

.project_intro .about_content .content_wrapper, .project_intro .about_content.loaded .ornament {
    transition-delay: 0s;
}


/* ======= CONTACTS ===================== */
.contact_header_bttm_ornament {
    transform-origin: left;
    transition: transform 1s ease;
}

.contact_header_bttm_ornament:not(.loaded) {
    transform: scaleX(0);
}

/* Animated logo icon */
svg.anim_icon .icon_part {
    transition: all 0.6s ease;
}

svg.anim_icon .bottom_bar {
    transform-origin: left;
    transform: scaleX(0) translateY(-0.4%);
}

svg.anim_icon .bttm_part{
    transform: translateY(59%);
}

svg.anim_icon .bttm_left {
    transform: translateY(18%) translateX(0.1%);
}

svg.anim_icon .top_hide {
    transform: translateY(0);
}

svg.anim_icon .top_left {
    transform: translateX(0.1%);
}

svg.anim_icon .top_right {
    transform: translateY(-10%);
}

svg.anim_icon.loaded .bottom_bar {
    transform: scaleX(1) translateY(-0.4%);
}

svg.anim_icon.loaded .bttm_part {
    transform: translateY(0);
    transition-delay: 0.5s;
}

svg.anim_icon.loaded .bttm_left {
    transform: translateY(0) translateX(0.1%);
    transition-delay: 1s;
}

svg.anim_icon.loaded .top_hide {
    transform: translateY(-40%);
    transition-delay: 0.5s;
}

svg.anim_icon.loaded .top_right {
    transform: translateY(0);
    transition-delay: 1s;
}

/* Contact form */
.img_info_container .info_col {
    clip-path: polygon(0 0, calc(100% + var(--side-padding)) 0, calc(100% + var(--side-padding)) 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, calc(100% + var(--side-padding)) 0, calc(100% + var(--side-padding)) 100%, 0 100%);
    transition: clip-path 0.85s, -webkit-clip-path 0.85s ease;
}

.img_info_container .info_col:not(.loaded) {
    clip-path: polygon(calc(100% + var(--side-padding)) 0, calc(100% + var(--side-padding)) 0, calc(100% + var(--side-padding)) 100%, calc(100% + var(--side-padding)) 100%);
    -webkit-clip-path: polygon(calc(100% + var(--side-padding)) 0, calc(100% + var(--side-padding)) 0, calc(100% + var(--side-padding)) 100%, calc(100% + var(--side-padding)) 100%);
}