/* ===============================================
   Gnezdo / AKC — Risograph zine design system
   =============================================== */

body {
  margin: 0;
  background: #F4EFE2;
  -webkit-font-smoothing: antialiased;
}

/* --- Animations --- */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-track {
  animation: ticker 30s linear infinite;
  white-space: nowrap;
}

@keyframes jitter {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50%      { transform: translate(1px, -1px) rotate(-1.5deg); }
}
.sticker {
  animation: jitter 0.8s ease-in-out infinite;
}

/* --- Risograph grain overlay --- */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* --- Halftone dot pattern --- */
.halftone {
  background-image: radial-gradient(circle at center, #1A1A1A 1.1px, transparent 1.3px);
  background-size: 7px 7px;
}

/* --- Misregistration effect (CMYK offset) --- */
.misreg {
  position: relative;
  display: inline-block;
}
.misreg::before {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 2px;
  color: #E94B8A;
  z-index: -1;
  pointer-events: none;
}
.misreg::after {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  top: 1px;
  color: #3B5BCC;
  z-index: -1;
  pointer-events: none;
}

/* --- Offset shadows (zine / DIY print feel) --- */
.shadow-offset    { box-shadow: 6px 6px 0 #1A1A1A; }
.shadow-offset-sm { box-shadow: 3px 3px 0 #1A1A1A; }

/* --- Hand-drawn squiggle divider --- */
.squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'><path d='M0 5 Q5 0, 10 5 T20 5 T30 5 T40 5' stroke='%231A1A1A' stroke-width='2' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-size: 40px 10px;
  background-position: center;
  height: 10px;
}

/* --- Font classes --- */
.display {
  font-family: 'Archivo Black', 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.hand {
  font-family: 'Caveat', cursive;
}
.mono {
  font-family: 'IBM Plex Mono', monospace;
}

/* --- Hide scrollbars on horizontal scrollers --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }