/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

#animated-bg {
    position: relative;
    overflow: hidden;
    background: #080807 !important;
}

/* Moving linear gold gradient */
#animated-bg::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        110deg,
        #080807 0%,
        #080807 25%,
        rgba(120, 100, 55, 0.25) 42%,
        rgba(205, 175, 95, 0.65) 52%,
        rgba(120, 100, 55, 0.25) 62%,
        #080807 80%,
        #080807 100%
    );

    background-size: 250% 100%;
    animation: goldSlide 5s ease-in-out infinite alternate;
/* 	animation: goldSlide 3s ease-in alternate; */

    pointer-events: none;
    z-index: 0;
}

/* Keep Elementor content above gradient */
#animated-bg > .e-con-inner {
    position: relative;
    z-index: 2;
}

@keyframes goldSlide {

    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* =========================================
   PEPTIDE BOTTLES - SCROLL REVEAL
========================================= */

.peptide-front,
.peptide-back {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
}

/* FRONT */
.peptide-front {
    z-index: 2;
	left:0;
}

/* BACK */
.peptide-back {
    z-index: 1;
	right:0;
}


/* =========================================
   ANIMATION TRIGGERED BY SCROLL
========================================= */

.peptide-bottles-section.is-visible .peptide-front {
    animation: peptideFrontIn 1.4s ease-out 0.15s forwards;
}

.peptide-bottles-section.is-visible .peptide-back {
    animation: peptideBackIn 1.5s ease-out 0.45s forwards;
}


/* FRONT BOTTLE */
@keyframes peptideFrontIn {

    0% {
        opacity: 0;
        transform: translateY(40px) rotate(-22deg) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(-22deg) scale(1);
    }

}


/* BACK BOTTLE */
@keyframes peptideBackIn {

    0% {
        opacity: 0;
        transform: translateY(35px) rotate(20deg) scale(0.94);
    }

    100% {
        opacity: 0.68;
        transform: translateY(0) rotate(30deg) scale(1);
    }

}

@media (max-width: 767px) {
    .elementor-2 .elementor-element.elementor-element-63014b6 .main-head {
        line-height: 60px;
        font-size: 60px;
    }
}