/* Renev Studios - Main Stylesheet - v3 */

/* --- CSS Variables from design.txt --- */
:root {
    --background-color: #121212;
    --primary-text-color: #E0E0E0;
    --heading-text-color: #FFFFFF;
                --accent-color: #e2d5c3; /* Beige */
                --secondary-accent-color: #e2d5c3; /* Matches custom cursor color */
                --subtle-text-color: #888888;
            
                --font-regular: 'Excon', sans-serif;
                --font-black: 'Excon', sans-serif;
            }
            
            /* --- General Styles --- */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            html {
                font-size: 16px;
                scroll-behavior: smooth;
            }
            
            body {
                background-color: var(--background-color);
                color: var(--primary-text-color);
                font-family: var(--font-regular);
                font-weight: 400;
                line-height: 1.6;
                overflow-x: hidden; /* Hide horizontal scrollbar */
                overflow-y: scroll; /* Allow vertical scrolling */
                cursor: none;
                /* Hide scrollbar for Chrome, Safari and Opera */
                &::-webkit-scrollbar {
                    display: none;
                }
                /* Hide scrollbar for IE, Edge and Firefox */
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }
            
                        /* --- General Styles --- */
                        .welcome-screen {
                            height: 100vh;
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                            padding: 0 2rem; /* Added horizontal padding */
                            position: relative;
                            z-index: 1;
                        }
            
                        .main-title {
                            font-family: var(--font-regular); /* Changed from black to regular */
                            font-weight: 700;
                            font-size: clamp(1.8rem, 5vw, 3.5rem); /* Adjusted for better mobile scaling */
                            color: var(--heading-text-color);
                            max-width: 900px;
                            margin-bottom: 2rem; /* Increased margin */
                        }
                        
                        .main-title span {
                            color: var(--accent-color);
                        }
                        
                        .button-group {
                            display: flex;
                            flex-direction: column; /* Changed to column */
                            align-items: center;
                        }
                        
                        .cta-button {
                            font-family: var(--font-regular);
                            font-weight: 400;
                            font-size: 1rem;
                            height: 50px; /* Set height */
                            width: 280px; /* Set width */
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border: 0.5px solid var(--accent-color);
                            color: var(--accent-color); /* Text color is accent color */
                            background-color: transparent; /* Background is transparent */
                            text-decoration: none;
                            border-radius: 0; /* Removed border-radius */
                            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Add border-color to transition */
                            cursor: none;
                        }
                        
                        .design-button {
                            border-bottom-width: 0;
                        }
                        
                        .cta-button:hover {
                            background-color: var(--accent-color); /* Background becomes accent color */
                            color: var(--background-color); /* Text color becomes background color */
                            border-color: var(--accent-color); /* Border remains accent color */
                        }
                        
            /* --- Header Controls (Hamburger and Logo Box) --- */
            .header-controls {
                position: fixed;
                top: 25px;
                left: 50%; /* Center horizontally */
                transform: translateX(-50%); /* Adjust for centering */
                display: flex;
                align-items: center;
                z-index: 101; /* Higher than menu-overlay (100) */
            }

            /* --- Hamburger Menu Button --- */
            .hamburger-menu {
                /* Removed position: fixed, top, left, transform */
                width: 50px; /* Set width */
                height: 50px; /* Set height */
                border: 0.5px solid var(--accent-color);
                background-color: var(--background-color); /* Added background color */
                border-radius: 0; /* Removed border-radius */
                z-index: 10;
                cursor: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-right: -0.5px; /* Overlap borders */
                transition: background-color 0.3s ease;
            }
            
            .hamburger-menu i {
                font-size: 24px; /* Adjust icon size */
                color: var(--accent-color);
                transition: color 0.3s ease;
            }

            .hamburger-menu:hover {
                background-color: var(--accent-color);
            }

            .hamburger-menu:hover i {
                color: var(--background-color);
            }
            
            /* --- Logo Box --- */
            .logo-box {
                /* Removed position: fixed, top, left, transform */
                width: 50px;
                height: 50px;
                border: 0.5px solid var(--accent-color);
                /* Removed border-right: none; */
                background-color: var(--background-color);
                z-index: 10;
                cursor: none;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .logo-box img {
                max-width: 30px; /* Adjust size of the logo inside the box */
                max-height: 30px;
                object-fit: contain;
            }
            
            /* --- Custom Cursor --- */
            #custom-cursor {
                position: fixed;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background-color: var(--accent-color);
                opacity: 1;
                pointer-events: none;
                transform: translate(-50%, -50%);
                border: 0px solid transparent; /* Explicitly set no border by default */
                transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border 0.3s ease;
                z-index: 10000;
            }
            
            @keyframes blink-caret {
                from, to { border-color: transparent }
                50% { border-color: var(--heading-text-color); }
            }
            
            @media (max-width: 768px) {
                body {
                    cursor: auto; /* Show default cursor on mobile */
                }
                #custom-cursor {
                    display: none; /* Hide custom cursor on mobile */
                }
            }
            
            .mouse-icon {
                display: block; /* Show mouse icon by default */
            }
            .hand-icon {
                display: none; /* Hide hand icon by default */
            }
            
            @media (max-width: 768px) {
                .mouse-icon {
                    display: none; /* Hide mouse icon on mobile */
                }
                .hand-icon {
                    display: block; /* Show hand icon on mobile */
                }
            }
            
            /* --- Menu Overlay --- */
            .menu-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(18, 18, 18, 0.98); /* Slightly less transparent */
                z-index: 100;
                display: flex;
                flex-direction: column; /* Arrange nav and socials vertically */
                justify-content: center; /* Center items */
                align-items: center;
                transform: translateX(100%); /* Initially hidden */
                transition: transform 0.5s ease-in-out;
                padding: 2rem;
                box-sizing: border-box;
            }
            
            body.menu-open .menu-overlay {
                transform: translateX(0%); /* Slide in */
            }
            
            .menu-nav {
                display: flex;
                flex-direction: column;
                align-items: center; /* Center the navigation links */
                width: 280px; /* Match cta-button width */
                border: 0.5px solid var(--accent-color);
                margin-bottom: 2rem; /* Add space between nav and socials */
            }
            
.nav-link {
    font-family: var(--font-regular);
    font-weight: 400;
    font-size: 1rem;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    background-color: transparent;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: none;
    width: 100%;
    border: none; /* Remove the full border */
    border-bottom: 0.25px solid var(--accent-color); /* Add a thin separator */
}

.menu-nav .nav-link:last-child {
    border-bottom: none;
}

.nav-link:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.nav-link.current {
    background-color: var(--accent-color);
    color: var(--background-color);
}


.menu-socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.social-button {
    width: 50px;
    height: 50px;
    border: 0.5px solid var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0; /* Remove margin */
    text-decoration: none;
    color: var(--accent-color);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.menu-socials .social-button + .social-button {
    margin-left: -0.5px; /* Overlap borders horizontally */
}
            
            .social-button:hover {
                background-color: var(--accent-color);
                color: var(--background-color);
            }
            
            /* Scroll Progress Indicator */
            .scroll-progress-indicator {
                position: fixed;
                top: 0;
                right: 0;
                width: 2px;
                height: 0%; /* Initial height */
                background-color: var(--accent-color);
                z-index: 99;
            }
            
            /* --- Programs Section --- */                        .programs {
                            height: 100vh;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            padding: 4rem 2rem;
                            background-color: var(--background-color);
                            text-align: center;
                        }
                        
                        .section-title {
                            font-family: var(--font-black);
                            font-weight: 700;
                            font-size: clamp(1.8rem, 5vw, 3.5rem);
                            color: var(--secondary-accent-color);
                            margin-bottom: 3rem;
                            text-align: center;
                        }
                        
                                                .logo-slider {
                                                    width: 100%;
                                                    max-width: 1200px; /* Limit width for larger screens */
                                                    overflow-x: auto; /* Enable horizontal scrolling */
                                                    overflow-y: hidden; /* Hide vertical scrollbar */
                                                    position: relative;
                                                    height: 220px; /* Adjusted height */
                                                    display: flex;
                                                    align-items: center;
                                                    /* Removed scroll-snap-type: x mandatory; */
                                                    /* Fading effect at the edges */
                                                    mask-image: linear-gradient(to right,
                                                        transparent,
                                                        black 20%,
                                                        black 80%,
                                                        transparent);
                                                    -webkit-mask-image: linear-gradient(to right,
                                                        transparent,
                                                        black 20%,
                                                        black 80%,
                                                        transparent);
                                                    /* Hide scrollbar for Chrome, Safari and Opera */
                                                    &::-webkit-scrollbar {
                                                        display: none;
                                                    }
                                                    /* Hide scrollbar for IE, Edge and Firefox */
                                                    -ms-overflow-style: none;  /* IE and Edge */
                                                    scrollbar-width: none;  /* Firefox */
                                                }
                                                
                                                                        .logo-track {
                                                                            display: flex;
                                                                            width: max-content; /* Allow content to define width */
                                                                            /* animation: scroll-animation 30s linear infinite; /* Removed animation */ */
                                                                            white-space: nowrap; /* Prevent wrapping */
                                                                        }                                                            
                                                            .logo-item {
                                                                flex-shrink: 0; /* Prevent items from shrinking */
                                                                width: 220px; /* Adjusted width */
                                                                height: 170px; /* Adjusted height */
                                                                display: flex;
                                                                flex-direction: column;
                                                                justify-content: center;
                                                                align-items: center;
                                                                position: relative;
                                                                padding: 1rem;
                                                                margin: 0 1rem;
                                                                transition: transform 0.3s ease;
                                                            }
                                                            
                                                            .logo-link {
                                                                display: flex;
                                                                flex-direction: column;
                                                                align-items: center;
                                                                text-decoration: none;
                                                                color: var(--primary-text-color);
                                                                transition: color 0.3s ease, transform 0.3s ease;
                                                            }
                                                            
                                                            .logo-link img {
                                                                max-width: 120px; /* Adjusted max width for logos */
                                                                max-height: 120px; /* Adjusted max height for logos */
                                                                object-fit: contain;
                                                                transition: opacity 0.3s ease;
                                                                margin-bottom: 0.5rem; /* Space between logo and name */
                                                            }
                                                            
                                                            .logo-link .logo-name {
                                                                font-family: var(--font-regular);
                                                                font-size: 1rem;
                                                                text-align: center;
                                                            }
                                                            
                                                            /* Hover effect for PC only */
                                                            @media (hover: hover) and (pointer: fine) {
                                                                .logo-link:hover {
                                                                    color: var(--secondary-accent-color);
                                                                    transform: scale(1.05);
                                                                }
                                                            }
                                                            
                                                            /* Keyframes for infinite scroll */
                                                            @keyframes scroll-animation {
                                                                0% {
                                                                    transform: translateX(0);
                                                                }
                                                                100% {
                                                                    transform: translateX(calc(-100% / 2)); /* Scroll half the track to loop seamlessly */
                                                                }
                                                            }
/* --- Noise Overlay --- */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
    z-index: 9999; /* On top of all content */
}

@media (max-width: 768px) {
    .menu-nav {
        width: 100%;
    }
}