/* Scroll Animation & Hover Effects */

/* Prevent horizontal scroll bug during scroll animations */
html, body {
    overflow-x: hidden;
}

.trip-grid {
    overflow-x: hidden;
}

/* 1. Section fade-in & slide-up / slide-right when entering viewport */
.fade-up {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-right {
    opacity: 0;
    transform: translateX(50px) scale(0.96);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-up.in-view, .fade-right.in-view {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Staggered delay for card items to make it lively */
.fade-up.delay-1, .fade-right.delay-1 { transition-delay: 75ms; }
.fade-up.delay-2, .fade-right.delay-2 { transition-delay: 150ms; }
.fade-up.delay-3, .fade-right.delay-3 { transition-delay: 225ms; }
.fade-up.delay-4, .fade-right.delay-4 { transition-delay: 300ms; }

/* Apply staggered delay to children in a grid if they don't have explicit delay classes */
.trip-grid > .fade-up:nth-child(1), .trip-grid > .fade-right:nth-child(1) { transition-delay: 0ms; }
.trip-grid > .fade-up:nth-child(2), .trip-grid > .fade-right:nth-child(2) { transition-delay: 75ms; }
.trip-grid > .fade-up:nth-child(3), .trip-grid > .fade-right:nth-child(3) { transition-delay: 150ms; }
.trip-grid > .fade-up:nth-child(4), .trip-grid > .fade-right:nth-child(4) { transition-delay: 225ms; }
.trip-grid > .fade-up:nth-child(5), .trip-grid > .fade-right:nth-child(5) { transition-delay: 300ms; }
.trip-grid > .fade-up:nth-child(6), .trip-grid > .fade-right:nth-child(6) { transition-delay: 375ms; }
.trip-grid > .fade-up:nth-child(7), .trip-grid > .fade-right:nth-child(7) { transition-delay: 450ms; }
.trip-grid > .fade-up:nth-child(8), .trip-grid > .fade-right:nth-child(8) { transition-delay: 525ms; }

/* 2. Image zoom on hover (scale 1.03) */
.trip-thumb-wrap, .trip-thumb {
    overflow: hidden; /* Prevent layout shift and contain the image */
}

.trip-thumb {
    transition: transform 300ms ease-out;
    will-change: transform;
}

.trip-card-modern:hover .trip-thumb {
    transform: scale(1.03);
}

/* 3. Card shadow and slide-up on hover */
.trip-card-modern {
    transition: transform 300ms ease-out, box-shadow 300ms ease-out;
    will-change: transform, box-shadow;
}

.trip-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}