<?php
/**
 * Nesvra Ecosystem — Custom 404 Error Page (Minimalist Edition)
 */
http_response_code(404);
$pagetitle = "404 — Page Not Found | Nesvra";
?>
<!DOCTYPE html>
<html lang="en">

<?php include 'components/head.php'; ?>

<body class="bg-[#FAFAFB] text-[#4A5060] min-h-screen flex flex-col justify-between selection:bg-brandOrange selection:text-white">

  

    <!-- 404 MINIMALIST CONTENT -->
    <main class="relative z-20 flex-1 flex items-center justify-center px-6 py-20 md:py-28">
        <div class="relative z-10 max-w-md mx-auto text-center flex flex-col items-center">
            
            <!-- Ghost Illustration (Animated SVG) -->
            <div class="relative mb-6 select-none">
                <svg class="w-48 h-48 sm:w-56 sm:h-56 mx-auto overflow-visible" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
                            <feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#64748B" flood-opacity="0.08" />
                        </filter>
                    </defs>

                    <style>
                        .ghost-body-float {
                            animation: ghostFloat 3.6s ease-in-out infinite;
                            transform-origin: center;
                        }
                        .sparkle-twinkle {
                            animation: sparklePulse 2.4s ease-in-out infinite alternate;
                        }
                        .sparkle-twinkle-delay {
                            animation: sparklePulse 2.8s ease-in-out infinite alternate 1.2s;
                        }
                        .dust-swirl {
                            animation: dustFloat 3.6s ease-in-out infinite;
                        }
                        @keyframes ghostFloat {
                            0%, 100% { transform: translateY(0px); }
                            50% { transform: translateY(-9px); }
                        }
                        @keyframes dustFloat {
                            0%, 100% { transform: translateY(0px) scale(1); opacity: 0.9; }
                            50% { transform: translateY(-4px) scale(1.03); opacity: 0.7; }
                        }
                        @keyframes sparklePulse {
                            0% { transform: scale(0.85); opacity: 0.5; }
                            100% { transform: scale(1.15); opacity: 1; }
                        }
                    </style>

                    <!-- Base Ground Shadow -->
                    <ellipse cx="100" cy="180" rx="34" ry="5" fill="#E2E8F0" opacity="0.6" />

                    <!-- Swirling / Dust Particles Underneath -->
                    <g class="dust-swirl">
                        <!-- Upper Swirl Arc -->
                        <path d="M 75 142 C 90 136, 120 136, 130 144 C 138 150, 126 157, 100 156 C 72 155, 66 163, 76 168 C 88 174, 122 173, 132 166" 
                              stroke="#94A3B8" stroke-width="1.75" stroke-dasharray="3.5 3.5" stroke-linecap="round" fill="none" opacity="0.75" />

                        <!-- Small Little Sparkles and Dots Underneath -->
                        <!-- Center-right 4-point star -->
                        <g class="sparkle-twinkle" transform="translate(112, 155)">
                            <path d="M0 -6 Q0 0 6 0 Q0 0 0 6 Q0 0 -6 0 Q0 0 0 -6 Z" fill="#64748B" opacity="0.8" />
                        </g>

                        <!-- Little x mark -->
                        <path d="M 115 137 L 121 143 M 121 137 L 115 143" stroke="#64748B" stroke-width="1.75" stroke-linecap="round" opacity="0.7" />

                        <!-- Small circular beads -->
                        <circle cx="88" cy="151" r="3" stroke="#64748B" stroke-width="1.5" fill="#FAFAFB" />
                        <circle cx="78" cy="139" r="1.5" fill="#94A3B8" />
                        <circle cx="128" cy="148" r="1.5" fill="#94A3B8" />
                        <circle cx="103" cy="164" r="1.2" fill="#94A3B8" />
                    </g>

                    <!-- Ghost Body -->
                    <g class="ghost-body-float" filter="url(#soft-shadow)">
                        <!-- Outer Ghost Outline & Fill -->
                        <path d="M 62 76 
                                 C 62 38, 138 38, 138 76 
                                 L 138 122 
                                 L 130 114 
                                 L 122 122 
                                 L 114 114 
                                 L 106 122 
                                 L 98 114 
                                 L 90 122 
                                 L 82 114 
                                 L 74 122 
                                 L 66 114 
                                 L 62 118 
                                 Z" 
                              fill="#FFFFFF" 
                              stroke="#64748B" 
                              stroke-width="3" 
                              stroke-linejoin="round" 
                              stroke-linecap="round" />

                        <!-- Left Eye -->
                        <circle cx="85" cy="74" r="2.5" fill="#525B6C" />

                        <!-- Right Eye -->
                        <circle cx="115" cy="74" r="2.5" fill="#525B6C" />

                        <!-- Mouth (Minimal Straight Line) -->
                        <line x1="95" y1="92" x2="105" y2="92" stroke="#525B6C" stroke-width="2.5" stroke-linecap="round" />
                    </g>
                </svg>
            </div>

            <!-- Heading -->
            <h1 class="text-4xl sm:text-5xl font-medium text-soft tracking-tight mb-2">
                Whoops!
            </h1>

            <!-- Subtitle -->
            <p class="text-base sm:text-xl text-soft font-normal leading-relaxed mb-8 max-w-sm">
                We couldn't find the page you were looking for.
            </p>

            <!-- Clean Action Button -->
            <a href="index.php" class="inline-flex items-center justify-center px-7 py-3 rounded-full bg-brandOrange text-white text-sm font-medium hover:bg-soft hover:shadow-md transition-all duration-200">
                Back to Home
            </a>

        </div>
    </main>

    <?php include 'components/footer.php'; ?>

</body>
</html>
