/* Test Parallax Page Styles */
html {
    scroll-behavior: smooth;
}

/* Parallax effect */
.parallax-section {
    position: relative;
    /*background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;*/
    overflow: hidden;
    -webkit-perspective: 1px;
            perspective: 1px;
}

.parallax-section .parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-attachment: fixed;*/
    background-position: center;
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-size: cover;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    z-index: -1;
    /*added for iOS*/
    -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
}

.parallax-section.in-view .parallax-background {
    opacity: 0.3;
}
.parallax-section .section-inner {
    position: relative;
    z-index: 1;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
#parallax-test-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* Background Layers */
.parallax-backgrounds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

#test-bg-layer1 {
    background-image: url('/wp-content/themes/theLive/library/images/background/0_bg_frame24.webp');
    opacity: 0.8;
}

#test-bg-layer2 {
    background-image: url('/wp-content/themes/theLive/library/images/background/1_bg_eyes24.webp');
    opacity: 0.8;
}

#test-bg-layer3 {
    background-image: url('/wp-content/themes/theLive/library/images/background/2_bg_ears24.png');
    opacity: 0.8;
}

/* Content Sections */
.test-content-wrapper {
    position: relative;
    z-index: 1;
}

.test-section {
    position: relative;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 2rem;
    color: #fff;
}

.test-hero-section {
    height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    color: #fff;
}

.section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.content-block {
    background: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Three.js Animation Container */
#bg-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-inner {
        padding: 1rem;
    }

    .content-block {
        padding: 1rem;
    }
}

/* Define animations for each section */
@-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 50px, 0);
              transform: translate3d(0, 50px, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
@keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 50px, 0);
              transform: translate3d(0, 50px, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
  
  .about-section.animate,
  .news-section.animate {
    -webkit-animation: fadeInUp 1s ease-out;
            animation: fadeInUp 1s ease-out;
  }

  @-webkit-keyframes floatAnimation {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

  @keyframes floatAnimation {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

.section-title-div h2 {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.section-title-div h2.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation: floatAnimation 3s infinite ease-in-out;
            animation: floatAnimation 3s infinite ease-in-out;
}
@keyframes floatAnimation {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px);
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
.section-feed .news-block {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.section-feed .news-block.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
.stage {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.stage.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation: floatAnimation 3s infinite ease-in-out;
            animation: floatAnimation 3s infinite ease-in-out;
}
.artist-div {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.artist-div.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
.map-area {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}
.ticket-section .special-button {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.ticket-section .special-button.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
.map-area.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
.faq-section .information-block {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.faq-section .information-block.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
.sponsor {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    -o-transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.sponsor.animate {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}