/* ═══════════════════════════════════════════════════════════════════
   OLED & HDR Progressive Enhancement
   ───────────────────────────────────────────────────────────────────
   These rules activate when body has the class "oled-mode".
   Auto-detection via JS adds the class on HDR/P3 displays;
   users can also toggle it manually from the navbar.
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. TRUE BLACK BACKGROUNDS (OLED pixel-off) ──────────────────
   On OLED, #000000 turns pixels completely off → infinite contrast,
   deeper blacks, and measurable battery savings on mobile.
   ─────────────────────────────────────────────────────────────────── */

body.oled-mode {
  background-color: #000000;
}

/* Hero + CTA sections: bg-[#060606] */
body.oled-mode .bg-\[\#060606\] {
  background-color: #000000 !important;
}

/* Proprietary Stack + Process sections: bg-[#0a0a0a] */
body.oled-mode .bg-\[\#0a0a0a\] {
  background-color: #000000 !important;
}

/* Card/terminal surfaces stay slightly lifted for depth */
body.oled-mode .bg-\[\#0c0c0c\] {
  background-color: #050505 !important;
}

/* Scrollbar track */
body.oled-mode ::-webkit-scrollbar-track {
  background: #000000;
}

/* Navbar background when scrolled */
body.oled-mode nav[data-name="navbar"] {
  --oled-nav-bg: rgba(0, 0, 0, 0.95);
}


/* ── 2. P3 WIDE-GAMUT ACCENT COLOURS ─────────────────────────────
   Only applied inside a @supports + gamut check to guarantee
   the browser can actually render P3.
   ─────────────────────────────────────────────────────────────────── */

@supports (color: color(display-p3 1 1 1)) {
  body.oled-mode .text-emerald-400 {
    color: color(display-p3 0.12 0.78 0.55) !important;
  }

  body.oled-mode .text-emerald-500 {
    color: color(display-p3 0.08 0.68 0.45) !important;
  }

  body.oled-mode .text-cyan-400 {
    color: color(display-p3 0.15 0.82 0.88) !important;
  }

  body.oled-mode .bg-emerald-500 {
    background-color: color(display-p3 0.08 0.68 0.45) !important;
  }

  body.oled-mode .bg-emerald-400 {
    background-color: color(display-p3 0.12 0.78 0.55) !important;
  }

  body.oled-mode ::-webkit-scrollbar-thumb {
    background: color(display-p3 0.08 0.68 0.45);
  }

  body.oled-mode ::-webkit-scrollbar-thumb:hover {
    background: color(display-p3 0.05 0.56 0.38);
  }

  /* Text gradient — vivid P3 emerald-to-cyan sweep */
  body.oled-mode .text-gradient,
  body.oled-mode .bg-gradient-to-r.from-emerald-400 {
    background-image: linear-gradient(135deg,
        color(display-p3 0.12 0.78 0.55) 0%,
        color(display-p3 0.15 0.82 0.88) 50%,
        color(display-p3 0.25 0.55 0.95) 100%);
  }

  /* Primary button gradient */
  body.oled-mode .btn-primary {
    background: linear-gradient(135deg,
        color(display-p3 0.12 0.78 0.55) 0%,
        color(display-p3 0.05 0.56 0.38) 100%);
  }
}


/* ── 3. ENHANCED GLOW & SHADOW ───────────────────────────────────
   Brighter bloom effects that pop on high-contrast OLED screens.
   ─────────────────────────────────────────────────────────────────── */

body.oled-mode .card-3d:hover {
  box-shadow:
    0 8px 40px rgba(16, 185, 129, 0.35),
    0 0 80px rgba(16, 185, 129, 0.08);
}

body.oled-mode .btn-primary:hover {
  box-shadow:
    0 6px 35px rgba(16, 185, 129, 0.5),
    0 0 60px rgba(16, 185, 129, 0.12);
}

body.oled-mode .from-emerald-500\/\[0\.06\] {
  --tw-gradient-from: rgba(16, 185, 129, 0.09) !important;
}

body.oled-mode .from-blue-500\/\[0\.04\] {
  --tw-gradient-from: rgba(59, 130, 246, 0.07) !important;
}

body.oled-mode .glow::after {
  filter: blur(20px);
  opacity: 0.4;
}

body.oled-mode .glow:hover::after {
  opacity: 0.65;
  filter: blur(28px);
}

/* Status indicator pulse — crisper on OLED */
body.oled-mode .animate-pulse {
  animation: oled-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes oled-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}


/* ── 4. LUMINANCE SHIMMER (P3 only) ──────────────────────────────
   Subtle brightness breathing on the hero gradient text.
   ─────────────────────────────────────────────────────────────────── */

@supports (color: color(display-p3 1 1 1)) {
  body.oled-mode .bg-gradient-to-r.from-emerald-400.via-cyan-400.to-blue-400 {
    animation: hdr-shimmer 6s ease-in-out infinite;
  }

  @keyframes hdr-shimmer {

    0%,
    100% {
      filter: brightness(1);
    }

    50% {
      filter: brightness(1.15);
    }
  }

  body.oled-mode .animate-pulse.text-emerald-400 {
    text-shadow:
      0 0 8px color(display-p3 0.12 0.78 0.55 / 0.6),
      0 0 20px color(display-p3 0.12 0.78 0.55 / 0.2);
  }

  body.oled-mode .border-emerald-500\/20 {
    border-color: color(display-p3 0.12 0.78 0.55 / 0.25) !important;
  }

  body.oled-mode .border-emerald-500\/30 {
    border-color: color(display-p3 0.12 0.78 0.55 / 0.35) !important;
  }

  body.oled-mode .bg-emerald-500.h-1 {
    background-color: color(display-p3 0.08 0.68 0.45) !important;
  }

  body.oled-mode .bg-cyan-500.h-1 {
    background-color: color(display-p3 0.15 0.82 0.88) !important;
  }

  body.oled-mode .bg-blue-500.h-1 {
    background-color: color(display-p3 0.25 0.55 0.95) !important;
  }

  body.oled-mode .bg-purple-500.h-1 {
    background-color: color(display-p3 0.55 0.35 0.85) !important;
  }
}


/* ── 5. OLED TOGGLE STYLES ───────────────────────────────────────
   Compact pill toggle for the navbar.
   ─────────────────────────────────────────────────────────────────── */

.oled-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
  user-select: none;
  font-size: 11px;
  font-family: 'Inter', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.03em;
}

.oled-toggle:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
}

.oled-toggle.active {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
  color: rgba(16, 185, 129, 0.8);
}

.oled-toggle.active:hover {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.1);
}

/* The dot indicator */
.oled-toggle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.oled-toggle.active .oled-toggle-dot {
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}