/* kinetic-stack.css */
/* Kinetic Stack Design System */

:root {
    --ks-white: #FFFFFF;
    --ks-off-white: #F9F9F9;
    --ks-black: #111111;
    --ks-blue: #4A90E2;
    /* Brand Impact Blue */
    --ks-font-serif: "Playfair Display", serif;
    --ks-font-sans: "DM Sans", sans-serif;
}

/* --- Section Layout --- */
.kinetic-section {
    background-color: var(--ks-white);
    color: var(--ks-black);
    position: relative;
    padding-bottom: 100px;
    z-index: 10;
}

/* Header (Static at top of section) */
.ks-header {
    text-align: center;
    padding: 120px 20px 60px;
    max-width: 900px;
    margin: 0 auto;
}

.ks-title {
    font-family: var(--ks-font-serif);
    font-size: 4rem;
    /* Big and bold */
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--ks-black);
}

.ks-title span {
    color: var(--ks-blue);
    font-style: italic;
}

.ks-subtitle {
    font-family: var(--ks-font-sans);
    font-size: 1.25rem;
    color: #666;
    line-height: 1.6;
}

/* --- The Stacking Arena --- */
/* This container will be pinned by GSAP */
.ks-stack-wrapper {
    position: relative;
    width: 100%;
    /* We need height to allow scrolling "through" the animation */
    /* But the pinned element itself is 100vh. The spacer is handled by GSAP */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* The Cards */
.ks-card {
    position: absolute;
    /* They stack on top of each other */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centered initially */
    width: 90%;
    max-width: 1000px;
    height: 70vh;
    /* Consistent height */

    background: var(--ks-white);
    border-radius: 30px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
    /* Premium soft shadow */
    border: 1px solid rgba(0, 0, 0, 0.05);

    display: flex;
    /* Grid layout inside card */
    overflow: hidden;

    /* GSAP will control z-index and transforms */
    will-change: transform;
}

/* Card Interior Layout */
.ks-card-content {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ks-card-visual {
    flex: 1;
    background-color: var(--ks-off-white);
    position: relative;
    overflow: hidden;
    min-width: 40%;
}

.ks-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

/* Typography inside card */
.ks-number {
    font-family: var(--ks-font-sans);
    font-weight: 700;
    font-size: 6rem;
    color: rgba(0, 0, 0, 0.05);
    /* Architectural numbering */
    line-height: 1;
    margin-bottom: -20px;
    /* Overlap effect */
    display: block;
}

.ks-card-title {
    font-family: var(--ks-font-serif);
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--ks-black);
}

.ks-card-desc {
    font-family: var(--ks-font-sans);
    font-size: 1.125rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Interaction: Visual Hover */
.ks-card:hover .ks-card-visual img {
    transform: scale(1.05);
}

/* Decorative Pill for Keywords */
.ks-pill {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(74, 144, 226, 0.1);
    color: var(--ks-blue);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 20px;
    width: fit-content;
}

/* --- Mobile --- */
@media (max-width: 991px) {
    .kinetic-section {
        padding-bottom: 50px;
    }

    .ks-title {
        font-size: 2.5rem;
    }

    .ks-stack-wrapper {
        height: auto;
        display: block;
        padding-bottom: 50px;
    }

    .ks-card {
        position: relative;
        top: auto;
        left: auto;
        transform: none !important;
        /* Disable pinning logic styling */
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        flex-direction: column-reverse;
        /* Image on top */
    }

    .ks-card-visual {
        height: 250px;
        min-height: 250px;
    }

    .ks-card-content {
        padding: 40px 20px;
    }

    .ks-number {
        font-size: 4rem;
    }

    .ks-card-title {
        font-size: 2rem;
    }
}