/* Hide Default Scrollbar */
        ::-webkit-scrollbar { display: none; }
        body { -ms-overflow-style: none; scrollbar-width: none; cursor: none; } /* Hide default cursor */
        /* Custom Cursor */
        .cursor {
            width: 12px;
            height: 12px;
            background-color: #f4f4f4;
            border-radius: 50%;
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s, background-color 0.3s;
            mix-blend-mode: difference;
        }
        .cursor.active {
            width: 60px;
            height: 60px;
            background-color: white;
            mix-blend-mode: difference;
        }
        /* Preloader */
        #preloader {
            position: fixed;
            inset: 0;
            background: #0e0e0e;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Huge Typography Styles */
        .title-huge {
            font-size: clamp(3rem, 12vw, 15rem);
            line-height: 0.85;
            letter-spacing: -0.04em;
            font-weight: 900;
            text-transform: uppercase;
        }
        /* Hover Reveal List Styles */
        .hover-list-item {
            color: rgba(244, 244, 244, 0.3);
            transition: color 0.4s ease, padding-left 0.4s ease;
            cursor: none;
        }
        .hover-list-item:hover {
            color: #f4f4f4;
            padding-left: 2rem;
        }
        .bg-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease;
            transform: scale(1.05);
        }
        .bg-media.active {
            opacity: 0.4;
            transform: scale(1);
        }
/* Dual Blob Animations */
@keyframes blobVideoMorph {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    33%  { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
    66%  { border-radius: 70% 30% 50% 50% / 30% 40% 60% 70%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes blobOutlineMorph {
    0%   { border-radius: 40% 60% 50% 50% / 40% 50% 60% 50%; }
    33%  { border-radius: 70% 30% 70% 30% / 60% 40% 50% 40%; }
    66%  { border-radius: 30% 70% 40% 60% / 50% 30% 70% 50%; }
    100% { border-radius: 40% 60% 50% 50% / 40% 50% 60% 50%; }
}
.blob-container {
    position: relative;
    /* Massive size as requested */
    /* width: min(65vw, 850px); */
    width: min(40vw, 850px);
    height: min(80vh, 800px);
}
@media (max-width: 768px) {
    .blob-container {
        width: min(80vw, 600px);
        height: min(60vh, 500px);
    }
}
/* The Solid Video Mask */
.blob-video {
    position: absolute;
    inset: 0;
    animation: blobVideoMorph 14s ease-in-out infinite alternate;
    will-change: border-radius;
    overflow: hidden;
    background: #161616;
    /* Forces safari to respect border-radius clipping on videos */
    transform: translateZ(0); 
}
/* The Overlapping Wireframe Line */
.blob-outline {
    position: absolute;
    /* Push it slightly off-center to create the crossover effect from your image */
    inset: -5% 5% 5% -5%; 
    border: 2px solid #d4c2a5; /* Tan/Beige color from your reference */
    animation: blobOutlineMorph 18s ease-in-out infinite alternate-reverse;
    will-change: border-radius;
    pointer-events: none;
    opacity: 0.6;
}
/* Custom Inversa-Style Geometric Shape */
.tech-cutout {
    /* Creates the angled cut on the middle-left and a small notch on the bottom-right */
    clip-path: polygon(12% 0, 100% 0, 100% calc(100% - 4%), calc(100% - 6%) 100%, 0 100%, 0 35%);
    will-change: transform, clip-path;
}
/* SVG Mask - Smooth Edges */
.tech-mask {
    width: 100%;
    height: 100%;
    /* Apply the user's custom SVG as an alpha mask */
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 776 830'%3E%3Cpath fill='black' d='M74.205 10c0-5.523 4.477-10 10-10H766c5.523 0 10 4.477 10 10v732.301c0 5.523-4.477 10-10 10H583.928c-1.274 0-2.536.244-3.718.717l-190.42 76.265a10 10 0 0 1-3.718.717H10c-5.523 0-10-4.477-10-10V351.276a10 10 0 0 1 2.862-7.004l68.48-69.787a10 10 0 0 0 2.863-7.004z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 776 830'%3E%3Cpath fill='black' d='M74.205 10c0-5.523 4.477-10 10-10H766c5.523 0 10 4.477 10 10v732.301c0 5.523-4.477 10-10 10H583.928c-1.274 0-2.536.244-3.718.717l-190.42 76.265a10 10 0 0 1-3.718.717H10c-5.523 0-10-4.477-10-10V351.276a10 10 0 0 1 2.862-7.004l68.48-69.787a10 10 0 0 0 2.863-7.004z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    position: relative;
    background-color: #d1d1d1; /* Slight background color for the shape area */
}
/* Ensure absolute positioning for the video layers */
.feature-video-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: clip-path;
}
/* Button Styling from Screenshot */
.btn-brutalist {
    background-color: #0e0e0e;
    color: #f4f4f4;
    padding: 1rem 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
    display: inline-block;
}
.btn-brutalist:hover {
    background-color: #333;
}
/* Disable custom cursor on touch screens */
@media (pointer: coarse) {
    .cursor {
        display: none !important;
    }
    body, .hover-target, a, button {
        cursor: auto !important;
    }
}