/* Reset & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #2F3136;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #2F3136; 
}
::-webkit-scrollbar-thumb {
    background: #5865F2; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4752C4; 
}

/* Language Switcher */
.language-switcher {
    position: absolute;
    top: 30px;
    right: 40px;
    font-weight: 600;
    z-index: 100;
    cursor: pointer;
    font-size: 1rem;
}

.lang-option {
    opacity: 0.5;
    transition: opacity 0.3s;
}

.lang-option:hover, .lang-option.active {
    opacity: 1;
}

.separator {
    margin: 0 5px;
    opacity: 0.3;
}

/* Profile Name Centered */
.profile-name-centered {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 1.5rem;
    color: #ffffff;
    letter-spacing: -0.5px;
    z-index: 100;
    text-align: center;
}

/* Main Wrapper to Center Content */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centered initially */
    width: 100%;
    transition: padding-top 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 20px;
    padding-bottom: 50px;
}

/* State: Active (When an app is clicked or About Me) */
body.state-active .main-wrapper {
    justify-content: flex-start;
    padding-top: 100px; /* Moves everything up */
}

/* Container for Apps */
.container {
    display: flex;
    justify-content: center;
    gap: 40px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

body.state-active .container {
    transform: scale(0.8); /* Shrink slightly when active */
}

/* If About Me is active, we might want to hide apps or keep them small above? 
   User said "apps move up", implying they stick around. 
   But "select one" closes others. Let's keep logic consistent. */

/* App Card */
.app-card {
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.7;
}

.app-card:hover {
    opacity: 1;
    transform: translateY(-5px);
}

.app-card.active {
    opacity: 1;
    transform: scale(1.1);
}

.icon-container {
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}
.app-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #e0e0e0;
}

/* About Me Button */
.about-btn {
    margin-top: 40px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.about-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

body.state-active .about-btn {
    /* display: none;  Removed as per user request */
    margin-top: 20px; /* Adjust spacing if needed */
    transform: scale(0.8); /* Scale down to match app icons */
}

/* Details Section */
.details-container {
    margin-top: 20px;
    width: 100%;
    max-width: 900px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
    pointer-events: none;
    display: none;
}

body.state-active .details-container {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.content-wrapper {
    background: rgba(47, 49, 54, 0.95); /* Opaque background to read text easily */
    padding: 40px;
    border-radius: 16px;
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
    text-align: left;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Content Typography */
h1#detail-title {
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

h3#detail-role {
    font-size: 1.2rem;
    color: #5865F2; /* Discord Blurple-ish or Green */
    margin-bottom: 5px;
}

p#detail-meta {
    font-size: 0.95rem;
    color: #99aab5;
    margin-bottom: 25px;
    font-style: italic;
}

#detail-description h4 {
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #e0e0e0;
    border-left: 3px solid #5865F2;
    padding-left: 10px;
}

#detail-description ul {
    list-style-position: inside;
    margin-bottom: 15px;
}

#detail-description li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: #dcddde;
    font-size: 0.95rem;
}

.tech-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.skill-tag {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #fff;
}

#detail-links {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

#detail-links a {
    background-color: #5865F2;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
    font-size: 0.9rem;
}

#detail-links a:hover {
    background-color: #4752C4;
}

a.download-link {
    background-color: #43b581; /* Green for download */
}
a.download-link:hover {
    background-color: #3ca374;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 20px;
    }
    
    body.state-active .container {
        flex-direction: row; /* Keep side-by-side but smaller on top */
        transform: scale(0.65);
        gap: 10px;
    }

    .profile-name-centered {
        font-size: 1.2rem;
        width: 100%;
        top: 20px;
    }

    .language-switcher {
        top: 60px; /* Below name on mobile */
        right: 50%;
        transform: translateX(50%);
    }

    .main-wrapper {
        padding-top: 100px;
    }

    body.state-active .main-wrapper {
        padding-top: 140px;
    }
    
    .content-wrapper {
        padding: 20px;
    }
}