/* CSS Reset and General Variables */
:root {
    --bg-color: #f7f6f3;
    --text-primary: #1a1a1a;
    --gold: #b47b4b;
    --font-outfit: 'Outfit', sans-serif;
}

body {background-color: var(--bg-color);color: var(--text-primary);font-family: var(--font-outfit);overflow-x: hidden; overflow-y: scroll; line-height: 1.5;-webkit-font-smoothing: antialiased;width: 100%;}

/* Pinned Scroll Animation Section */
.animation-container {width: 100vw;height: 100vh;position: relative;background-color: var(--bg-color);}

.pinned-section {position: relative;width: 100vw;height: 100vh;overflow: hidden;display: flex;align-items: center;justify-content: center;}

/* Ambient glow lights behind elements */
.ambient-glow {position: absolute;width: 500px;height: 500px;border-radius: 50%;filter: blur(140px);z-index: 0;opacity: 0.06;pointer-events: none;}
.glow-1 {background-color: var(--gold);top: -150px;left: -150px;}
.glow-2 {background-color: var(--gold);bottom: -150px;right: -150px;}

/* Floating Scroll hint */
.scroll-hint {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: 8px;z-index: 10;opacity: 1;transition: opacity 0.3s ease;}
.mouse {width: 22px;height: 36px;border: 2px solid rgba(0, 0, 0, 0.25);border-radius: 12px;position: relative;}
.wheel {width: 3px;height: 6px;background-color: var(--gold);border-radius: 2px;position: absolute;top: 6px;left: 50%;transform: translateX(-50%);animation: scrollWheel 2s infinite ease-in-out;}

@keyframes scrollWheel {
    0% { top: 6px; opacity: 0; }
    30% { opacity: 1; }
    100% { top: 18px; opacity: 0; }
}

/* Cards Wrapper Grid - Matches Video Proportions */
.cards-container {
    display: flex;
    position: absolute;
    width: 88vw;
    height: 65vh;
    top: 14vh;
    left: 6vw;
    justify-content: center;
    align-items: center;
    z-index: 3;
    perspective: 2500px;
}

/* Card Container Setup */
.card {
    position: absolute;
    height: 65vh;
    width: 17.6vw; /* Exact 20% of 88vw container width initially (no gap) */
    top: 0;
    z-index: 4;
    cursor: default;
    perspective: 2500px;
    background-color: #f7f6f3;
    will-change: transform;
    border: none;
    transform-origin: 50% 100%;
}

/* 3D container element rotated by GSAP */
.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    border-radius: 0px; /* Sharp corners, rounded via JS */
}

/* Card Face wrapper */
.card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Front Face (initially transparent, shows banner slices) */
.face-front {
    z-index: 3;
    transform: rotateY(0deg);
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
     border-radius: 0;
}

/* Image Banner slice layer */
.img-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 4;
    opacity: 1;
}

/* Details Text Content (placed inside face-front, initially hidden) */
.details-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
    opacity: 0; /* Hidden initially */
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.45); /* Lighter semi-transparent black overlay */
}

/* Details state background (shows same amenity photo as Flip 1) */
.img-details-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 4;
    opacity: 0; /* Hidden initially so the contiguous banner image is visible */
}

.card-title {
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff; /* White title for high contrast */
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.4;
    font-family: "gibstone";
}

.card-desc {
    font-size: 12px !important;
    line-height: 1.6;
    font-weight: 400;
    color: #e0e0e0 !important; /* Soft light gray for high contrast readability on dark overlays */
}

/* Back Face (holds amenity images) */
.face-back {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotateY(180deg); /* Pre-rotated for Y-flip */
    z-index: 2;
}

/* Positioning absolute lefts and consecutive z-index stacking (card over card) */
.card-1 { left: 0vw; z-index: 6; }
.card-2 { left: 17.6vw; z-index: 7; }
.card-3 { left: 35.2vw; z-index: 8; }
.card-4 { left: 52.8vw; z-index: 9; }
.card-5 { left: 70.4vw; z-index: 10; }

/* Bottom Info Panel (exactly like in first video.mp4) */
.bottom-info {
    position: absolute;
    bottom: 30px;
    left: 6vw;
    width: 88vw;
    height: 25vh;
    display: flex;
    justify-content: space-between;
    /* align-items: flex-end; */
    z-index: 5;
    color: #1a1a1a;
    opacity: 1;
}
.info-left {
    font-size: 13px;
    line-height: 1.6;
    color: #555555;
    max-width: 450px;
    font-weight: 400;
}
.info-right {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #1a1a1a;
}

/* Responsive adjustment for Mobile and Tablets */
@media (max-width: 768px) {
.cards-container {display: flex;position: absolute;width: 90vw;height: 60vh;top: 15vh;left: 5vw;justify-content: center;align-items: center;z-index: 3;perspective: 2000px;}

.card {position: absolute;height: 25vh;width: 18vw;top: 15vh;z-index: 4;cursor: default;perspective: 2000px;will-change: transform;}

/* Consecutive stacking on mobile initially (card over card) */
.card-1 { left: 0vw; z-index: 6; }
.card-2 { left: 18vw; z-index: 7; }
.card-3 { left: 36vw; z-index: 8; }
.card-4 { left: 54vw; z-index: 9; }
.card-5 { left: 72vw; z-index: 10; }

.bottom-info {display: none !important;}
.animation-container{display: none !important;}
}