/* Journey Section Styles */

/* Home page body background */
body {
    background-color: #ffffff !important;
}

/* Footer background fix */
.footer-wrapper::before {
    background-color: #ffffff00;
}

/* Footer adjustments when content is hidden */
.home-background:has(.geo-hidden) ~ .footer-wrapper {
    z-index: 999;
    margin-top: 10rem !important;
}

/* Geo-IP based hiding */
.geo-hidden {
    display: none !important;
}

/* When discover sections are hidden, adjust background and layout */
.home-background:has(.geo-hidden) {
    background-position: top center;
}

/* Fix background image height when content is hidden */
.home-background:has(.geo-hidden) img.starbg {
    height: auto;
    max-height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* When 4th star is hidden, evenly space the remaining 3 stars */
.ramdhan-journy .heart-box:has(.journey-star-item[data-order="4"].geo-hidden) {
    justify-content: space-evenly;
    gap: 2rem;
}

/* Update title color to blue */
.ramdhan-journy h2 {
    color: #1c4097 !important;
}

/* Journey star items - initially hidden for popup animation */
.journey-star-item {
    opacity: 0;
    transform: scale(0) translateY(50px);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    flex: 0 0 auto;
    max-width: 450px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure parent container has proper spacing */
.ramdhan-journy .heart-box {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

/* When animated in */
.journey-star-item.animate-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Constrain the journey star images */
.journey-star-item img.journey-star {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Journey star hover effect */
.journey-star-item:hover {
    transform: scale(1.15) translateY(-10px);
    transition: all 0.3s ease;
}

.journey-star-item:hover img.journey-star {
    filter: brightness(1.1);
}

/* Sequential animation delays */
.journey-star-item[data-order="1"] {
    transition-delay: 0.1s;
}

.journey-star-item[data-order="2"] {
    transition-delay: 0.3s;
}

.journey-star-item[data-order="3"] {
    transition-delay: 0.5s;
}

.journey-star-item[data-order="4"] {
    transition-delay: 0.7s;
}

/* Ensure stars are visible and properly styled */
img.journey-star {
    transition: all 0.3s ease;
}

/* Responsive sizing */
@media (max-width: 1300px) {
    .journey-star-item {
        max-width: 380px;
    }
}

@media (max-width: 1199px) {
    .journey-star-item {
        max-width: 320px;
    }
}

/* Mobile responsive updates */
@media (max-width: 1199px) {
    .ramdhan-journy h2 {
        color: #1c4097 !important;
    }
}

@media (max-width: 991px) {
    .ramdhan-journy h2 {
        color: #1c4097 !important;
    }
}

@media (max-width: 767px) {
    .ramdhan-journy h2 {
        color: #1c4097 !important;
    }
    
    .journey-star-item {
        max-width: 220px;
    }
    
    .journey-star-item:hover {
        transform: scale(1.1) translateY(-5px);
    }
}