/* Pixel/retro theme — keep it tiny and composable with Tailwind classes.
   You can paste these classes into any Cruip/Tailwind template. */

/* Color tokens (retro neon palette) */
:root{
  --bg-0:#0e0a14;   /* deep purple */
  --bg-1:#151022;
  --ink:#f3f4f6;
  --muted:#a3a3ad;
  --neon-a:#00ffa3; /* mint neon */
  --neon-b:#5dfdcb; /* cyan */
  --neon-c:#ff2a6d; /* magenta */
  --neon-y:#f7f06d; /* yellow */
  --edge:#2b213a;
}

/* Global backdrop with subtle dither */
body.pixel {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, rgba(0,0,0,0.03) 2px 4px),
    radial-gradient(1200px 600px at 50% -200px, rgba(93,253,203,0.12), transparent 60%),
    var(--bg-0);
  color: var(--ink);
}

/* Pixel font for headings; body stays readable */
.pixel h1,.pixel h2,.pixel .pixel-font{
  font-family: "Press Start 2P", system-ui, sans-serif;
  letter-spacing: 0.5px;
}

/* Crisp images */
.pixelated{ image-rendering: pixelated; image-rendering: crisp-edges; }

/* Pixel card/frame (chunky multi-outline) */
.pixel-frame{
  box-shadow:
    0 0 0 2px var(--edge),
    0 0 0 6px rgba(93,253,203,0.18),
    0 10px 30px rgba(0,0,0,0.6);
  border-radius: 8px;
}

/* 8‑bit style buttons (stepped border via shadows) */
.btn-pixel{
  position: relative;
  background: linear-gradient(180deg, rgba(93,253,203,0.15), rgba(0,255,163,0.10));
  border: 2px solid var(--neon-b);
  color: var(--ink);
  padding: .8rem 1.1rem;
  display: inline-flex; align-items: center; gap:.5rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  box-shadow:
      0 0 0 2px var(--edge) inset,
      0 4px 0 0 var(--edge),
      0 10px 20px rgba(0,0,0,.6);
  transition: transform .08s ease, box-shadow .08s ease, background .2s ease;
}
.btn-pixel:hover{ transform: translateY(-2px); }
.btn-pixel:active{ transform: translateY(1px); box-shadow: 0 0 0 2px var(--edge) inset, 0 1px 0 0 var(--edge), 0 8px 16px rgba(0,0,0,.5); }

/* Scanline overlay for hero sections */
.scanlines{ position: relative; overflow:hidden; }
.scanlines::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(0,0,0,0.08)),
    repeating-linear-gradient( to bottom, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0.08) 1px 2px);
  mix-blend-mode: overlay;
  pointer-events:none;
  opacity:.25;
}

/* Lightbox tweaks */
.lightbox-backdrop{position:fixed;inset:0;background:rgba(10,6,14,.92);display:none;align-items:center;justify-content:center;z-index:50}
.lightbox-backdrop.active{display:flex}
.lightbox-backdrop img{max-width:90vw;max-height:85vh;border-radius:4px; box-shadow:0 0 0 3px var(--edge), 0 0 0 8px rgba(93,253,203,0.2), 0 20px 60px rgba(0,0,0,.8)}
.lightbox-backdrop .close{position:absolute;top:1rem;right:1rem;font-size:1.25rem;color:#fff;cursor:pointer}