/* ==========================================
   LANDING PAGE, BARBA, & LIGHTBOX (index.css)
========================================== */
:root {
    --primary: #10B981; 
    --primary-dark: #047857;
    --dark: #020617; 
    --slate-800: #1E293B;
    --text-main: #334155;
    --text-muted: #64748B;
    --light: #F8FAFC;
    --white: #FFFFFF;
}

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    -webkit-font-smoothing: antialiased;
}

body { 
    background-color: var(--light); 
    color: var(--text-main); 
    font-family: 'Inter', sans-serif;
}

/* ==========================================
   CUSTOM PREMIUM SCROLLBAR
========================================== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

/* --- PRELOADER STYLES --- */
.preloader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: var(--dark); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}
.preloader-content { text-align: center; color: var(--white); }
.preloader-icon {
    color: var(--primary); margin-bottom: 1rem;
    animation: pulseIcon 1.5s infinite alternate ease-in-out;
}
.preloader-content h2 { font-family: 'Outfit', sans-serif; letter-spacing: 1px; margin-bottom: 1.5rem; }
.loading-bar {
    width: 200px; height: 4px; background: rgba(255,255,255,0.1);
    border-radius: 4px; margin: 0 auto; overflow: hidden; position: relative;
}
.loading-progress {
    width: 40%; height: 100%; background: var(--primary);
    border-radius: 4px; position: absolute; left: -40%;
    animation: loadSwipe 1.5s infinite ease-in-out;
}

@keyframes pulseIcon {
    0% { transform: scale(0.9); filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.4)); }
    100% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8)); }
}
@keyframes loadSwipe {
    0% { left: -40%; }
    100% { left: 100%; }
}

.barba-container { visibility: hidden; }

/* ==========================================
   REAL 3D IMAGE STACKING GALLERY
========================================== */
.stacking-gallery {
    background-color: var(--dark); 
    padding: 100px 5% 200px; 
    color: var(--white);
}

.gallery-header { text-align: center; max-width: 600px; margin: 0 auto 80px; }
.gallery-header h2 { font-family: 'Outfit', sans-serif; font-size: 2.5rem; margin-bottom: 1rem; }
.gallery-header p { color: #94A3B8; font-size: 1.1rem; line-height: 1.6; }

.stack-container {
    display: flex; flex-direction: column; align-items: center;
    gap: 20vh; padding-bottom: 10vh;
}

.stack-card {
    position: sticky; 
    width: 100%; max-width: 1000px; height: 70vh; 
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6), 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255,255,255,0.1);
    will-change: transform;
}

.stack-card img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    background-color: #1E293B; 
}

.card-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: black; opacity: 0; pointer-events: none;
}

/* Lowered sticky positions to clearly show the stacking */
.card-1 { top: 20vh; }
.card-2 { top: 24vh; }
.card-3 { top: 28vh; }
.card-4 { top: 32vh; }
.card-5 { top: 36vh; }

@media (max-width: 768px) {
    .stack-card { height: 50vh; }
    .gallery-header h2 { font-size: 2rem; }
}

/* ==========================================
   FULLSCREEN IMAGE MODAL (LIGHTBOX)
========================================== */
.image-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(2, 6, 23, 0.95); 
    z-index: 99999; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; backdrop-filter: blur(8px);
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}

.image-modal.active {
    opacity: 1; pointer-events: auto; cursor: zoom-out; 
}

.image-modal img {
    max-width: 90vw; max-height: 85vh; border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.7) translateY(30px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.image-modal.active img {
    transform: scale(1) translateY(0);
    opacity: 1;
}