/* --- THEME VARIABLES --- */
:root {
    --dark-bg: #000000;
    --dark-text: #ffffff;
    --dark-text-muted: #a7a7a7;
    --dark-card-bg: rgba(26, 26, 26, 0.8);
    --dark-card-border: #333333;
    --dark-glow: rgba(0, 190, 255, 0.5);
    --light-bg: #f0f0f0;
    --light-text: #1a1a1a;
    --light-text-muted: #555555;
    --light-card-bg: rgba(255, 255, 255, 0.8);
    --light-card-border: #dddddd;
    --light-glow: rgba(0, 120, 200, 0.5);
}

/* --- BASE STYLES --- */
* { box-sizing: border-box; }
html, body { overscroll-behavior: none; }

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.5s, color 0.5s;
    margin: 0;
    overflow: hidden; /* Prevent body scroll */
}

body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}
body.light-mode {
    background-color: var(--light-bg);
    color: var(--light-text);
}

#background-canvas {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    transition: transform 0.5s ease-out;
}

#scene {
    height: 100vh; width: 100vw;
    position: fixed; top: 0; left: 0;
    z-index: 20;
    transform: translateZ(0);
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#scene.zoomed-in {
    transform: scale(400) translateZ(0);
    z-index: 9; /* Go behind page content when zoomed */
}

#home-screen {
    display: flex; align-items: center; justify-content: center;
    height: 100%; width: 100%;
}

#name-container {
    font-size: clamp(2.5rem, 10vw, 7rem);
    font-weight: 900; letter-spacing: -0.05em;
    display: flex; cursor: pointer; position: relative;
    transition: color 0.5s;
}
body.dark-mode #name-container { color: #f0f0f0; }
body.light-mode #name-container { color: #2a2a2a; }

.char {
    display: inline-block; opacity: 0;
    animation: arrive 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    transition: color 0.3s;
}

body.dark-mode #name-container:hover .char { color: var(--dark-text-muted); }
body.dark-mode #name-container .char:hover { color: var(--dark-text); }
body.light-mode #name-container:hover .char { color: var(--light-text-muted); }
body.light-mode #name-container .char:hover { color: var(--light-text); }

@keyframes arrive {
    from { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(1.5) rotate(var(--start-rot)); }
    to { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* Page Section styling */
.page-section {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 10;
    opacity: 0; pointer-events: none;
    transition: opacity 0.8s ease-in-out;
    overflow: hidden;
}

#about-page { overflow-y: auto; }
#contact-page { display: flex; align-items: center; justify-content: center; }

.page-section.visible {
    opacity: 1;
    pointer-events: all;
    transition-delay: 0.4s;
}

.page-scroll-wrapper { width: 100%; min-height: 100%; }

/* --- PROJECTS PAGE STYLES --- */
#projects-page { display: flex; align-items: center; justify-content: center; perspective: 2000px; }
#projects-track {
    display: flex; align-items: center; gap: 10vw;
    position: absolute; left: 50%;
    transform-style: preserve-3d; will-change: transform;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.project-card {
    width: 250px; height: 350px;
    padding: 2rem; border-radius: 12px; border: 1px solid;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(10px); flex-shrink: 0;
    opacity: 0.4; filter: blur(4px); transform: scale(0.5);
}
.project-card.active {
    width: 450px; height: 300px;
    opacity: 1; filter: blur(0px); transform: scale(1);
}
.project-card-content { text-align: left; display: flex; flex-direction: column; height: 100%;}
.project-card h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.project-card p { font-size: 1rem; line-height: 1.6; flex-grow: 1; }
body.dark-mode .project-card { background-color: var(--dark-card-bg); border-color: var(--dark-card-border); }
body.light-mode .project-card { background-color: var(--light-card-bg); border-color: var(--light-card-border); }
.project-item { display: flex; align-items: center; gap: 2vw; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.skill-map-container {
    width: 300px; height: 300px; opacity: 0; transform: scale(0.5);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: 0.2s;
}
#projects-track .active .skill-map-container { opacity: 1; transform: scale(1); }

.learn-more-btn {
    background: none; border: 1px solid currentColor; border-radius: 6px;
    padding: 0.5rem 1rem; cursor: pointer; margin-top: 1rem;
    font-weight: 700; transition: all 0.3s; align-self: flex-start;
}
body.dark-mode .learn-more-btn { color: var(--dark-text-muted); }
body.light-mode .learn-more-btn { color: var(--light-text-muted); }
.learn-more-btn:hover {
    transform: translateY(-2px);
    background-color: var(--dark-glow);
    color: var(--dark-text);
}
body.light-mode .learn-more-btn:hover {
    background-color: var(--light-glow);
    color: var(--dark-text);
}

/* Project Arrows */
.project-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px; height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s;
}
#projects-page:hover .project-nav-arrow { opacity: 0.5; }
.project-nav-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }
#project-arrow-left { left: 5vw; }
#project-arrow-right { right: 5vw; }
body.light-mode .project-nav-arrow { background-color: rgba(0, 0, 0, 0.1); }

#project-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 500; display: flex; align-items: center; justify-content: center;
    background-color: rgba(0,0,0,0.5); backdrop-filter: blur(15px);
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
}
#project-overlay.visible { opacity: 1; visibility: visible; }
#project-overlay-content {
    width: 90%;
    max-width: 800px;
    max-height: 80vh; /* Set a max-height here */
    border-radius: 12px;
    position: relative;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.4s 0.1s, opacity 0.4s 0.1s;
    display: flex;
    flex-direction: column;
}

#project-detail-scroll-wrapper {
    padding: 2rem;
    overflow-y: auto; /* This handles the scrolling if content exceeds max-height */
    flex-grow: 1; /* Allows this div to fill available space */
}

#project-detail-media-container {
     width: 100%;
     padding: 2rem 2rem 0 2rem;
     flex-shrink: 0;
}
#project-detail-media {
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.2);
}
#project-overlay.visible #project-overlay-content { transform: scale(1); opacity: 1; }
body.dark-mode #project-overlay-content { background-color: var(--dark-card-bg); border: 1px solid var(--dark-card-border); }
body.light-mode #project-overlay-content { background-color: var(--light-card-bg); border: 1px solid var(--light-card-border); }

#project-overlay-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 40px; height: 40px; border-radius: 50%;
    background: none; border: none; font-size: 2rem;
    cursor: pointer; transition: transform 0.3s;
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
#project-overlay-close:hover { transform: rotate(90deg) scale(1.1); }


#project-detail-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 1rem; }
.project-detail-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.project-detail-tag {
    padding: 0.25rem 0.75rem; border-radius: 16px; font-weight: 700; font-size: 0.9rem;
}
body.dark-mode .project-detail-tag { background-color: rgba(255,255,255,0.1); }
body.light-mode .project-detail-tag { background-color: rgba(0,0,0,0.1); }
#project-detail-long-desc { font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; }
#project-detail-challenges-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 0.5rem; }
body.light-mode #project-detail-challenges-title { border-bottom-color: rgba(0,0,0,0.2); }
#project-detail-challenges-desc { font-size: 1rem; line-height: 1.7; margin-bottom: 2rem; opacity: 0.9; }
.project-detail-links a {
    display: inline-block; text-decoration: none; font-weight: 700;
    padding: 0.75rem 1.5rem; border-radius: 8px; margin-right: 1rem;
    transition: transform 0.3s;
}
.project-detail-links a:hover { transform: translateY(-3px); }
body.dark-mode .project-detail-links a { background-color: var(--dark-glow); color: var(--dark-text); }
body.light-mode .project-detail-links a { background-color: var(--light-glow); color: var(--dark-text); }


/* --- ABOUT ME & SHARED STYLES --- */
.dynamic-timeline { position: relative; max-width: 900px; margin: 0 auto; }
.dynamic-timeline::after {
    content: ''; position: absolute; width: 4px; background-color: currentColor;
    opacity: 0.1; top: 0; bottom: 0; left: 50%; margin-left: -2px;
}
.timeline-item-wrapper { margin-bottom: 50px; }
.timeline-item { padding: 10px 40px; position: relative; width: 50%; }
.timeline-item.left { left: 0; padding-right: 50px; text-align: right; }
.timeline-item.right { left: 50%; padding-left: 50px; text-align: left; }
.timeline-icon {
    position: absolute; top: 15px; width: 40px; height: 40px;
    border-radius: 50%; z-index: 10; display: flex;
    align-items: center; justify-content: center;
    border: 3px solid currentColor; opacity: 0.2; transition: all 0.4s;
}
.timeline-item.left .timeline-icon { right: -20px; }
.timeline-item.right .timeline-icon { left: -20px; }
.timeline-item-wrapper:hover .timeline-icon { opacity: 1; transform: scale(1.2); }
.timeline-content { padding: 20px; border-radius: 8px; backdrop-filter: blur(10px); position: relative; }
body.dark-mode .timeline-content { background-color: var(--dark-card-bg); }
body.light-mode .timeline-content { background-color: var(--light-card-bg); }

.fame-card, .presence-card {
    padding: 1.5rem; text-align: center; border-radius: 8px;
    backdrop-filter: blur(10px); transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
body.dark-mode .fame-card, body.dark-mode .presence-card { background-color: var(--dark-card-bg); }
body.light-mode .fame-card, body.light-mode .presence-card { background-color: var(--light-card-bg); }

.fame-card:hover, .presence-card:hover { transform: translateY(-5px); }
body.dark-mode .fame-card:hover, body.dark-mode .presence-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
body.light-mode .fame-card:hover, body.light-mode .presence-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.fame-card h3 { margin-bottom: 0.5rem; text-align: left; }
.fame-card p { text-align: left;}

.presence-card svg { width: 40px; height: 40px; margin-bottom: 0.75rem; transition: transform 0.3s; }
.presence-card:hover svg { transform: scale(1.1); }
.presence-card span { font-weight: 700; }

.skill-category .skill-tag {
    background-color: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    padding: 0.5rem 1rem; border-radius: 6px; font-weight: 700; transition: all 0.3s;
}
body.light-mode .skill-category .skill-tag { background-color: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); }
.skill-category .skill-tag:hover { transform: scale(1.1); background-color: rgba(255,255,255,0.2); }
body.light-mode .skill-category .skill-tag:hover { background-color: rgba(0,0,0,0.2); }

/* --- FUTURISTIC CONTACT PAGE --- */
#contact-terminal {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; animation: fadeInScale 1s 1s forwards;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.contact-ring {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid;
    opacity: 0;
}
body.dark-mode .contact-ring { border-color: rgba(255,255,255, 0.2); }
body.light-mode .contact-ring { border-color: rgba(0,0,0, 0.2); }

.ring-1 { width: 100%; height: 100%; animation: rotate-cw 25s linear infinite, fadeInRing 1s 1.2s forwards; }
.ring-2 { width: 75%; height: 75%; top: 12.5%; left: 12.5%; animation: rotate-ccw 20s linear infinite, fadeInRing 1s 1.4s forwards; }
.contact-orb {
    width: 50%; height: 50%;
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    position: relative; overflow: hidden;
    animation: fadeInRing 1s 1.6s forwards;
    opacity: 0;
}
.contact-orb h3 { font-size: 1.5rem; font-weight: 700; opacity: 0; animation: text-fade-in 1s 2s forwards; }
.contact-orb p { font-size: 0.9rem; max-width: 80%; line-height: 1.5; opacity: 0; animation: text-fade-in 1s 2.2s forwards; }
body.dark-mode .contact-orb p { color: var(--dark-text-muted); }
body.light-mode .contact-orb p { color: var(--light-text-muted); }

.contact-orb::before { /* Scanline */
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 2px;
    animation: scanline 5s linear infinite;
}
body.dark-mode .contact-orb::before { background: var(--dark-glow); }
body.light-mode .contact-orb::before { background: var(--light-glow); }

.contact-node {
    position: absolute; width: 60px; height: 60px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    transform-origin: center;
    animation: fadeInRing 1s 1.8s forwards;
    opacity: 0;
    color: currentColor;
    cursor: pointer;
}
body.dark-mode .contact-node { background-color: var(--dark-card-bg); border: 1px solid var(--dark-card-border); }
body.light-mode .contact-node { background-color: var(--light-card-bg); border: 1px solid var(--light-card-border); }

.contact-node:hover { transform: scale(1.15); }
body.dark-mode .contact-node:hover { box-shadow: 0 0 20px var(--dark-glow); }
body.light-mode .contact-node:hover { box-shadow: 0 0 20px var(--light-glow); }

.node-1 { top: -30px; left: calc(50% - 30px); } /* Top */
.node-2 { bottom: -30px; left: calc(50% - 30px); } /* Bottom */

@keyframes rotate-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes fadeInRing { from { opacity: 0; } to { opacity: 1; } }
@keyframes text-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scanline { from { transform: translateY(-100%); } to { transform: translateY(200px); } }

/* Navbar & Controls */
nav {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 1.5rem 2rem; display: flex; justify-content: center;
    align-items: center; gap: 2rem; z-index: 30;
    transition: transform 0.4s ease-in-out;
}
nav.hidden { transform: translateY(-110%); }
nav a, #theme-toggle {
    text-decoration: none; transition: color 0.3s;
    font-size: 1.125rem; font-weight: 700; background: none;
    border: none; cursor: pointer;
}
body.dark-mode nav a, body.dark-mode #theme-toggle { color: var(--dark-text-muted); }
body.light-mode nav a, body.light-mode #theme-toggle { color: var(--light-text-muted); }
body.dark-mode nav a:hover, body.dark-mode #theme-toggle:hover { color: var(--dark-text); }
body.light-mode nav a:hover, body.light-mode #theme-toggle:hover { color: var(--light-text); }
#theme-toggle svg { transition: transform 0.3s ease-in-out; }
.dark-mode #theme-toggle .sun { display: block; } .dark-mode #theme-toggle .moon { display: none; }
.light-mode #theme-toggle .sun { display: none; } .light-mode #theme-toggle .moon { display: block; }
.dark-mode #theme-toggle:hover svg { transform: rotate(45deg); }
.light-mode #theme-toggle:hover svg { transform: rotate(-45deg); }

/* Transition overlay */
#transition-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent black for warp effect */
    backdrop-filter: blur(10px); /* Subtle blur for depth */
}
body.dark-mode #transition-overlay { background-color: rgba(0,0,0,0.5); }
body.light-mode #transition-overlay { background-color: rgba(240,240,240,0.5); } /* Light theme overlay */
#transition-overlay.visible { opacity: 1; pointer-events: all; }

/* --- [NEW] BLACK HOLE EASTER EGG --- */
#black-hole-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    background-color: #000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 1s ease-in-out;
}
#black-hole-overlay.visible {
    opacity: 1; pointer-events: all;
}
#black-hole {
    width: 10px; height: 10px;
    background-color: #000;
    border-radius: 50%;
    position: relative;
    transform: scale(0);
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#black-hole-overlay.visible #black-hole {
    transform: scale(1);
}
#black-hole::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    border-radius: 50%;
    box-shadow: 0 0 20px 5px var(--dark-glow), inset 0 0 15px 2px var(--dark-glow);
    animation: rotate-cw 5s linear infinite;
}
body.light-mode #black-hole::after {
    box-shadow: 0 0 20px 5px var(--light-glow), inset 0 0 15px 2px var(--light-glow);
}
.sucked-in {
    --tx: 0; --ty: 0;
    transition: transform 1.2s cubic-bezier(0.55, 0.06, 0.68, 0.19), opacity 1s ease-out !important;
    transition-delay: var(--suck-delay, 0s) !important;
    transform-origin: center center;
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(720deg);
    opacity: 0 !important;
}


.corner-controls { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; display: flex; gap: 1rem; }
.control-icon {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; cursor: pointer;
    transition: transform 0.3s, background-color 0.3s;
}
body.dark-mode .control-icon { background-color: rgba(255, 255, 255, 0.1); color: var(--dark-text-muted); }
body.light-mode .control-icon { background-color: rgba(0, 0, 0, 0.1); color: var(--light-text-muted); }
.control-icon:hover { transform: scale(1.1) rotate(-15deg); }

#hint-tooltip {
    position: absolute; bottom: 120%; right: 0;
    padding: 1rem; border-radius: 8px; width: 280px;
    pointer-events: none; opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
body.dark-mode #hint-tooltip { background-color: var(--dark-card-bg); border: 1px solid var(--dark-card-border); }
body.light-mode #hint-tooltip { background-color: var(--light-card-bg); border: 1px solid var(--light-card-border); }
#hint-container:hover #hint-tooltip { opacity: 1; transform: translateY(0); }
#hint-tooltip h4 { margin: 0 0 0.5rem 0; font-weight: 700; }
#hint-tooltip ul { list-style: none; padding: 0; margin: 0; }
#hint-tooltip li { margin-bottom: 0.25rem; }
#hint-tooltip code { font-family: 'Fira Code', monospace; padding: 2px 5px; border-radius: 4px; }
body.dark-mode #hint-tooltip code { background-color: rgba(255, 255, 255, 0.1); }
body.light-mode #hint-tooltip code { background-color: rgba(0, 0, 0, 0.1); }

#virtual-keyboard {
    position: fixed; bottom: 2rem; left: 50%;
    z-index: 200; padding: 1rem; border-radius: 12px;
    backdrop-filter: blur(10px); display: flex; flex-direction: column;
    gap: 0.5rem; opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transform: translate(-50%, 20px);
}
#virtual-keyboard.visible { opacity: 1; pointer-events: all; transform: translateX(-50%); }
body.dark-mode #virtual-keyboard { background-color: var(--dark-card-bg); border: 1px solid var(--dark-card-border); }
body.light-mode #virtual-keyboard { background-color: var(--light-card-bg); border: 1px solid var(--light-card-border); }
#keyboard-display {
    width: 100%; height: 40px; border-radius: 8px; margin-bottom: 0.5rem;
    text-align: center; font-size: 1.5rem; line-height: 40px;
    font-family: 'Fira Code', monospace; letter-spacing: 0.2em;
}
body.dark-mode #keyboard-display { background-color: rgba(0,0,0,0.3); }
body.light-mode #keyboard-display { background-color: rgba(255,255,255,0.3); }
.keyboard-row { display: flex; gap: 0.5rem; justify-content: center; }
.key {
    width: 40px; height: 40px; display: flex; align-items: center;
    justify-content: center; border-radius: 8px; font-weight: 700;
    cursor: pointer; transition: transform 0.1s, background-color 0.2s;
}
body.dark-mode .key { background-color: rgba(255,255,255,0.1); }
body.light-mode .key { background-color: rgba(0,0,0,0.1); }
.key:active { transform: scale(0.9); }

/* Pseudo-Terminal */
#pseudo-terminal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pseudo-terminal.visible { opacity: 1; visibility: visible; }
#terminal-window {
    width: 90%;
    max-width: 700px;
    height: 70vh;
    background-color: var(--dark-card-bg);
    border: 1px solid var(--dark-card-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-family: 'Fira Code', monospace;
    transform: scale(0.95);
    transition: transform 0.4s;
}
#pseudo-terminal.visible #terminal-window { transform: scale(1); }
#terminal-output {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    line-height: 1.6;
    font-size: 0.9rem;
    white-space: pre-wrap; /* Preserve whitespace and line breaks */
}
#terminal-output .prompt { color: var(--dark-glow); }
#terminal-output .error { color: #ff5555; }
#terminal-input-line {
    display: flex;
    padding: 0 1rem 1rem 1rem;
}
#terminal-input-line span {
    color: var(--dark-text-muted);
    margin-right: 0.5rem;
}
#terminal-input {
    flex-grow: 1;
    background: none;
    border: none;
    color: var(--dark-text);
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
}

.animate-on-scroll {
    --animation-delay: 0ms; opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--animation-delay);
}
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.timeline-item-wrapper.is-visible .timeline-item.left { animation: slide-in-left 0.7s forwards; }
.timeline-item-wrapper.is-visible .timeline-item.right { animation: slide-in-right 0.7s forwards; }
@keyframes slide-in-left { from { transform: translateX(-5%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slide-in-right { from { transform: translateX(5%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* --- Desktop Experience Prompt --- */
#desktop-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#desktop-prompt-overlay.desktop-prompt-hidden {
    opacity: 0;
    pointer-events: none;
}

#desktop-prompt-modal {
    background-color: var(--dark-card-bg);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    border: 1px solid var(--dark-card-border);
    text-align: center;
    width: 100%;
    max-width: 400px;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#desktop-prompt-overlay.desktop-prompt-hidden #desktop-prompt-modal {
    transform: scale(0.8);
}

#desktop-prompt-modal svg {
    color: var(--dark-glow);
    margin-bottom: 0.5rem;
}

#desktop-prompt-modal h2 {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--dark-text);
}

#desktop-prompt-modal p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dark-text-muted);
    margin-bottom: 1rem;
}

#desktop-prompt-modal button {
    background-color: var(--dark-glow);
    color: var(--dark-text);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

#desktop-prompt-modal button:hover {
    transform: scale(1.05);
}

/* Light mode styles for the prompt */
body.light-mode #desktop-prompt-modal {
    background-color: var(--light-card-bg);
    border-color: var(--light-card-border);
}

body.light-mode #desktop-prompt-modal svg {
    color: var(--light-glow);
}

body.light-mode #desktop-prompt-modal h2 {
    color: var(--light-text);
}

body.light-mode #desktop-prompt-modal p {
    color: var(--light-text-muted);
}

body.light-mode #desktop-prompt-modal button {
    background-color: var(--light-glow);
    color: var(--dark-text); /* Keeping dark text for contrast on light glow */
}

/* --- Character Tooltip --- */
#char-tooltip {
    position: fixed;
    z-index: 10001; /* Must be on top of everything, including prompt */
    padding: 0.75rem 1.25rem;
    background-color: var(--dark-card-bg);
    border: 1px solid var(--dark-card-border);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    max-width: 250px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
    
    /* Initially hidden */
    opacity: 0;
    pointer-events: none; /* Can't interact with the tooltip itself */
    transform: translateY(10px) scale(0.95);
    
    /* Smooth transitions for appearing/disappearing */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#char-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#char-tooltip strong {
    color: var(--dark-text);
    font-weight: 900;
}

/* Light mode styles */
body.light-mode #char-tooltip {
    background-color: var(--light-card-bg);
    border-color: var(--light-card-border);
    color: var(--light-text-muted);
}
body.light-mode #char-tooltip strong {
    color: var(--light-text);
}