/* ── Self-hosted fonts ──────────────────────────────────────────────────── */

@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/PressStart2P.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Modern micro-improvements ─────────────────────────────────────────── */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Thin, modern scrollbar on WebKit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--color-neutral-500), 0.5);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-400), 0.7);
}

/* ── Typography ─────────────────────────────────────────────────────────── */

/* Tighter, more confident headings */
h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* Slightly warmer body text contrast in dark mode */
.dark .prose {
  color: rgba(var(--color-neutral-200), 0.92);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

/* Lift + glow on card hover */
article.cursor-pointer,
.cursor-pointer[class*="backdrop"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
article.cursor-pointer:hover,
.cursor-pointer[class*="backdrop"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-400), 0.12);
}

/* ── Links ──────────────────────────────────────────────────────────────── */

/* Animated underline: grows from left on hover */
.prose a:not([class]) {
  text-decoration: none;
  background-image: linear-gradient(
    rgba(var(--color-primary-400), 0.9),
    rgba(var(--color-primary-400), 0.9)
  );
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease;
}
.prose a:not([class]):hover {
  background-size: 100% 1.5px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

/* Crisper blur on the fixed-fill-blur header */
#menu-blur {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(var(--color-neutral-50), 0.85) !important;
}
.dark #menu-blur {
  background: rgba(var(--color-neutral-900), 0.72) !important;
}

/* ── Hero / Background ──────────────────────────────────────────────────── */

/* Subtle gradient vignette over hero images */
.single_hero_background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(var(--color-neutral-200), 0.5) 100%
  );
  pointer-events: none;
}
.dark .single_hero_background::after {
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(var(--color-neutral-900), 0.6) 100%
  );
}

/* ── Focus rings ────────────────────────────────────────────────────────── */

/* Modern, rounded focus ring */
:focus-visible {
  outline: 2px solid rgba(var(--color-primary-400), 0.9);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Buttons / Tags ─────────────────────────────────────────────────────── */

/* Pill-shaped tags with subtle glow on hover */
a[href*="/tags/"],
a[href*="/categories/"] {
  border-radius: 9999px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
a[href*="/tags/"]:hover,
a[href*="/categories/"]:hover {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-400), 0.2);
}

/* ── Code blocks ────────────────────────────────────────────────────────── */

/* Rounded corners and a border on code blocks */
.dark .highlight {
  border: 1px solid rgba(var(--color-neutral-700), 1);
  border-radius: 8px;
  overflow: hidden;
}

/* ── Retro-terminal layer ───────────────────────────────────────────────── */

/* Monospace headings + neon glow in dark mode */
.dark .prose h1,
.dark .prose h2,
.dark .prose h3 {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  text-shadow:
    0 0 8px  rgba(var(--color-primary-400), 0.55),
    0 0 28px rgba(var(--color-primary-400), 0.2),
    0 0 2px  rgba(192, 132, 252, 0.35);
  letter-spacing: 0;
}

/* Scanline texture (dark mode only) */
.dark body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.04) 0px,
    rgba(0, 0, 0, 0.04) 1px,
    transparent 1px,
    transparent 4px
  );
}

/* Terminal window chrome on code blocks (traffic-light dots via radial gradients) */
.dark .highlight::before {
  content: "";
  display: block;
  height: 28px;
  background-color: rgba(var(--color-neutral-800), 1);
  background-image:
    radial-gradient(circle 5px at 16px 14px, #ff5f56 0%, #ff5f56 100%),
    radial-gradient(circle 5px at 32px 14px, #ffbd2e 0%, #ffbd2e 100%),
    radial-gradient(circle 5px at 48px 14px, #27c93f 0%, #27c93f 100%);
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(var(--color-neutral-700), 0.8);
}

/* Phosphor glow on hovered prose links in dark mode */
.dark .prose a:not([class]):hover {
  text-shadow: 0 0 8px rgba(var(--color-primary-400), 0.4);
}

/* Cyan glow on card hover in dark mode */
.dark article.cursor-pointer:hover,
.dark .cursor-pointer[class*="backdrop"]:hover {
  box-shadow: 0 12px 40px rgba(var(--color-primary-400), 0.18),
              0 0 0 1px rgba(var(--color-primary-400), 0.1);
}

/* Slide-in "> " prompt before nav items on hover (dark mode) */
.dark .main-menu a p::before {
  content: "> ";
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  color: rgba(var(--color-primary-400), 0.65);
  font-family: ui-monospace, monospace;
  font-weight: normal;
  transition: max-width 0.15s ease;
  vertical-align: bottom;
}
.dark .main-menu a:hover p::before {
  max-width: 1.5em;
}

/* Blinking block cursor keyframe (reusable) */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Pixel font — site title ────────────────────────────────────────────── */

/* Navbar site title — only the first nav (space-x-3) holds the site title link;
   the menu items live in the second nav (hidden md:flex) */
.main-menu .flex-1 nav:first-of-type a {
  font-family: 'Press Start 2P', ui-monospace, monospace !important;
  font-size: 0.6rem !important;
  transform: scaleY(1.4);
  display: inline-block;
  letter-spacing: 0 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Homepage hero h1 (font-extrabold is set only on the background layout h1) */
h1.font-extrabold {
  font-family: 'Press Start 2P', ui-monospace, monospace !important;
  letter-spacing: 0 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Scale down the homepage h1 — pixel fonts read best smaller */
h1.font-extrabold {
  font-size: clamp(1rem, 2.5vw, 1.6rem) !important;
  line-height: 1.8 !important;
}

/* Purple glow on hover — navbar */
.main-menu .flex-1 nav:first-of-type a:hover {
  color: #c084fc !important;
  text-shadow:
    0 0 6px rgba(192, 132, 252, 0.9),
    0 0 18px rgba(168, 85, 247, 0.6),
    0 0 40px rgba(139, 92, 246, 0.3);
}

/* Purple glow on hover — homepage h1 */
h1.font-extrabold:hover {
  color: #c084fc !important;
  text-shadow:
    0 0 8px rgba(192, 132, 252, 0.9),
    0 0 24px rgba(168, 85, 247, 0.6),
    0 0 50px rgba(139, 92, 246, 0.3);
  cursor: default;
}

/* ── Cyberpunk layer ─────────────────────────────────────────────────────── */

/* Text selection — neon cyan highlight */
.dark ::selection {
  background: rgba(34, 211, 238, 0.2);
  color: rgba(var(--color-neutral-50), 1);
}

/* Cyberpunk background: ambient glows + drifting grid (dark mode) */
@keyframes grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 48px 48px, 48px 48px; }
}

.dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 55vw 55vh at 88% 4%,  rgba(34, 211, 238, 0.07),  transparent),
    radial-gradient(ellipse 45vw 45vh at  8% 96%, rgba(192, 132, 252, 0.06), transparent),
    linear-gradient(rgba(34, 211, 238, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  animation: grid-drift 28s linear infinite;
}

/* Neon horizontal rule — cyan-to-magenta gradient */
.dark .prose hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 211, 238, 0.6) 20%,
    rgba(192, 132, 252, 0.6) 50%,
    rgba(34, 211, 238, 0.6) 80%,
    transparent
  );
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.25);
  margin: 2em 0;
}

/* Glitch keyframes for site title */
@keyframes neon-glitch {
  0%, 88%, 100% { text-shadow: inherit; }
  89% {
    text-shadow:
      -2px 0 rgba(255, 0, 128, 0.85),
       2px 0 rgba(34, 211, 238, 0.85);
  }
  91% {
    text-shadow:
       2px 0 rgba(255, 0, 128, 0.85),
      -2px 0 rgba(34, 211, 238, 0.85);
  }
  93% { text-shadow: inherit; }
  94% {
    text-shadow:
      -1px 0 rgba(255, 0, 128, 0.6),
       1px 0 rgba(34, 211, 238, 0.6);
  }
  96% { text-shadow: inherit; }
}

/* Apply glitch to pixel-font site title in dark mode */
.dark .main-menu .flex-1 nav:first-of-type a {
  animation: neon-glitch 9s infinite;
}

/* Neon card border glow — enhanced dual-color on hover */
.dark article.cursor-pointer:hover,
.dark .cursor-pointer[class*="backdrop"]:hover {
  box-shadow:
    0 12px 40px rgba(34, 211, 238, 0.22),
    0  0   0  1px rgba(34, 211, 238, 0.18),
    0  0  20px rgba(192, 132, 252, 0.08) inset;
}

/* Neon code-block border */
.dark .highlight {
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.07);
}

/* ── Fairydust rocket ───────────────────────────────────────────────────── */

.fairydust-wrapper {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  width: 40px;
  overflow: visible;
}

.fairydust-wrapper.go-right {
  left: -100px;
  animation: fairydust-fly-right var(--fly-duration, 5s) linear forwards;
}
.fairydust-wrapper.go-left {
  right: -100px;
  animation: fairydust-fly-left var(--fly-duration, 5s) linear forwards;
}

/* Comet trail */
.fairydust-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 6px;
  border-radius: 3px;
}
.fairydust-wrapper.go-right::after {
  right: 100%;
  background: linear-gradient(to right, transparent, rgba(232, 121, 249, 0.5));
}
.fairydust-wrapper.go-left::after {
  left: 100%;
  background: linear-gradient(to left, transparent, rgba(232, 121, 249, 0.5));
}

.fairydust-rocket {
  width: 40px;
  height: 80px;
  animation: fairydust-glow 0.85s ease-in-out infinite alternate;
}

@keyframes fairydust-glow {
  from {
    filter:
      drop-shadow(0 0 5px  rgba(232, 121, 249, 0.8))
      drop-shadow(0 0 14px rgba(232, 121, 249, 0.4));
  }
  to {
    filter:
      drop-shadow(0 0 10px rgba(232, 121, 249, 1))
      drop-shadow(0 0 26px rgba(168,  85, 247, 0.65));
  }
}

@keyframes fairydust-fly-right {
  from { left: -100px; }
  to   { left: calc(100vw + 100px); }
}
@keyframes fairydust-fly-left {
  from { right: -100px; }
  to   { right: calc(100vw + 100px); }
}