/*

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

*/

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



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            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] > *:not(.wp-block-columns) {
    transform: translateY(70px);
    opacity: 0;
}

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

[data-slide-right] {
    transform: translateX(-70px);
    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;
}

.split_lines .inner_line, .split_lines_children .inner_line {
    display: block;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        SPECIFIC ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ====== LINES ============ */
[data-line] {
    transition: clip-path 1.25s ease,  -webkit-clip-path 1.25s ease;
}

[data-line][inverted] {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

[data-line]:not([inverted]) {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

[data-line].loaded {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

[data-line] [data-thicker] {
    transition: transform 1.75s, opacity 1.75s ease;
}

[data-line][inverted] [data-thicker] {
    transform: translateX(10%);
}

[data-line]:not([inverted]) [data-thicker] {
    transform: translateX(-10%);
}

[data-line].loaded [data-thicker] {
    transform: translateX(0);
    opacity: 1;
}


/* ====== RADIALS ============ */
.radial_svg {
    animation: rotateInfinite 10s linear infinite;
}

@keyframes rotateInfinite {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.radial_svg line, .radial_svg [data-radial-line] {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.radial_svg.loaded line, .radial_svg.loaded [data-radial-line] {
    opacity: 1;
    transition-delay: calc(var(--index) * 0.05s);
}


/* ====== REGULAR HEADER ============ */
.header_regular {
    overflow: hidden;
}

.header_regular .header__bg {
    transition: transform 2.25s ease;
}

.header_regular:not(.loaded) .header__bg {
    transform: scale(1.2);
}

.header_regular:not(.loaded) .header__plus {
    transform: scale(0.5);
    opacity: 0;
}

.header__plus {
    display: block;
    transition: transform .85s, opacity .5s ease;
}

.header__slogan .slogan_line {
    transition: transform .65s .2s, opacity .65s .2s ease;
}

.header__slogan:not(.loaded) .slogan_line {
    opacity: 0;
    transform: translateY(5%);
}

.header__slogan .slogan_line.line_2 {
    transition-delay: .4s;
}


/* ====== HOMEPAGE ============ */
/* Header */
.home_header__radial:after {
    transform-origin: center;
    transform: scale(0);
    transition-duration: 1.2s;
}

.header_home .header__line, .header_home .header__titled_orn {
    opacity: 0;
    transition: opacity .4s, transform .8s ease;
}

.header_home.loaded .home_header__radial:after {
    transform: scale(1);
}

header.loaded .header__line, header.loaded .header__titled_orn {
    opacity: 1;
    transform: translateX(0);
}

.header_home:not(.loaded) .header__line {
    transform: translateX(-50%);
}

.header_home:not(.loaded) .header__titled_orn {
    transform: translateX(50%);
}

.header_home.loaded .header__titled_orn {
    transition-delay: .4s;
}

.home_header__ornament svg * {
    transition: all .8s ease;
}

.header_home .home_header__ornament .dashed {
    stroke-dashoffset: 0;
    animation: dashedLines 0.75s linear infinite;
}

.header_home:not(.loaded) .home_header__ornament .line_top {
    transform: translateY(-20%);
}

.home_header__ornament .line_top {
    transition-delay: .5s;
}

@keyframes dashedLines {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 20;
    }
}

.home_header__ornament .solid_line {
    --length: 1000;
    stroke-dashoffset: 0;
    stroke-dasharray: var(--length);
    transition-timing-function: linear;
    transition-duration: 1s;
}

.header_home:not(.loaded) .home_header__ornament .solid_line.inverted {
    stroke-dashoffset: calc(var(--length) * -1);
}

.header_home:not(.loaded) .home_header__ornament .solid_line:not(.inverted) {
    stroke-dashoffset: var(--length);
}

/* Certifications */
.certification_logos .title__default:after {
    transition: opacity 1.25s .2s, transform 1.25s .2s ease;
}

.certification_logos .title__default:not(.loaded):after {
    opacity: 0;
    transform: translateX(70px);
}

/* Frota */
.home__fleet__points {
    --duration: .65s;
}

.home__fleet__points [data-is-line] {
    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.2s linear,  -webkit-clip-path 0.2s linear;
}

.home__fleet__points:not(.loaded) [data-is-line] {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.home__fleet__points.loaded [data-is-line] {
    transition: clip-path var(--duration) linear,  -webkit-clip-path var(--duration) linear;
    transition-delay: calc(var(--index) * var(--duration));
}

.home__fleet__points circle, .home__fleet__points .fleet__point {
    opacity: 1;
    transition: opacity .5s ease;
}

.home__fleet__points:not(.loaded) circle, .home__fleet__points:not(.loaded) .fleet__point {
    opacity: 0;
}

.home__fleet__points.loaded circle, .home__fleet__points.loaded .fleet__point {
    transition-delay: calc(var(--index) * var(--duration));
}

/* Map */
.map__options_svg [data-point], .map__map [data-constant] {
    opacity: 1;
    transition: opacity .5s ease;
}

.map__options_svg:not(.active) [data-point], .map__map:not(.loaded) [data-constant] {
    opacity: 0;
}

.map__options_svg.active [data-point], .map__map.loaded [data-constant] {
    transition-delay: calc(var(--index) * 0.2s);
}

.map__map [data-map-line] {
    transition: opacity 1.25s ease;
}

.map__map:not(.loaded) .map__options_svg [data-map-line], .map__map.loaded .map__options_svg:not(.active) [data-map-line] {
    opacity: 0 !important;
}

.map__map.loaded .map__options_svg.active [data-map-line] {
    transition-delay: calc(var(--index) * 0.35s);
}


/* ====== ABOUT US ============ */
.img_fall_text .content_col::after, .certifications .head_orn, .services_cut_bttm .content_col:before, .technology_text .ornament {
    transform-origin: left;
    transition: transform .85s ease;
}

.img_fall_text .content_col:not(.loaded)::after, .certifications:not(.loaded) .head_orn, .services_cut_bttm:not(.loaded) .content_col:before, .technology_text:not(.loaded) .ornament {
    transform: scaleX(0);
}

/* Certifications */
.certification__slider .swiper-slide.swiper-slide-active {
    --delay: 0s;
}

.certification__slider .swiper-slide.swiper-slide-next {
    --delay: 0.2s;
}

.certification__slider .swiper-slide.swiper-slide-next + .swiper-slide {
    --delay: 0.4s;
}

.certification__slider .swiper-slide .year_text, .certification__slider .swiper-slide .year-dot, .certification__slider .swiper-slide .year_content {
    transition: opacity .65s, top .65s, transform .65s ease;
}

.certification__slider .swiper-slide:not(.loaded) .year_text {
    opacity: 0;
    top: -25px
}

.certification__slider .swiper-slide:not(.loaded) .year-dot {
    opacity: 0;
}

.certification__slider .swiper-slide:not(.loaded) .year_content {
    opacity: 0;
    transform: translateY(25px);
}

.certification__slider .swiper-slide.loaded .year_text, .certification__slider .swiper-slide.loaded .year-dot, .certification__slider .swiper-slide.loaded .year_content {
    transition-delay: var(--delay, 0s);
}

/* Message */
.founder_msg__img:not(.loaded) img {
    transform: scale(1.15);
}

.founder_msg__img img {
    transition: transform 1.25s ease;
}

.founder_msg .ornament {
    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 1.75s ease,  -webkit-clip-path 1.75s ease;
}

.founder_msg .ornament line {
    transition: transform 2.25s ease;
}

.founder_msg .ornament: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);
}

.founder_msg .ornament:not(.loaded) line {
    transform: translateY(14%);
}


/* ====== SUSTAINABILITY ============ */
/* CO2 */
.sustainable_co2 .ornament .car {
    transition: transform 2.15s, opacity .5s ease;
}

.sustainable_co2 .ornament .cloud {
    transition: transform .85s, opacity .5s ease;
}

.sustainable_co2 .ornament:not(.loaded) .car {
    transform: translateX(-10%);
    opacity: 0;
}

.sustainable_co2 .ornament:not(.loaded) .cloud {
    transform: translateY(8%);
    opacity: 0;
}

.sustainable_co2 .ornament.loaded .car, .sustainable_co2 .ornament.loaded .cloud {
    transition-delay: 0.25s;
}


/* ====== FLEET ============ */
/* Numbers */
.fleet_numbers .icon svg {
    transition: transform 2.25s, opacity .4s ease;
}

.fleet_numbers .icon hr {
    transition: transform 0.85s, opacity .4s ease;
}

.fleet_numbers .icon:not(.loaded) svg {
    opacity: 0;
    transform: translateX(-10%);
}

.fleet_numbers .icon:not(.loaded) hr {
    opacity: 0;
    transform: translateX(7%);
}


/* ====== CONTACTS ============ */