/* =========================================================
   Pixel + glass shared primitives
   .glass / .scanlines / .kbd / pixel focus ring
========================================================= */

/* =========================================================
   Datamosh text selection
========================================================= */
::selection {
  background: rgba(255, 0, 128, 0.85);
  color: #e9fffb;
  text-shadow: 1px 0 rgba(0, 225, 220, 0.9), -1px 0 rgba(255, 0, 128, 0.6);
}
::-moz-selection {
  background: rgba(255, 0, 128, 0.85);
  color: #e9fffb;
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 10px 40px var(--shadow-strong),
    inset 0 1px 0 var(--glass-highlight);
}

/* CRT scanlines — sits above the panel bg, below its content */
.scanlines { position: relative; }
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--scanline) 0,
    var(--scanline) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* =========================
   Pixel keycap
========================= */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0.35em 0.5em;

  font-family: var(--pixel-font);
  font-size: 9px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--text);

  background: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* =========================
   Blocky pixel focus ring
========================= */
.card:focus,
.card:focus-visible,
.nav-btn:focus-visible,
.theme-btn:focus-visible {
  outline: 2px solid var(--pixel-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   Glitch / corrupt hover for buttons
========================================================= */
.nav-btn,
.theme-btn,
.nav-link,
.help-close,
.md-copy-btn {
  position: relative;
}

/* scanline flash overlay (icon buttons only) */
.nav-btn,
.theme-btn,
.help-close {
  overflow: hidden;
}
.nav-btn::after,
.theme-btn::after,
.help-close::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    0deg, var(--scanline) 0 1px, transparent 1px 3px
  );
  transition: opacity 0.1s steps(2, end);
}

.nav-btn:hover,
.theme-btn:hover,
.nav-link:hover,
.help-close:hover,
.md-copy-btn:hover {
  animation: btnGlitch 0.26s steps(3, end) infinite;
}

.nav-btn:hover::after,
.theme-btn:hover::after,
.help-close:hover::after {
  opacity: 0.7;
}

@keyframes btnGlitch {
  0% {
    transform: translate(0, 0);
    filter: drop-shadow(1px 0 rgba(255, 0, 128, 0.8)) drop-shadow(-1px 0 rgba(0, 225, 220, 0.8));
    text-shadow: 1px 0 rgba(255, 0, 128, 0.7), -1px 0 rgba(0, 225, 220, 0.7);
  }
  33% {
    transform: translate(-1px, 1px);
    filter: drop-shadow(2px 0 rgba(255, 0, 128, 0.9)) drop-shadow(-2px 0 rgba(0, 225, 220, 0.9));
    text-shadow: 2px 0 rgba(255, 0, 128, 0.85), -2px 0 rgba(0, 225, 220, 0.85);
  }
  66% {
    transform: translate(1px, -1px);
    filter: drop-shadow(-2px 0 rgba(255, 0, 128, 0.9)) drop-shadow(2px 0 rgba(0, 225, 220, 0.9));
    text-shadow: -2px 0 rgba(0, 225, 220, 0.85), 2px 0 rgba(255, 0, 128, 0.85);
  }
  100% {
    transform: translate(0, 0);
    filter: none;
    text-shadow: none;
  }
}

/* Transform-free chromatic glitch for elements with their own hover transform. */
.footer-links a:hover,
.card:hover,
.resume-btn:hover {
  animation: glitchTint 0.28s steps(3, end) infinite;
}

@keyframes glitchTint {
  0% {
    filter: drop-shadow(2px 0 rgba(255, 0, 128, 0.4)) drop-shadow(-2px 0 rgba(0, 225, 220, 0.4));
    text-shadow: 1px 0 rgba(255, 0, 128, 0.55), -1px 0 rgba(0, 225, 220, 0.55);
  }
  50% {
    filter: drop-shadow(-3px 0 rgba(255, 0, 128, 0.5)) drop-shadow(3px 0 rgba(0, 225, 220, 0.5));
    text-shadow: -2px 0 rgba(0, 225, 220, 0.6), 2px 0 rgba(255, 0, 128, 0.6);
  }
  100% {
    filter: none;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-btn:hover,
  .theme-btn:hover,
  .nav-link:hover,
  .help-close:hover,
  .md-copy-btn:hover,
  .footer-links a:hover,
  .card:hover,
  .resume-btn:hover {
    animation: none;
  }
}

/* =========================================================
   Retro pixel cursors (served from /frontend/cursors)
========================================================= */
html,
body {
  cursor: url("/frontend/cursors/cursor-arrow.png") 0 0, auto;
}

a,
button,
.card,
.nav-link,
.footer-links a,
[data-link],
[data-action],
summary,
label {
  cursor: url("/frontend/cursors/cursor-target.png") 16 16, pointer;
}