<?php
/**
 * The template for displaying 404 pages (Not Found)
 * Theme: NENGHUI Energy - Borderless Digital Space & 3D Typography
 */
// 强制修改标题
add_filter('pre_get_document_title', function() { return '404'; }, 9999);
add_filter('wp_title', function() { return '404'; }, 9999);

get_header(); ?>

<style>
    :root {
        --nh-primary: #13eca4;
        --nh-dark: #121010;
        --nh-bg-light: #f8fcfa;
    }

    /* 确保主背景通透大气 */
    .nh-404-canvas {
        min-height: 100vh;
        background: #f8fcfa; /* 使用你定义的背景底色 */
        background: linear-gradient(135deg, #f8fcfa 0%, #f0f7f5 50%, #dcfce7 60%);
        font-family: 'Inter', sans-serif;
        color: var(--nh-dark);
        position: relative;
        overflow: hidden;
    }

    .font-display { font-family: 'Space Grotesk', sans-serif; }

    /* * 核心视觉：3D 立体悬浮数字 404
     * 利用多层 text-shadow 营造绿色霓虹的厚度感
     */
    .text-3d-glow {
        color: white; /* 亮色前景 */
        /* 1层：核心亮绿霓虹 */
        text-shadow: 0 1px 0 #b3f3db,
                     0 2px 0 #83f0ca,
                     0 3px 0 #54eeb8,
                     0 4px 0 #13eca4, /* 主色层 */
                     /* 2层：向下的柔和深色投影 */
                     0 6px 1px rgba(0,0,0,0.1),
                     0 0 5px rgba(0,0,0,0.1),
                     /* 3层：绿色氛围发光 (Neon Glow) */
                     0 1px 15px rgba(19, 236, 164, 0.4),
                     0 3px 25px rgba(19, 236, 164, 0.2);
    }

    /* 微动效 */
    @keyframes float-soft {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .floating-text {
        animation: float-soft 5s ease-in-out infinite;
    }

</style>

<main class="nh-404-canvas relative flex items-center justify-center p-8 overflow-hidden">
    
    <div class="fixed inset-0 pointer-events-none z-0">
        <div class="absolute -top-[10%] -left-[10%] w-[50%] h-[50%] bg-primary/5 rounded-full blur-[150px] animate-blob-spin"></div>
        <div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-teal-200/20 rounded-full blur-[120px]"></div>
    </div>

    <div class="relative z-10 w-full max-w-4xl text-center" data-aos="fade-up" data-aos-duration="1200">
        
        <div class="flex flex-col items-center mb-24">
            <h1 class="text-3d-glow font-display text-[150px] md:text-[200px] font-black tracking-tighter leading-none floating-text">
                404
            </h1>
        </div>

        <div class="space-y-6 mb-24 flex flex-col items-center">
            
            

            <h2 class="font-display text-3xl  text-background-dark tracking-tight leading-tight max-w-lg">
                Oops! That page can't be found.
            </h2>
            <p>You might have typed in the wrong address or the page has moved.</p>
        </div>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-8 mt-12 w-full sm:w-auto">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" 
               class="w-full sm:w-auto px-16 h-16 bg-primary text-background-dark font-bold rounded-full flex items-center justify-center shadow-lg shadow-primary/20 hover:shadow-primary/40 hover:scale-105 transition-all duration-300 text-xs uppercase tracking-[0.2em]">
               Go Homepage
            </a>
            
            <a href="<?php echo esc_url( home_url( '/contact-us/' ) ); ?>" 
               class="w-full sm:w-auto px-16 h-16 bg-white/60 backdrop-blur-md border border-primary/10 text-background-dark font-bold rounded-full flex items-center justify-center hover:bg-white transition-all duration-300 text-xs uppercase tracking-[0.2em]">
                Contact Us
            </a>
        </div>

       

    </div>
</main>
<script>
    // 最终保险：JS 强制修改标题
    document.title = "Shanghai Nenghui Energy: Innovative ESS Solutions";
</script>
<?php get_footer(); ?>