/* Scroll Animation Classes */
.scroll-reveal {
    opacity: 0;
    visibility: hidden;
}

/* Title Animation */
.section-title-luxury-new {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
}

/* Hotel Cards Animation */
.hotel-card {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s ease forwards;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
}

.hotel-card:nth-child(1) { animation-delay: calc(var(--scroll) * -0.2s); }
.hotel-card:nth-child(2) { animation-delay: calc(var(--scroll) * -0.4s); }
.hotel-card:nth-child(3) { animation-delay: calc(var(--scroll) * -0.6s); }
.hotel-card:nth-child(4) { animation-delay: calc(var(--scroll) * -0.8s); }

/* Hotel Info Animation */
.hotel-info {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInRight 0.8s ease forwards;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
}

/* Facility Items Animation */
.facility-item {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.5s ease forwards;
    animation-play-state: paused;
}

.facility-item:nth-child(1) { animation-delay: calc(var(--scroll) * -0.3s); }
.facility-item:nth-child(2) { animation-delay: calc(var(--scroll) * -0.4s); }
.facility-item:nth-child(3) { animation-delay: calc(var(--scroll) * -0.5s); }
.facility-item:nth-child(4) { animation-delay: calc(var(--scroll) * -0.6s); }
.facility-item:nth-child(5) { animation-delay: calc(var(--scroll) * -0.7s); }
.facility-item:nth-child(6) { animation-delay: calc(var(--scroll) * -0.8s); }
.facility-item:nth-child(7) { animation-delay: calc(var(--scroll) * -0.9s); }
.facility-item:nth-child(8) { animation-delay: calc(var(--scroll) * -1.0s); }

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Intersection Observer Classes */
.animate {
    animation-play-state: running !important;
}

/* 4-Star Hotels Section Animations */
.four-star-title {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
}

.main-image-container {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 1s ease forwards;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
}

.thumbnail-container {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1.2s);
}

.thumbnail-item {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInRight 0.5s ease forwards;
    animation-play-state: paused;
}

.thumbnail-item:nth-child(1) { animation-delay: calc(var(--scroll) * -1.3s); }
.thumbnail-item:nth-child(2) { animation-delay: calc(var(--scroll) * -1.4s); }
.thumbnail-item:nth-child(3) { animation-delay: calc(var(--scroll) * -1.5s); }
.thumbnail-item:nth-child(4) { animation-delay: calc(var(--scroll) * -1.6s); }

/* Add scale animation for thumbnails */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Add right slide animation */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
} 