<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Henry's Website!</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="apple-touch-icon" href="favicon.png">
    <meta name="theme-color" content="#007aff">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            /* Modern Black & Blue Color Palette */
            --deep-black: #000000;
            --rich-black: #0a0a0a;
            --charcoal: #1a1a1a;
            --dark-blue: #0066ff;
            --electric-blue: #007aff;
            --bright-blue: #0099ff;
            --glass: rgba(0, 102, 255, 0.15);
            --glass-border: rgba(0, 122, 255, 0.25);
            --glass-dark: rgba(0, 0, 0, 0.8);
            --glass-border-dark: rgba(0, 122, 255, 0.2);
            
            /* Main Colors */
            --primary-color: #007aff;
            --secondary-color: #0066ff;
            --accent-color: #0099ff;
            --text-primary: #ffffff;
            --text-secondary: #a0a0a0;
            --text-light: #666666;
            --bg-primary: #000000;
            --bg-secondary: #0a0a0a;
            --bg-tertiary: rgba(0, 122, 255, 0.08);
            --border-color: rgba(0, 122, 255, 0.2);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
            --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.9);
            --shadow-blue: 0 4px 20px rgba(0, 122, 255, 0.3);
            
            /* Gradient Toggle */
            --gradients-enabled: 1;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Ensure no white backgrounds anywhere */
        html {
            background: var(--bg-primary) !important;
            min-height: 100vh;
        }

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            background-color: transparent !important;
        }

        /* Override any potential white backgrounds - but allow our custom backgrounds */
        *:not(img):not(svg):not(canvas):not(html):not(body):not(.btn):not(.project-card):not(.contact-method):not(.toggle-slider) {
            background-color: transparent !important;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background: var(--bg-primary) !important;
            background-attachment: fixed !important;
            scroll-behavior: smooth;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        /* Additional body background layers */
        body {
            background-image: 
                linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(0, 122, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0, 102, 255, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(0, 153, 255, 0.04) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(0, 122, 255, 0.06) 2px, transparent 2px),
                radial-gradient(circle at 75% 75%, rgba(0, 102, 255, 0.04) 1px, transparent 1px);
            background-size: 60px 60px, 40px 40px;
            pointer-events: none;
            z-index: -1;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(20px, -20px) rotate(120deg); }
            66% { transform: translate(-15px, 15px) rotate(240deg); }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--bg-primary) !important;
            backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--border-color);
            z-index: 10000;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-sm);
        }

        /* Ensure header stays above title */
        nav {
            position: relative;
            z-index: 10001;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }


        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(135deg, 
                var(--bg-primary) 0%, 
                rgba(0, 122, 255, 0.05) 50%, 
                var(--bg-secondary) 100%);
            position: relative;
            overflow: hidden;
        }

        .hero::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 122, 255, 0.08) 0%, transparent 70%);
            z-index: 1;
        }

        @keyframes heroFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(25px, -25px) rotate(120deg); }
            66% { transform: translate(-20px, 20px) rotate(240deg); }
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(rgba(0, 122, 255, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 122, 255, 0.08) 1px, transparent 1px);
            background-size: 60px 60px;
            opacity: 0.3;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero:hover::before {
            opacity: 0.5;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 2rem;
        }

        /* Easter Egg Modal */
        .easter-egg-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            animation: fadeIn 0.3s ease;
        }

        .easter-egg-content {
            background: var(--bg-primary);
            padding: 2rem;
            border-radius: 1rem;
            text-align: center;
            max-width: 400px;
            box-shadow: var(--shadow-xl);
            animation: slideIn 0.3s ease;
        }

        @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
         }
         
         @keyframes slideInUp {
             from {
                 transform: translateY(100%);
                 opacity: 0;
             }
             to {
                 transform: translateY(0);
                 opacity: 1;
             }
         }
         
         @keyframes fadeOut {
             from { opacity: 1; }
             to { opacity: 0; }
         }

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

        /* Smooth scrolling animations */
        .smooth-scroll {
            transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .wave-emoji {
            font-size: 3rem;
            cursor: pointer;
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 1rem;
            animation: enhancedWave 6s ease-in-out infinite;
        }

        .wave-emoji:hover {
            transform: scale(1.1);
            animation: hoverWave 4s ease-in-out infinite;
        }

        .wave-emoji.handshake {
            animation: enhancedHandshake 1.2s ease-in-out;
        }

        @keyframes enhancedWave {
            0%, 100% { 
                transform: rotate(0deg) translateY(0px) scale(1);
            }
            12% { 
                transform: rotate(15deg) translateY(-3px) scale(1.05);
            }
            25% { 
                transform: rotate(25deg) translateY(-5px) scale(1.1);
            }
            37% { 
                transform: rotate(10deg) translateY(-2px) scale(1.05);
            }
            50% { 
                transform: rotate(-5deg) translateY(0px) scale(1);
            }
            62% { 
                transform: rotate(-20deg) translateY(-3px) scale(1.05);
            }
            75% { 
                transform: rotate(-25deg) translateY(-5px) scale(1.1);
            }
            87% { 
                transform: rotate(-10deg) translateY(-2px) scale(1.05);
            }
        }

        @keyframes hoverWave {
            0%, 100% { 
                transform: rotate(0deg) translateY(0px) scale(1.1);
            }
            16% { 
                transform: rotate(20deg) translateY(-5px) scale(1.15);
            }
            33% { 
                transform: rotate(30deg) translateY(-8px) scale(1.2);
            }
            50% { 
                transform: rotate(0deg) translateY(-3px) scale(1.15);
            }
            66% { 
                transform: rotate(-30deg) translateY(-8px) scale(1.2);
            }
            83% { 
                transform: rotate(-20deg) translateY(-5px) scale(1.15);
            }
        }

        @keyframes enhancedHandshake {
            0%, 100% { 
                transform: translateX(0) rotate(0deg) scale(1);
            }
            10% { 
                transform: translateX(-15px) rotate(-5deg) scale(1.1);
            }
            20% { 
                transform: translateX(15px) rotate(5deg) scale(1.1);
            }
            30% { 
                transform: translateX(-12px) rotate(-3deg) scale(1.05);
            }
            40% { 
                transform: translateX(12px) rotate(3deg) scale(1.05);
            }
            50% { 
                transform: translateX(-8px) rotate(-2deg) scale(1.02);
            }
            60% { 
                transform: translateX(8px) rotate(2deg) scale(1.02);
            }
            70% { 
                transform: translateX(-5px) rotate(-1deg) scale(1.01);
            }
            80% { 
                transform: translateX(5px) rotate(1deg) scale(1.01);
            }
            90% { 
                transform: translateX(-2px) rotate(0deg) scale(1);
            }
        }

        .hero h1 {
            font-size: clamp(2.5rem, 8vw, 4rem);
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.4));
            animation: textGlow 4s ease-in-out infinite;
        }

        @keyframes textGlow {
            0%, 100% { filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.4)); }
            50% { filter: drop-shadow(0 4px 8px rgba(0, 153, 255, 0.5)); }
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            max-width: 600px;
            position: relative;
        }

        .hero p::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: 1px;
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
            50% { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        .cta-buttons .btn {
            position: relative;
            overflow: hidden;
        }

        .cta-buttons .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.5s;
        }

        .cta-buttons .btn:hover::before {
            left: 100%;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            box-shadow: var(--shadow-blue);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 122, 255, 0.3);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
            border-color: var(--accent-color);
        }

        .btn-secondary {
            background: var(--glass-dark);
            color: var(--text-primary);
            border: 2px solid var(--glass-border-dark);
            backdrop-filter: blur(20px);
        }

        .btn-secondary:hover {
            background: rgba(0, 122, 255, 0.15);
            border-color: var(--accent-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-blue);
        }

        .btn-blog {
            background: linear-gradient(135deg, #007aff, #0066ff);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 0.75rem;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-lg);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 122, 255, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-blog::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.5s;
        }

        .btn-blog:hover::before {
            left: 100%;
        }

        .btn-blog:hover {
            background: linear-gradient(135deg, #0066ff, #005ce6);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 122, 255, 0.4);
        }

        /* Collapsible sections */
        .collapsible-header {
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
        }

        .collapsible-header:hover {
            opacity: 0.8;
        }

        .toggle-icon {
            transition: transform 0.3s ease;
            margin-left: 10px;
            font-size: 0.8em;
        }

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

        .collapsible-content {
            max-height: 2000px;
            overflow: hidden;
            transition: max-height 0.5s ease, opacity 0.3s ease;
            opacity: 1;
        }

        .collapsible-content.collapsed {
            max-height: 0;
            opacity: 0;
        }

        /* Sections */
        section {
            padding: 6rem 2rem;
        }

        /* Enhanced padding for better spacing */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 8px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .section-header::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
            border-radius: 2px;
            box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
            animation: sectionGlow 5s ease-in-out infinite;
        }

        @keyframes sectionGlow {
            0%, 100% { opacity: 0.8; transform: translateX(-50%) scaleX(1); box-shadow: 0 0 10px rgba(0, 122, 255, 0.5); }
            50% { opacity: 1; transform: translateX(-50%) scaleX(1.1); box-shadow: 0 0 20px rgba(0, 153, 255, 0.7); }
        }

        .section-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
            position: relative;
        }


        .section-header p {
            font-size: 1.125rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Projects Grid */
        .projects-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-top: 3rem;
            padding: 24px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }

        .projects-grid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(0, 122, 255, 0.03) 0%, 
                rgba(0, 102, 255, 0.02) 50%, 
                rgba(0, 153, 255, 0.03) 100%);
            border-radius: 1rem;
            pointer-events: none;
        }

        .project-card {
            background: var(--glass-dark);
            border: 1px solid var(--glass-border-dark);
            border-radius: 1.5rem;
            padding: 24px;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(15px);
        }

        .project-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(0, 122, 255, 0.08) 0%, 
                rgba(0, 102, 255, 0.06) 100%);
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
            border-radius: 1.5rem;
        }

        .project-card:hover::before {
            opacity: 1;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl), var(--shadow-blue);
            border-color: var(--primary-color);
        }

        .project-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-primary);
            position: relative;
            z-index: 2;
        }

        .project-card p {
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 2;
        }

        .project-features {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 2;
        }

        .feature-tag {
            background: rgba(0, 122, 255, 0.15);
            color: var(--primary-color);
            padding: 0.4rem 0.9rem;
            border-radius: 1.2rem;
            font-size: 0.8rem;
            font-weight: 600;
            border: 1px solid rgba(0, 122, 255, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
        }

        .feature-tag:hover {
            transform: translateY(-1px) scale(1.05);
            background: rgba(0, 153, 255, 0.2);
            border-color: var(--accent-color);
            color: var(--accent-color);
            box-shadow: 0 4px 8px rgba(0, 153, 255, 0.3);
        }

        .project-links {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
        }

        .project-links .btn {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }

        /* Handintime Card Custom Styles */
        .handintime-card {
            background: linear-gradient(135deg, 
                rgba(0, 122, 255, 0.12) 0%, 
                rgba(0, 102, 255, 0.08) 100%);
            border: 2px solid rgba(0, 122, 255, 0.4);
            position: relative;
        }

        .handintime-card::before {
            background: linear-gradient(135deg, 
                rgba(0, 153, 255, 0.15) 0%, 
                rgba(0, 122, 255, 0.12) 100%);
        }

        .handintime-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 122, 255, 0.4), var(--shadow-blue);
            border-color: var(--accent-color);
        }

        .handintime-card h3 {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGlow 3s ease-in-out infinite;
        }

        .handintime-card .feature-tag {
            background: rgba(0, 153, 255, 0.2);
            color: var(--accent-color);
            border-color: rgba(0, 153, 255, 0.4);
            animation: tagPulse 4s ease-in-out infinite;
        }

        .handintime-card .feature-tag:hover {
            background: rgba(0, 122, 255, 0.25);
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        @keyframes timeCardFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-5px) rotate(0.5deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(-3px) rotate(-0.5deg); }
        }

        @keyframes titleGlow {
            0%, 100% { filter: drop-shadow(0 0 5px rgba(0, 122, 255, 0.4)); }
            50% { filter: drop-shadow(0 0 15px rgba(0, 153, 255, 0.6)); }
        }

        @keyframes tagPulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
        }

        /* Contact Section */
        .contact {
            background: linear-gradient(135deg, 
                var(--bg-secondary) 0%, 
                rgba(0, 122, 255, 0.06) 50%, 
                var(--bg-primary) 100%);
            position: relative;
        }

        .contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent, 
                var(--primary-color), 
                var(--secondary-color), 
                var(--accent-color), 
                transparent);
            box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
        }

        .contact-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
            align-items: center;
        }

        .contact-info h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

        .contact-info p {
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        .contact-methods {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .contact-method {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem;
            background: var(--bg-primary);
            border-radius: 0.5rem;
            text-decoration: none;
            color: var(--text-primary);
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }

        .contact-method::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(0, 122, 255, 0.08), 
                rgba(0, 153, 255, 0.06));
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .contact-method:hover::before {
            opacity: 1;
        }

        .contact-method:hover {
            background: var(--bg-tertiary);
            transform: translateX(5px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3), var(--shadow-blue);
        }

        .contact-method > * {
            position: relative;
            z-index: 1;
        }

        .contact-method i {
            font-size: 1.25rem;
            color: var(--primary-color);
            width: 24px;
            text-align: center;
        }

        /* Footer */
        footer {
            background: var(--bg-tertiary);
            padding: 3rem 2rem;
            text-align: center;
            border-top: 1px solid var(--border-color);
        }

        footer p {
            color: var(--text-secondary);
        }

        /* Mobile Menu */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Enhanced Mobile Optimization */
        @media (max-width: 768px) {
            .container {
                padding: 0 16px;
            }

            nav {
                padding: 1rem 16px;
            }

            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--bg-primary);
                flex-direction: column;
                padding: 2rem;
                border-top: 1px solid var(--border-color);
                gap: 1.5rem;
                box-shadow: var(--shadow-xl);
                backdrop-filter: blur(20px);
                border-radius: 0 0 1rem 1rem;
            }

            .nav-links {
                background: var(--bg-secondary);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
            }

            .nav-links.active {
                display: flex;
                animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }


            .mobile-menu-toggle {
                display: block;
                padding: 0.75rem;
                border-radius: 0.5rem;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                min-height: 44px;
                min-width: 44px;
            }

            .mobile-menu-toggle:hover {
                background: var(--bg-tertiary);
                box-shadow: var(--shadow-md);
                transform: scale(1.05);
            }

            section {
                padding: 3rem 16px;
            }

            .hero {
                padding-top: 80px;
            }

            .hero-content {
                padding: 1rem;
            }

            .hero h1 {
                font-size: clamp(2rem, 10vw, 3.5rem);
                line-height: 1.2;
            }

            .hero p {
                font-size: 1.1rem;
                margin-bottom: 1.5rem;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }

            .btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
                min-height: 48px;
                font-size: 1rem;
            }

            .projects-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                padding: 8px;
            }

            .project-card {
                padding: 1.5rem;
                margin-bottom: 1rem;
            }

            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .project-links {
                flex-direction: column;
                gap: 0.75rem;
            }

            .project-links .btn {
                min-height: 44px;
            }

            .wave-emoji {
                font-size: 2.5rem;
            }

            /* Touch-friendly interactions */
            .project-card:active {
                transform: scale(0.98);
            }

            .btn:active {
                transform: scale(0.95);
            }

            /* Mobile-optimized animations */
            .heart-emoji {
                font-size: 1.5rem;
            }

            .gradient-toggle-section {
                padding: 1.5rem 0;
            }

            .gradient-toggle {
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
            }

            .toggle-slider {
                width: 50px;
                height: 25px;
            }

            .toggle-slider::before {
                width: 19px;
                height: 19px;
            }

            .gradient-toggle input:checked + .toggle-slider::before {
                transform: translateX(25px);
            }

            /* Optimize text readability */
            body {
                font-size: 16px;
                -webkit-text-size-adjust: 100%;
            }

            /* Improve scrolling performance */
            * {
                -webkit-overflow-scrolling: touch;
            }

            /* Reduce animation intensity on mobile for performance */
            @media (prefers-reduced-motion: reduce) {
                .bounce-in,
                .slide-in-left,
                .slide-in-right,
                .rotate-in,
                .scale-in,
                .fade-in-up {
                    animation: fadeInSimple 0.5s ease-out forwards;
                }

                @keyframes fadeInSimple {
                    from {
                        opacity: 0;
                    }
                    to {
                        opacity: 1;
                    }
                }

                .heart-emoji {
                    animation: heartFloatSimple 2s ease-out forwards;
                }

                @keyframes heartFloatSimple {
                    from {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    to {
                        opacity: 0;
                        transform: translateY(-100px);
                    }
                }
            }
        }

        /* Extra small mobile devices */
        @media (max-width: 480px) {
            .container {
                padding: 0 12px;
            }

            nav {
                padding: 0.75rem 12px;
            }

            .logo {
                font-size: 1.25rem;
            }

            section {
                padding: 2.5rem 12px;
            }

            .hero h1 {
                font-size: clamp(1.75rem, 12vw, 3rem);
            }

            .hero p {
                font-size: 1rem;
            }

            .wave-emoji {
                font-size: 2rem;
            }

            .btn {
                padding: 0.875rem 1.5rem;
                font-size: 0.95rem;
            }

            .project-card {
                padding: 1.25rem;
            }

            .mobile-menu-toggle {
                padding: 0.5rem;
            }
        }

        /* Landscape orientation on mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero {
                min-height: 100vh;
                padding-top: 60px;
            }

            .hero h1 {
                font-size: clamp(1.5rem, 8vw, 2.5rem);
                margin-bottom: 0.5rem;
            }

            .hero p {
                font-size: 1rem;
                margin-bottom: 1rem;
            }

            .wave-emoji {
                font-size: 1.5rem;
                margin-bottom: 0.5rem;
            }

            section {
                padding: 2rem 16px;
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }

        /* Fun section animations */
        .bounce-in {
            animation: bounceIn 1s ease-out forwards;
        }

        .slide-in-left {
            animation: slideInLeft 0.8s ease-out forwards;
        }

        .slide-in-right {
            animation: slideInRight 0.8s ease-out forwards;
        }

        .rotate-in {
            animation: rotateIn 1s ease-out forwards;
        }

        .scale-in {
            animation: scaleIn 0.6s ease-out forwards;
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3) translateY(-50px);
            }
            50% {
                opacity: 1;
                transform: scale(1.05) translateY(0);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes rotateIn {
            from {
                opacity: 0;
                transform: rotate(-180deg) scale(0.5);
            }
            to {
                opacity: 1;
                transform: rotate(0deg) scale(1);
            }
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Nadja clickable styling */
        .nadja-clickable {
            color: var(--accent-color);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            font-weight: 600;
        }

        .nadja-clickable:hover {
            color: #ff69b4;
            text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
            transform: scale(1.1);
        }

        /* Enhanced Heart animation */
        .heart-emoji {
            position: fixed;
            font-size: calc(1.8rem * var(--scale, 1));
            pointer-events: none;
            z-index: 9999;
            animation: heartFloat var(--duration, 12s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            transition: all 0.6s ease;
        }

        @keyframes heartFloat {
                0% {
                    opacity: 0;
                    transform: translateY(0) translateX(0) scale(calc(0.1 * var(--scale, 1))) rotate(0deg);
                }
                5% {
                    opacity: 0.3;
                    transform: translateY(-10px) translateX(calc(var(--drift, 0px) * 0.05)) scale(calc(0.4 * var(--scale, 1))) rotate(9deg);
                }
                12% {
                    opacity: 0.8;
                    transform: translateY(-25px) translateX(calc(var(--drift, 0px) * 0.12)) scale(calc(0.7 * var(--scale, 1))) rotate(22deg);
                }
                20% {
                    opacity: 1;
                    transform: translateY(-45px) translateX(calc(var(--drift, 0px) * 0.2)) scale(calc(0.9 * var(--scale, 1))) rotate(36deg);
                }
                30% {
                    opacity: 1;
                    transform: translateY(-75px) translateX(calc(var(--drift, 0px) * 0.3)) scale(calc(1.1 * var(--scale, 1))) rotate(54deg);
                }
                40% {
                    opacity: 1;
                    transform: translateY(-110px) translateX(calc(var(--drift, 0px) * 0.4)) scale(calc(1.25 * var(--scale, 1))) rotate(72deg);
                }
                50% {
                    opacity: 1;
                    transform: translateY(-150px) translateX(calc(var(--drift, 0px) * 0.5)) scale(calc(1.3 * var(--scale, 1))) rotate(90deg);
                }
                60% {
                    opacity: 1;
                    transform: translateY(-195px) translateX(calc(var(--drift, 0px) * 0.6)) scale(calc(1.25 * var(--scale, 1))) rotate(108deg);
                }
                70% {
                    opacity: 0.95;
                    transform: translateY(-245px) translateX(calc(var(--drift, 0px) * 0.7)) scale(calc(1.1 * var(--scale, 1))) rotate(126deg);
                }
                80% {
                    opacity: 0.8;
                    transform: translateY(-300px) translateX(calc(var(--drift, 0px) * 0.8)) scale(calc(0.9 * var(--scale, 1))) rotate(144deg);
                }
                90% {
                    opacity: 0.5;
                    transform: translateY(-360px) translateX(calc(var(--drift, 0px) * 0.9)) scale(calc(0.7 * var(--scale, 1))) rotate(162deg);
                }
                95% {
                    opacity: 0.2;
                    transform: translateY(-400px) translateX(calc(var(--drift, 0px) * 0.95)) scale(calc(0.5 * var(--scale, 1))) rotate(171deg);
                }
                100% {
                    opacity: 0;
                    transform: translateY(-450px) translateX(var(--drift, 0px)) scale(calc(0.2 * var(--scale, 1))) rotate(180deg);
                }
            }

        /* Modern Black & Blue Gradient toggle section */
        .gradient-toggle-section {
            padding: 3rem 0;
            background: linear-gradient(135deg, 
                rgba(0, 122, 255, 0.06), 
                rgba(0, 102, 255, 0.08), 
                rgba(0, 153, 255, 0.04));
            border-top: 1px solid rgba(0, 122, 255, 0.3);
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
        }

        .gradient-toggle-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 20%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 70% 80%, rgba(0, 102, 255, 0.08) 0%, transparent 50%);
            pointer-events: none;
        }

        .gradient-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            cursor: pointer;
            user-select: none;
            position: relative;
            z-index: 1;
            font-weight: 500;
            color: var(--primary-color);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .gradient-toggle input {
            display: none;
        }

        .toggle-slider {
            position: relative;
            width: 80px;
            height: 40px;
            background: linear-gradient(145deg, 
                rgba(26, 26, 26, 0.9), 
                rgba(10, 10, 10, 0.8));
            border-radius: 25px;
            border: 2px solid rgba(0, 122, 255, 0.4);
            box-shadow: 
                inset 0 2px 4px rgba(0, 0, 0, 0.3),
                0 4px 12px rgba(0, 122, 255, 0.2),
                0 2px 4px rgba(0, 0, 0, 0.5);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
        }

        .toggle-slider::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 30px;
            height: 30px;
            background: linear-gradient(145deg, 
                rgba(255, 255, 255, 0.95), 
                rgba(240, 240, 240, 0.9));
            border-radius: 50%;
            box-shadow: 
                0 4px 8px rgba(0, 0, 0, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.8),
                0 2px 4px rgba(0, 122, 255, 0.2);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(0, 122, 255, 0.3);
        }

        .gradient-toggle input:checked + .toggle-slider {
            background: linear-gradient(145deg, 
                rgba(0, 122, 255, 0.8), 
                rgba(0, 102, 255, 0.9));
            border-color: rgba(0, 122, 255, 0.8);
            box-shadow: 
                inset 0 2px 4px rgba(0, 102, 255, 0.4),
                0 4px 16px rgba(0, 122, 255, 0.6),
                0 2px 8px rgba(0, 122, 255, 0.5);
        }

        .gradient-toggle input:checked + .toggle-slider::before {
            transform: translateX(40px);
            background: linear-gradient(145deg, 
                rgba(255, 255, 255, 1), 
                rgba(240, 248, 255, 1));
            box-shadow: 
                0 4px 12px rgba(0, 122, 255, 0.6),
                inset 0 1px 3px rgba(255, 255, 255, 1),
                0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .toggle-label {
            color: var(--text-primary);
            font-weight: 500;
        }

        /* Gradients disabled state - Static colors with animations enabled */
        body.gradients-disabled {
            --gradients-enabled: 0;
        }

        body.gradients-disabled .hero::before,
        body.gradients-disabled .hero::after,
        body.gradients-disabled .project-card::before,
        body.gradients-disabled .contact::before,
        body.gradients-disabled .gradient-toggle-section::before {
            opacity: 0 !important;
        }

        body.gradients-disabled .hero {
            background: var(--bg-primary) !important;
        }

        body.gradients-disabled .project-card {
            background: var(--bg-secondary) !important;
            border: 1px solid rgba(0, 122, 255, 0.2) !important;
        }

        body.gradients-disabled .contact {
            background: var(--bg-primary) !important;
        }

        body.gradients-disabled .contact-method::before {
            opacity: 0 !important;
        }

        body.gradients-disabled .contact-method {
            background: var(--bg-secondary) !important;
        }

        body.gradients-disabled .gradient-toggle-section {
            background: rgba(10, 10, 10, 0.9) !important;
        }

        body.gradients-disabled .toggle-slider {
            background: var(--charcoal) !important;
        }

        body.gradients-disabled .gradient-toggle input:checked + .toggle-slider {
            background: var(--primary-color) !important;
        }

        /* Ensure animations remain enabled even with gradients disabled */
        body.gradients-disabled .bounce-in,
        body.gradients-disabled .slide-in-left,
        body.gradients-disabled .slide-in-right,
        body.gradients-disabled .scale-in,
        body.gradients-disabled .fade-in-up,
        body.gradients-disabled .rotate-in {
            animation-play-state: running !important;
        }

        body.gradients-disabled .heart-emoji {
            animation-play-state: running !important;
        }

        /* Scroll behavior */
        html {
            scroll-behavior: smooth;
        }

        /* Prevent white flash during scrolling */
        html {
            background-color: var(--bg-primary) !important;
            background-image: none !important;
        }

        body {
            background-color: var(--bg-primary) !important;
        }

        /* Ensure main content has proper top spacing */
        main {
            background: var(--bg-primary) !important;
            min-height: 100vh;
            position: relative;
            z-index: 1;
        }

        /* Fix hero section positioning */
        .hero {
            padding-top: 80px;
            background: var(--bg-primary) !important;
        }

        /* Prevent any white backgrounds in sections */
        section {
            background: transparent !important;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            background: var(--bg-primary) !important;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary) !important;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 122, 255, 0.3);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)) !important;
            box-shadow: 0 2px 8px rgba(0, 153, 255, 0.4);
        }

        /* Prevent white flash on overscroll */
        html, body {
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }

        /* Additional safety for any remaining white backgrounds */
        *:not(html):not(body):not(.btn):not(.btn-primary):not(.btn-secondary):not(.project-card):not(.contact-method):not(.toggle-slider):not(.feature-tag) {
            background-color: transparent !important;
        }

        html, body {
            background-color: var(--bg-primary) !important;
        }

        /* Ensure no white appears during page transitions or loading */
        html::before, html::after, body::before, body::after {
            background-color: var(--bg-primary) !important;
        }

        /* Fix for any potential white flash during scroll */
        @media screen {
            html {
                background: var(--bg-primary) !important;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <a href="#" class="logo">h3nry.xyz</a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#fun-tools">Fun Tools</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button class="mobile-menu-toggle" id="mobileMenuToggle">
                <i class="fas fa-bars"></i>
            </button>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="container">
                <div class="hero-content fade-in-up">
                    <div class="wave-emoji" id="waveEmoji">🪳</div>
                    <h1>Hi, I'm Henry!</h1>
                    <p>Developer, Yapper & Tech Slopper. Building slop technology for Chromebooks.</p>
                    <div class="cta-buttons">
                        <a href="/blog" class="btn btn-blog">
                            <i class="fas fa-blog"></i>
                            Visit Blog
                        </a>
                        <a href="#projects" class="btn btn-primary">
                            <i class="fas fa-code"></i>
                            View Projects
                        </a>
                        <a href="https://github.com/HenryTheAddict" target="_blank" class="btn btn-secondary">
                            <i class="fab fa-github"></i>
                            GitHub
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="container">
            <div class="section-header collapsible-header" onclick="toggleSection('projects')">
                <h2>Featured Projects <i class="fas fa-chevron-down toggle-icon" id="projects-icon"></i></h2>
                <p>A collection of my latest work, from web applications to creative experiments.</p>
            </div>
            
            <div class="collapsible-content collapsed" id="projects-content">
                <div class="projects-grid">
                <div class="project-card">
                    <h3>👀🫆🕵️‍♂️ TikStalker</h3>
                    <p>Advanced Python TikTok Profile Monitoring Tool designed for comprehensive social media analysis. This powerful application provides automated video downloading capabilities, real-time profile updates, and intelligent monitoring features. Built with efficiency in mind, it utilizes FFmpeg for video processing while maintaining low CPU usage, making it perfect for continuous monitoring without system strain.</p>
                    <div class="project-features">
                        <span class="feature-tag">Python</span>
                        <span class="feature-tag">Auto Download</span>
                        <span class="feature-tag">FFmpeg</span>
                        <span class="feature-tag">Low CPU</span>
                        <span class="feature-tag">Real-time Updates</span>
                    </div>
                    <div class="project-links">
                        <a href="/tikstalkerpy" class="btn btn-primary">
                            <i class="fas fa-eye"></i>
                            View Project
                        </a>
                        <a href="/tikstalkerpy/TikStalkerPythoNadSlop.zip" class="btn btn-secondary" download>
                            <i class="fas fa-download"></i>
                            Download
                        </a>
                    </div>
                </div>

                <div class="project-card">
                    <h3>🪞 MacMirror</h3>
                    <p>A simple yet delightful camera mirror application for macOS that transforms your MacBook's camera into a personal mirror. This lightweight app provides a clean, distraction-free interface to view your camera feed without any unnecessary pro features or advertisements. Perfect for quick appearance checks, virtual meeting preparation, or just having fun with your MacBook's camera in a refreshingly straightforward way.</p>
                    <div class="project-features">
                        <span class="feature-tag">macOS</span>
                        <span class="feature-tag">Camera Feed</span>
                        <span class="feature-tag">No Ads</span>
                        <span class="feature-tag">Free</span>
                        <span class="feature-tag">Simple UI</span>
                    </div>
                    <div class="project-links">
                        <a href="https://henruy.gumroad.com/l/MacMirror" target="_blank" class="btn btn-primary">
                            <i class="fas fa-download"></i>
                            Get MacMirror
                        </a>
                    </div>
                </div>

                <div class="project-card">
                    <h3>🎮 Mr67 Escape Game</h3>
                    <p>An intentionally chaotic escape game that embraces the absurd with unique gameplay mechanics and questionable design choices. This experimental project features completely vibe-coded elements, brainrot-inspired puzzles, and an unexpectedly great soundtrack that somehow makes the whole experience worthwhile. A testament to creative freedom and the beauty of imperfect game development that challenges conventional gaming norms.</p>
                    <div class="project-features">
                        <span class="feature-tag">Vibe Coded Completely</span>
                        <span class="feature-tag">Brainroted</span>
                        <span class="feature-tag">Slop</span>
                        <span class="feature-tag">Great music</span>
                        <span class="feature-tag">mango psycology</span>
                    </div>
                    <div class="project-links">
                        <a href="/67 game for 672025" class="btn btn-primary">
                            <i class="fas fa-gamepad"></i>
                            Play Game
                        </a>
                    </div>
                </div>

                <div class="project-card">
                    <h3>🌐 HenSurf Browser</h3>
                    <p>A custom web browser project built on Firefox that prioritizes user privacy and security without compromising on functionality. Features enhanced privacy controls, custom user interface elements designed for better user experience, and advanced security measures to protect your browsing data. This project demonstrates modern web browser development techniques while maintaining focus on user control and data protection.</p>
                    <div class="project-features">
                        <span class="feature-tag">Firefox</span>
                        <span class="feature-tag">Privacy</span>
                        <span class="feature-tag">Good UI</span>
                        <span class="feature-tag">Security</span>
                        <span class="feature-tag">User Control</span>
                    </div>
                    <div class="project-links">
                        <a href="https://hensurf.h3nry.xyz" target="_blank" class="btn btn-primary">
                            <i class="fas fa-external-link-alt"></i>
                            Visit Site
                        </a>
                    </div>
                </div>

                <div class="project-card">
                    <h3>📺 Radium</h3>
                    <p>My tech-focused YouTube channel and blog platform dedicated to yapping about the latest in technology, applications, and software development. There is also a Website, it's dead though.</p>
                    <div class="project-features">
                        <span class="feature-tag">YouTube</span>
                        <span class="feature-tag">Tech Reviews</span>
                        <span class="feature-tag">Blog</span>
                        <span class="feature-tag">Yapping</span>
                        <span class="feature-tag">Tech Analysis</span>
                    </div>
                    <div class="project-links">
                        <a href="https://www.youtube.com/@RadiumSBS" target="_blank" class="btn btn-primary">
                            <i class="fab fa-youtube"></i>
                            YouTube Channel
                        </a>
                        <a href="https://radium.sbs" target="_blank" class="btn btn-secondary">
                            <i class="fas fa-globe"></i>
                            Website
                        </a>
                    </div>
                </div>
            </div>
            </div>
        </section>

        <section id="fun-tools" class="container">
            <div class="section-header collapsible-header" onclick="toggleSection('fun-tools')">
                <h2>🎮 Fun Tools <i class="fas fa-chevron-down toggle-icon" id="fun-tools-icon"></i></h2>
                <p>Quirky utilities and entertaining experiments for your amusement.</p>
            </div>
            
            <div class="collapsible-content collapsed" id="fun-tools-content">
                <div class="projects-grid">
                <div class="project-card">
                    <h3>📱 Flip Phone Text Counter</h3>
                    <p>Ever wondered how many button presses your flip phone person needs to type a message on their ancient flip phone? This calculates the exact number of T9 keypad presses required for any text, complete with time estimates and space handling options. Good for understanding the struggle of pre-smartphone dinasour texting!</p>
                    <div class="project-features">
                        <span class="feature-tag">T9 Keypad</span>
                        <span class="feature-tag">Button Counter</span>
                        <span class="feature-tag">Time Estimate</span>
                        <span class="feature-tag">Nostalgia</span>
                        <span class="feature-tag">Dad Jokes</span>
                    </div>
                    <div class="project-links">
                        <a href="/MYDADSHOULDGETABETTERPHONE" class="btn btn-primary">
                            <i class="fas fa-mobile-alt"></i>
                            Try It Out
                        </a>
                    </div>
                </div>
                
                <div class="project-card handintime-card">
                    <h3>🕐 Hand & Time</h3>
                    <p>A dual-timezone clock showing both Henry's time (EST/EDT) and Nadja's time (CET/CEST). Features elegant animations, 12/24 hour format toggle, and real-time updates.</p>
                    <div class="project-features">
                        <span class="feature-tag">Dual Timezone</span>
                        <span class="feature-tag">Real-time</span>
                        <span class="feature-tag">Format Toggle</span>
                        <span class="feature-tag">Elegant UI</span>
                        <span class="feature-tag">VERY FAST AND GOOD</span>
                    </div>
                    <div class="project-links">
                        <a href="/handntime" class="btn btn-primary">
                            <i class="fas fa-clock"></i>
                            View Time
                        </a>
                    </div>
                </div>
            </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <div class="section-header">
                    <h2>Get In Touch</h2>
                    <p> I wanna hear from you! (Especially if your name is <span id="nadjaText" class="nadja-clickable">Nadja</span>!) </p>
                </div>
                
                <div class="contact-content">
                    <div class="contact-info">
                        <h3>Let's Connect</h3>
                        <p>Whether you're looking for a yapper, have a question about one of my projects, or just want to say hi, feel free to reach out through any of the channels below.</p>
                    </div>
                    
                    <div class="contact-methods">
                        <a href="mailto:henry@h3nry.xyz" class="contact-method">
                            <i class="fas fa-envelope"></i>
                            <div>
                                <strong>Email</strong>
                                <br>
                                <span>henry@h3nry.xyz</span>
                            </div>
                        </a>
                        
                        <a href="https://github.com/HenryTheAddict" target="_blank" class="contact-method">
                            <i class="fab fa-github"></i>
                            <div>
                                <strong>GitHub</strong>
                                <br>
                                <span>@HenryTheAddict</span>
                            </div>
                        </a>
                        
                        <div class="contact-method" id="websiteContact">
                            <i class="fas fa-globe"></i>
                            <div>
                                <strong>Website</strong>
                                <br>
                                <span>h3nry.xyz</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Gradient Toggle Section -->
    <div class="gradient-toggle-section">
        <div class="container">
            <label class="gradient-toggle">
                <input type="checkbox" id="gradientToggle" checked>
                <span class="toggle-slider"></span>
                <span class="toggle-label">Enable Gradients</span>
            </label>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2025! Henry, All rights reserved. Built with my brain.</p>
        </div>
    </footer>

    <!-- Easter Egg Modal -->
    <div id="easterEggModal" class="easter-egg-modal">
        <div class="easter-egg-content">
            <h3>You~~~</h3>
            <p>"You're already here silly goose!!!"</p>
            <button id="closeEasterEgg" class="btn btn-primary" style="margin-top: 1rem;">Close</button>
        </div>
    </div>

    <script>


        // Mobile Menu Toggle
        const mobileMenuToggle = document.getElementById('mobileMenuToggle');
        const navLinks = document.querySelector('.nav-links');
        const mobileIcon = mobileMenuToggle.querySelector('i');

        mobileMenuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            
            if (navLinks.classList.contains('active')) {
                mobileIcon.className = 'fas fa-times';
            } else {
                mobileIcon.className = 'fas fa-bars';
            }
        });

        // Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                mobileIcon.className = 'fas fa-bars';
            });
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Header scroll effect
        let lastScrollTop = 0;
        const header = document.querySelector('header');

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            if (scrollTop > lastScrollTop && scrollTop > 100) {
                // Scrolling down
                header.style.transform = 'translateY(-100%)';
            } else {
                // Scrolling up
                header.style.transform = 'translateY(0)';
            }
            
            lastScrollTop = scrollTop;
        });

        // Enhanced Intersection Observer for varied animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const element = entry.target;
                    
                    // Different animations for different elements
                    if (element.classList.contains('section-header')) {
                        element.classList.add('bounce-in');
                    } else if (element.classList.contains('project-card')) {
                        // Alternate between left and right slide animations
                        const index = Array.from(document.querySelectorAll('.project-card')).indexOf(element);
                        if (index % 2 === 0) {
                            element.classList.add('slide-in-left');
                        } else {
                            element.classList.add('slide-in-right');
                        }
                    } else if (element.classList.contains('contact-method')) {
                        element.classList.add('scale-in');
                    } else if (element.classList.contains('hero-content')) {
                        element.classList.add('fade-in-up');
                    } else {
                        element.classList.add('fade-in-up');
                    }
                }
            });
        }, observerOptions);

        // Observe all project cards, sections, and contact methods
        document.querySelectorAll('.project-card, .section-header, .contact-method, .hero-content, .fun-tool-card').forEach(el => {
            observer.observe(el);
        });

        // Enhanced Emoji Animation
        let emojiActive = false;
        function handleEmojiClick() {
            if (emojiActive) return;
            emojiActive = true;
            
            const waveEmoji = document.getElementById('waveEmoji');
            
            // Change to handshake emoji with animation
            waveEmoji.textContent = '🤝';
            waveEmoji.classList.add('handshake');
            
            // Revert back after 3 seconds
            setTimeout(() => {
                waveEmoji.textContent = '👋';
                waveEmoji.classList.remove('handshake');
                emojiActive = false;
            }, 3000);
        }

        // Wave emoji click handler
        document.getElementById('waveEmoji').addEventListener('click', handleEmojiClick);

        // Easter Egg for website contact
        document.getElementById('websiteContact').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('easterEggModal').style.display = 'flex';
        });

        // Close easter egg modal
        document.getElementById('closeEasterEgg').addEventListener('click', function() {
            document.getElementById('easterEggModal').style.display = 'none';
        });

        // Close modal when clicking outside
        document.getElementById('easterEggModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });

        // Keyboard tracking for Nadja name
        let typedSequence = '';
        let nadjaUnlocked = false;
        let mobileKeyboardVisible = false;
        
        // Mobile keyboard function
        function showMobileKeyboard() {
            if (mobileKeyboardVisible) return;
            mobileKeyboardVisible = true;
            
            // Create mobile keyboard overlay
            const overlay = document.createElement('div');
            overlay.id = 'mobileKeyboardOverlay';
            overlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                z-index: 10000;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                animation: fadeIn 0.3s ease;
            `;
            
            // Create hint text
            const hint = document.createElement('div');
            hint.style.cssText = `
                color: white;
                text-align: center;
                padding: 20px;
                font-size: 18px;
                font-weight: bold;
                margin-bottom: auto;
                margin-top: 100px;
            `;
            hint.innerHTML = 'type the password<br><span style="font-size: 14px; opacity: 0.8;">Use the keyboard below or your device keyboard or im finna swiss cheese your ahh!/span>';
            
            // Create keyboard container
            const keyboard = document.createElement('div');
            keyboard.style.cssText = `
                background: #2c3e50;
                padding: 20px;
                border-radius: 20px 20px 0 0;
                animation: slideInUp 0.4s ease;
            `;
            
            // Create input display
            const inputDisplay = document.createElement('div');
            inputDisplay.id = 'mobileInputDisplay';
            inputDisplay.style.cssText = `
                background: rgba(255, 255, 255, 0.1);
                border: 2px solid #5dade2;
                border-radius: 10px;
                padding: 15px;
                margin-bottom: 20px;
                color: white;
                font-size: 18px;
                text-align: center;
                min-height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
            `;
            inputDisplay.textContent = typedSequence.slice(-5) || 'Start typing...';
            
            // Create keyboard keys
            const keys = 'qwertyuiopasdfghjklzxcvbnm'.split('');
            const keyContainer = document.createElement('div');
            keyContainer.style.cssText = `
                display: grid;
                grid-template-columns: repeat(10, 1fr);
                gap: 8px;
                margin-bottom: 15px;
            `;
            
            keys.forEach((key, index) => {
                const keyButton = document.createElement('button');
                keyButton.textContent = key.toUpperCase();
                keyButton.style.cssText = `
                    background: #34495e;
                    color: white;
                    border: none;
                    border-radius: 8px;
                    padding: 15px 10px;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                    transition: all 0.2s ease;
                `;
                
                keyButton.addEventListener('click', () => {
                    typedSequence += key;
                    if (typedSequence.length > 5) {
                        typedSequence = typedSequence.slice(-5);
                    }
                    inputDisplay.textContent = typedSequence.slice(-5);
                    
                    // Check if nadja was typed
                    if (typedSequence.slice(-5) === 'nadja') {
                        unlockNadjaEffects();
                        closeMobileKeyboard();
                    }
                    
                    // Visual feedback
                    keyButton.style.background = '#5dade2';
                    setTimeout(() => {
                        keyButton.style.background = '#34495e';
                    }, 150);
                });
                
                keyContainer.appendChild(keyButton);
            });
            
            // Create control buttons
            const controlContainer = document.createElement('div');
            controlContainer.style.cssText = `
                display: flex;
                gap: 10px;
                justify-content: center;
            `;
            
            const backspaceBtn = document.createElement('button');
            backspaceBtn.textContent = '⌫ Backspace';
            backspaceBtn.style.cssText = `
                background: #e74c3c;
                color: white;
                border: none;
                border-radius: 8px;
                padding: 15px 20px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                flex: 1;
            `;
            backspaceBtn.addEventListener('click', () => {
                typedSequence = typedSequence.slice(0, -1);
                inputDisplay.textContent = typedSequence.slice(-5) || 'Start typing...';
            });
            
            const closeBtn = document.createElement('button');
            closeBtn.textContent = '✕ Close';
            closeBtn.style.cssText = `
                background: #95a5a6;
                color: white;
                border: none;
                border-radius: 8px;
                padding: 15px 20px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                flex: 1;
            `;
            closeBtn.addEventListener('click', closeMobileKeyboard);
            
            controlContainer.appendChild(backspaceBtn);
            controlContainer.appendChild(closeBtn);
            
            // Assemble the keyboard
            keyboard.appendChild(inputDisplay);
            keyboard.appendChild(keyContainer);
            keyboard.appendChild(controlContainer);
            
            overlay.appendChild(hint);
            overlay.appendChild(keyboard);
            document.body.appendChild(overlay);
        }
        
        function closeMobileKeyboard() {
            const overlay = document.getElementById('mobileKeyboardOverlay');
            if (overlay) {
                overlay.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => {
                    if (overlay.parentNode) {
                        overlay.parentNode.removeChild(overlay);
                    }
                }, 300);
            }
            mobileKeyboardVisible = false;
        }
        
        function unlockNadjaEffects() {
            nadjaUnlocked = true;
            const nadjaText = document.getElementById('nadjaText');
            
            // Add glow effect
            nadjaText.style.textShadow = '0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 30px #ff69b4';
            nadjaText.style.color = '#ff69b4';
            nadjaText.style.transition = 'all 0.3s ease';
            
            // Show a subtle notification
            const notification = document.createElement('div');
            notification.textContent = '💖 Nadja effects unlocked! 💖';
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: rgba(255, 105, 180, 0.9);
                color: white;
                padding: 10px 20px;
                border-radius: 25px;
                font-weight: bold;
                z-index: 10001;
                animation: slideInRight 0.5s ease;
            `;
            document.body.appendChild(notification);
            
            // Remove notification after 3 seconds
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 3000);
        }
        
        // Listen for keyboard input
         document.addEventListener('keydown', function(e) {
             // Add the typed character to sequence
             typedSequence += e.key.toLowerCase();
             
             // Keep only the last 5 characters (length of 'nadja')
             if (typedSequence.length > 5) {
                 typedSequence = typedSequence.slice(-5);
             }
             
             // Check if 'nadja' was typed
             if (typedSequence === 'nadja' && !nadjaUnlocked) {
                 unlockNadjaEffects();
             }
         });

        // Enhanced Heart animation for Nadja click
        function createHeartEmoji(x, y, delay = 0) {
            const heartEmojis = ['💖', '💕', '💗', '💓', '💘', '💞', '❤️', '💎', '🏐', '🥰', '🐶', '🩵'];
            const heart = document.createElement('div');
            heart.className = 'heart-emoji';
            heart.textContent = heartEmojis[Math.floor(Math.random() * heartEmojis.length)];
            heart.style.left = x + 'px';
            heart.style.top = y + 'px';
            
            // Gentler horizontal drift and size variation
            const drift = (Math.random() - 0.5) * 100;
            const scale = 0.6 + Math.random() * 0.8; // Random size between 0.6x and 1.4x
            const duration = 8000 + Math.random() * 4000; // 8-12 seconds for slower, more graceful movement
            
            heart.style.setProperty('--drift', drift + 'px');
            heart.style.setProperty('--scale', scale);
            heart.style.setProperty('--duration', duration + 'ms');
            
            // Add delay before showing with gentle fade-in
            heart.style.opacity = '0';
            setTimeout(() => {
                heart.style.opacity = '1';
                document.body.appendChild(heart);
                
                // Remove after animation
                setTimeout(() => {
                    if (heart.parentNode) {
                        heart.parentNode.removeChild(heart);
                    }
                }, duration);
            }, delay);
        }

        // MEGA Heart explosion with 450+ hearts and scroll depth effects
        document.getElementById('nadjaText').addEventListener('click', function(e) {
            e.preventDefault();
            
            // Check if Nadja effects are unlocked
            if (!nadjaUnlocked) {
                // Check if on mobile device
                const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768;
                
                if (isMobile) {
                    // Show mobile keyboard interface
                    showMobileKeyboard();
                } else {
                    // Show desktop hint message
                    const hint = document.createElement('div');
                    hint.textContent = '🤔 Try typing something...';
                    hint.style.cssText = `
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background: rgba(0, 0, 0, 0.8);
                        color: white;
                        padding: 15px 25px;
                        border-radius: 25px;
                        font-weight: bold;
                        z-index: 10001;
                        animation: fadeIn 0.3s ease;
                    `;
                    document.body.appendChild(hint);
                    
                    // Remove hint after 2 seconds
                    setTimeout(() => {
                        if (hint.parentNode) {
                            hint.parentNode.removeChild(hint);
                        }
                    }, 2000);
                }
                return;
            }
            
            const rect = this.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            const scrollY = window.scrollY;
            
            // Wave 1: Gentle circular bloom (25 hearts)
            for (let i = 0; i < 25; i++) {
                const angle = (i / 25) * 2 * Math.PI;
                const radius = 20 + Math.random() * 80;
                const x = centerX + Math.cos(angle) * radius;
                const y = centerY + Math.sin(angle) * radius;
                createHeartEmoji(x, y, i * 80);
            }
            
            // Wave 2: Graceful spiral (30 hearts)
            setTimeout(() => {
                for (let i = 0; i < 30; i++) {
                    const angle = (i / 8) * Math.PI;
                    const radius = i * 6;
                    const x = centerX + Math.cos(angle) * radius;
                    const y = centerY + Math.sin(angle) * radius;
                    createHeartEmoji(x, y, i * 60);
                }
            }, 800);
            
            // Wave 3: Dreamy scatter (40 hearts)
            setTimeout(() => {
                for (let i = 0; i < 40; i++) {
                    const x = centerX + (Math.random() - 0.5) * 400;
                    const y = centerY + (Math.random() - 0.5) * 300;
                    createHeartEmoji(x, y, i * 50);
                }
            }, 1600);
            
            // Wave 4: Gentle screen bloom (50 hearts)
            setTimeout(() => {
                for (let i = 0; i < 50; i++) {
                    const x = Math.random() * window.innerWidth;
                    const y = Math.random() * window.innerHeight + scrollY;
                    createHeartEmoji(x, y, i * 40);
                }
            }, 2400);
            
            // Wave 5: Layered whispers (60 hearts)
            setTimeout(() => {
                for (let layer = 0; layer < 4; layer++) {
                    for (let i = 0; i < 15; i++) {
                        const depth = layer * 80;
                        const x = centerX + (Math.random() - 0.5) * (300 + depth);
                        const y = centerY + (Math.random() - 0.5) * (200 + depth);
                        createHeartEmoji(x, y, (layer * 15 + i) * 60);
                    }
                }
            }, 3200);
            
            // Wave 6: Continuous gentle rain (80 hearts over time)
            for (let wave = 0; wave < 8; wave++) {
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        const x = Math.random() * window.innerWidth;
                        const y = scrollY + Math.random() * window.innerHeight;
                        createHeartEmoji(x, y, i * 120);
                    }
                }, 4000 + wave * 600);
            }
            
            // Wave 7: Final loving embrace (30 hearts)
            setTimeout(() => {
                for (let i = 0; i < 30; i++) {
                    const angle = Math.random() * 2 * Math.PI;
                    const radius = 150 + Math.random() * 200;
                    const x = centerX + Math.cos(angle) * radius;
                    const y = centerY + Math.sin(angle) * radius;
                    createHeartEmoji(x, y, i * 100);
                }
            }, 8800);
        });

        // Gradient toggle functionality
        const gradientToggle = document.getElementById('gradientToggle');
        
        // Load saved preference
        const savedGradientState = localStorage.getItem('gradientsEnabled');
        if (savedGradientState !== null) {
            gradientToggle.checked = savedGradientState === 'true';
            if (!gradientToggle.checked) {
                document.body.classList.add('gradients-disabled');
            }
        }
        
        gradientToggle.addEventListener('change', function() {
            if (this.checked) {
                // Enable gradients and animations
                document.body.classList.remove('gradients-disabled');
                document.body.classList.add('animations-enabled');
                localStorage.setItem('gradientsEnabled', 'true');
                
                // Trigger animation refresh for visible elements
                const animatedElements = document.querySelectorAll('.bounce-in, .slide-in-left, .slide-in-right, .scale-in, .fade-in-up, .rotate-in');
                animatedElements.forEach(el => {
                    el.style.animationPlayState = 'running';
                });
            } else {
                // Disable gradients but keep animations enabled
                document.body.classList.add('gradients-disabled');
                document.body.classList.add('animations-enabled');
                localStorage.setItem('gradientsEnabled', 'false');
                
                // Ensure animations stay enabled
                const animatedElements = document.querySelectorAll('.bounce-in, .slide-in-left, .slide-in-right, .scale-in, .fade-in-up, .rotate-in');
                animatedElements.forEach(el => {
                    el.style.animationPlayState = 'running';
                });
            }
        });
        
        // Force enable animations on page load
        document.body.classList.add('animations-enabled');
        
        // Ensure all animations are running
        setTimeout(() => {
            const animatedElements = document.querySelectorAll('.bounce-in, .slide-in-left, .slide-in-right, .scale-in, .fade-in-up, .rotate-in');
            animatedElements.forEach(el => {
                el.style.animationPlayState = 'running';
            });
        }, 100);

        // Check if it's June for rainbow mode
        const currentMonth = new Date().getMonth();
        const isJune = currentMonth === 5; // June is month 5 (0-indexed)
        
        if (isJune) {
            document.querySelector('.hero').classList.add('june-mode');
        }

        // Enhanced interactive grid effect with dynamic thickness and scrolling
        const hero = document.querySelector('.hero');
        let mouseX = 0, mouseY = 0;
        let scrollX = 0, scrollY = 0;
        
        hero.addEventListener('mousemove', (e) => {
            const rect = hero.getBoundingClientRect();
            mouseX = ((e.clientX - rect.left) / rect.width) * 100;
            mouseY = ((e.clientY - rect.top) / rect.height) * 100;
            
            // Dynamic grid thickness based on mouse position
            const thickness = 0.3 + (mouseX / 100) * 1.2;
            const opacity = 0.2 + (mouseY / 100) * 0.4;
            
            hero.style.setProperty('--grid-thickness', thickness);
            hero.style.setProperty('--grid-opacity', opacity);
            
            if (isJune) {
                // Rainbow gradient for June
                const rainbowOffset = (mouseX + mouseY) % 360;
                hero.style.setProperty('--rainbow-grid', `linear-gradient(${rainbowOffset}deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)`);
            }
            
            hero.style.background = `
                radial-gradient(circle at ${mouseX}% ${mouseY}%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
                linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)
            `;
        });
        
        // Mouse-based scrolling effect
        function updateScrollEffect() {
            const centerX = window.innerWidth / 2;
            const centerY = window.innerHeight / 2;
            
            // Calculate scroll offset based on mouse position
            const scrollFactorX = (mouseX - 50) * 0.5;
            const scrollFactorY = (mouseY - 50) * 0.3;
            
            // Smooth interpolation
            scrollX += (scrollFactorX - scrollX) * 0.1;
            scrollY += (scrollFactorY - scrollY) * 0.1;
            
            hero.style.setProperty('--scroll-x', scrollX + 'px');
            hero.style.setProperty('--scroll-y', scrollY + 'px');
            
            requestAnimationFrame(updateScrollEffect);
        }
        
        updateScrollEffect();
        
        // Reset on mouse leave
        hero.addEventListener('mouseleave', () => {
            hero.style.setProperty('--grid-thickness', '0.5');
            hero.style.setProperty('--grid-opacity', '0.3');
            if (isJune) {
                hero.style.setProperty('--rainbow-grid', 'linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)');
            }
            mouseX = 50;
            mouseY = 50;
        });

        // Add loading animation
        window.addEventListener('load', () => {
            document.body.style.opacity = '1';
        });

        // Initial page load animation
        document.body.style.opacity = '0';
        document.body.style.transition = 'opacity 0.3s ease';

        // Collapsible sections functionality
        function toggleSection(sectionId) {
            const content = document.getElementById(sectionId + '-content');
            const icon = document.getElementById(sectionId + '-icon');
            
            if (content.classList.contains('collapsed')) {
                content.classList.remove('collapsed');
                icon.classList.add('rotated');
            } else {
                content.classList.add('collapsed');
                icon.classList.remove('rotated');
            }
        }
    </script>
</body>
</html>