<?php
// Optionally include config if available
if (file_exists(__DIR__ . '/includes/config.php')) {
    require_once 'includes/config.php';
}
$siteUrl = defined('SITE_URL') ? SITE_URL : '/studytrack';
http_response_code(404);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>404 — Page Not Found | StudyTrack</title>
<meta name="robots" content="noindex, nofollow">
<link rel="icon" type="image/png" href="https://studytrack.edurx.icu/studytrack/images/studytrack.png">
<link rel="stylesheet" href="<?= $siteUrl ?>/assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  /* === 404 page — uses existing StudyTrack CSS variables === */
  .error-page {
    min-height: 100vh;
    background: var(--bg-primary, #0a0a0f);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 24px;
  }

  /* ambient glow blobs */
  .err-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
    opacity: 0.12;
    animation: blobDrift 14s ease-in-out infinite alternate;
  }
  .err-blob-1 { width: 560px; height: 560px; background: var(--accent, #6366f1); top: -180px; left: -140px; }
  .err-blob-2 { width: 480px; height: 480px; background: var(--accent-2, #a855f7); bottom: -160px; right: -100px; animation-delay: -5s; }
  .err-blob-3 { width: 260px; height: 260px; background: var(--danger, #ef4444); top: 38%; left: 52%; opacity: 0.08; animation-delay: -9s; }

  @keyframes blobDrift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(35px, 25px) scale(1.07); }
  }

  /* grid */
  .err-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
  }

  /* noise */
  .err-noise {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* top bar */
  .err-topbar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 40px;
  }
  .err-logo {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none;
    opacity: 0; animation: fadeUp 0.5s 0.1s forwards;
  }
  .err-logo img { height: 32px; object-fit: contain; }
  .err-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
  .err-logo-main {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px; letter-spacing: 2px;
    color: var(--text-primary, #f1f5f9);
  }
  .err-logo-sub {
    font-size: 9px; letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent, #6366f1);
  }
  .err-badge {
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--danger, #ef4444);
    border: 1px solid rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.06);
    padding: 5px 13px; border-radius: 4px;
    opacity: 0; animation: fadeUp 0.5s 0.2s forwards;
  }

  /* content */
  .err-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: 0;
  }

  /* big 404 */
  .err-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(140px, 24vw, 260px);
    line-height: 0.9;
    letter-spacing: -3px;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent, #6366f1) 50%, var(--accent-2, #a855f7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    user-select: none;
    opacity: 0; animation: smashIn 0.9s 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
  }

  /* glitch layers */
  .err-number::before,
  .err-number::after {
    content: '404';
    position: absolute; inset: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: inherit; letter-spacing: inherit; line-height: inherit;
  }
  .err-number::before {
    -webkit-text-fill-color: rgba(99,102,241,0.35);
    background: none;
    clip-path: polygon(0 18%, 100% 18%, 100% 38%, 0 38%);
    animation: glitch1 5s 1.8s infinite;
  }
  .err-number::after {
    -webkit-text-fill-color: rgba(239,68,68,0.3);
    background: none;
    clip-path: polygon(0 62%, 100% 62%, 100% 80%, 0 80%);
    animation: glitch2 5s 1.8s infinite;
  }

  @keyframes glitch1 {
    0%,88%,100% { transform: translate(0); opacity: 0; }
    90% { transform: translate(-7px, 2px); opacity: 1; }
    93% { transform: translate(5px, -2px); opacity: 1; }
    95% { transform: translate(0); opacity: 0; }
  }
  @keyframes glitch2 {
    0%,88%,100% { transform: translate(0); opacity: 0; }
    91% { transform: translate(8px, 1px); opacity: 1; }
    94% { transform: translate(-4px, -3px); opacity: 1; }
    96% { transform: translate(0); opacity: 0; }
  }

  /* divider */
  .err-divider {
    width: 72px; height: 2px;
    background: var(--gradient, linear-gradient(135deg, #6366f1, #a855f7));
    border-radius: 2px;
    margin: 20px 0 22px;
    opacity: 0; animation: fadeUp 0.5s 0.75s forwards;
  }

  .err-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(20px, 3.5vw, 32px);
    letter-spacing: 3px;
    color: var(--text-primary, #f1f5f9);
    opacity: 0; animation: fadeUp 0.5s 0.9s forwards;
  }

  .err-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-muted, #64748b);
    max-width: 380px;
    line-height: 1.75;
    margin-top: 12px;
    font-weight: 300;
    opacity: 0; animation: fadeUp 0.5s 1.05s forwards;
  }

  /* buttons */
  .err-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center;
    margin-top: 36px;
    opacity: 0; animation: fadeUp 0.5s 1.2s forwards;
  }

  .err-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 32px;
    background: var(--gradient, linear-gradient(135deg, #6366f1, #a855f7));
    border: none; border-radius: var(--radius, 12px);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none; cursor: pointer;
    position: relative; overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 28px rgba(99,102,241,0.28);
  }
  .err-btn-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.1);
    transform: translateX(-100%) skewX(-12deg);
    transition: transform 0.38s;
  }
  .err-btn-primary:hover::before { transform: translateX(115%) skewX(-12deg); }
  .err-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(99,102,241,0.45); }

  .err-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px;
    background: transparent;
    border: 1px solid var(--border, #2a2a3d);
    border-radius: var(--radius, 12px);
    color: var(--text-secondary, #94a3b8);
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
  }
  .err-btn-secondary:hover {
    border-color: var(--accent, #6366f1);
    color: var(--text-primary, #f1f5f9);
    transform: translateY(-2px);
  }

  .err-btn-primary svg,
  .err-btn-secondary svg { width: 15px; height: 15px; flex-shrink: 0; }

  /* footer note */
  .err-footer {
    position: absolute; bottom: 28px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    letter-spacing: 0.5px;
    opacity: 0; animation: fadeUp 0.5s 1.35s forwards;
  }

  /* keyframes */
  @keyframes smashIn {
    from { opacity: 0; transform: scale(1.25) translateY(-16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* scanlines */
  .err-scan {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(
      0deg, transparent, transparent 3px,
      rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px
    );
  }

  @media (max-width: 600px) {
    .err-topbar { padding: 18px 20px; }
  }
</style>
</head>
<body>

<div class="error-page">

  <!-- Atmosphere -->
  <div class="err-blob err-blob-1"></div>
  <div class="err-blob err-blob-2"></div>
  <div class="err-blob err-blob-3"></div>
  <div class="err-grid"></div>
  <div class="err-noise"></div>
  <div class="err-scan"></div>

  <!-- Top bar -->
  <div class="err-topbar">
    <a href="<?= $siteUrl ?>" class="err-logo">
      <img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png"
           alt="StudyTrack"
           onerror="this.style.display='none'">
      <div class="err-logo-text">
        <span class="err-logo-main">StudyTrack</span>
        <span class="err-logo-sub">by EDURX</span>
      </div>
    </a>
    <span class="err-badge">Error 404</span>
  </div>

  <!-- Main content -->
  <div class="err-content">

    <div class="err-number">404</div>

    <div class="err-divider"></div>

    <h1 class="err-title">Page Not Found</h1>

    <p class="err-desc">
      Looks like this page went off-track.<br>
      The path you followed doesn't exist — but your study journey does.
    </p>

    <div class="err-actions">
      <a href="<?= $siteUrl ?>" class="err-btn-primary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
          <polyline points="9 22 9 12 15 12 15 22"/>
        </svg>
        Go to Home
      </a>
      <a href="javascript:history.back()" class="err-btn-secondary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 12H5M12 5l-7 7 7 7"/>
        </svg>
        Go Back
      </a>
    </div>
  </div>

  <p class="err-footer">StudyTrack &mdash; by EDURX &nbsp;·&nbsp; The page you requested could not be found.</p>

</div>

</body>
</html>