/* Basic Reset & Global Styles */
        :root {
            /* Dark Theme Variables (Default) */
            --bg-color: #23272A;
            --bg-pattern: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233a3e42' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            --card-bg-color: #2C2F33;
            --text-color: #dcddde;
            --primary-accent: #7289DA;
            --secondary-accent: #f04747;
            --heading-font: 'Montserrat', 'Segoe UI', sans-serif;
            --body-font: 'Roboto Mono', monospace;
            --border-radius: 8px;
            --shadow-color: rgba(0,0,0,0.3);
            --line-color: #3a3e42;
            --icon-color: #fff;
            --secondary-text: #b9bbbe;
            --link-color: #7289DA;
            --link-hover-color: #8fa1e6;
            --heading-weight: 700;
            --subheading-weight: 600;
            --body-line-height: 1.8;
            
            /* Variable font settings */
            --montserrat-wght: 400;
            --montserrat-wdth: 100;
            --roboto-mono-wght: 400;
        }
        
        /* Light Theme Variables */
        [data-theme="light"] {
            --bg-color: #f5f7fa;
            --card-bg-color: #ffffff;
            --text-color: #2d3748;
            --primary-accent: #4a6bdf;
            --secondary-accent: #e53e3e;
            --shadow-color: rgba(0,0,0,0.1);
            --line-color: #e2e8f0;
            --icon-color: #2d3748;
            --secondary-text: #4a5568;
            --link-color: #4a6bdf;
            --link-hover-color: #3451b2;
        }
        
        /* Additional light theme adjustments */
        [data-theme="light"] h1,
        [data-theme="light"] h2,
        [data-theme="light"] h3 {
            color: #1a202c;
        }
        
        [data-theme="light"] a:hover {
            color: #2d3748;
        }
        
        [data-theme="light"] .timeline-content,
        [data-theme="light"] .skill-card,
        [data-theme="light"] .category-group {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        [data-theme="light"] .shortcuts-modal {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        [data-theme="light"] .shortcuts-overlay {
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        [data-theme="light"] .tag-backend {
            background-color: rgba(66, 153, 225, 0.15);
            color: #3182ce;
            border-color: rgba(66, 153, 225, 0.3);
        }
        
        [data-theme="light"] .tag-frontend {
            background-color: rgba(237, 100, 166, 0.15);
            color: #d53f8c;
            border-color: rgba(237, 100, 166, 0.3);
        }
        
        [data-theme="light"] .tag-cloud {
            background-color: rgba(80, 200, 220, 0.15);
            color: #0987a0;
            border-color: rgba(80, 200, 220, 0.3);
        }
        
        [data-theme="light"] .tag-db {
            background-color: rgba(72, 187, 120, 0.15);
            color: #38a169;
            border-color: rgba(72, 187, 120, 0.3);
        }
        
        [data-theme="light"] .tag-tools {
            background-color: rgba(214, 158, 46, 0.15);
            color: #b7791f;
            border-color: rgba(214, 158, 46, 0.3);
        }
        
        [data-theme="light"] .tag-interests {
            background-color: rgba(159, 122, 234, 0.15);
            color: #805ad5;
            border-color: rgba(159, 122, 234, 0.3);
        }
        
        /* Theme Transition */
        * {
            transition-property: color, background-color, border-color, box-shadow;
            transition-duration: 0.3s;
            transition-timing-function: ease;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: var(--body-font); 
            background-color: var(--bg-color); 
            background-image: var(--bg-pattern);
            color: var(--text-color); 
            line-height: var(--body-line-height); 
            scroll-behavior: smooth; 
        }
        .container { width: 90%; max-width: 960px; margin: 0 auto; padding: 20px 0; }
        h1, h2, h3 { 
            font-family: var(--heading-font); 
            margin-bottom: 0.8em; 
            color: #fff; 
            letter-spacing: -0.02em; 
        }
        
        /* Use variable font settings */
        h1 { 
            font-size: 2.8em; 
            font-variation-settings: 'wght' 800, 'wdth' 100; 
        } 
        h2 { 
            font-size: 2.2em; 
            font-variation-settings: 'wght' 700, 'wdth' 100; 
        } 
        h3 { 
            font-size: 1.6em; 
            font-variation-settings: 'wght' 600, 'wdth' 100; 
        }
        
        p { margin-bottom: 1.2em; }
        a { color: var(--link-color); text-decoration: none; transition: color 0.3s ease; }
        a:hover { color: var(--link-hover-color); }
        .accent-red { color: var(--secondary-accent); } .accent-teal { color: var(--primary-accent); }

        /* Header / Hero Section - REDESIGNED with Parallax */
        #hero { 
            padding: 70px 20px 50px; 
            background-color: var(--card-bg-color); 
            border-bottom: 2px solid var(--primary-accent);
            position: relative;
            overflow: hidden;
            perspective: 1000px;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 1s ease, transform 1s ease;
        }
        
        #hero.animate-in {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Parallax effects */
        .parallax-container {
            position: relative;
            transform-style: preserve-3d;
        }
        
        .parallax-layer {
            position: relative;
            transition: transform 0.1s ease-out;
        }
        
        .bg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle at 10% 20%, rgba(114, 137, 218, 0.1) 0%, transparent 60%);
            z-index: 1;
        }
        
        .hero-layout {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            max-width: 960px;
            margin: 0 auto;
            gap: 40px;
        }
        
        .hero-text {
            flex: 3;
            text-align: left;
        }
        
        .hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
        }
        
        .hero-name {
            font-size: 4rem;
            font-variation-settings: 'wght' 800, 'wdth' 100;
            line-height: 1.1;
            letter-spacing: -0.02em;
            margin-bottom: 15px;
            color: white;
            text-transform: uppercase;
        }
        
        .expertise-tags {
            font-family: var(--heading-font);
            font-size: 1.2rem;
            color: #b9bbbe;
            margin-bottom: 25px;
            letter-spacing: 0.05em;
        }
        
        .expertise-tags .dot {
            display: inline-block;
            margin: 0 10px;
            color: var(--primary-accent);
        }
        
        .current-role {
            font-size: 1.1rem;
            color: #dcddde;
            margin-bottom: 40px;
        }
        
        .avatar {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 3px solid var(--primary-accent);
            object-fit: cover;
        }
        
        .scroll-arrow {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
            color: var(--primary-accent);
            font-size: 2rem;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) translateX(-50%);
            }
            40% {
                transform: translateY(-20px) translateX(-50%);
            }
            60% {
                transform: translateY(-10px) translateX(-50%);
            }
        }
        
        .quick-nav {
            position: relative;
            z-index: 10;
            text-align: center;
            margin-top: 40px;
        }
        
        .quick-nav a {
            margin: 0 10px;
            font-family: var(--heading-font);
            font-variation-settings: 'wght' 700;
            color: var(--link-color);
        }
        
        @media (max-width: 768px) {
            .hero-layout {
                flex-direction: column-reverse;
                gap: 20px;
            }
            
            .hero-text {
                text-align: center;
            }
            
            .hero-name {
                font-size: 3rem;
            }
            
            .expertise-tags {
                font-size: 1rem;
            }
        }

        /* Animation for expertise tags */
        .expertise-tags span {
            display: inline-block;
            animation: fadeIn 0.5s ease-in-out forwards;
            opacity: 0;
        }
        
        .expertise-tags span:nth-child(1) { animation-delay: 0.3s; }
        .expertise-tags span:nth-child(2) { animation-delay: 0.5s; }
        .expertise-tags span:nth-child(3) { animation-delay: 0.7s; }
        .expertise-tags span:nth-child(4) { animation-delay: 0.9s; }
        .expertise-tags span:nth-child(5) { animation-delay: 1.1s; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Content Blocks */
        .content-block { padding: 40px 0; border-bottom: 1px solid #3a3e42; }
        .content-block:last-of-type { border-bottom: none; }

        /* About Me Section - REDESIGNED */
        .about-section-header {
            margin-bottom: 30px;
            font-size: 2.2rem;
            font-weight: 700;
        }
        
        .about-main-text {
            margin-bottom: 40px;
            font-size: 1.1rem;
            line-height: 1.7;
            max-width: 90%;
        }
        
        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .skill-card {
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            padding: 25px 20px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .skill-card:hover {
            transform: translateY(-5px) rotateX(5deg) rotateY(-5deg);
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .skill-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            display: inline-block;
        }
        
        .skill-title {
            font-family: var(--heading-font);
            font-variation-settings: 'wght' 600;
            font-size: 1.2rem;
            margin-bottom: 8px;
            color: var(--primary-accent);
        }
        
        .skill-description {
            font-size: 0.9rem;
            color: var(--text-color);
            line-height: 1.4;
        }
        
        .languages-note {
            margin-top: 30px;
            font-style: italic;
            color: #aaa;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .about-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }
        }
        
        @media (max-width: 480px) {
            .about-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Experience Section */
        #experience-list .experience-item { background-color: var(--card-bg-color); padding: 20px; border-radius: var(--border-radius); margin-bottom: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
        #experience-list .experience-item:last-child { margin-bottom: 0; }
        #experience-list .experience-item h3 { color: #fff; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: baseline; font-size: 1.4em; }
        #experience-list .role-title { font-size: 0.9em; font-weight: normal; color: var(--primary-accent); font-style: italic; }
        #experience-list .date-location { font-size: 0.9em; color: #8e9297; margin-bottom: 15px; font-style: italic; }
        #experience-list .experience-item ul { list-style-position: outside; padding-left: 20px; margin-bottom: 15px; }
        #experience-list .experience-item ul li { margin-bottom: 8px; line-height: 1.5; }
        #experience-list .experience-item ul li strong { color: var(--primary-accent); font-weight: var(--subheading-weight); }
        #experience-list .tech-used { font-size: 0.9em; color: #aaa; }
        #experience-list .tech-used strong { color: #ccc; }
        
        /* Improved content scannability with keyword highlighting */
        .highlight-keyword {
            font-weight: var(--subheading-weight);
            color: var(--primary-accent);
            display: inline-block;
        }

        /* Animation styles for cards */
        .animated-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .animated-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }

        /* Technology Stack Section */
        .stack-section-header {
            margin-bottom: 30px;
            font-size: 2.2rem;
            font-weight: 700;
        }

        .tag-cloud-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 90%;
            margin: 0 auto 30px;
            position: relative;
        }

        .category-group {
            margin: 15px;
            padding: 20px;
            border-radius: var(--border-radius);
            background-color: var(--card-bg-color);
            box-shadow: 0 4px 8px var(--shadow-color);
            transition: all 0.3s ease;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        
        .category-group:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px var(--shadow-color);
        }
        
        .category-title {
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
            font-size: 1.2rem;
            font-weight: 600;
            font-family: var(--heading-font);
            color: var(--text-color);
        }

        .tech-tag {
            display: inline-block;
            padding: 8px 15px;
            border-radius: 25px;
            font-weight: 500;
            font-family: var(--heading-font);
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: default;
            margin: 5px;
        }

        .tech-tag:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 10px var(--shadow-color);
            z-index: 5;
        }

        /* Category-specific colors */
        .tag-backend {
            background-color: rgba(114, 137, 218, 0.15);
            color: #869adb;
            border-color: rgba(114, 137, 218, 0.3);
        }
        .tag-backend:hover {
            background-color: rgba(114, 137, 218, 0.3);
        }

        .tag-frontend {
            background-color: rgba(240, 71, 71, 0.15);
            color: #f04747;
            border-color: rgba(240, 71, 71, 0.3);
        }
        .tag-frontend:hover {
            background-color: rgba(240, 71, 71, 0.3);
        }

        .tag-cloud {
            background-color: rgba(86, 207, 225, 0.15);
            color: #56cfe1;
            border-color: rgba(86, 207, 225, 0.3);
        }
        .tag-cloud:hover {
            background-color: rgba(86, 207, 225, 0.3);
        }

        .tag-db {
            background-color: rgba(134, 255, 153, 0.15);
            color: #86ff99;
            border-color: rgba(134, 255, 153, 0.3);
        }
        .tag-db:hover {
            background-color: rgba(134, 255, 153, 0.3);
        }

        .tag-tools {
            background-color: rgba(255, 183, 77, 0.15);
            color: #ffb74d;
            border-color: rgba(255, 183, 77, 0.3);
        }
        .tag-tools:hover {
            background-color: rgba(255, 183, 77, 0.3);
        }

        .tag-interests {
            background-color: rgba(186, 104, 200, 0.15);
            color: #ba68c8;
            border-color: rgba(186, 104, 200, 0.3);
        }
        .tag-interests:hover {
            background-color: rgba(186, 104, 200, 0.3);
        }

        .tag-lg {
            font-size: 1.25rem;
            z-index: 3;
        }

        .tag-md {
            font-size: 1.1rem;
            z-index: 2;
        }

        .tag-sm {
            font-size: 0.95rem;
            z-index: 1;
        }

        .stack-categories {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

        .stack-category-filter {
            padding: 6px 15px;
            border-radius: 20px;
            border: 1px solid var(--line-color);
            background-color: var(--card-bg-color);
            color: var(--text-color);
            font-family: var(--heading-font);
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .stack-category-filter:hover,
        .stack-category-filter.active {
            background-color: var(--primary-accent);
            color: white;
            border-color: var(--primary-accent);
        }
        
        /* Stack search box */
        .stack-search-container {
            margin: 15px auto 25px;
            max-width: 500px;
            width: 100%;
        }
        
        .stack-search-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .stack-search-wrapper .iconify {
            position: absolute;
            left: 12px;
            color: var(--secondary-text);
            pointer-events: none;
            font-size: 1.2rem;
        }
        
        .stack-search-input {
            width: 100%;
            padding: 10px 40px;
            border-radius: 30px;
            border: 1px solid var(--line-color);
            background-color: var(--card-bg-color);
            color: var(--text-color);
            font-family: var(--body-font);
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .stack-search-input:focus {
            outline: none;
            border-color: var(--primary-accent);
            box-shadow: 0 0 0 2px rgba(114, 137, 218, 0.2);
        }
        
        .stack-search-clear {
            position: absolute;
            right: 12px;
            background: none;
            border: none;
            color: var(--secondary-text);
            cursor: pointer;
            display: none;
            padding: 4px;
            border-radius: 50%;
            transition: all 0.2s ease;
        }
        
        .stack-search-clear:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--text-color);
        }
        
        .stack-search-clear.visible {
            display: block;
        }

        @media (max-width: 768px) {
            .category-group {
                padding: 15px;
            }
            .tech-tag {
                margin: 4px;
                padding: 6px 12px;
            }
        }

        /* Certifications & Education Section */
        #certs-education-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
        #certs-education-grid h3 { color: var(--primary-accent); margin-bottom: 10px; }
        #certifications-list { list-style: none; padding-left: 0; }
        #certifications-list li { background-color: var(--card-bg-color); padding: 10px 15px; margin-bottom: 10px; border-radius: var(--border-radius); border-left: 3px solid var(--primary-accent); color: var(--text-color); }
        #education-info p { background-color: var(--card-bg-color); padding: 10px 15px; border-radius: var(--border-radius); border-left: 3px solid var(--secondary-accent); color: var(--text-color); }

        /* Articles Section */
        #articles h2 { margin-bottom: 30px; }
        #article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
        #article-grid .article-card { background-color: var(--card-bg-color); padding: 25px; border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        #article-grid .article-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.3); }
        #article-grid .article-card h3 { margin-bottom: 0.5em; }
        #article-grid .article-meta { 
            font-size: 0.85em; 
            color: var(--secondary-text); 
            margin-bottom: 15px; 
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        #article-grid .article-meta a { color: var(--link-color); text-decoration: underline; }
        #article-grid .article-meta a:hover { color: var(--link-hover-color); }
        #article-grid .reading-time {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.9em;
            padding: 3px 8px;
            background-color: rgba(114, 137, 218, 0.1);
            border-radius: 12px;
            color: var(--secondary-text);
        }
        #article-grid .reading-time .iconify {
            color: var(--primary-accent);
            width: 14px;
            height: 14px;
        }
        #article-grid .article-summary { font-size: 0.95em; margin-bottom: 20px; flex-grow: 1; line-height: 1.6; color: var(--text-color); }
        #article-grid .article-card .btn-secondary { margin-top: auto; align-self: flex-start; }
        .external-link-icon { font-size: 0.9em; margin-left: 4px; display: inline-block; }
        .more-articles-note { text-align: center; margin-top: 30px; font-style: italic; color: var(--secondary-text); }

        /* Projects Section */
        #project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
        #project-grid .project-card { background-color: var(--card-bg-color); padding: 20px; border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
        #project-grid .project-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.3); }
        #project-grid .project-card img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--border-radius) var(--border-radius) 0 0; margin-bottom: 15px; }
        #project-grid .project-card p { font-size: 0.9em; margin-bottom: 10px; flex-grow: 1; }
        #project-grid .project-card p.tech-used { flex-grow: 0; font-size: 0.8em !important; color: var(--secondary-text); font-style: italic; margin-bottom: 15px; }
        #project-grid .project-links { margin-top: auto; }
        .btn, .btn-secondary { display: inline-block; padding: 8px 15px; border-radius: 5px; font-family: var(--heading-font); font-weight: bold; text-align: center; margin-right: 10px; margin-bottom: 5px; transition: background-color 0.3s ease, color 0.3s ease; }
        .btn { background-color: var(--primary-accent); color: #fff; }
        .btn:hover { background-color: var(--link-hover-color); color: #fff; }
        .btn-secondary { background-color: transparent; color: var(--link-color); border: 1px solid var(--link-color); }
        .btn-secondary:hover { background-color: var(--link-color); color: #fff; }

        /* Recommended Readings Section */
        #readings h2 { margin-bottom: 30px; }
        #reading-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
        .reading-card { background-color: var(--card-bg-color); padding: 20px; border-radius: var(--border-radius); box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .reading-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.3); }
        .reading-card img.cover-image { width: 100px; height: 150px; object-fit: cover; border-radius: 4px; margin-bottom: 15px; align-self: center; }
        .reading-card .author-type { font-size: 0.9em; color: var(--secondary-text); margin-bottom: 10px; font-style: italic; }
        .reading-card .recommendation-text { font-size: 0.95em; margin-bottom: 15px; flex-grow: 1; line-height: 1.5; color: var(--text-color); }
        .reading-card .reading-link { margin-top: auto; align-self: flex-start; }


        /* Footer / Contact */
        #contact { text-align: center; padding: 40px 20px; background-color: var(--card-bg-color); border-top: 2px solid var(--secondary-accent); }
        #contact-prompt { font-size: 1.15em; font-family: var(--heading-font); font-weight: 500; margin-bottom: 25px; color: var(--text-color); }
        .social-links-label {
            font-size: 0.85em;
            color: var(--secondary-text);
            margin-top: 25px;
            margin-bottom: 8px;
            font-style: italic;
        }

        #social-links-container {
            margin-top: 5px;
            padding-top: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        
        #social-links-container a { 
            font-size: 1.2em; 
            margin: 0 8px;
            padding: 8px;
            color: var(--secondary-text);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            background-color: var(--card-bg-color);
            border-radius: 50%;
            width: 36px;
            height: 36px;
        }
        
        #social-links-container a:hover { 
            color: var(--link-color);
            transform: translateY(-2px);
            background-color: var(--bg-color);
        }
        
        #social-links-container .iconify {
            width: 20px;
            height: 20px;
        }
        
        /* Enhanced Call to Action styles */
        .cta-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin: 20px 0 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .footer-cta-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background-color: var(--card-bg-color);
            color: var(--text-color);
            border: 2px solid var(--primary-accent);
            border-radius: 30px;
            padding: 10px 24px;
            font-family: var(--heading-font);
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            min-width: 180px;
        }
        
        .footer-cta-btn:hover {
            background-color: var(--primary-accent);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px var(--shadow-color);
        }
        
        .footer-cta-btn .iconify {
            width: 22px;
            height: 22px;
        }
        
        @media (max-width: 768px) {
            .cta-container {
                flex-direction: column;
                align-items: center;
                gap: 12px;
            }
            
            .footer-cta-btn {
                width: 90%;
                max-width: 300px;
                justify-content: flex-start;
            }
        }
        
        .copyright { 
            margin-top: 20px; 
            font-size: 0.9em; 
            color: var(--secondary-text); 
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            h1 { font-size: 2em; } h2 { font-size: 1.6em; }
            .avatar { width: 100px; height: 100px; }
            .quick-nav { display: flex; flex-wrap: wrap; justify-content: center; }
            .quick-nav a { margin: 5px 8px; }
        }
         @media (max-width: 480px) {
            #project-grid, #article-grid, #certs-education-grid, #stack-grid, #reading-grid { grid-template-columns: 1fr; }
            .btn, .btn-secondary { width: 100%; margin-right: 0; margin-bottom: 10px; }
            .project-links, .reading-card .reading-link { display: flex; flex-direction: column; }
            .reading-card .reading-link a { width: 100%;} /* Make reading link button full width */
        }

        /* Collapsible Section Styles */
        .collapsible {
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            margin-bottom: 15px;
            overflow: hidden;
        }
        .collapsible-header {
            background-color: var(--card-bg-color);
            padding: 15px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #3a3e42;
            border-radius: var(--border-radius);
            transition: background-color 0.2s ease;
        }
        .collapsible-header:hover {
            background-color: #36393f;
        }
        .collapsible-header h3 {
            margin-bottom: 0;
            display: flex;
            align-items: center;
        }
        .collapsible-icon {
            width: 20px;
            height: 20px;
            fill: var(--primary-accent);
            transition: transform 0.3s ease;
            margin-left: 10px;
        }
        .collapsible.active .collapsible-icon {
            transform: rotate(180deg);
        }
        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 20px;
            border: 1px solid #3a3e42;
            border-top: none;
            border-radius: 0 0 var(--border-radius) var(--border-radius);
        }
        .collapsible.active .collapsible-content {
            max-height: 1000px; /* Adjust this value as needed */
            padding: 20px;
        }

        /* Career Timeline - Animated */
        .timeline-wrapper {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 0;
        }
        
        .timeline-line {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 4px;
            background-color: var(--primary-accent);
            transform: translateX(-50%);
            z-index: 1;
        }
        
        .timeline-entry {
            position: relative;
            margin-bottom: 60px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .timeline-entry.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .timeline-entry:nth-child(odd) {
            padding-right: calc(50% + 30px);
            text-align: right;
        }
        
        .timeline-entry:nth-child(even) {
            padding-left: calc(50% + 30px);
            text-align: left;
        }
        
        .timeline-marker {
            position: absolute;
            top: 15px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--card-bg-color);
            border: 4px solid var(--primary-accent);
            z-index: 2;
        }
        
        .timeline-entry:nth-child(odd) .timeline-marker {
            right: calc(50% - 10px);
        }
        
        .timeline-entry:nth-child(even) .timeline-marker {
            left: calc(50% - 10px);
        }
        
        .timeline-content {
            background-color: var(--card-bg-color);
            padding: 20px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .timeline-content:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }
        
        .timeline-connector {
            position: absolute;
            top: 23px;
            width: 30px;
            height: 2px;
            background-color: var(--primary-accent);
        }
        
        .timeline-entry:nth-child(odd) .timeline-connector {
            right: 50%;
        }
        
        .timeline-entry:nth-child(even) .timeline-connector {
            left: 50%;
        }
        
        .timeline-date {
            position: absolute;
            top: 0;
            font-weight: 600;
            color: var(--primary-accent);
            background-color: var(--card-bg-color);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        
        .timeline-entry:nth-child(odd) .timeline-date {
            left: calc(50% + 20px);
        }
        
        .timeline-entry:nth-child(even) .timeline-date {
            right: calc(50% + 20px);
        }
        
        .timeline-subtitle {
            color: var(--primary-accent);
            margin-bottom: 15px;
            font-style: italic;
        }
        
        .timeline-description {
            margin-bottom: 10px;
            color: var(--text-color);
        }
        
        .timeline-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            color: var(--text-color);
        }
        
        .timeline-details.open {
            max-height: 500px;
        }
        
        .timeline-details ul {
            color: var(--text-color);
            padding-left: 20px;
            margin-bottom: 15px;
        }
        
        .timeline-details ul li {
            margin-bottom: 8px;
        }
        
        .timeline-toggle {
            background: none;
            border: none;
            color: var(--link-color);
            cursor: pointer;
            font-size: 0.9rem;
            padding: 5px 10px;
            margin-top: 10px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .timeline-toggle:hover {
            color: var(--link-hover-color);
        }
        
        .timeline-entry:nth-child(odd) .timeline-toggle {
            margin-left: auto;
        }

        /* Go to Top Button */
        #goToTopBtn {
            display: none;
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 99;
            border: 0;
            outline: none;
            background-color: transparent;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 50%;
            font-size: 24px;
            width: 50px;
            height: 50px;
            transition: all 0.3s ease;
        }
        #goToTopBtn:hover {
            transform: translateY(-5px);
        }
        #goToTopBtn:active {
            transform: translateY(0);
        }
        
        /* Page Transitions */
        .content-block {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        
        .content-block.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Scroll Progress Indicator */
        .scroll-progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }
        
        .scroll-progress-bar {
            height: 100%;
            background: var(--primary-accent);
            width: 0%;
            transition: width 0.1s ease;
        }
        
        /* Theme Toggle Button */
        #theme-toggle {
            position: fixed;
            top: 20px;
            right: 90px;
            z-index: 100;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--card-bg-color);
            border: 2px solid var(--primary-accent);
            color: var(--icon-color);
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px var(--shadow-color);
            transition: transform 0.5s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        #theme-toggle:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px var(--shadow-color);
        }
        
        /* Keyboard Navigation Focus Style */
        .keyboard-focus:focus {
            outline: 3px solid var(--primary-accent);
            outline-offset: 3px;
        }
        
        /* Custom Cursor Styles */
        .cursor-dot,
        .cursor-circle {
            pointer-events: none;
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        
        .cursor-dot {
            width: 8px;
            height: 8px;
            background-color: var(--primary-accent);
        }
        
        .cursor-circle {
            width: 40px;
            height: 40px;
            border: 2px solid var(--primary-accent);
            transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
        }
        
        /* Hide default cursor when custom cursor is active */
        body.custom-cursor-active {
            cursor: none !important;
        }
        
        /* Special interactions for interactive elements */
        body.custom-cursor-active a:hover ~ .cursor-circle,
        body.custom-cursor-active button:hover ~ .cursor-circle,
        body.custom-cursor-active .tech-tag:hover ~ .cursor-circle,
        body.custom-cursor-active .timeline-toggle:hover ~ .cursor-circle {
            width: 60px;
            height: 60px;
            background-color: rgba(114, 137, 218, 0.1);
        }
        
        @media (max-width: 768px) {
            .cursor-dot, .cursor-circle {
                display: none;
            }
        }
        
        /* Skip to content link for accessibility */
        .skip-to-content {
            position: absolute;
            top: -50px;
            left: 0;
            background: var(--primary-accent);
            color: white;
            padding: 10px 15px;
            z-index: 1000;
            transition: top 0.3s ease;
            border-radius: 0 0 5px 0;
            font-family: var(--heading-font);
            font-weight: 500;
        }
        
        .skip-to-content:focus {
            top: 0;
        }
        
        /* Keyboard Shortcuts Info */
.keyboard-shortcuts {
    position: fixed;
    bottom: 30px;
    right: 90px;
    z-index: 99;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--card-bg-color);
    border: 2px solid var(--primary-accent);
    color: var(--icon-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow-color);
    transition: all 0.3s ease;
}

.keyboard-shortcuts:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* Hide keyboard shortcuts button on mobile devices */
@media (max-width: 768px) {
    .keyboard-shortcuts {
        display: none;
    }
}
        
        .shortcuts-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--card-bg-color);
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 5px 15px var(--shadow-color);
            z-index: 1000;
            max-width: 90%;
            width: 450px;
        }
        
        .shortcuts-modal.active {
            display: block;
        }
        
        .shortcuts-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        
        .shortcuts-overlay.active {
            display: block;
        }
        
        .shortcuts-modal h3 {
            margin-bottom: 15px;
            color: var(--text-color);
        }
        
        .shortcuts-modal .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-color);
            cursor: pointer;
        }
        
        .shortcut-list {
            list-style: none;
        }
        
        .shortcut-list li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--line-color);
        }
        
        .shortcut-key {
            background-color: var(--bg-color);
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 10px;
            font-family: var(--body-font);
            display: inline-block;
        }

        /* Additional light theme adjustments for headings and links */
        [data-theme="light"] h1,
        [data-theme="light"] h2,
        [data-theme="light"] h3 {
            color: #1a202c;
        }

        [data-theme="light"] .quick-nav a {
            color: var(--link-color);
        }

        [data-theme="light"] .quick-nav a:hover {
            color: var(--link-hover-color);
        }

        /* Fix timeline title color and contrast */
        .timeline-title {
            margin-bottom: 10px;
            color: var(--text-color);
            font-size: 1.3rem;
        }

        [data-theme="light"] .timeline-title {
            color: #1a202c;
        }

        /* Ensure article and project titles have good contrast */
        #article-grid .article-title {
            font-size: 1.25em;
            color: var(--link-color);
            font-family: var(--heading-font);
            font-weight: 600;
            line-height: 1.3;
            text-decoration: none;
        }

        #project-grid .project-card h3 {
            color: var(--text-color);
            margin-bottom: 10px;
        }

        .reading-card h3 {
            font-size: 1.2em;
            color: var(--text-color);
            margin-bottom: 5px;
        }

        /* Fix any existing white-colored links */
        .article-title:hover, 
        .project-title:hover,
        .reading-title:hover {
            color: var(--link-hover-color) !important;
        }

        /* Better contrast for light theme buttons */
        [data-theme="light"] .btn-secondary {
            color: var(--link-color);
            border-color: var(--link-color);
        }

        [data-theme="light"] .btn-secondary:hover {
            background-color: var(--link-color);
            color: white;
        }

        /* Make sure quick-nav links are visible in both themes */
        .quick-nav a {
            margin: 0 10px;
            font-family: var(--heading-font);
            font-weight: bold;
            color: var(--link-color);
        }

        .quick-nav a:hover {
            color: var(--link-hover-color);
            text-decoration: underline;
        }

        .timeline-toggle:hover {
            color: var(--link-hover-color);
        }

        .timeline-entry:nth-child(odd) .timeline-toggle {
            margin-left: auto;
        }

        .timeline-toggle-icon {
            transition: transform 0.3s ease;
        }

        .timeline-toggle.open .timeline-toggle-icon {
            transform: rotate(180deg);
        }

        @media (max-width: 768px) {
            .timeline-line {
                left: 30px;
            }
            
            .timeline-entry {
                padding-left: 70px !important;
                padding-right: 0 !important;
                text-align: left !important;
            }
            
            .timeline-marker {
                left: 20px !important;
                right: auto !important;
            }
            
            .timeline-connector {
                left: 40px !important;
                right: auto !important;
                width: 30px;
            }
            
            .timeline-date {
                position: relative !important;
                left: auto !important;
                right: auto !important;
                display: inline-block;
                margin-bottom: 10px;
            }
        }

        [data-theme="light"] .category-group {
            background-color: var(--card-bg-color);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .tech-tag {
            border-width: 1px;
        }

        [data-theme="light"] .stack-category-filter {
            border-color: #e2e8f0;
            color: #4a5568;
        }

        [data-theme="light"] .stack-category-filter:hover,
        [data-theme="light"] .stack-category-filter.active {
            background-color: var(--link-color);
            color: white;
        }

        [data-theme="light"] .stack-section-header,
        [data-theme="light"] .about-section-header,
        [data-theme="light"] .more-articles-note {
            color: #2d3748;
        }

        /* Section Header Animations */
        .section-title-container {
            position: relative;
            display: inline-block;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .section-title-container.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .section-title-decoration {
            position: absolute;
            opacity: 0;
            transition: all 0.5s ease;
        }

        .section-title-container.visible .section-title-decoration {
            opacity: 1;
        }

        .section-title-decoration.left {
            left: -25px;
            top: 50%;
            transform: translateY(-50%) translateX(20px);
        }

        .section-title-container.visible .section-title-decoration.left {
            transform: translateY(-50%) translateX(0);
        }

        .section-title-decoration.right {
            right: -25px;
            top: 50%;
            transform: translateY(-50%) translateX(-20px);
        }

        .section-title-container.visible .section-title-decoration.right {
            transform: translateY(-50%) translateX(0);
        }

        .section-title-decoration.bottom {
            bottom: -10px;
            left: 0;
            width: 0;
            height: 3px;
            background-color: var(--primary-accent);
            transition: width 0.5s ease 0.2s;
        }

        .section-title-container.visible .section-title-decoration.bottom {
            width: 100%;
        }

        .section-title-accent {
            position: relative;
            z-index: 1;
        }

        .section-title-accent::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 30%;
            background-color: rgba(114, 137, 218, 0.15);
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease 0.3s;
        }

        .section-title-container.visible .section-title-accent::after {
            transform: scaleX(1);
        }

        /* Red accent variation */
        .section-title-accent.red::after {
            background-color: rgba(240, 71, 71, 0.15);
        }

        /* Section specific header styles */
        #about .section-title-decoration.bottom {
            background-color: var(--secondary-accent);
        }

        /* Microinteractions for interactive elements */
        
        /* Button press effect */
        .btn, .btn-secondary, .footer-cta-btn, .stack-category-filter {
            transform: translateY(0);
            transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
        }
        
        .btn:active, .btn-secondary:active, .footer-cta-btn:active, .stack-category-filter:active {
            transform: translateY(2px);
            box-shadow: 0 2px 3px var(--shadow-color);
        }
        
        /* Focus state pulse effect for buttons and links */
        @keyframes pulse-border {
            0% { box-shadow: 0 0 0 0 rgba(114, 137, 218, 0.5); }
            70% { box-shadow: 0 0 0 5px rgba(114, 137, 218, 0); }
            100% { box-shadow: 0 0 0 0 rgba(114, 137, 218, 0); }
        }
        
        .btn:focus, .btn-secondary:focus, .footer-cta-btn:focus, 
        .stack-category-filter:focus, .timeline-toggle:focus, 
        #social-links-container a:focus, #theme-toggle:focus, 
        #goToTopBtn:focus, .keyboard-shortcuts:focus {
            outline: none;
            animation: pulse-border 1.5s infinite;
        }
        
        /* Link hover underline animation */
        .quick-nav a, #article-grid .article-meta a {
            position: relative;
        }
        
        .quick-nav a::after, #article-grid .article-meta a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--link-color);
            transition: width 0.3s ease;
        }
        
        .quick-nav a:hover::after, #article-grid .article-meta a:hover::after {
            width: 100%;
        }
        
        /* Icon hover rotation */
        .keyboard-shortcuts .iconify, 
        #theme-toggle .iconify, 
        #goToTopBtn .iconify,
        #social-links-container .iconify {
            transition: transform 0.3s ease;
        }
        
        .keyboard-shortcuts:hover .iconify, 
        #theme-toggle:hover .iconify, 
        #goToTopBtn:hover .iconify,
        #social-links-container a:hover .iconify {
            transform: rotate(15deg);
        }
        
        /* Scale effect for social icons */
        #social-links-container a {
            transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease;
        }
        
        #social-links-container a:hover {
            transform: translateY(-2px) scale(1.15);
        }
        
        /* Tech tag click effect */
        .tech-tag {
            position: relative;
            overflow: hidden;
        }
        
        .tech-tag::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: scale(0) translate(-50%, -50%);
            transform-origin: top left;
            opacity: 0;
            transition: transform 0.5s, opacity 0.5s;
        }
        
        .tech-tag:active::after {
            transform: scale(2) translate(-50%, -50%);
            opacity: 1;
            transition: transform 0s, opacity 0.3s;
        }
        
        /* Avatar image subtle pulse on page load */
        @keyframes subtle-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .avatar {
            animation: subtle-pulse 2s ease-in-out 1;
        }
        
        /* CTA buttons hover effect */
        .footer-cta-btn {
            position: relative;
            overflow: hidden;
        }
        
        .footer-cta-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: left 0.7s ease;
        }
        
        .footer-cta-btn:hover::before {
            left: 100%;
        }
        
        /* Timeline toggle bounce effect */
        .timeline-toggle:active .timeline-toggle-icon {
            animation: bounce 0.5s ease;
        }
        
        /* Card hover 3D effect for skill cards */
        .skill-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            transform-style: preserve-3d;
        }
        
        .skill-card:hover {
            transform: translateY(-5px) rotateX(5deg) rotateY(-5deg);
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
        }

        /* Page Loader Styles */
        .page-loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease;
        }
        
        .page-loader {
            text-align: center;
        }
        
        .loader-spinner {
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 4px solid rgba(114, 137, 218, 0.2);
            border-top-color: var(--primary-accent);
            animation: loader-spin 1s linear infinite;
        }
        
        @keyframes loader-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Theme Toggle Animation */
        .theme-toggle-spin {
            animation: toggle-spin 0.5s ease;
        }
        
        @keyframes toggle-spin {
            0% { transform: rotate(0); }
            100% { transform: rotate(360deg); }
        }
        
        /* Animated Background Gradient */
        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        #hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, 
                rgba(114, 137, 218, 0.05) 0%, 
                rgba(114, 137, 218, 0) 25%, 
                rgba(240, 71, 71, 0) 75%, 
                rgba(240, 71, 71, 0.05) 100%);
            background-size: 400% 400%;
            z-index: 0;
            animation: gradient-shift 15s ease infinite;
            pointer-events: none;
        }

        /* Make buttons use variable fonts for better performance */
        .btn, .btn-secondary, .footer-cta-btn, .stack-category-filter {
            font-family: var(--heading-font);
            font-variation-settings: 'wght' 600;
        }
        
        /* For code elements, use variable Roboto Mono */
        code, pre {
            font-family: var(--body-font);
            font-variation-settings: 'wght' var(--roboto-mono-wght);
        }
        
        /* Fallbacks for browsers that don't support variable fonts */
        .no-variable-fonts h1 {
            font-weight: 800;
        }
        
        .no-variable-fonts h2 {
            font-weight: 700;
        }
        
        .no-variable-fonts h3 {
            font-weight: 600;
        }
        
        .no-variable-fonts .hero-name {
            font-weight: 800;
        }
        
        .no-variable-fonts .quick-nav a {
            font-weight: 700;
        }
        
        .no-variable-fonts .skill-title {
            font-weight: 600;
        }
        
        .no-variable-fonts .btn, 
        .no-variable-fonts .btn-secondary, 
        .no-variable-fonts .footer-cta-btn, 
        .no-variable-fonts .stack-category-filter {
            font-weight: 600;
        }
        
        /* Performance-based optimizations */
        .perf-low {
            --body-line-height: 1.6; /* Reduced line height for better performance */
        }
        
        /* Variable font adaptation for different performance tiers */
        .perf-high .hero-name {
            font-variation-settings: 'wght' 800, 'wdth' 105; /* Slightly wider */
        }
        
        .perf-low .hero-name {
            font-variation-settings: 'wght' 800; /* Simpler variation settings */
        }

        /* Content Personalization Styles */
        .content-focus {
            position: relative;
            animation: spotlight-pulse 2s ease-in-out;
            border-left: 4px solid var(--primary-accent);
            border-radius: var(--border-radius);
        }

        @keyframes spotlight-pulse {
            0% { box-shadow: 0 0 0 0 rgba(114, 137, 218, 0.1); }
            50% { box-shadow: 0 0 0 10px rgba(114, 137, 218, 0.1); }
            100% { box-shadow: 0 0 0 0 rgba(114, 137, 218, 0); }
        }

        /* Adjust section spacing when in focus */
        .content-focus {
            padding-left: 20px;
            margin-bottom: 60px; 
            margin-top: 60px;
        }

        /* Add a subtle indicator for the focused section */
        .content-focus::before {
            content: '★';
            position: absolute;
            left: -15px;
            top: 20px;
            color: var(--primary-accent);
            font-size: 1.5rem;
        }

        /* Specific enhancements for each personalization type */
        body[data-content-focus="experience"] #experience h2 {
            font-size: 2.4em;
            color: var(--primary-accent);
        }

        body[data-content-focus="projects"] #projects h2 {
            font-size: 2.4em;
            color: var(--primary-accent);
        }

        body[data-content-focus="writing"] #articles h2 {
            font-size: 2.4em;
            color: var(--primary-accent);
        }

        body[data-content-focus="stack"] #stack h2 {
            font-size: 2.4em;
            color: var(--primary-accent);
        }

        /* Personalization notification */
        .personalization-notice {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: var(--card-bg-color);
            color: var(--text-color);
            padding: 10px 15px;
            border-radius: 30px;
            box-shadow: 0 2px 8px var(--shadow-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            z-index: 1000;
            font-size: 0.9rem;
            max-width: 300px;
            transform: translateY(0);
            animation: slide-in 0.5s ease;
        }

        .personalization-notice.fade-out {
            animation: fade-out 1s ease forwards;
        }

        #reset-personalization {
            background: none;
            border: none;
            color: var(--secondary-text);
            cursor: pointer;
            font-size: 1.2rem;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
            padding: 0;
        }

        #reset-personalization:hover {
            color: var(--text-color);
            background-color: rgba(255, 255, 255, 0.1);
        }

        @keyframes slide-in {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes fade-out {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        /* Hide notification on small screens */
        @media (max-width: 768px) {
            .personalization-notice {
                bottom: 10px;
                left: 10px;
                max-width: calc(100% - 20px);
                font-size: 0.8rem;
            }
        }
        
        /* Developer Animation Styles */
        .craftsman-animation-container {
            position: relative;
            width: 140px;
            height: 140px;
            margin-bottom: 15px;
        }
        
        .craftsman-figure {
            position: relative;
            width: 140px;
            height: 140px;
        }
        
        .craftsman-svg {
            overflow: visible;
        }
        
        /* SVG element styles */
        .craft-head {
            fill: var(--primary-accent);
            stroke: none;
            opacity: 0.9;
        }
        
        .craft-hat {
            fill: none;
            stroke: var(--primary-accent);
            stroke-width: 4;
            stroke-linecap: round;
        }
        
        .craft-body, .craft-arm-left, .craft-arm-right, .craft-leg-left, .craft-leg-right {
            stroke: var(--primary-accent);
            stroke-width: 6;
            stroke-linecap: round;
            fill: none;
        }
        
        .craft-workbench {
            fill: #8B4513; /* Wood brown color */
            stroke: #5D2906;
            stroke-width: 2;
        }
        
        .craft-hammer-handle {
            stroke: #8B4513;
            stroke-width: 4;
            stroke-linecap: round;
        }
        
        .craft-hammer-head {
            fill: #A9A9A9; /* Silver/metal color */
            stroke: #696969;
            stroke-width: 1;
        }
        
        .craft-wood-1, .craft-wood-2, .craft-wood-3 {
            fill: #CD853F; /* Wood tan color */
            stroke: #8B4513;
            stroke-width: 1;
            animation: appear 6s ease-in-out infinite;
        }
        
        .craft-wood-1 {
            animation-delay: 0.5s;
        }
        
        .craft-wood-2 {
            animation-delay: 1.5s;
        }
        
        .craft-wood-3 {
            animation-delay: 2.5s;
        }
        
        .craft-project-1, .craft-project-2, .craft-project-3 {
            opacity: 0;
            transform-origin: center;
            animation: buildUp 6s ease-in-out infinite;
        }
        
        .craft-project-1 {
            fill: #CD853F;
            stroke: #8B4513;
            stroke-width: 1;
            animation-delay: 3s;
        }
        
        .craft-project-2 {
            fill: #DEB887;
            stroke: #8B4513;
            stroke-width: 1;
            animation-delay: 4s;
        }
        
        .craft-project-3 {
            fill: #D2B48C;
            stroke: #8B4513;
            stroke-width: 1;
            animation-delay: 5s;
        }
        
        /* Animation keyframes */
        @keyframes appear {
            0%, 15% { 
                opacity: 0; 
                transform: translateY(-10px);
            }
            25%, 85% { 
                opacity: 1; 
                transform: translateY(0);
            }
            95%, 100% { 
                opacity: 0;
                transform: translateY(-5px);
            }
        }
        
        @keyframes buildUp {
            0%, 20% { 
                opacity: 0; 
                transform: scale(0.2);
            }
            30%, 85% { 
                opacity: 1; 
                transform: scale(1);
            }
            95%, 100% { 
                opacity: 0.5;
                transform: scale(1);
            }
        }
        
        /* Animate the right arm to simulate hammering */
        .craft-arm-right.hammering {
            animation: hammering 1s ease-in-out infinite;
            transform-origin: 100px 110px;
        }
        
        @keyframes hammering {
            0%, 10%, 100% { transform: rotate(0deg); }
            40% { transform: rotate(-25deg); }
            60% { transform: rotate(10deg); }
        }
        
        /* Light theme adjustments */
        [data-theme="light"] .craft-head {
            fill: var(--primary-accent);
        }
        
        [data-theme="light"] .craft-workbench {
            fill: #A0522D;
        }
        
        /* Handle layout for the animation and avatar */
        .hero-image {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .craftsman-animation-container {
                margin-bottom: 5px;
            }
        }

        /* Development Workflow Animation Styles */
        .dev-workflow-container {
            position: relative;
            width: 160px;
            height: 140px;
            margin-bottom: 15px;
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
            animation: fullCycle 25s linear infinite; /* Complete animation cycle */
        }
        
        .dev-workflow-svg {
            overflow: visible;
        }
        
        /* Phase styling - smoother animations */
        .phase {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.7s ease, transform 0.7s ease;
            filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
        }
        
        /* Each phase has a permanent display state (no hiding) */
        .phase-requirements {
            animation: phaseAppear 0.8s ease forwards;
            animation-delay: 0s; /* Display first */
        }
        
        .phase-planning {
            animation: phaseAppear 0.8s ease forwards;
            animation-delay: 4s;
        }
        
        .phase-coding {
            animation: phaseAppear 0.8s ease forwards;
            animation-delay: 8s;
        }
        
        .phase-deployment {
            animation: phaseAppear 0.8s ease forwards;
            animation-delay: 12s;
        }
        
        .phase-result {
            animation: phaseAppear 0.8s ease forwards;
            animation-delay: 16s;
        }
        
        /* Connection arrows between phases - improved styling */
        .connector-arrow {
            fill: none;
            stroke: var(--primary-accent);
            stroke-width: 2.5;
            stroke-dasharray: 10;
            stroke-linecap: round;
            opacity: 0;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
            animation: arrowAppear 1.2s ease forwards;
        }
        
        .c0 {
            animation-delay: 3s;
        }
        
        .c1 {
            animation-delay: 7.5s;
        }
        
        .c2 {
            animation-delay: 11.5s;
        }
        
        .c3 {
            animation-delay: 15.5s;
        }
        
        /* Requirements phase elements - styles for notepad and checkmark */
        .requirements-paper {
            fill: #f9f9f9;
            stroke: #555;
            stroke-width: 1;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
        }
        
        .requirements-line {
            stroke: #555;
            stroke-width: 1;
            stroke-linecap: round;
        }
        
        .requirements-check {
            fill: none;
            stroke: #4CAF50;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 20;
            stroke-dashoffset: 20;
            animation: drawLine 1s ease-in-out forwards;
            animation-delay: 1.5s;
        }
        
        /* Planning phase elements - improved visuals */
        .diagram-paper {
            fill: #f9f9f9;
            stroke: #555;
            stroke-width: 1;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
        }
        
        .diagram-lines {
            fill: none;
            stroke: var(--primary-accent);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: drawLine 2s ease-in-out forwards;
            animation-delay: 0.5s;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
        }
        
        /* Coding phase elements - enhanced styling */
        .code-window {
            fill: #1E1E1E;
            stroke: #777;
            stroke-width: 1;
            filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
        }
        
        .code-titlebar {
            fill: #333;
            stroke: none;
        }
        
        .window-dot {
            fill: #ff6158;
            r: 2;
        }
        
        .window-dot:nth-child(2) {
            fill: #ffbd2e;
        }
        
        .window-dot:nth-child(3) {
            fill: #28c941;
        }
        
        .code-line {
            stroke-width: 1.8;
            stroke-dasharray: 50;
            stroke-dashoffset: 50;
            animation: drawLine 1.5s ease-in-out forwards;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
        }
        
        .code-line:nth-child(5) {
            animation-delay: 4.5s;
            stroke: #98C379;
        }
        
        .code-line:nth-child(6) {
            animation-delay: 5s;
            stroke: #E06C75;
        }
        
        .code-line:nth-child(7) {
            animation-delay: 5.5s;
            stroke: #C678DD;
        }
        
        /* Deployment phase elements - enhanced cloud */
        .cloud {
            fill: #f8f8f8;
            stroke: var(--primary-accent);
            stroke-width: 1.8;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
            animation: pulseCloud 3s ease-in-out infinite;
            animation-delay: 8s;
        }
        
        .cloud-arrow {
            fill: none;
            stroke: var(--secondary-accent);
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-dasharray: 50;
            stroke-dashoffset: 50;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
            animation: drawLine 1.5s ease-in-out forwards;
            animation-delay: 9s;
        }
        
        /* End result phase elements - improved devices */
        .device-screen {
            fill: #2C2F33;
            stroke: #888;
            stroke-width: 1.2;
            filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
        }
        
        .device-base {
            fill: #888;
            stroke: #555;
            stroke-width: 0.8;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }
        
        .device-phone {
            fill: #333;
            stroke: #888;
            stroke-width: 1.2;
            filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
        }
        
        .device-phone-screen {
            fill: #2C2F33;
            stroke: none;
        }
        
        .device-phone-button {
            fill: #aaa;
            r: 2;
        }
        
        .ui-element {
            fill: var(--primary-accent);
            opacity: 0;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
            animation: fadeIn 1.2s ease-in-out forwards;
        }
        
        .ui-header {
            animation-delay: 12.5s;
        }
        
        .ui-content:nth-of-type(1) {
            animation-delay: 13s;
            fill: var(--secondary-accent);
        }
        
        .ui-content:nth-of-type(2) {
            animation-delay: 13.5s;
        }
        
        .ui-content:nth-of-type(3) {
            animation-delay: 13.7s;
            fill: var(--primary-accent);
        }
        
        .ui-content:nth-of-type(4) {
            animation-delay: 14s;
            fill: var(--secondary-accent);
        }
        
        /* Phase labels with improved styling */
        .phase-label {
            font-family: var(--heading-font);
            font-size: 9px;
            fill: var(--primary-accent);
            font-weight: bold;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
        }
        
        .phase-requirements .phase-label {
            text-anchor: start;
            animation-delay: 0.5s;
            font-size: 8px; /* Slightly smaller */
        }
        
        .phase-planning .phase-label {
            text-anchor: middle;
            animation-delay: 4.5s;
        }
        
        .phase-coding .phase-label {
            text-anchor: middle;
            animation-delay: 8.5s;
        }
        
        .phase-deployment .phase-label {
            text-anchor: middle;
            animation-delay: 12.5s;
        }
        
        .phase-result .phase-label {
            text-anchor: middle;
            animation-delay: 16.5s;
            dominant-baseline: hanging; /* Position text below element */
        }
        
        .feedback-label {
            text-anchor: start;
            animation-delay: 19.5s;
            font-size: 8px;
            fill: var(--secondary-accent);
        }
        
        /* Animations */
        @keyframes phaseAppear {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes arrowAppear {
            from {
                opacity: 0;
                stroke-dashoffset: 10;
            }
            to {
                opacity: 1;
                stroke-dashoffset: 0;
            }
        }
        
        @keyframes drawLine {
            to {
                stroke-dashoffset: 0;
            }
        }
        
        @keyframes typing {
            from {
                transform: translateY(0) translateX(0);
            }
            to {
                transform: translateY(-3px) translateX(3px);
            }
        }
        
        @keyframes pulseCloud {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        /* Light theme adjustments */
        [data-theme="light"] .code-window {
            fill: #f5f5f5;
        }
        
        [data-theme="light"] .code-titlebar {
            fill: #ddd;
        }
        
        [data-theme="light"] .requirements-paper {
            fill: #ffffff;
            stroke: #999;
        }
        
        [data-theme="light"] .device-screen,
        [data-theme="light"] .device-phone-screen {
            fill: #f5f5f5;
        }
        
        /* Handle layout for the animation and avatar */
        .hero-image {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .dev-workflow-container {
                margin-bottom: 5px;
            }
        }

        /* Animation container and toggle */
        .animation {
            display: none;
        }
        
        .animation.active {
            display: block;
        }
        
        .animation-toggle {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
        }
        
        #toggle-animation {
            background-color: var(--secondary-accent);
            color: white;
            border: 2px solid white;
            border-radius: 4px;
            width: 36px;
            height: 36px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }
        
        #toggle-animation:hover {
            transform: scale(1.1);
            background-color: var(--primary-accent);
        }
        
        #toggle-animation.toggling {
            animation: rotateButton 0.3s ease-in-out;
        }
        
        @keyframes rotateButton {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(180deg); }
        }
        
        /* Character perspective animation styles */
        .dev-character-container {
            position: relative;
            width: 160px;
            height: 140px;
            margin-bottom: 15px;
        }
        
        .dev-character-svg {
            overflow: visible;
        }
        
        /* Head elements */
        .head-silhouette {
            fill: var(--primary-accent);
            opacity: 0.8;
            animation: pulseHead 4s ease-in-out infinite;
        }
        
        .neck {
            fill: var(--primary-accent);
            opacity: 0.8;
        }
        
        .hair {
            fill: none;
            stroke: var(--secondary-accent);
            stroke-width: 2;
            opacity: 0.7;
        }
        
        /* Brain and thought process */
        .brain-outline {
            fill: none;
            stroke: rgba(240, 130, 130, 0.7);
            stroke-width: 2;
            opacity: 0;
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: brainPulse 12s linear infinite;
        }
        
        .brain-1 {
            animation-delay: 0s;
        }
        
        .brain-2 {
            animation-delay: 0.5s;
        }
        
        .brain-3 {
            animation-delay: 1s;
        }
        
        .thought-node {
            fill: var(--primary-accent);
            opacity: 0;
            animation: nodeAppear 12s linear infinite;
        }
        
        .node-1 {
            animation-delay: 1.5s;
        }
        
        .node-2 {
            animation-delay: 2s;
        }
        
        .node-3 {
            animation-delay: 2.5s;
        }
        
        .node-4 {
            animation-delay: 3s;
        }
        
        .node-5 {
            animation-delay: 3.5s;
        }
        
        .thought-connection {
            stroke: var(--primary-accent);
            stroke-width: 1.5;
            opacity: 0;
            stroke-dasharray: 20;
            stroke-dashoffset: 20;
            animation: connectionFlow 12s linear infinite;
        }
        
        .conn-1 {
            animation-delay: 2.2s;
        }
        
        .conn-2 {
            animation-delay: 2.7s;
        }
        
        .conn-3 {
            animation-delay: 3.2s;
        }
        
        .conn-4 {
            animation-delay: 3.2s;
        }
        
        /* Coding elements */
        .code-symbol {
            font-family: var(--body-font);
            font-size: 10px;
            font-weight: bold;
            fill: var(--primary-accent);
            opacity: 0;
            animation: symbolFlow 12s linear infinite;
        }
        
        .symbol-1 {
            animation-delay: 4s;
        }
        
        .symbol-2 {
            animation-delay: 4.2s;
        }
        
        .symbol-3 {
            animation-delay: 4.4s;
        }
        
        .symbol-4 {
            animation-delay: 4.6s;
        }
        
        .symbol-5 {
            animation-delay: 4.8s;
        }
        
        .laptop-base {
            fill: #777;
            stroke: #444;
            stroke-width: 1;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
            animation-delay: 4s;
        }
        
        .laptop-keyboard {
            fill: #555;
            stroke: #333;
            stroke-width: 1;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
            animation-delay: 4s;
        }
        
        .laptop-screen {
            fill: #222;
            stroke: #444;
            stroke-width: 1;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
            animation-delay: 4s;
        }
        
        .screen-code-line {
            stroke: #61AFEF;
            stroke-width: 1;
            opacity: 0;
            stroke-dasharray: 30;
            stroke-dashoffset: 30;
            animation: codeLine 12s linear infinite;
        }
        
        .line-1 {
            animation-delay: 5s;
            stroke: #98C379;
        }
        
        .line-2 {
            animation-delay: 5.5s;
            stroke: #E06C75;
        }
        
        /* Deployment/server elements */
        .server {
            fill: #4A4A4A;
            stroke: #333;
            stroke-width: 1;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
            animation-delay: 6s;
        }
        
        .server-light {
            opacity: 0;
            animation: blinkLight 0.8s linear infinite;
        }
        
        .light-1 {
            fill: #5CB3FF;
            animation-delay: 6.5s;
        }
        
        .light-2 {
            fill: #5CFF5C;
            animation-delay: 6.8s;
        }
        
        .light-3 {
            fill: #FFCC5C;
            animation-delay: 7.1s;
        }
        
        .data-flow {
            fill: none;
            stroke: var(--primary-accent);
            stroke-width: 2;
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            opacity: 0;
            animation: dataFlow 12s linear infinite;
        }
        
        .flow-1 {
            animation-delay: 7s;
        }
        
        .flow-2 {
            animation-delay: 7.5s;
        }
        
        .flow-3 {
            animation-delay: 8s;
        }
        
        .flow-4 {
            animation-delay: 8.5s;
        }
        
        /* End result elements */
        .result-desktop, .result-mobile {
            fill: #2C2F33;
            stroke: #666;
            stroke-width: 1;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
        }
        
        .result-desktop {
            animation-delay: 8s;
        }
        
        .result-desktop-base {
            fill: #666;
            stroke: #333;
            stroke-width: 0.5;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
            animation-delay: 8s;
        }
        
        .result-mobile {
            animation-delay: 8.2s;
        }
        
        .result-mobile-screen {
            fill: #2C2F33;
            stroke: none;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
            animation-delay: 8.2s;
        }
        
        .result-mobile-button {
            fill: #888;
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
            animation-delay: 8.2s;
        }
        
        .result-ui {
            fill: var(--primary-accent);
            opacity: 0;
            animation: fadeIn 12s linear infinite;
        }
        
        .ui-1 {
            animation-delay: 9s;
        }
        
        .ui-2 {
            animation-delay: 9.5s;
            fill: var(--secondary-accent);
        }
        
        .ui-3 {
            animation-delay: 10s;
        }
        
        .ui-4 {
            animation-delay: 10.5s;
            fill: var(--secondary-accent);
        }
        
        .ui-5 {
            animation-delay: 11s;
        }
        
        /* Character animation keyframes */
        @keyframes pulseHead {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.02);
            }
        }
        
        @keyframes brainPulse {
            0%, 5% {
                opacity: 0;
                stroke-dashoffset: 100;
            }
            10%, 20% {
                opacity: 0.8;
                stroke-dashoffset: 0;
            }
            25%, 100% {
                opacity: 0;
            }
        }
        
        @keyframes nodeAppear {
            0% { 
                opacity: 0;
                transform: scale(0.1);
            }
            5%, 25% { 
                opacity: 1;
                transform: scale(1);
            }
            30%, 100% { 
                opacity: 0;
                transform: scale(0.1);
            }
        }
        
        @keyframes connectionFlow {
            0% {
                opacity: 0;
                stroke-dashoffset: 20;
            }
            5%, 25% {
                opacity: 0.7;
                stroke-dashoffset: 0;
            }
            30%, 100% {
                opacity: 0;
                stroke-dashoffset: 20;
            }
        }
        
        @keyframes symbolFlow {
            0% {
                opacity: 0;
                transform: translateY(-5px);
            }
            5%, 25% {
                opacity: 1;
                transform: translateY(0);
            }
            30%, 100% {
                opacity: 0;
                transform: translateY(5px);
            }
        }
        
        @keyframes codeLine {
            0%, 35% {
                opacity: 0;
                stroke-dashoffset: 30;
            }
            40%, 50% {
                opacity: 1;
                stroke-dashoffset: 0;
            }
            55%, 100% {
                opacity: 0;
            }
        }
        
        @keyframes blinkLight {
            0%, 49% {
                opacity: 0.3;
            }
            50%, 100% {
                opacity: 1;
            }
        }
        
        @keyframes dataFlow {
            0%, 10% {
                opacity: 0;
                stroke-dashoffset: 100;
            }
            20%, 30% {
                opacity: 0.8;
                stroke-dashoffset: 0;
            }
            40%, 100% {
                opacity: 0;
                stroke-dashoffset: 100;
            }
        }
        
        @keyframes fullCycle {
            0%, 100% {
                /* Animation reset point */
                opacity: 1;
            }
        }
        
        /* Make the toggle button more visible */
        .animation-toggle {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .view-label {
            font-size: 10px;
            color: white;
            margin-top: 4px;
            background-color: rgba(0,0,0,0.5);
            padding: 2px 6px;
            border-radius: 10px;
            font-family: var(--body-font);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: bold;
        }
        
        #toggle-animation {
            background-color: var(--secondary-accent);
            color: white;
            border: 2px solid white;
            border-radius: 4px;
            width: 36px;
            height: 36px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }
        
        @keyframes rotateButton {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(180deg); }
        }
        
        /* Light theme adjustments */
        [data-theme="light"] .head-silhouette,
        [data-theme="light"] .neck {
            opacity: 0.9;
        }
        
        [data-theme="light"] .laptop-screen,
        [data-theme="light"] .result-desktop,
        [data-theme="light"] .result-mobile-screen {
            fill: #f5f5f5;
        }
        
        [data-theme="light"] .server {
            fill: #777;
        }

        .c3 {
            animation-delay: 15.5s;
        }
        
        /* Feedback loop styling */
        .feedback-loop {
            stroke: var(--secondary-accent);
            stroke-width: 2;
            stroke-dasharray: 6;
            stroke-linecap: round;
            opacity: 0;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
            animation: feedbackArrow 2s ease forwards;
            animation-delay: 19s;
        }
        
        .feedback-label {
            text-anchor: middle;
            animation-delay: 19.5s;
            font-size: 8px;
            fill: var(--secondary-accent);
        }
        
        @keyframes feedbackArrow {
            from {
                opacity: 0;
                stroke-dashoffset: 60;
            }
            to {
                opacity: 0.8;
                stroke-dashoffset: 0;
            }
        }
        
        /* Requirements phase elements - styles for notepad and checkmark */

        /* Mystic Avatar Styles */
        .mystic-avatar-container {
            width: 140px;
            height: 140px;
            position: relative;
            z-index: 10;
            margin-top: 10px;
            margin-bottom: 10px;
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
        }
        
        .mystic-avatar {
            width: 100%;
            height: 100%;
            overflow: visible;
            transition: all 0.3s ease;
        }
        
        /* Hover effects */
        .mystic-avatar-container:hover .mystic-avatar {
            transform: scale(1.05);
        }
        
        .mystic-avatar-container:hover .sacred-geometry {
            stroke-width: 1.5;
            opacity: 0.8;
        }
        
        /* Animated elements */
        .stars-layer {
            opacity: 0.8;
            animation: twinkle 8s ease-in-out infinite;
        }
        
        .mystic-aura {
            filter: url(#glow);
            opacity: 0.8;
            animation: pulse 4s ease-in-out infinite;
            transform-origin: center;
        }
        
        .orbiting-element {
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
            transform-origin: 100px 100px;
        }
        
        .orbit-1 {
            animation: orbit 12s linear infinite;
        }
        
        .orbit-2 {
            animation: orbit 20s linear infinite reverse;
        }
        
        .orbit-3 {
            animation: orbit 15s linear infinite;
        }
        
        .orbit-4 {
            animation: orbit 18s linear infinite reverse;
        }
        
        .sacred-geometry {
            transform-origin: center;
            animation: rotate 30s linear infinite;
            opacity: 0.5;
            transition: all 0.5s ease;
        }
        
        .sacred-geometry.alt {
            animation: rotate 30s linear infinite reverse;
        }
        
        /* Animations for mystical elements */
        @keyframes twinkle {
            0%, 100% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 0.7;
                transform: scale(1);
            }
            50% {
                opacity: 0.9;
                transform: scale(1.05);
            }
        }
        
        @keyframes orbit {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        /* Media queries for responsive design */
        @media (max-width: 768px) {
            .mystic-avatar-container {
                width: 100px;
                height: 100px;
            }
        }