/* 
  Zambalek Studio - Sticky Stacking Layout
  Refactored for "Section Hiding Section" effect
*/

:root {
    --color-primary: #0066FA;
    --color-dark: #111111;
    --color-light: #FFFFFF;
    --color-bg-body: #dce0e6;
    
    --card-radius: 40px;
    --font-main: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 3D Perspective Container */
.card-section, .process-scroll {
    perspective: 1000px; /* Enable 3D space for children */
}

/* Reveal Animation Classes */
.line-reveal-wrapper {
    overflow: hidden; /* Hide the text before it slides up */
    display: block;
}

.line-reveal {
    display: block;
    transform: translateY(100%); /* Start hidden down */
    opacity: 0;
    will-change: transform, opacity;
}

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-body);
    color: #333;
    overflow-x: hidden;
}

/* --- The Stacking Logic --- */
.stack-wrapper {
    position: relative;
    width: 100%;
}

.card-section {
    position: sticky;
    top: 0;
    min-height: 100vh; 
    width: 100%;
    border-radius: var(--card-radius) var(--card-radius) 0 0; 
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1); 
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    background-color: var(--color-light); 
    padding: 60px;
}

/* --- Section Specific Styling --- */

/* 1. Hero Card */
#card-hero {
    z-index: 1;
    background-color: var(--color-light);
    top: 0; 
}

/* 2. Services Card */
#card-services {
    z-index: 2;
    background-color: #f4f6f8; 
    padding-top: 100px;
    top: 0; 
}

/* 3. Process Card (Sticky Steps) */
/* 3. Process Card (Sticky Steps) */
#card-process {
    z-index: 3;
    /* IMPORTANT: Must be relative so we can scroll THROUGH it */
    position: relative !important; 
    /* CRITICAL FIX: Overflow hidden breaks sticky children. Must be visible. */
    overflow: visible !important;
    background-color: var(--color-light);
    padding-top: 100px;
    padding-bottom: 100px; /* Reduced padding */
    min-height: 180vh; /* Reduced from 300vh to fit compact cards */
    height: auto;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1); 
}

/* 4. Showcase Card (Black) */
#card-showcase {
    z-index: 4;
    background-color: #0a0a0a;
    color: white;
    /* Reduced from 400vh to 250vh */
    height: 250vh !important; 
    min-height: 100vh;
    display: flex;
    align-items: flex-start; 
    overflow: visible; /* Visible so sticky child works */
    /* IMPORTANT: Track must be relative to scroll! */
    position: relative !important; 
}

.showcase-sticky-container {
    /* Content sticks while track scrolls */
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.showcase-slider {
    display: flex;
    gap: 60px;
    width: max-content; /* Let it flow horizontally */
    padding: 0 60px;
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE */
}
.showcase-slider::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}

/* 5. Footer Card */
#card-footer {
    z-index: 5;
    background-color: var(--color-primary);
    color: white;
    min-height: 80vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Internal Layouts --- */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    mix-blend-mode: exclusion;
    color: white;
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin-left: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-content {
    text-align: center;
    margin-top: 10vh;
}

h1 { font-size: 6vw; text-transform: uppercase; line-height: 1; margin-bottom: 20px;}
h2 { font-size: 4vw; text-transform: uppercase; margin-bottom: 40px; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}
.feature-card {
    padding: 40px;
    background: white;
    border-radius: 20px;
    border: 1px solid #eee;
}

/* --- NEW: Process Wrapper with INTERNAL Stacking --- */
.process-wrapper {
    display: flex;
    position: relative;
    height: 100%;
}

.process-sticky {
    position: sticky;
    top: 100px; /* Sticks while steps scroll */
    width: 40%;
    height: 50vh;
    align-self: flex-start;
}

.process-scroll {
    width: 55%;
    margin-left: auto;
    position: relative;
    padding-bottom: 20vh; /* Space at bottom */
}

/* 
   Internal Stacking Logic for Steps 
   FIX: All stick to the SAME top position (15vh) to perfectly overlap
*/
/* Process Section Steps */
.step-item {
    position: sticky;
    top: 15vh; /* Stack point */
    
    /* Reduced size for tighter UI */
    height: auto; 
    min-height: 280px; 
    
    background: white; 
    margin-bottom: 5vh; /* Less gap between cards */
    
    border-radius: 20px; /* Slightly sharper */
    padding: 40px;
    
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center;
    justify-content: space-between;
    
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Softer shadow */
    overflow: hidden; /* For watermark clipping */
    transition: transform 0.3s ease;
}

.step-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
}

/* Watermark Number Style */
.step-num-watermark {
    position: absolute;
    right: -20px;
    bottom: -40px;
    font-size: 10rem;
    font-weight: 900;
    color: #f5f5f5; /* Very subtle grey */
    z-index: 1;
    line-height: 1;
    pointer-events: none;
}

/* Make titles punchy */
.step-content h4 {
    font-size: 2rem;
    color: var(--color-dark);
    margin-bottom: 10px;
}

.step-content p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

/* Interactive accent line */
.step-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.step-item:hover .step-accent {
    opacity: 1;
}

/* Ensure sticking works */
.step-item:nth-child(1) { top: 15vh; z-index: 10; }
.step-item:nth-child(2) { top: 18vh; z-index: 20; } /* Slight offset for deck effect */
.step-item:nth-child(3) { top: 21vh; z-index: 30; }


.showcase-slider {
    display: flex;
    gap: 40px;
    width: 100%;
    padding: 40px 0;
}
.work-img {
    width: 500px;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .card-section {
        padding: 40px 20px;
        min-height: 80vh; 
    }
    .process-wrapper { 
        flex-direction: column; 
    }
    .process-sticky { position: relative; top: 0; width: 100%; height: auto; margin-bottom: 40px; }
    .process-scroll { width: 100%; }
    .step-item {
        position: relative;
        top: 0 !important; /* Disable internal sticky on mobile usually */
        height: auto;
        min-height: 50vh;
        margin-bottom: 20px;
    }
}