/*
    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;
    position: fixed;
    background-color: #fff;
    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], [data-slide-up-children] > * {
    transform: translateY(75px);
    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_chars:not(.initialized), .split_lines:not(.initialized), .split_chars_children > *:not(.initialized), .split_lines_children > *:not(.initialized) {
    color: transparent !important;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        SPECIFIC ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.cream_container {
    transform: translateX(100px);
    opacity: 0;
}


/* ======= NAVBAR ============================ */
.navbar .nav_content {
    top: -50px;
}


/* ======= REGULAR HEADER ============================ */
.regular_header .header_icon, .regular_header .header_content:before, .about_header .intro_content:before, .about_header .side_ornaments {
    transition: transform 0.6s ease;
}

.regular_header:not(.loaded) .header_icon, .about_header:not(.loaded) .side_ornaments {
    transform: translateY(-65px);
}

.regular_header:not(.loaded) .header_content:before {
    transform: scaleY(0);
}

.regular_header .header_ornaments > *, .about_header .intro_content .ornaments > * {
    transition: margin 1s ease;
}


/* ======= HOMEPAGE ============================ */
.home_header:not(.loaded):before, .about_header:not(.loaded) .intro_content:before {
    transform: scaleY(0);
}

.home_header:not(.loaded) .ornaments {
    clip-path: polygon(0 -100px, 100% -100px, 100% -100px, 0 -100px);
    -webkit-clip-path: polygon(0 -100px, 100% -100px, 100% -100px, 0 -100px);
}

.home_header .ornaments > *, .home_mid_decors > * {
    transition: margin 1s, opacity 0.4s ease;
}

.home_header:not(.loaded) .hand {
    margin-top: 50px;
    opacity: 0;
}

.home_header:not(.loaded) .tree {
    margin-left: -35px;
    opacity: 0;
}

.home_header .cloud {
    transition-duration: 0.8s, 0.4s;
}

.home_header:not(.loaded) .cloud {
    margin-right: -50px;
    opacity: 0;
}

.home_header:not(.loaded) .pencil {
    margin-right: 25px;
}

.home_header .person {
    transition-delay: 0.35s;
}

.home_header:not(.loaded) .person {
    opacity: 0;
    margin-right: -30px;
}

.home_mid_decors:not(.loaded) > * {
    opacity: 0;
}

.home_mid_decors:not(.loaded) .left_square {
    margin-left: -55px;
}

svg.home_screen:not(.loaded) {
    opacity: 0;
}

/* ======= ABOUT / PROJECT ============================ */
.about_header .intro_content .cloud:not(.loaded) {
    margin-left: -35px;
}

.about_header .intro_content .tree:not(.loaded) {
    margin-left: 30px;
}

.about_header .intro_content .hand:not(.loaded) {
    margin-top: 35px;
    margin-right: 35px;
}

.about_header .intro_content .tree {
    transition-duration: .4s;
}


/* ======= PARTNcERS ============================ */
.partners_header:not(.loaded) .flower_green {
    margin-right: -35px;
}

.partners_header:not(.loaded) .leaf_down {
    margin-top: -35px;
}

.partners_header:not(.loaded) .cloud {
    margin-right: 20px;
}

.partners_header:not(.loaded) .flower_pink {
    margin-bottom: 25px;
}

.partners_header .flower_pink path {
    transform-origin: center;
    animation: constantRotation 8s ease-in-out infinite;
}

svg.flower .flower_petals {
    transform-origin: center;
    animation: constantRotation 15s linear infinite;
}

@keyframes constantRotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ======= TEAM ============================ */
.team_header:not(.loaded) .pencil {
    margin-right: 25px;
}

.team_header:not(.loaded) .leaf_down {
    margin-top: -45px;
}

.team_header:not(.loaded) .leaf_up {
    margin-bottom: 20px;
}

.team_header .sun .sun_container {
    transform-origin: center;
    animation: constantRotation 10s linear infinite;
}

.team_content_ornaments .eye {
    transition: transform 0.8s, opacity .8s ease;
}

.team_content_ornaments .eye:not(.loaded) {
    opacity: 0;
    transform: translateX(-50px);
}


/* ======= WORK PACKAGES ============================ */
/* Ornaments */
.packages_header:not(.loaded) .flower {
    margin-right: -50px;
}

.packages_header:not(.loaded) .leaf_up {
    margin-bottom: 30px;
}

.packages_header:not(.loaded) .leaf_down {
    margin-bottom: 70px;
}

.packages_header:not(.loaded) .touch_pink {
    margin-top: 30px;
    margin-right: 30px;
}

.packages_ornaments .pencil {
    transition: transform 0.6s, opacity .6s ease;
}

.packages_ornaments .pencil:not(.loaded) {
    opacity: 0;
    transform: translateX(-50px);
}

/* Package card */
.package_card [data-card-elem] {
    transition: opacity .6s, transform .6s ease;
}

.package_card:not(.loaded) [data-card-elem] {
    opacity: 0;
    transform: translateY(40px);
}

.package_card.loaded [data-card-elem]:nth-child(2) {
    transition-delay: 0.2s;
}

.package_card.loaded [data-card-elem]:nth-child(3) {
    transition-delay: 0.4s;
}


/* ======= SINGLE PACKAGES ============================ */
.packages_header .package_info .info_icon {
    transition: transform 0.6s, opacity .6s ease;
}

.packages_header .package_info .info_icon:not(.loaded) {
    transform: translateX(-50px);
    opacity: 0;
}

.packages_header .header_pic {
    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;
}

.packages_header .header_pic:not(.loaded) {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

/* Ornaments */
.package_preheader .bird {
    transition: opacity 0.6s, margin 1s ease;
}

.package_preheader:not(.loaded) .bird {
    opacity: 0;
    margin-right: 65px;
}

.package_body .ornaments .flower_pink path {
    transform-origin: center;
    animation: constantRotation 9s linear infinite;
}


/* ======= CONTACTS ============================ */
.contacts_header:not(.loaded) .girl_green, .results_header:not(.loaded) .eye {
    margin-top: 100px;
}

.contacts_header:not(.loaded) .leaf_up, .results_header:not(.loaded) .leaf_up {
    margin-bottom: 25px;
}

.contacts_header:not(.loaded) .leaf_down, .results_header:not(.loaded) .leaf_down {
    margin-top: -50px;
}