/* CyberPSA — global styles */
:root {
  --acid: #d4ff00;
  --ink: #0a0a0a;
  --paper: #f4f1ea;
  --paper-2: #ebe6d8;
  --hot: #ff3b30;
  --blue: #2347ff;
  --magenta: #ff2bd6;
  --warn: #ffb800;
  --ok: #00d97e;
  --rule: rgba(10,10,10,0.12);
  --shadow: 4px 4px 0 var(--ink);
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reusable bits */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow); }
.btn:active { transform: translate(0,0); box-shadow: none; }
.btn.acid { background: var(--acid); color: var(--ink); border-color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.hot { background: var(--hot); color: var(--paper); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
}
.tag.solid { background: var(--ink); color: var(--paper); }
.tag.acid { background: var(--acid); color: var(--ink); }
.tag.hot { background: var(--hot); color: var(--paper); border-color: var(--hot); }

/* Marquee */
@keyframes marq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--acid);
}
.marquee-track {
  display: inline-flex;
  gap: 32px;
  padding: 10px 0;
  animation: marq 40s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.marquee-track > * { flex-shrink: 0; }

/* Sticker badge — rotated tag */
.sticker {
  display: inline-block;
  padding: 6px 12px;
  background: var(--acid);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--ink);
}

/* Halftone / placeholder image */
.placeholder {
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(10,10,10,0.06) 6px 7px),
    var(--paper-2);
  border: 1.5px dashed rgba(10,10,10,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(10,10,10,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Card */
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--ink); }

/* Inputs */
input[type="text"], input[type="email"], input[type="password"] {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  width: 100%;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px,-1px);
}

/* hide scrollbars in artboards */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Glitch effect on hover */
@keyframes glitch1 {
  0%,100% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
  20% { clip-path: inset(20% 0 30% 0); transform: translate(-2px,1px); }
  40% { clip-path: inset(50% 0 10% 0); transform: translate(2px,-1px); }
  60% { clip-path: inset(10% 0 60% 0); transform: translate(-1px,2px); }
  80% { clip-path: inset(70% 0 5% 0); transform: translate(1px,-2px); }
}
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%;
  pointer-events: none;
}
.glitch::before { color: var(--hot); animation: glitch1 2.4s infinite; mix-blend-mode: multiply; }
.glitch::after  { color: var(--blue); animation: glitch1 2.4s infinite reverse; mix-blend-mode: multiply; animation-delay: -1.2s; }

/* Pulse */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.2); }
}
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hot);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

/* Vertical text */
.vtext { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Halftone dots overlay */
.halftone {
  background-image: radial-gradient(rgba(10,10,10,0.18) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

/* Scanlines */
.scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0,
    rgba(0,0,0,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}