/* ============================================
   memphis.css — 90s Memphis Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #FAF6EC;
  --bg-alt: #F0EAD6;
  --bg-dark: #1A1A1A;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --ink-mute: #8A8A8A;
  --pink: #FF1B6B;
  --pink-soft: #FF8FB8;
  --cyan: #00C2D1;
  --yellow: #FFD93D;
  --lime: #B5E853;
  --purple: #B967FF;
  --red: #FF5757;
  --cream: #FAF6EC;
  --border: 3px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--pink); color: white; }

/* ---------- Typography ---------- */
.font-display { font-family: 'Archivo Black', system-ui, sans-serif; letter-spacing: -0.02em; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.font-italic { font-style: italic; }

/* ---------- Borders & Shadows ---------- */
.b-ink { border: var(--border) solid var(--ink); }
.b-pink { border: var(--border) solid var(--pink); }
.b-cyan { border: var(--border) solid var(--cyan); }
.b-yellow { border: var(--border) solid var(--yellow); }

.s-ink { box-shadow: 6px 6px 0 var(--ink); }
.s-pink { box-shadow: 6px 6px 0 var(--pink); }
.s-cyan { box-shadow: 6px 6px 0 var(--cyan); }
.s-yellow { box-shadow: 6px 6px 0 var(--yellow); }
.s-lime { box-shadow: 6px 6px 0 var(--lime); }
.s-sm-ink { box-shadow: 3px 3px 0 var(--ink); }
.s-sm-pink { box-shadow: 3px 3px 0 var(--pink); }
.s-md-ink { box-shadow: 8px 8px 0 var(--ink); }
.s-md-pink { box-shadow: 8px 8px 0 var(--pink); }
.s-md-cyan { box-shadow: 8px 8px 0 var(--cyan); }

/* ---------- Buttons ---------- */
.btn-m {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  border: var(--border) solid var(--ink);
  padding: 14px 24px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  box-shadow: 6px 6px 0 var(--pink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-m:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--pink); }
.btn-m:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pink); }

.btn-m-outline {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.btn-m-outline:hover { box-shadow: 8px 8px 0 var(--ink); }

.btn-m-cyan { box-shadow: 6px 6px 0 var(--ink); }
.btn-m-cyan:hover { box-shadow: 8px 8px 0 var(--ink); }

.btn-m-pink { background: var(--pink); color: white; box-shadow: 6px 6px 0 var(--ink); }
.btn-m-pink:hover { box-shadow: 8px 8px 0 var(--ink); }

/* ---------- Stamp / badges ---------- */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2.5px solid var(--ink);
  padding: 5px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  background: var(--cream);
  white-space: nowrap;
}
.stamp-pink { background: var(--pink); color: white; }
.stamp-yellow { background: var(--yellow); }
.stamp-cyan { background: var(--cyan); }
.stamp-lime { background: var(--lime); }
.stamp-dark { background: var(--ink); color: var(--cream); }
.stamp-outline { background: transparent; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 0;
  border-top: var(--border) solid var(--ink);
  border-bottom: var(--border) solid var(--ink);
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: max-content;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.marquee-item::after {
  content: '●';
  color: var(--pink);
  font-size: 14px;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Animations ---------- */
@keyframes float-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-6deg); }
}
@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes blink {
  50% { opacity: 0; }
}

.float-a { animation: float-1 4s ease-in-out infinite; }
.float-b { animation: float-2 5s ease-in-out infinite; }
.float-c { animation: float-1 6s ease-in-out infinite; }
.spin-slow { animation: spin-slow 30s linear infinite; }
.wiggle { animation: wiggle 0.4s ease-in-out infinite; }
.blink { animation: blink 1.1s steps(1) infinite; }

/* ---------- Memphis shapes (CSS-only) ---------- */
.shape-triangle {
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 32px solid var(--ink);
  display: inline-block;
}
.shape-circle { border-radius: 50%; display: inline-block; }
.shape-square { display: inline-block; }

/* ---------- Squiggle SVG inline ---------- */
.squiggle {
  display: inline-block;
  width: 80px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cpath d='M0 7 Q 10 0, 20 7 T 40 7 T 60 7 T 80 7' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.squiggle-pink {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cpath d='M0 7 Q 10 0, 20 7 T 40 7 T 60 7 T 80 7' fill='none' stroke='%23FF1B6B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.squiggle-cyan {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'%3E%3Cpath d='M0 7 Q 10 0, 20 7 T 40 7 T 60 7 T 80 7' fill='none' stroke='%2300C2D1' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}

/* ---------- Zigzag divider ---------- */
.zigzag {
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 L6 0 L12 7 L18 0 L24 7 L18 14 L12 7 L6 14 Z' fill='%231A1A1A'/%3E%3C/svg%3E");
  background-size: 24px 14px;
  background-repeat: repeat-x;
}
.zigzag-pink {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 L6 0 L12 7 L18 0 L24 7 L18 14 L12 7 L6 14 Z' fill='%23FF1B6B'/%3E%3C/svg%3E");
  background-size: 24px 14px;
  background-repeat: repeat-x;
}

/* ---------- Pattern backgrounds ---------- */
.pattern-dots {
  background-image: radial-gradient(var(--ink) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}
.pattern-dots-cream {
  background-image: radial-gradient(var(--cream) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}
.pattern-grid {
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pattern-stripes {
  background-image: repeating-linear-gradient(45deg, var(--ink), var(--ink) 4px, transparent 4px, transparent 14px);
}
.pattern-checker {
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* ---------- Hit counter ---------- */
.hit-counter {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  border: 2px solid var(--ink);
  padding: 4px 6px;
  background: var(--ink);
  color: var(--cream);
}
.hit-counter-label {
  letter-spacing: 0.1em;
  margin-right: 8px;
  text-transform: uppercase;
}
.hit-counter-digit {
  background: var(--ink);
  color: var(--lime);
  padding: 1px 4px;
  font-weight: 700;
  border: 1px solid var(--lime);
}

/* ---------- Construction banner ---------- */
.construction {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  padding: 10px 20px;
  border: var(--border) solid var(--ink);
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  transform: rotate(-3deg);
  letter-spacing: 0.05em;
}

/* ---------- Tilted ---------- */
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(2deg); }
.tilt-l-3 { transform: rotate(-3deg); }
.tilt-r-3 { transform: rotate(3deg); }

/* ---------- Cards ---------- */
.card-m {
  background: var(--cream);
  border: var(--border) solid var(--ink);
  padding: 24px;
  position: relative;
}
.card-pink { background: var(--pink); color: white; }
.card-cyan { background: var(--cyan); }
.card-yellow { background: var(--yellow); }
.card-dark { background: var(--ink); color: var(--cream); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--cream); border-left: 2px solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--pink); }

/* ---------- ASCII art helpers ---------- */
.ascii {
  font-family: 'JetBrains Mono', monospace;
  white-space: pre;
  line-height: 1;
  font-size: 10px;
  color: var(--ink);
  user-select: none;
}

/* ---------- Visitor counter (decorative) ---------- */
.visitor {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Marquee inside content ---------- */
.flag {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  padding: 6px 14px;
  border: 2px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  transform: rotate(-2deg);
}
.flag-yellow { background: var(--yellow); color: var(--ink); }
.flag-pink { background: var(--pink); color: white; }
.flag-cyan { background: var(--cyan); color: var(--ink); }
.flag-lime { background: var(--lime); color: var(--ink); }

/* ---------- Polaroid frame (for future photo) ---------- */
.polaroid {
  background: var(--cream);
  padding: 12px 12px 36px 12px;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  display: inline-block;
  transform: rotate(-2deg);
}
.polaroid img { display: block; max-width: 100%; }
.polaroid-caption {
  margin-top: 10px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
}

/* ---------- Sticker ---------- */
.sticker {
  display: inline-block;
  padding: 6px 12px;
  border: 2px dashed var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cream);
}

/* ---------- Tag chip ---------- */
.tag-m {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--cream);
  text-decoration: none;
  color: var(--ink);
}
.tag-m-pink { background: var(--pink); color: white; }
.tag-m-yellow { background: var(--yellow); }
.tag-m-cyan { background: var(--cyan); }
.tag-m-lime { background: var(--lime); }

/* ---------- Dot/grid decorations ---------- */
.dot-grid {
  position: absolute;
  pointer-events: none;
  width: 80px; height: 80px;
  background-image: radial-gradient(var(--ink) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.4;
}