/* Reset and General Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
}

a, button, input, textarea, select {
    cursor: none !important;
}

body, html {
    height: 100%;
    overflow: hidden;
    font-family: 'Geist Mono', monospace;
    background-color: #0b0b2b;
    scroll-behavior: smooth;
}

#content-area {
    scroll-behavior: smooth;
}

/* Custom Cursor */
.cursor {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 212, 255, 0.8);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease-out, background-color 0.2s ease;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}

.cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.3s ease-out;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}

.cursor.hover {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: rgba(0, 212, 255, 0.2);
}

/* ===== INTRO SECTION ===== */
#intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 1000;
    padding: 20px;
}

#animated-text {
    font-size: clamp(1rem, 4vw, 1.5rem);
    color: white;
    font-weight: normal;
    text-align: center;
    margin-bottom: auto;
    transform: translateY(20vh);
    display: none;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.6),
        0 0 30px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(255, 255, 255, 0.2);
    word-wrap: break-word;
    max-width: 100%;
}

.word {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 1s forwards ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

iframe {
    max-width: 100%;
    width: 500px;
    height: 500px;
    max-height: 70vh;
    border: none;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
}

/* ===== MAIN CONTENT ===== */
#main-content {
    display: none;
    opacity: 0;
    min-height: 100vh;
    background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
    position: relative;
    overflow: hidden;
    transition: opacity 1s ease-in-out;
}

/* Starry Background */
.stars {
    width: 1px;
    height: 1px;
    position: absolute;
    background: white;
    box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
        22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
        38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
        53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
        68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
        83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
        98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
        18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
        35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
        50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
        65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white,
        80vw 92vh 1px white, 85vw 82vh 2px white, 90vw 88vh 1px white,
        95vw 75vh 2px white;
    animation: twinkle 3s infinite ease-in-out;
}

.stars::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
        33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
        57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
        81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
        3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
        27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
        51vw 92vh 2px white, 59vw 78vh 1px white;
    animation: twinkle 2s infinite ease-in-out;
    animation-delay: 0.5s;
}

.stars::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    box-shadow: 6vw 8vh 1px white, 14vw 14vh 2px white, 20vw 20vh 1px white,
        26vw 26vh 2px white, 34vw 10vh 1px white, 44vw 38vh 2px white,
        52vw 16vh 1px white, 62vw 44vh 2px white, 72vw 24vh 1px white,
        84vw 36vh 2px white, 92vw 28vh 1px white, 4vw 54vh 2px white,
        16vw 66vh 1px white, 28vw 74vh 2px white, 36vw 86vh 1px white,
        46vw 64vh 2px white, 56vw 80vh 1px white, 66vw 90vh 2px white,
        76vw 70vh 1px white, 86vw 94vh 2px white;
    animation: twinkle 4s infinite ease-in-out;
    animation-delay: 1s;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.99);
    }
}

/* ===== SIDEBAR NAVIGATION ===== */
#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    background: rgba(11, 11, 43, 0.85);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.nav-header {
    padding: 0 2rem 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-header h1 {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.nav-links {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 1.25rem 2rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    border-left: 3px solid transparent;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(to bottom, #00d4ff, #0099ff);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.nav-link.active::before {
    transform: scaleY(1);
}

.nav-number {
    font-size: 0.75rem;
    margin-right: 1rem;
    opacity: 0.6;
}

.nav-text {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.nav-footer {
    margin-top: auto;
    padding: 1rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.linkedin-link,
.github-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.linkedin-link:hover,
.github-link:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.linkedin-logo,
.github-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.github-logo {
    filter: brightness(0) invert(1);
}

.replay-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.replay-text:hover {
    color: #00d4ff;
}

/* ===== CONTENT AREA ===== */
#content-area {
    margin-left: 280px;
    min-height: 100vh;
    padding: 4rem;
    position: relative;
    overflow-y: auto;
}

.content-section {
    display: none;
    animation: fadeInContent 0.8s ease;
}

.content-section.active {
    display: block;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title {
    font-size: 3rem;
    color: white;
    margin-bottom: 2rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60%;
    height: 3px;
    background: linear-gradient(to right, #00d4ff, #0099ff);
}

.section-content {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 1000px;
}

.section-content p {
    margin-bottom: 1.5rem;
}

/* ===== RESEARCH PROJECTS ===== */
.research-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.project-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
}

.project-main {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
    margin-left: 0;
    cursor: pointer;
    transition: margin-left 0.3s ease;
    width: 100%;
}

.project-main:hover {
    margin-left: 1rem;
}

.project-main:hover .project-num {
    color: #00d4ff;
}

.project-main:hover h3 {
    color: #00d4ff;
}

.project-num {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    min-width: 50px;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.project-title-section {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.project-main h3 {
    font-size: 1.3rem;
    color: white;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 100%;
}

.project-skills {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.expand-icon {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease;
    min-width: 30px;
    max-width: 30px;
    flex-shrink: 0;
    text-align: center;
}

/* Favorite Projects Styling */
.favorite-key {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 400;
}

/* Skill Filters */
.skill-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-family: 'Geist Mono', monospace;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 400;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, #00d4ff, #0099ff);
    border-color: #00d4ff;
    color: white;
    font-weight: 500;
}

.project-item.hidden {
    display: none;
}

/* Upcoming Projects Styling */
.upcoming-project {
    opacity: 0.85;
}

.upcoming-project .project-num {
    color: rgba(255, 215, 0, 0.8);
}

.favorite-star {
    color: #FFD700;
    font-size: 1.1em;
    margin-left: 0.4rem;
    display: inline-block;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: subtle-glow 3s ease-in-out infinite;
}

@keyframes subtle-glow {
    0%, 100% {
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
}


.project-main.active .expand-icon {
    transform: rotate(45deg);
    color: #00d4ff;
}

.project-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 0 0 4.5rem;
}

.project-details.expanded {
    max-height: 2000px;
    padding: 0 0 4rem 4.5rem;
}

.detail-section {
    margin-bottom: 2rem;
}

.detail-section:last-child {
    margin-bottom: 0;
    padding-bottom: 4rem;
}

.detail-section h4 {
    color: #00d4ff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-section p {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    font-size: 1rem;
    text-align: justify;
}

.project-links {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.project-links a {
    color: #00d4ff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.3s ease;
}

.project-links a:hover {
    opacity: 0.7;
}

.link-sep {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 1rem;
}

.project-visuals {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.video-section {
    margin-bottom: 4rem;
}

.project-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== MOBILE NAVIGATION ===== */
#mobile-nav-footer {
    display: none;
}

.mobile-menu-overlay {
    display: none;
}

/* ===== ABOUT ME SECTION ===== */
.about-container {
    max-width: 900px;
    margin: 0 auto;
}

.about-photo-section {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.about-photo-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
}

.about-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00d4ff;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    position: relative;
    z-index: 2;
}

.photo-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
    animation: pulse-glow 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.about-bio {
    margin-bottom: 3rem;
}

.about-greeting {
    font-size: 2rem;
    color: #00d4ff;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.about-intro, .about-story {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
}

.about-section-title {
    font-size: 1.5rem;
    color: #00d4ff;
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about-fun-facts {
    margin-bottom: 3rem;
}

.fun-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.fact-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.fact-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-5px);
}

.fact-content strong {
    display: block;
    color: #00d4ff;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fact-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

.about-philosophy {
    margin-bottom: 3rem;
}

.philosophy-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.philosophy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: left;
    transition: all 0.3s ease;
}

.philosophy-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #00d4ff;
    transform: translateY(-5px);
}

.philosophy-card h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.philosophy-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.about-current {
    margin-bottom: 3rem;
}

.current-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.current-item {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #00d4ff;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.current-label {
    color: #00d4ff;
    font-weight: 600;
    min-width: 100px;
}

.current-value {
    color: rgba(255, 255, 255, 0.85);
}

.about-cta {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-text {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'Geist Mono', monospace;
}

.cta-button.primary {
    background: linear-gradient(135deg, #00d4ff, #0099ff);
    color: white;
    border: none;
}

.cta-button.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
}

.cta-button.secondary {
    background: transparent;
    color: #00d4ff;
    border: 2px solid #00d4ff;
}

.cta-button.secondary:hover {
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-3px);
}

.button-arrow {
    transition: transform 0.3s ease;
}

.cta-button:hover .button-arrow {
    transform: translateX(5px);
}

/* ===== RESPONSIVE DESIGN ===== */
@media screen and (max-width: 768px) {
    /* Hide custom cursor on mobile */
    .cursor,
    .cursor-follower {
        display: none;
    }

    * {
        cursor: auto;
    }

    iframe {
        width: 400px;
        height: 400px;
    }

    #animated-text {
        transform: translateY(250px);
    }

    /* Hide desktop sidebar */
    #sidebar {
        display: none;
    }

    /* Show mobile navigation footer */
    #mobile-nav-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(11, 11, 43, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 900;
        padding: 0;
    }

    .mobile-footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
    }

    .mobile-name {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: white;
    }

    /* Hamburger Menu */
    .hamburger-menu {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 5px;
        z-index: 1001;
    }

    .hamburger-line {
        width: 25px;
        height: 2px;
        background: white;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    .hamburger-menu.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }

    .hamburger-menu.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(11, 11, 43, 0.98);
        backdrop-filter: blur(20px);
        z-index: 950;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem;
        width: 100%;
        max-width: 400px;
    }

    .mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        border-left: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        color: white;
        border-left-color: #00d4ff;
        background: rgba(255, 255, 255, 0.05);
    }

    .mobile-nav-number {
        font-size: 0.9rem;
        color: #00d4ff;
        font-weight: 600;
    }

    .mobile-nav-text {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0.05em;
    }

    .mobile-menu-footer {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .mobile-social-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .mobile-linkedin-link,
    .mobile-github-link {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .mobile-linkedin-link:hover,
    .mobile-github-link:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }

    .mobile-replay-text {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        cursor: pointer;
        transition: color 0.3s ease;
        line-height: 1.4;
    }

    .mobile-replay-text:hover {
        color: #00d4ff;
    }

    #content-area {
        margin-left: 0;
        padding: 2rem 1.5rem 10rem 1.5rem; /* Increased bottom padding for mobile nav footer */
    }

    .section-title {
        font-size: 2rem;
    }

    /* Mobile Project Styling */
    .project-item {
        margin: 0.5rem 0;
        padding-bottom: 0;
    }

    .project-main {
        padding: 1rem 0;
        gap: 0.75rem;
    }

    .project-num {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        font-size: 0.65rem;
        min-width: 25px;
        letter-spacing: 0.05em;
        transform: rotate(180deg);
    }

    .project-main h3 {
        font-size: 1rem;
        line-height: 1.3;
    }

    .project-skills {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    /* Hide extra skills on mobile - show only first line when collapsed */
    .project-main:not(.active) .project-skills {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Show all skills when project is expanded */
    .project-main.active .project-skills {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        line-clamp: unset;
    }

    .project-details {
        padding: 0 0 0 2rem;
    }

    .project-details.expanded {
        padding: 0 0 1rem 2rem;
        max-height: 5000px;
    }

    .video-section {
        margin-bottom: 0;
    }

    .detail-section h4 {
        font-size: 0.85rem;
    }

    .detail-section p {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .expand-icon {
        font-size: 1.2rem;
        min-width: 25px;
    }

    /* Skill Filters */
    .skill-filters {
        gap: 0.5rem;
        padding: 1rem 0;
        margin-bottom: 1.5rem;
    }

    .filter-btn {
        font-size: 0.7rem;
        padding: 0.5rem 0.9rem;
    }

    .favorite-key {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .favorite-star {
        font-size: 1em;
    }

    /* About Me Mobile Styles */
    .about-photo-wrapper {
        width: 150px;
        height: 150px;
    }

    .about-greeting {
        font-size: 1.4rem;
    }

    .about-intro, .about-story {
        font-size: 0.95rem;
    }

    .about-section-title {
        font-size: 1rem;
    }

    .fun-facts-grid {
        grid-template-columns: 1fr;
    }

    .philosophy-cards {
        grid-template-columns: 1fr;
    }

    .philosophy-card h4 {
        font-size: 1rem;
    }

    .philosophy-card p {
        font-size: 0.9rem;
    }

    .fact-content p {
        font-size: 0.95rem;
    }

    .current-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .current-label {
        min-width: auto;
    }

    .cta-text {
        font-size: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
    }

    /* Currently section mobile adjustments */
    .current-label {
        font-size: 0.9rem;
    }

    .current-value {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 480px) {
    iframe {
        width: 300px;
        height: 300px;
    }

    #animated-text {
        transform: translateY(200px);
        font-size: clamp(0.9rem, 4vw, 1.2rem);
    }

    #content-area {
        padding: 1.5rem 1.5rem 10rem 1.5rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .nav-links {
        flex-direction: column;
    }
}