<!DOCTYPE html>
<html lang="en">
<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qcorgi Whitepaper</title>
    <style>

@keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        body {
            margin: 0;
            background: linear-gradient(-45deg, #87CEEB, #1E90FF, #4169E1, #000080);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            color: white;
            font-family: 'Verdana', sans-serif;
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        .whitepaper {
            background: rgba(0, 0, 0, 0.6);
            border-radius: 15px;
            padding: 30px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.6s ease-out;
        }

        .whitepaper.visible {
            opacity: 1;
            transform: translateY(0);
        }
        h1 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }
        h1::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: -10px;
            left: 0;
            background: linear-gradient(90deg, transparent, #FFD700, transparent);
        }

        h2 {
            color: #FFD700;
            margin-top: 30px;
            font-size: 1.5em;
            opacity: 0;
            transform: translateX(-20px);
            transition: all 0.4s ease-out;
        }

        h2.visible {
            opacity: 1;
            transform: translateX(0);
        }
        .section {
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }

        .section:hover {
            transform: scale(1.01);
        }

        ul {
            list-style-type: none;
            padding-left: 20px;
        }

        li {
            margin: 10px 0;
            position: relative;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.4s ease-out;
        }

        li.visible {
            opacity: 1;
            transform: translateX(0);
        }

        li:before {
            content: "•";
            color: #FFD700;
            font-weight: bold;
            position: absolute;
            left: -20px;
        }

        .phase {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            margin: 10px 0;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .phase:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(10px);
        }
   
.top-nav {
 position: fixed;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 1000;
 background: rgba(0, 0, 0, 0.5);
 border-radius: 30px;
 backdrop-filter: blur(5px);
 text-align: center;
 min-width: 300px;
}
.top-nav ul {
 display: flex;
 list-style: none;
 margin: 0;
 padding: 0;
 gap: 20px;
 justify-content: center;
 align-items: center;
}

.top-nav li:not(:last-child)::after {
 content: "|";
 color: white;
 margin-left: 20px;
 opacity: 0.7;
}
.top-nav a {
 color: white;
 text-decoration: none;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: 0.9rem;
 opacity: 0.7;
 transition: opacity 0.3s;
 display: inline-block;
}


.top-nav a:hover {
 opacity: 1;
}

.top-nav a.active {
 opacity: 1;
 position: relative;
}

.top-nav a.active::after {
 content: "";
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 100%;
 height: 2px;
 background: white;
}

        .background-hills {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: url('components/Hill-08.PNG') bottom/cover no-repeat;
            opacity: 0.2;
            z-index: -1;
            pointer-events: none;
            animation: float 6s ease-in-out infinite;
        }

        .floating-corgi {
            position: fixed;
            right: 30px;
            bottom: 30px;
            width: 100px;
            height: 100px;
            background: url('QCorgi02.PNG') center/contain no-repeat;
            animation: float 4s ease-in-out infinite;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .floating-corgi:hover {
            transform: scale(1.1) rotate(10deg);
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px 10px;
            }
            
            .whitepaper {
                padding: 20px;
            }

            h1 {
                font-size: 2em;
            }

            .floating-corgi {
                width: 80px;
                height: 80px;
            }
        }

    </style>
</head>
<body>
    <div class="background-hills"></div>
    <div class="floating-corgi"></div>

    <nav class="top-nav">
        <ul>
            <li><a href="home">HOME</a></li>
            <li><a href="#whitepaper" class="active">WHITEPAPER</a></li>
        </ul>
    </nav>
    
    <div class="container">
        <div class="whitepaper">
            <h1>Whitepaper: Qcorgi</h1>
            
            <div class="section">
                <h2>1. Introduction</h2>
                <p>Qcorgi is a meme token that combines the charm of corgis with the power of blockchain to create a fun and engaging community. This project is not just a meme token but also a symbol of loyalty, transparency, and participation in the crypto world.</p>
            </div>
            
            <div class="section">
                <h2>2. Vision & Mission</h2>
                <ul>
                    <li><strong>Vision:</strong> To create a meme token that brings value to the community and supports animal welfare.</li>
                    <li><strong>Mission:</strong> To launch a platform where users can collect, trade, and enjoy NFTs while using Qcorgi to promote charitable contributions for animals.</li>
                </ul>
            </div>
            
            <div class="section">
                <h2>3. Key Features</h2>
                <ul>
                    <li><strong>Meme Token:</strong> Qcorgi is designed to inspire and capture the attention of the community with its adorable and viral content.</li>
                    <li><strong>Qcorgi NFT:</strong> Holders can collect corgi-themed NFTs designed in royal and other creative styles to enhance the fun.</li>
                    <li><strong>Charity:</strong> All donations will come from Qcorgi tokens purchased by the development team during the initial Fair Launch phase only.</li>
                </ul>
            </div>
            
            <div class="section">
                <h2>4. Tokenomics</h2>
                <ul>
                    <li><strong>Token Name:</strong> Qcorgi</li>
                    <li><strong>Ticker:</strong> QCORGI</li>
                    <li><strong>Total Supply:</strong> 1,000,000,000 QCORGI</li>
                    <li><strong>Token Distribution (Fair Launch):</strong> 100% will be distributed through a Fair Launch on Pump.fun.</li>
                </ul>
            </div>
            
            <div class="section">
                <h2>5. Roadmap</h2>
                <div class="phase">
                    <strong>Phase 1: Initiation</strong>
                    <ul>
                        <li>Build a community on social media platforms like Telegram and Twitter.</li>
                        <li>Launch the official website and publish the Whitepaper.</li>
                    </ul>
                </div>
                <div class="phase">
                    <strong>Phase 2: Token and NFT Launch</strong>
                    <ul>
                        <li>Launch the QCORGI token on Pump.fun.</li>
                    </ul>
                </div>
                <div class="phase">
                    <strong>Phase 3: Expansion</strong>
                    <ul>
                        <li>Release the first NFT collection.</li>
                        <li>Expand Qcorgi's utility into the Metaverse.</li>
                    </ul>
                </div>
                <div class="phase">
                    <strong>Phase 4: Sustainability</strong>
                    <ul>
                        <li>Support animal welfare charities.</li>
                        <li>Develop a DAO mechanism for community governance.</li>
                    </ul>
                </div>
            </div>
            
            <div class="section">
                <h2>6. Conclusion</h2>
                <p>Qcorgi is more than just a meme token; it serves as a bridge between fun and meaningful social engagement. With a transparent, sustainable design and a focus on animal welfare, Qcorgi aims to become a project that delivers both enjoyment and social value in the long term.</p>
            </div>
        </div>
    </div>

    <script>
        gsap.registerPlugin(ScrollTrigger);

        // Initial animation
        gsap.to('.whitepaper', {
            opacity: 1,
            y: 0,
            duration: 1,
            scrollTrigger: {
                trigger: '.whitepaper',
                start: 'top 80%',
            }
        });

        // Animate sections on scroll
        document.querySelectorAll('h2').forEach((heading, index) => {
            gsap.to(heading, {
                opacity: 1,
                x: 0,
                duration: 0.6,
                scrollTrigger: {
                    trigger: heading,
                    start: 'top 80%',
                }
            });
        });

        document.querySelectorAll('li').forEach((item, index) => {
            gsap.to(item, {
                opacity: 1,
                x: 0,
                duration: 0.6,
                delay: index * 0.1,
                scrollTrigger: {
                    trigger: item,
                    start: 'top 90%',
                }
            });
        });

        // Floating corgi click animation
        document.querySelector('.floating-corgi').addEventListener('click', function() {
            gsap.to(this, {
                rotation: 360,
                duration: 1,
                ease: "power2.out"
            });
        });
    </script>

</body>
</html>
