/* ============================================
   404.CSS
   Dark mode: default
   Light mode: html[data-theme="light"]
   Tokens from style.css:
     --color-primary   #ff6b00
     --color-primary-2 #ffaa00
     --color-white     #ffffff
     --color-white-25  rgba(255,255,255,0.25)
     --font-main       'Jost', sans-serif
     --font-mono       'Space Mono', monospace
     --radius-sm       6px
   ============================================ */

/* ── Page shell ─────────────────────────────── */
.e-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  background: #0a0a0a;
  isolation: isolate;
}

/* ── Background: grid ────────────────────────── */
.e-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 107, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 0, 0.04) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: e-grid-drift 24s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}

@keyframes e-grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 52px 52px; }
}

/* ── Background: radial glow ─────────────────── */
.e-bg-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.e-bg-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.13) 0%, transparent 68%);
  filter: blur(40px);
  animation: e-glow-pulse 5s ease-in-out infinite;
}

.e-bg-glow::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 170, 0, 0.07) 0%, transparent 70%);
  filter: blur(60px);
  animation: e-glow-pulse 7s ease-in-out infinite reverse;
}

@keyframes e-glow-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1);    }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
}

/* ── Background: scanlines ───────────────────── */
.e-bg-scanlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  opacity: 0.6;
}

/* ── Floating ambient icons ──────────────────── */
.e-float {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: #ff6b00;
  opacity: 0.08;
}

.e-float svg {
  display: block;
}

.e-float--1 {
  width: 56px; height: 56px;
  top: 13%; left: 8%;
  animation: e-float-y 7s ease-in-out infinite;
}

.e-float--2 {
  width: 44px; height: 44px;
  top: 68%; right: 10%;
  animation: e-float-y 9s ease-in-out infinite 2s;
}

.e-float--3 {
  width: 36px; height: 36px;
  bottom: 18%; left: 18%;
  animation: e-float-y 6s ease-in-out infinite 4s;
}

.e-float--4 {
  width: 28px; height: 28px;
  top: 22%; right: 22%;
  animation: e-float-y 8s ease-in-out infinite 1s;
}

@keyframes e-float-y {
  0%, 100% { transform: translateY(0)     rotate(0deg);   }
  50%       { transform: translateY(-18px) rotate(15deg);  }
}

/* ── Content wrapper ─────────────────────────── */
.e-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  width: 100%;
  animation: e-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes e-reveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Eyebrow ─────────────────────────────────── */
.e-eyebrow {
  display: flex; 
    justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1.25rem;
  animation: e-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.e-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6b00;
  box-shadow: 0 0 8px rgba(255, 107, 0, 0.7);
  animation: e-dot-blink 2s ease-in-out infinite;
}

@keyframes e-dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Glitch 404 number ───────────────────────── */
.e-code {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: clamp(7rem, 22vw, 14rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 1.25rem;
   margin-top: 0.5rem;  
  position: relative;
  display: inline-block;
  user-select: none;

  /* Orange gradient fill */
  background: linear-gradient(135deg, #ff6b00 0%, #ffaa00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  animation: e-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Glitch ghost layers */
.e-code::before,
.e-code::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}

.e-code::before {
  background: linear-gradient(135deg, #ff6b00, #ffaa00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.e-code::after {
  background: linear-gradient(135deg, #00d4ff, #0af5a0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glitch triggered by JS .is-glitching class */
.e-code.is-glitching::before {
  animation: e-glitch-a 0.32s steps(2) both;
}

.e-code.is-glitching::after {
  animation: e-glitch-b 0.32s steps(2) both;
}

@keyframes e-glitch-a {
  0%   { transform: translate(0);          opacity: 0;   clip-path: inset(40% 0 50% 0); }
  20%  { transform: translate(-4px, -2px); opacity: 0.9; clip-path: inset(10% 0 65% 0); }
  40%  { transform: translate(4px,  1px);  opacity: 0.8; clip-path: inset(55% 0 20% 0); }
  60%  { transform: translate(-2px, 3px);  opacity: 0.9; clip-path: inset(30% 0 40% 0); }
  80%  { transform: translate(3px, -1px);  opacity: 0.7; clip-path: inset(70% 0 5%  0); }
  100% { transform: translate(0);          opacity: 0;   clip-path: inset(40% 0 50% 0); }
}

@keyframes e-glitch-b {
  0%   { transform: translate(0);         opacity: 0;   clip-path: inset(55% 0 30% 0); }
  20%  { transform: translate(4px,  2px); opacity: 0.7; clip-path: inset(75% 0 8%  0); }
  40%  { transform: translate(-3px, 1px); opacity: 0.6; clip-path: inset(20% 0 60% 0); }
  60%  { transform: translate(2px, -2px); opacity: 0.8; clip-path: inset(45% 0 35% 0); }
  80%  { transform: translate(-4px, 3px); opacity: 0.6; clip-path: inset(10% 0 72% 0); }
  100% { transform: translate(0);         opacity: 0;   clip-path: inset(55% 0 30% 0); }
}

/* ── Title ───────────────────────────────────── */
.e-title {
  font-family: var(--font-main, 'Jost', sans-serif);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  animation: e-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.e-title__accent {
  color: #ff6b00;
}

/* ── Description ─────────────────────────────── */
.e-desc {
  font-family: var(--font-main, 'Jost', sans-serif);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  animation: e-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* ── Action buttons ──────────────────────────── */
.e-actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.75rem;
  animation: e-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.e-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 2rem;
  font-family: var(--font-main, 'Jost', sans-serif);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm, 6px);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease,
              border-color 0.28s ease, box-shadow 0.28s ease,
              transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.e-btn:active { transform: scale(0.97); }

/* Primary */
.e-btn--primary {
  background: #ff6b00;
  color: #ffffff;
  border-color: #ff6b00;
}

.e-btn--primary:hover {
  background: transparent;
  color: #ff6b00;
 
}

/* Secondary */
.e-btn--secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.18);
}

.e-btn--secondary:hover {
  border-color: #ff6b00;
  color: #ff6b00;
  background: rgba(255, 107, 0, 0.06);
}

.e-btn--secondary:hover svg:last-child {
  transform: translateX(4px);
}

.e-btn svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* ── Quick nav ───────────────────────────────── */
.e-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: e-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.e-nav__label {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  width: 100%;
  text-align: center;
}

.e-nav__links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.e-nav__link {
  font-family: var(--font-main, 'Jost', sans-serif);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
}

.e-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ff6b00;
  transition: width 0.28s ease;
}

.e-nav__link:hover {
  color: #ff6b00;
}

.e-nav__link:hover::after {
  width: 100%;
}

.e-nav__sep {
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 640px) {
  .e-page    { padding: 1.5rem; }
  .e-actions { flex-direction: column; width: 100%; }
  .e-btn     { width: 100%; justify-content: center; }

  .e-float--1 { width: 38px; height: 38px; }
  .e-float--2 { width: 30px; height: 30px; }
  .e-float--3 { width: 26px; height: 26px; }
  .e-float--4 { display: none; }
}

@media (max-width: 400px) {
  .e-nav__links { gap: 0.4rem; }
  .e-desc       { font-size: 0.9rem; }
}


/* ============================================================
   LIGHT MODE  —  html[data-theme="light"]
   Tokens from global lightmode.css:
     --lm-bg      #f5f5f5
     --lm-surface #ffffff
     --lm-alt     #f0f0f0
     --lm-border  rgba(0,0,0,0.09)
     --lm-hi      #111111
     --lm-body    rgba(17,17,17,0.70)
     --lm-muted   rgba(17,17,17,0.45)
     --lm-shadow  0 4px 16px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05)
   ============================================================ */

html[data-theme="light"] .e-page {
  background: #f5f5f5 !important;
}

/* Hide dark-only decorative layers */
html[data-theme="light"] .e-bg-grid,
html[data-theme="light"] .e-bg-glow,
html[data-theme="light"] .e-bg-scanlines {
  display: none !important;
}

/* Eyebrow — muted on light */
html[data-theme="light"] .e-eyebrow {
  color: rgba(17, 17, 17, 0.4) !important;
}

/* Dot stays orange — good */

/* 404 number — richer orange for legibility on #f5f5f5 */
html[data-theme="light"] .e-code {
  background: linear-gradient(135deg, #d45a00 0%, #e68a00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .e-code::before {
  background: linear-gradient(135deg, #d45a00, #e68a00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .e-code::after {
  background: linear-gradient(135deg, #0099cc, #00b89f) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Title */
html[data-theme="light"] .e-title {
  color: #111111 !important;
}

html[data-theme="light"] .e-title__accent {
  color: #ff6b00 !important;
}

/* Description */
html[data-theme="light"] .e-desc {
  color: rgba(17, 17, 17, 0.65) !important;
}

/* Primary button — stays same orange */
html[data-theme="light"] .e-btn--primary {
  background: #ff6b00 !important;
  color: #ffffff !important;
  border-color: #ff6b00 !important;
}

html[data-theme="light"] .e-btn--primary:hover {
  background: transparent !important;
  color: #ff6b00 !important;
 
}

/* Secondary button */
html[data-theme="light"] .e-btn--secondary {
  color: rgba(17, 17, 17, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  background: transparent !important;
}

html[data-theme="light"] .e-btn--secondary:hover {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
  background: rgba(255, 107, 0, 0.05) !important;
}

/* Quick nav */
html[data-theme="light"] .e-nav {
  border-top-color: rgba(0, 0, 0, 0.09) !important;
}

html[data-theme="light"] .e-nav__label {
  color: rgba(17, 17, 17, 0.35) !important;
}

html[data-theme="light"] .e-nav__link {
  color: rgba(17, 17, 17, 0.5) !important;
}

html[data-theme="light"] .e-nav__link:hover {
  color: #ff6b00 !important;
}

html[data-theme="light"] .e-nav__link::after {
  background: #ff6b00 !important;
}

html[data-theme="light"] .e-nav__sep {
  color: rgba(17, 17, 17, 0.18) !important;
}

/* Floating icons — very faint on light */
html[data-theme="light"] .e-float {
  opacity: 0.05 !important;
  color: #cc5500 !important;
}