/* =========================================
   HOME REBUILD - ISOLATED STYLES
   ========================================= */

/* 1. Feed Container - The "Stage" */
.jvm-feed {
    position: relative;
    width: 100%;
    margin-top: 80px;
    /* Nav offset */
    background: #000;
    min-height: 100vh;
    cursor: default;
    /* Default fallback */
}

/* When inside the feed, we HIDE the system cursor */
.jvm-feed:hover {
    cursor: none !important;
}

/* 2. Individual Case Sections */
.jvm-case {
    display: block !important;
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* CRITICAL: Ensure this element captures the mouse */
    pointer-events: auto !important;
    cursor: none !important;
    /* redundancy */
}

/* Video Background - Must NOT capture mouse */
.jvm-case video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: all 0.6s ease;
    pointer-events: none !important;
    /* TRANSPARENT TO MOUSE */
    z-index: 0;
}

.jvm-case:hover video {
    transform: scale(1.03);
    opacity: 1;
}

/* Overlay Content - Must NOT capture mouse */
.jvm-case-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 5%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 2;
    pointer-events: none !important;
    /* TRANSPARENT TO MOUSE */
}

.case-info h2 {
    font-size: 3.5rem;
    margin: 0;
    color: white;
    line-height: 1;
}

.case-info span {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 3. THE CUSTOM CURSOR - Fixed, Top of Everything */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    pointer-events: none;
    /* Critical: Mouse passes through to links */
    z-index: 999999999;

    display: flex;
    justify-content: center;
    align-items: center;

    /* Text styling */
    color: black;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    text-align: center;

    /* Initial State: Hidden or Small */
    opacity: 0;
    /* transform handles position/scale via JS now, but initial state needs hiding */

    /* Only transition opacity. Transform is handled by RAF */
    transition: opacity 0.2s ease;
}

/* Active State (Hovering a case) */
.custom-cursor.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Mobile: Disable custom behavior & Optimize Layout */
@media (max-width: 768px) {
    .jvm-feed:hover {
        cursor: auto !important;
    }

    .jvm-case {
        cursor: pointer !important;
        height: auto !important;
        /* Allow aspect ratio to control height */
        aspect-ratio: 16/9;
        /* STRICT USER REQUEST */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .custom-cursor {
        display: none !important;
    }

    /* JvM Style Mobile Typography */
    .case-info h2 {
        font-size: 2.1rem;
        /* Adjusted to fit long words like 'Prozessbegleitung' */
        line-height: 1.1;
        letter-spacing: -0.5px;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .case-info span {
        font-size: 0.8rem;
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
        display: block;
    }

    .jvm-case-overlay {
        padding: 2rem 1.25rem;
        /* Slightly more space for text */
    }

    /* Socials Section: Flex Layout to Fill Horizontal Space */
    .social-grid {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
    }

    .social-grid video {
        flex: 1 1 0 !important;
        /* Grow to fill space equally */
        width: auto !important;
        height: 100% !important;
        object-fit: cover;
        transform: none !important;
        /* Disable scroll jitter/offset */
    }

    .social-grid video:nth-child(n+4) {
        display: none !important;
        /* Show 3 videos (1-3), hide 4th. 3 ensures full fill. */
    }
}

/* Video Fade Transition Overlay */
.video-fade-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1;
    /* Above video (0), below text (2) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Social Grid Layout */
.social-grid {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none !important;
    z-index: 0;
    overflow: hidden;
    /* Critical for fly-in effect */
}

.social-grid video {
    position: relative !important;
    /* Override .jvm-case video absolute positioning */
    width: 25% !important;
    /* Ensure 4 columns */
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    will-change: transform;
    transition: none !important;
    /* CRITICAL: Remove easing for direct scroll control */
}

/* Hover effect targets the container's videos */
.jvm-case:hover .social-grid video {
    opacity: 1;
    transform: scale(1.03);
}