/*

    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: #272b4b;
    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], [data-slide-up-children] > *:not(.split_chars, .split_lines) {
    transform: translateY(100px);
    opacity: 0;
}

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

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

[data-fade-in], [data-slide-up-scrub], .form_line {
    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.075em;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        SPECIFIC ANIMATIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ==== NAVBAR ============== */
.navbar {
    opacity: 0;
}


/* ==== FOOTER ============== */
#footer-col-2 .inner_wrapper {
    animation-delay: 0.2s;
}

#footer-col-3 .inner_wrapper {
    animation-delay: 0.4s;
}


/* ==== BANNERS ============== */
.product_header figure img {
    transition: transform 0.65s ease;
    transform: scale(1.1);
}

.product_header.loaded figure img {
    transform: scale(1);
}


/* ==== HOMEPAGE ============== */
/* Slides */
.home_slides .slider_bg {
    transition: opacity 0.65s ease;
}

.home_slides:not(.loaded) .slider_bg {
    opacity: 0;
}

.home_slides [slide-elem] {
    transition: opacity 0.6s var(--delay), transform 0.6s var(--delay), color 0.4s 0s ease;
}

.home_slides:not(.loaded) .swiper-slide [slide-elem], .home_slides .swiper-slide:not(.swiper-slide-active) [slide-elem] {
    opacity: 0;
    transform: translateY(50px);
}

.home_slides .swiper-slide:not(.swiper-slide-active) [slide-elem] {
    transition-delay: 0s !important;
}

/* Meat selection */
.home_meat .illustration {
    transition: opacity 0.65s ease;
}

.home_meat .illustration:not(.loaded) {
    opacity: 0;
}

.home_meat .illustration .svg_anim {
    transition: transform 1.65s ease;
}

.home_meat .illustration:not(.loaded) .pig {
    transform: translateX(5%);
}

.home_meat .illustration:not(.loaded) .lamb {
    transform: translateX(-3.5%);
}

.home_meat .illustration:not(.loaded) .beef {
    transform: translateX(-3%);
}

.home_meat .illustration.loaded .lamb {
    transition-duration: 2.5s;
}


/* ==== ABOUT US ============== */
/* Header */
.about_header .svg_anim {
    transition: transform 1.5s ease;
}

.about_header:not(.loaded) .pig {
    transform: translateX(7%);
}

.about_header:not(.loaded) .beef {
    transform: translateX(-7%);
}

.about_header:not(.loaded) .lamb {
    transform: translateX(-5%);
}

.about_header .beef {
    transition-duration: 2s;
}

.about_header .word:first-child .char:nth-child(3) {
    position: relative;
}

.about_header .bottom_animals .fish {
    transition-duration: 2.25s;
}

.about_header .bottom_animals:not(.loaded) .fish {
    transform: translateX(-15%);
}

.about_header .bottom_animals .octupus {
    animation: upDownFloating 5s ease infinite;
}

@keyframes upDownFloating {
    from {
        transform: translateY(-5%);
    }

    50% {
        transform: translateY(7%);
    }
    
    to {
        transform: translateY(-5%);
    }
}

.about_header .bottom_animals:not(.loaded) .bubble_1 {
    transform: translateY(25%);
}

.about_header .bottom_animal.loaded .bubble_1 {
    transition-duration: 2s;
}

.about_header .bottom_animal.loaded .bubble_3 {
    transition-duration: 4s;
}

.about_header .bottom_animals:not(.loaded) .bubble_5 {
    transform: translateY(15%);
}

.about_header .bottom_animals:not(.loaded) .bubble_3 {
    transform: translateY(25%);
}

/* Seafood */
.about_seafood .fish_decor {
    transition-duration: 0.8s;
}

.about_seafood .fish_decor:not(.loaded) {
    transform: translateX(-75px);
    opacity: 0;
}

.about_seafood .quality_stamp:not(.loaded) > * {
    transform: translateY(35px);
    opacity: 0;
}
    
.about_seafood .quality_stamp > * {
    transition: transform 0.65s, opacity 0.65s ease;
}

.about_seafood .quality_stamp:not(.switch_order).loaded > *:nth-child(2) {
    transition-delay: 0.15s;
}

.about_seafood .quality_stamp.switch_order.loaded > *:nth-child(1) {
    transition-delay: 0.15s;
}


/* ==== MEATS PAGE ============== */
.icon_prod_filter:not(.loaded) ul li a {
    top: 50px;
    opacity: 0;
}

.icon_prod_filter.loaded ul li a {
    transition-delay: 0s, calc(var(--index) * 0.2s), calc(var(--index) * 0.2s);
}


/* ==== SINGLE PRODUCTS ============== */
.product_info_col .info_section:not(.loaded):before {
    transform: scaleX(0);
}

.cat_heading.info_section .cat_title figure {
    transition-duration: 0.6s;
}

.cat_heading.info_section:not(.loaded) .cat_title figure {
    transform: translateX(-15px);
    opacity: 0;
}

.cat_heading.info_section:not(.loaded) .cat_title:after {
    transform: scaleX(0);
}


/* ==== SINGLE RECIPES ============== */
.svg_anim_elem {
    transition: transform 1.25s, opacity 1.25s ease;
}

.single_recipe_header .fish {
    transition-duration: 2s;
}

.single_recipe_header:not(.loaded) .fish {
    transform: scale(0.95) translateX(-15%);
}

.single_recipe_header:not(.loaded) .leaf {
    transform: rotate(5deg) scale(0.85) translateY(-20%);
}

.single_recipe_header:not(.loaded) .pan {
    transform: rotate(15.5deg) translate(12%, -11%);
}

.single_recipe_header:not(.loaded) .right_leaf {
    transform: translateY(15%);
}

.single_recipe_header:not(.loaded) .circle_1 {
    transform: translateY(50%);
}

.single_recipe_header.loaded .circle_1 {
    transition-duration: 2.75s;
}

.single_recipe_header .circle_2 {
    transform-origin: left bottom;
}

.single_recipe_header:not(.loaded) .circle_2 {
    transform: scale(0);
}

.single_recipe_header:not(.loaded) .bubble_1 {
    transform: translate(0%, 15%);
}

.single_recipe_header:not(.loaded) .bubble_2 {
    transform: translate(-2%, 8%);
}

.single_recipe_header:not(.loaded) .bubble_3 {
    transform: translateY(10%);
}

.single_recipe_header:not(.loaded) .bubble_4 {
    transform: translateY(10%);
}

.single_recipe_header.loaded .bubble_1 {
    transition-duration: 6s;
}

.single_recipe_header.loaded .bubble_2 {
    transition-duration: 4s;
}

.single_recipe_header.loaded .bubble_3 {
    transition-duration: 2s;
}

.single_recipe_header.loaded .bubble_4 {
    transition-delay: 0.4s;
}