/**
*
*
* Theme Name: Audio Funnel Theme
* Template: hello-elementor
*/

h2{
    --e-global-typography-primary-text-transform: none !important;
}

html, body {
    overflow-x: hidden;
}

body::before{
    content: "";
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 0;
    position: fixed;
    background-image: url(/wp-content/themes/audio-funnel-theme/assets/Image_gaussian_noise_example-min.jpg);
    opacity: 0.15;
    pointer-events: none;
    -webkit-animation: noise 1s steps(2) infinite;
    animation: noise 1s steps(2) infinite;
}

/* home video container - avoid CLS */
.elementor-background-video-container {
    height: 100vh !important;
}
  
  @keyframes noise {
    0% { transform: translate3d(0,9rem,0); }
    10% { transform: translate3d(-1rem,-4rem,0); }
    20% { transform: translate3d(-8rem,2rem,0); }
    30% { transform: translate3d(9rem,-9rem,0); }
    40% { transform: translate3d(-2rem,7rem,0); }
    50% { transform: translate3d(-9rem,-4rem,0); }
    60% { transform: translate3d(2rem,6rem,0); }
    70% { transform: translate3d(7rem,-8rem,0); }
    80% { transform: translate3d(-9rem,1rem,0); }
    90% { transform: translate3d(6rem,-5rem,0); }
    100% { transform: translate3d(-7rem,0,0); }
}

.container-width-is-content-width{
    width: fit-content !important;
}

.not-interactable{
    pointer-events: none !important;
    overflow: hidden; /* Verhindert Überlauf innerhalb des Elements */
}

.menu-item{
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

.menu-item:hover{
    transform: translateY(-8px);
}

.scrolling-header {
    transition: all .5s ease !important;
}

.floating-animation{
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

.floating-animation:hover{
    transform: translateY(-8px);
}

.animated-divider{
    transition: all .3s ease !important;
}

a:has(.animated-divider):hover{
    .animated-divider{
        width: 50% !important;
    }
}

.gform_wrapper{

    .gfield_label,
    .gform-field-label,
    .gfield_required,
    .gform-field-label--type-sub {
        font-family: var(--e-global-typography-accent-font-family), Sans-serif;
        font-size: var(--e-global-typography-accent-font-size);
        font-weight: 600;
        line-height: var(--e-global-typography-accent-line-height);
        color: var(--e-global-color-text);
    }


    .name-form {
        .ginput_container{
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
    }

    input[type=text],
    input[type=email],
    input[type=tel],
    textarea {
        border: 1px solid var(--e-global-color-text);
        border-radius: 0px;
        background: var(--e-global-color-primary);
    }

    & .gform-footer {
        & input.gform_button.button {
            font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
            font-size: var(--e-global-typography-accent-font-size) !important;
            font-weight: var(--e-global-typography-accent-font-weight) !important;
            line-height: var(--e-global-typography-accent-line-height) !important;
            color: var(--e-global-color-text) !important;

            background-color: var(--e-global-color-primary) !important;

            border-style: solid !important;
            border-width: 1px 1px 1px 1px !important;
            border-color: var(--e-global-color-text) !important;
            border-radius: 100% !important;
            padding: 012px 026px !important;

            transition-duration: .3s;
            transition-property: transform;
            transition-timing-function: ease-out;

            &:hover{
                transform: translateY(-8px);
                background-color: var( --e-global-color-text ) !important;
                color: var(--e-global-color-primary) !important;
            }
        }

    }


    .gform_required_legend,
    .gfield_consent_label .gfield_required {
        display: none;
    }

    .validation_message{
        font-family: var(--e-global-typography-accent-font-family), Sans-serif;
        font-size: 16;
        line-height: var(--e-global-typography-accent-line-height);
        color: var(--e-global-color-text);

        border: solid 1px;
        border-color: red;
        background-color: var(--e-global-color-primary);
        padding: .4vw;
        width: fit-content;
    }

    .gform_validation_errors{
        padding: 0px;
        margin: 0px;
        border: none;
        background-color: transparent;
        border-radius: 0px;
        box-shadow: none;
    }

    .validation_error{
        font-family: var(--e-global-typography-accent-font-family), Sans-serif;
        font-size: 16;
        line-height: var(--e-global-typography-accent-line-height);
        color: var(--e-global-color-text);

        border: solid 1px;
        border-color: red;
        background-color: var(--e-global-color-primary);
        padding: .2vw;
        width: fit-content;
    }

    .multi-choice{

        .gchoice{
            .gform-field-label{
                color: var(--e-global-color-text);
                font-family: var(--e-global-typography-text-font-family), Sans-serif;
                font-size: var(--e-global-typography-text-font-size);
                font-weight: var(--e-global-typography-text-font-weight);
                line-height: var(--e-global-typography-text-line-height);
            }
        }
    }
}

.elementor-menu-toggle{
    background-color: transparent !important;
}

.elementor-menu-toggle__icon--open{
    transform: scale(-1, 1);
    transition: all .3s ease !important;

}

.elementor-menu-toggle__icon--open:hover{
    svg{
        rect:nth-child(1){
            height: 50%;
        }

        rect:nth-child(2){
            height: 70%;
        }

        rect:nth-child(3){
            height: 90%;
        }
    }
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    list-style: none;
    padding: 0;

    & div {
        width: 2px;
        background-color: var(--e-global-color-text);
        margin-left: 10px;
        margin-right: 10px;
    }

    & a {
        text-decoration: none;
        color: var(--e-global-color-text);
    }

    & li {
        display: inline;
        transition-duration: .3s;
        transition-property: transform;
        transition-timing-function: ease-out;

        &:hover {
            display: inline;
            transform: translateY(-8px);
        }
    }
}


.intro-element-animation{
    animation: translate-x-anim 1s ease 200ms backwards;

    .subheadline-animated{
        animation: text-scale-anim 1s ease 200ms backwards;
        transform-origin: bottom left;

    }

    .headline-animated{
    }

    .headline-element-animated{

    }

    .additional-element-animated{

    }


}

@keyframes text-scale-anim {
    from {
        transform: scale(0.5); /* Start-Skalierung */
    }
    to {
        transform: scale(1); /* Start-Skalierung */
    }

}

@keyframes translate-x-anim {
    from {
        transform: translateX(300px);
    }
    to {
        transform: translateX(0px);

    }

}

@keyframes opacity-anim {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }

}

#canvas{

    width: 500px;
    height: 500px;

    @media only screen and (max-width: 1024px) and (min-width: 768px)  {
        width: 390px;
        height: 390px;
    }

    @media only screen and (max-width: 767px){
        width: 323px;
        height: 323px;
    }
}

.startseite-anim{
    pointer-events: none !important;
}

/*reduce CLS */
div#scrolling-header {
    height: 132.891px !important;
}

/* On home there is the lottie container box. Reduce CLS with this height*/
.wps-container-height-desktop div.elementor-widget-container {
    height: 515px !important;
}

/* Standard Desktop-Animation */
#homepage-anim-circle {
    -webkit-transform: rotateY(90deg) translateX(40px); /* Webkit 3D-Transformation */
    transform: rotateY(90deg) translateX(40px); /* Start bei 90 Grad und leicht nach rechts verschoben */
    -webkit-transform-origin: right; /* Webkit Pivot auf die rechte Kante */
    transform-origin: right; /* Pivot auf die rechte Kante setzen */
    -webkit-transition: -webkit-transform 2s ease, opacity 1.5s ease-in-out; /* Webkit transition */
    transition: transform 2s ease, opacity 1.5s ease-in-out; /* Opacity-Transition für sanftes Einblenden */
    opacity: 0; /* Anfangszustand: unsichtbar */
    animation: rotateCircle 1.8s ease-in-out forwards 1.8s, fadeIn 1.5s ease-in-out forwards 1.8s;
    height: 515px !important; /*reduce CLS */

    &:before {
        height: 515px !important; /*reduce CLS */
    }
}

@-webkit-keyframes rotateCircle {
    from {
        -webkit-transform: rotateY(90deg) translateX(40px); /* Webkit-Start leicht nach rechts versetzt */
    }
    to {
        -webkit-transform: rotateY(0deg) translateX(0); /* Webkit-Endposition an der regulären Stelle */
    }
}

@keyframes rotateCircle {
    from {
        transform: rotateY(90deg) translateX(40px); /* Beginne leicht nach rechts versetzt */
    }
    to {
        transform: rotateY(0deg) translateX(0); /* Endposition an der regulären Stelle */
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile (max-width: 767px) - von unten her sliden mit Stretch-Effekt */
@media (max-width: 767px) {
    #homepage-anim-circle {
        -webkit-transform: translateY(100vh) scale(0.8, 1.5); /* Start: unterhalb des Bildschirms, gestreckt */
        transform: translateY(100vh) scale(0.8, 1.5); /* Start: unterhalb des Bildschirms, gestreckt */
        -webkit-transform-origin: bottom; /* Pivot auf die Unterkante setzen */
        transform-origin: bottom; /* Pivot auf die Unterkante setzen */
        animation: slideUpWithStretch 1.8s ease-in-out forwards 1.8s, fadeIn 1.5s ease-in-out forwards 1.8s;
    }

    @-webkit-keyframes slideUpWithStretch {
        from {
            -webkit-transform: translateY(100vh) scale(0.8, 1.5); /* Beginnt gestreckt und unterhalb des Bildschirms */
        }
        to {
            -webkit-transform: translateY(0) scale(1, 1); /* Endet in der normalen Position und normaler Größe */
        }
    }

    @keyframes slideUpWithStretch {
        from {
            transform: translateY(100vh) scale(0.8, 1.5); /* Beginnt gestreckt und unterhalb des Bildschirms */
        }
        to {
            transform: translateY(0) scale(1, 1); /* Endet in der normalen Position und normaler Größe */
        }
    }
}


footer {

    .footer-logo img {
        height: 70px !important;
    }
}

/*new homepage */
.not-interactable.fixed-element-in-container {
    z-index: -1;
}

/*!*hero element on home with the image *!*/
.hero-container
{
    min-height: calc(100vh - 132.891px)!important; /* Adjust for header height */
    max-height: calc(100vh - 132.891px)!important;

    & .hero-bg-right {
        min-height: calc(100vh - 132.891px)!important;
        max-height: calc(100vh - 132.891px)!important;

        & h2 {
            width: calc(100vh - 132.891px)!important;

        }
    }
}

@media screen and (min-width: 768px) and (max-width: 1320px) {
 .hero-container {

     & .hero-headline-container {
         max-width: 75% !important;

         & h1.elementor-heading-title {
            font-size: 70px !important;
             line-height: 1.25 !important;
         }

         & div.elementor-heading-title {
            font-size: 60px !important;
                line-height: 1.25 !important;
         }
     }
 }
}

@media screen and (max-width: 767px) {
 .hero-container {
     & .hero-bg-right h2 {
            display: none;
         }
     }
}

/*on home there is an element with class two-col-img-phone. it doesnt work on mobile. */
@media screen and (max-width: 767px) {
 .two-col-img-phone {

     & > .e-con-inner {
         padding-top: 0 !important;
     }

     & .not-interactable.fixed-element-in-container {
         position:relative !important;
         top: 0 !important;

     }

 }
}

/* on home the column-content of the .your-podcast-section overlaps on smaller screens- this should stop that.. */
.your-podcast-section {

    @media screen and (min-width: 768px) and (max-width: 1650px) {

        & .img-with-text-container {
            min-width: 400px;
        }
    }
}

.studio-img-slider {

    & .elementor-image-carousel.swiper-wrapper {
        margin-bottom: 1rem;
    }

    & .swiper-slide img {
        min-height: 300px !important;
        height: 55vh !important;
        max-height: 700px !important;
        object-fit: cover;
    }
}