/* Home Banner Section */
.home-banner-section {
    position: relative;
    height: 150vh;
    overflow: hidden;
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(0);
    transition: transform 0.1s ease-out;
}

/* Add parallax scrolling effect */
.banner-background.parallax {
    transform: translateY(calc(var(--scroll-y) * -0.5));
}

.banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

.banner-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    opacity: 1;
    color: var(--Primary-Alabaster, #F6F4EF);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.banner-subtitles {
    position: absolute;
    width: 100%;
    height: 60vh;
    max-width: none;
    top: 90vh;
    left: 0;
}

.subtitle-line {
    position: absolute;
    width: 100%;
    height: 100%;
}

.subtitle-part {
    position: absolute;
    font-size: 1.4rem;
    opacity: 0;
    transform: translateY(40px);
    color: var(--Primary-Alabaster, #F6F4EF);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 0 10px rgba(246, 244, 239, 0.3);
    transition: opacity 2.2s ease, transform 2.2s ease;
}

.subtitle-part.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Add a subtle animation on hover for visible parts */
.subtitle-part.visible:hover {
    transform: translateY(-2px) scale(1.05);
    text-shadow: 0 0 15px rgba(246, 244, 239, 0.5);
}

/* Line 1 positioning - left side */
.subtitle-part[data-index="0"] {
    bottom: 80%;
    left: 10%;
    animation-delay: 0ms;
}

.subtitle-part[data-index="1"] {
    bottom: 70%;
    left: 26%;
    animation-delay: 150ms;
}

.subtitle-part[data-index="2"] {
    bottom: 85%;
    left: 40%;
    animation-delay: 300ms;
}

.subtitle-part[data-index="3"] {
    bottom: 60%;
    left: 25%;
    animation-delay: 450ms;
}

.subtitle-part[data-index="4"] {
    bottom: 50%;
    left: 12%;
    animation-delay: 600ms;
}

.subtitle-part[data-index="5"] {
    bottom: 90%;
    left: 20%;
    animation-delay: 750ms;
}

.subtitle-part[data-index="6"] {
    bottom: 40%;
    left: 18%;
    animation-delay: 900ms;
}

.subtitle-part[data-index="7"] {
    bottom: 95%;
    left: 30%;
    animation-delay: 1050ms;
}

.subtitle-part[data-index="8"] {
    bottom: 30%;
    left: 22%;
    animation-delay: 1200ms;
}

.subtitle-part[data-index="9"] {
    bottom: 100%;
    left: 10%;
    animation-delay: 1350ms;
}

/* Line 2 positioning - right side */
.subtitle-part[data-line="2"][data-index="0"] {
    bottom: 45%;
    left: 10%;
    animation-delay: 1500ms;
}

.subtitle-part[data-line="2"][data-index="1"] {
    bottom: 35%;
    left: 15%;
    animation-delay: 1650ms;
}

.subtitle-part[data-line="2"][data-index="2"] {
    bottom: 45%;
    left: 25%;
    animation-delay: 1800ms;
}

.subtitle-part[data-line="2"][data-index="3"] {
    bottom: 25%;
    left: 35%;
    animation-delay: 1950ms;
}

.subtitle-part[data-line="2"][data-index="4"] {
    bottom: 65%;
    left: 60%;
    animation-delay: 2100ms;
}

.subtitle-part[data-line="2"][data-index="5"] {
    bottom: 20%;
    left: 75%;
    animation-delay: 2250ms;
}

.subtitle-part[data-line="2"][data-index="6"] {
    bottom: 75%;
    left: 65%;
    animation-delay: 2400ms;
}

.subtitle-part[data-line="2"][data-index="7"] {
    bottom: 15%;
    left: 80%;
    animation-delay: 2550ms;
}

/* Responsive Design */
@media (max-width: 768px) {
    .banner-title {
        font-size: 2rem;
    }

    .subtitle-part {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .banner-title {
        font-size: 1.5rem;
    }

    .subtitle-part {
        font-size: 0.9rem;
    }
    
    /* Adjust positioning for mobile */
    .subtitle-part[data-index="0"] { bottom: 85%; left: 5%; }
    .subtitle-part[data-index="1"] { bottom: 75%; left: 15%; }
    .subtitle-part[data-index="2"] { bottom: 90%; left: 10%; }
    .subtitle-part[data-index="3"] { bottom: 65%; left: 20%; }
    .subtitle-part[data-index="4"] { bottom: 55%; left: 8%; }
    .subtitle-part[data-index="5"] { bottom: 95%; left: 12%; }
    .subtitle-part[data-index="6"] { bottom: 45%; left: 18%; }
    .subtitle-part[data-index="7"] { bottom: 100%; left: 25%; }
    
    .subtitle-part[data-line="2"][data-index="0"] { bottom: 50%; left: 10%; }
    .subtitle-part[data-line="2"][data-index="1"] { bottom: 40%; left: 15%; }
    .subtitle-part[data-line="2"][data-index="2"] { bottom: 60%; left: 25%; }
    .subtitle-part[data-line="2"][data-index="3"] { bottom: 30%; left: 35%; }
}

/* Overlay for better text readability */
.banner-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}