/**
 * Animated Text Lines Styles
 *
 * CSS keyframe animations triggered by IntersectionObserver
 */

/* =============================================
   KEYFRAMES
   ============================================= */

@keyframes lineFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes lineFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* =============================================
   TEXT CONTAINERS - Base Styles
   ============================================= */

.animated-text .e-con.e-child {
    position: relative;
    overflow: hidden;
}

/* Hide text initially */
.animated-text .e-con.e-child .elementor-heading-title {
    opacity: 0;
}

/* Text fade in after lines complete */
.animated-text .e-con.e-child.animate .elementor-heading-title {
    animation: textFadeIn 1.2s ease-out forwards;
    animation-delay: 1.2s;
}

/* =============================================
   SECTION 0: BOTTOM LINE FROM LEFT
   ============================================= */

.animated-text .animate-0::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    height: 1px;
    width: 100%;
    background: #E0DFDB;
    transform: translateX(-100%);
}

.animated-text .animate-0.animate::after {
    animation: lineFromLeft 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: 0s;
}

/* =============================================
   SECTION 1: BOTTOM LINE FROM RIGHT
   ============================================= */

.animated-text .animate-1::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    height: 1px;
    width: 100%;
    background: #E0DFDB;
    transform: translateX(100%);
}

.animated-text .animate-1.animate::after {
    animation: lineFromRight 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: 0.24s;
}

/* =============================================
   SECTION 2: BOTTOM LINE FROM LEFT
   ============================================= */

.animated-text .animate-2::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    height: 1px;
    width: 100%;
    background: #E0DFDB;
    transform: translateX(-100%);
}

.animated-text .animate-2.animate::after {
    animation: lineFromLeft 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: 0.48s;
}

/* =============================================
   SECTION 3: BOTTOM LINE FROM RIGHT
   ============================================= */

.animated-text .animate-3::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    height: 1px;
    width: 100%;
    background: #E0DFDB;
    transform: translateX(100%);
}

.animated-text .animate-3.animate::after {
    animation: lineFromRight 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: 0.72s;
}

/* =============================================
   INTRO CONTAINER BORDER ANIMATION
   ============================================= */

#intro-con::after {
    transition: width 2.4s ease-out;
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */

@media (max-width: 1024px) {
    .animated-text .animate-line::after {
        bottom: 23px;
    }
}

@media (max-width: 768px) {
    .animated-text .animate-line::after {
        bottom: 8px;
    }
}