<!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="#5dade2">
    <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 {
            /* Frutiger Aero Color Palette */
            --sky: #87CEEB;
            --ocean: #4682B4;
            --mint: #98FB98;
            --lime: #32CD32;
            --cloud: #F0F8FF;
            --mist: #E6F3FF;
            --glass: rgba(255, 255, 255, 0.25);
            --glass-border: rgba(255, 255, 255, 0.18);
            --glass-dark: rgba(0, 0, 0, 0.25);
            --glass-border-dark: rgba(255, 255, 255, 0.1);
            
            /* Main Colors */
            --primary-color: #5dade2;
            --secondary-color: #85c1e9;
            --accent-color: #7dcea0;
            --text-primary: #ecf0f1;
            --text-secondary: #bdc3c7;
            --text-light: #95a5a6;
            --bg-primary: #1a252f;
            --bg-secondary: #2c3e50;
            --bg-tertiary: rgba(93, 173, 226, 0.1);
            --border-color: rgba(93, 173, 226, 0.2);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
            --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
            
            /* Gradient Toggle */
            --gradients-enabled: 1;
        }

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

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            scroll-behavior: smooth;
            transition: all 0.3s ease;
            position: relative;
            min-height: 100vh;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(125, 206, 160, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(93, 173, 226, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(133, 193, 233, 0.1) 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(125, 206, 160, 0.1) 2px, transparent 2px),
                radial-gradient(circle at 75% 75%, rgba(93, 173, 226, 0.1) 1px, transparent 1px);
            background-size: 60px 60px, 40px 40px;
            animation: float 30s ease-in-out infinite;
            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: rgba(17, 24, 39, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-sm);
        }

        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(93, 173, 226, 0.1) 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(93, 173, 226, 0.15) 0%, transparent 70%);
            animation: heroFloat 25s ease-in-out infinite;
            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(93, 173, 226, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(93, 173, 226, 0.15) 1px, transparent 1px);
            background-size: 60px 60px;
            opacity: 0.4;
            transition: all 0.3s ease;
        }

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

        .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 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(93, 173, 226, 0.3));
            animation: textGlow 4s ease-in-out infinite;
        }

        @keyframes textGlow {
            0%, 100% { filter: drop-shadow(0 2px 4px rgba(93, 173, 226, 0.3)); }
            50% { filter: drop-shadow(0 4px 8px rgba(125, 206, 160, 0.4)); }
        }

        .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); }
        }

        .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-md);
            backdrop-filter: blur(10px);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

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

        .btn-secondary:hover {
            background: rgba(125, 206, 160, 0.2);
            border-color: var(--accent-color);
            transform: translateY(-2px);
        }

        /* 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;
            animation: sectionGlow 5s ease-in-out infinite;
        }

        @keyframes sectionGlow {
            0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); }
            50% { opacity: 1; transform: translateX(-50%) scaleX(1.1); }
        }

        .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(93, 173, 226, 0.05) 0%, 
                rgba(125, 206, 160, 0.05) 50%, 
                rgba(133, 193, 233, 0.05) 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(93, 173, 226, 0.1) 0%, 
                rgba(125, 206, 160, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            border-radius: 1.5rem;
        }

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

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
            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(93, 173, 226, 0.2);
            color: var(--primary-color);
            padding: 0.4rem 0.9rem;
            border-radius: 1.2rem;
            font-size: 0.8rem;
            font-weight: 600;
            border: 1px solid rgba(93, 173, 226, 0.3);
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 4px rgba(93, 173, 226, 0.1);
        }

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

        .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;
        }

        /* Contact Section */
        .contact {
            background: linear-gradient(135deg, 
                var(--bg-secondary) 0%, 
                rgba(93, 173, 226, 0.1) 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);
        }

        .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(93, 173, 226, 0.1), 
                rgba(125, 206, 160, 0.1));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .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(93, 173, 226, 0.2);
        }

        .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 ease;
            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);
                }
            }

        /* Frutiger Aero Gradient toggle section */
        .gradient-toggle-section {
            padding: 3rem 0;
            background: linear-gradient(135deg, 
                rgba(135, 206, 235, 0.1), 
                rgba(173, 216, 230, 0.15), 
                rgba(176, 224, 230, 0.1));
            border-top: 1px solid rgba(135, 206, 235, 0.3);
            backdrop-filter: blur(10px);
            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(135, 206, 235, 0.2) 0%, transparent 50%),
                        radial-gradient(circle at 70% 80%, rgba(173, 216, 230, 0.15) 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: #2c5aa0;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
        }

        .gradient-toggle input {
            display: none;
        }

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

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

        .gradient-toggle input:checked + .toggle-slider {
            background: linear-gradient(145deg, 
                rgba(135, 206, 235, 0.9), 
                rgba(100, 149, 237, 0.8));
            border-color: rgba(100, 149, 237, 0.6);
            box-shadow: 
                inset 0 2px 4px rgba(100, 149, 237, 0.3),
                0 4px 16px rgba(135, 206, 235, 0.5),
                0 2px 8px rgba(100, 149, 237, 0.4);
        }

        .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(100, 149, 237, 0.5),
                inset 0 1px 3px rgba(255, 255, 255, 1),
                0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .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: #1a1a2e !important;
        }

        body.gradients-disabled .project-card {
            background: #16213e !important;
            border: 1px solid #2a3f5f !important;
        }

        body.gradients-disabled .contact {
            background: #1a1a2e !important;
        }

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

        body.gradients-disabled .contact-method {
            background: #16213e !important;
        }

        body.gradients-disabled .gradient-toggle-section {
            background: rgba(22, 33, 62, 0.8) !important;
        }

        body.gradients-disabled .toggle-slider {
            background: #2a3f5f !important;
        }

        body.gradients-disabled .gradient-toggle input:checked + .toggle-slider {
            background: #4a90e2 !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;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color);
        }
    </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="#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, Creator & Tech Enthusiast. Building slop technology for Chromebooks.</p>
                    <div class="cta-buttons">
                        <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">
                <h2>Featured Projects</h2>
                <p>A collection of my latest work, from web applications to creative experiments.</p>
            </div>
            
            <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>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <div class="section-header">
                    <h2>Get In Touch</h2>
                    <p>Have a project in mind or want to collaborate? I'd love to 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').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';
            }
        });

        // 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();
            
            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';
    </script>
</body>
</html>