<?php
// includes/header.php
require_once __DIR__ . '/config.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= APP_NAME ?> - Official National Technical Fest Platform</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&family=Black+Ops+One&family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Oxanium:wght@800&family=Share+Tech+Mono&display=swap" rel="stylesheet">

    <!-- Compiled Tailwind CSS -->
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/style.css">

    

    <!-- Font Definitions & Chrome 3D Title Effect -->
    <style>
    @font-face {
        font-family: 'Hardsign';
        src: url('<?= APP_URL ?>/assets/fonts/HardsignLayered-eZ1MB.ttf') format('truetype'),
             url('<?= APP_URL ?>/assets/fonts/Hardsign.ttf') format('truetype');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'ITC Machine Bold';
        src: url('<?= APP_URL ?>/assets/fonts/ITC%20Machine%20Bold.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Emberclaws';
        src: url('<?= APP_URL ?>/assets/fonts/Emberclaws.ttf') format('truetype');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }
    .supernova-chrome-title {
        font-family: 'Hardsign', 'ITC Machine Bold', 'Emberclaws', 'Black Ops One', 'Bebas Neue', sans-serif;
        font-size: clamp(3rem, 11.5vw, 10.5rem);
        font-weight: 900;
        -webkit-text-stroke: 1.2px #d8d8d8;
        letter-spacing: 0.05em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;

        /* Solid chrome silver base — no background-clip so closed glyphs like 0 render correctly */
        color: #d8d8d8;

        /* Layered text-shadows: top bright bevel + stacked downward extrusion + deep drop shadow */
        text-shadow:
            /* top edge bright highlight */
            0 -1px 0 #ffffff,
            /* face sheen */
            0  1px 0 #ffffff,
            /* 3D extrusion — step down with darkening greys */
            0  2px 0 #c8c8c8,
            0  3px 0 #b0b0b0,
            0  4px 0 #989898,
            0  5px 0 #808080,
            0  6px 0 #686868,
            0  7px 0 #505050,
            0  8px 0 #3c3c3c,
            0  9px 0 #282828,
            0 10px 0 #181818,
            0 11px 0 #0e0e0e,
            /* deep drop shadow for dramatic lift */
            0 18px 35px rgba(0,0,0,0.95),
            0  8px 12px rgba(0,0,0,0.7),
            /* subtle cool ambient glow */
            0  0px 60px rgba(180,200,255,0.07);

        padding-bottom: 0.06em;
        position: relative;
        display: block;
    }
    .supernova-spark-outline {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.4em;
        color: transparent;
        -webkit-text-stroke: 1.5px #d8d8d8;
        text-shadow: 0 0 15px rgba(255,255,255,0.1);
        display: block;
    }
    </style>

    <!-- Soft Navigation Transition Overlay -->
    <style>
    #page-transition-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    #page-transition-overlay.visible {
        opacity: 1;
        pointer-events: all;
    }
    #page-content {
        opacity: 1;
        transition: opacity 0.22s ease;
    }
    #page-content.fading {
        opacity: 0;
    }
    </style>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Three.js Import Map -->
    <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"
      }
    }
    </script>
</head>
<body class="bg-transparent text-slate-200 antialiased selection:bg-cyan-500/30 selection:text-cyan-200 min-h-screen flex flex-col font-sans">

<!-- Page transition overlay (kept outside #page-content so it persists) -->
<div id="page-transition-overlay"></div>

