/* ==========================================================================
   MR PINOUX - DESIGN SYSTEM   (mrp-design.css)
   --------------------------------------------------------------------------
   One portable stylesheet for any page / app / future design. Mirrors
   mr-pinoux.com: near-black canvas, acid-green accent, InterBlack display in
   caps, SHARP corners, and the RGB-split glitch signature on hover.

   USE IT:
     <link rel="stylesheet" href="/assets/mrp-design.css">
   then either use the CSS variables (--mrp-*) directly, or the ready-made
   classes (.mrp-btn, .mrp-tab, .mrp-card, .mrp-social, ...).

   The @font-face URLs are absolute (/assets/fonts/...), so they resolve on
   mr-pinoux.com. In another project, copy /assets/fonts/ along with this file.
   ========================================================================== */

/* ---- Display face (Inter Black / Bold), same as the site ---------------- */
@font-face {
  font-family: "InterBlack"; font-style: normal; font-weight: 900; font-display: swap;
  src: local("Inter Black"),
       url("/assets/fonts/InterBlack.woff2") format("woff2"),
       url("/assets/fonts/InterBlack.woff") format("woff");
}
@font-face {
  font-family: "InterBold"; font-style: normal; font-weight: 700; font-display: swap;
  src: local("Inter Bold"),
       url("/assets/fonts/InterBold.woff2") format("woff2"),
       url("/assets/fonts/InterBold.woff") format("woff");
}

/* ---- TOKENS ------------------------------------------------------------- */
:root {
  /* color */
  --mrp-bg: #0a0a0c;          /* page canvas (near-black) */
  --mrp-bg-soft: #121217;     /* slightly raised surfaces / inputs */
  --mrp-card: #16161d;        /* cards, panels, stages */
  --mrp-line: #26262f;        /* hairline borders */
  --mrp-text: #ececf1;        /* primary text */
  --mrp-muted: #8a8a99;       /* secondary text */
  --mrp-accent: #43db24;      /* THE green - active states, CTAs, links */
  --mrp-accent-soft: rgba(67, 219, 36, 0.14);
  --mrp-on-accent: #0a0a0c;   /* text/icons sitting on the green */

  /* type */
  --mrp-font: "Helvetica Neue", Helvetica, Arial, sans-serif;          /* body */
  --mrp-font-display: "InterBlack", "Helvetica Neue", Helvetica, Arial, sans-serif; /* headings, buttons, tabs */

  /* type scale (display is ALWAYS uppercase) */
  --mrp-fs-hero: clamp(40px, 8vw, 110px);  /* big hero / watermark numerals */
  --mrp-fs-h1: 28px;
  --mrp-fs-h2: 20px;
  --mrp-fs-body: 15px;
  --mrp-fs-label: 12.5px;     /* buttons / tabs */
  --mrp-fs-small: 11px;       /* meta, captions (often uppercase + tracked) */

  /* radius - the brand is SHARP. keep it tight. */
  --mrp-r-0: 0;               /* buttons, tabs, pills -> square */
  --mrp-r-sm: 3px;            /* badges, tiny chips */
  --mrp-r-card: 5px;          /* cards, panels */
  --mrp-r-round: 50%;         /* avatars, social icons, the pie */

  /* motion */
  --mrp-glitch-speed: 0.3s;   /* hover glitch burst (snappy) */
}

/* ---- BASE (opt-in via .mrp on a wrapper) -------------------------------- */
.mrp {
  background: var(--mrp-bg);
  color: var(--mrp-text);
  font-family: var(--mrp-font);
  font-size: var(--mrp-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mrp-display { font-family: var(--mrp-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; }
.mrp-h1 { font-family: var(--mrp-font-display); font-weight: 900; text-transform: uppercase; font-size: var(--mrp-fs-h1); line-height: 1.05; letter-spacing: 0.01em; margin: 0; }
.mrp-h2 { font-family: var(--mrp-font-display); font-weight: 900; text-transform: uppercase; font-size: var(--mrp-fs-h2); letter-spacing: 0.02em; margin: 0; }
.mrp-muted { color: var(--mrp-muted); }
.mrp-accent { color: var(--mrp-accent); }
.mrp-eyebrow { color: var(--mrp-muted); font-size: var(--mrp-fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.mrp a { color: inherit; text-decoration: none; }
.mrp a:hover { color: var(--mrp-accent); }

/* ---- CARDS / PANELS ----------------------------------------------------- */
.mrp-card {
  background: var(--mrp-card);
  border: 1px solid var(--mrp-line);
  border-radius: var(--mrp-r-card);
}

/* ---- BUTTONS (square, caps, glitch on hover) ---------------------------- */
.mrp-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mrp-bg-soft); color: var(--mrp-text);
  border: 1px solid var(--mrp-line); border-radius: var(--mrp-r-0);
  padding: 10px 16px;
  font-family: var(--mrp-font-display); font-weight: 900; font-size: var(--mrp-fs-label);
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.mrp-btn:hover { color: #fff; border-color: var(--mrp-accent); z-index: 2; animation: mrpBtnGlitch var(--mrp-glitch-speed) steps(1) infinite; }
.mrp-btn:disabled { opacity: 0.55; cursor: progress; animation: none; }
/* accent / primary variant: solid green */
.mrp-btn--accent { background: var(--mrp-accent); border-color: var(--mrp-accent); color: var(--mrp-on-accent); }
.mrp-btn--accent:hover { color: var(--mrp-on-accent); }

/* ---- TABS --------------------------------------------------------------- */
.mrp-tab {
  position: relative;
  background: var(--mrp-bg-soft); color: var(--mrp-muted);
  border: 1px solid var(--mrp-line); border-radius: var(--mrp-r-0);
  padding: 9px 15px;
  font-family: var(--mrp-font-display); font-weight: 900; font-size: var(--mrp-fs-label);
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.mrp-tab:hover { color: var(--mrp-text); border-color: #3a3a44; z-index: 2; animation: mrpBtnGlitch var(--mrp-glitch-speed) steps(1) infinite; }
.mrp-tab.is-active { background: var(--mrp-accent); border-color: var(--mrp-accent); color: var(--mrp-on-accent); }

/* ---- PILLS (small toggles / filters) ------------------------------------ */
.mrp-pill {
  position: relative;
  background: transparent; color: var(--mrp-muted);
  border: 1px solid var(--mrp-line); border-radius: var(--mrp-r-0);
  padding: 6px 13px;
  font-family: var(--mrp-font-display); font-weight: 900; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.mrp-pill:hover { color: var(--mrp-text); z-index: 2; animation: mrpBtnGlitch var(--mrp-glitch-speed) steps(1) infinite; }
.mrp-pill.is-active { background: var(--mrp-accent); border-color: var(--mrp-accent); color: var(--mrp-on-accent); }

/* ---- SOCIAL ICONS (round, glitchBox on hover) --------------------------- */
.mrp-social {
  position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--mrp-line); border-radius: var(--mrp-r-round);
  color: var(--mrp-muted);
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.mrp-social:hover {
  color: var(--mrp-on-accent); background: var(--mrp-accent); border-color: var(--mrp-accent);
  transform: translateY(-2px); z-index: 2; animation: mrpGlitchBox 0.3s steps(2) infinite;
}
.mrp-social svg { width: 15px; height: 15px; fill: currentColor; }

/* ---- FORM ACCENTS ------------------------------------------------------- */
.mrp input[type="range"] { accent-color: var(--mrp-accent); cursor: pointer; }
.mrp input, .mrp textarea {
  background: var(--mrp-bg-soft); color: var(--mrp-text);
  border: 1px solid var(--mrp-line); border-radius: var(--mrp-r-0);
  font-family: var(--mrp-font); padding: 10px 12px;
}
.mrp input:focus, .mrp textarea:focus { outline: none; border-color: var(--mrp-accent); }

/* ---- GLITCH SIGNATURE --------------------------------------------------- */
/* RGB-split jitter for boxes (buttons, tabs, pills) - mostly clean, two short
   bursts per cycle. This is THE signature interaction. */
@keyframes mrpBtnGlitch {
  0%, 14%, 44%, 100% { transform: none; box-shadow: none; }
  16% { transform: rotate(-1.3deg) translate(-3px, 1px);  box-shadow: -7px 0 0 #ff19d0, 7px 0 0 #00eaff; }
  20% { transform: rotate(1deg) translate(3px, -2px);     box-shadow: 7px 0 0 #06ff00, -7px 0 0 #00eaff; }
  24% { transform: rotate(-0.7deg) translate(-2px, 1px);  box-shadow: -5px 0 0 #00eaff, 5px 0 0 #ff19d0; }
  46% { transform: rotate(1.2deg) translate(3px, 1px);    box-shadow: 6px 0 0 #00eaff, -6px 0 0 #ff19d0; }
  50% { transform: rotate(-0.9deg) translate(-3px, -1px); box-shadow: -6px 0 0 #06ff00, 6px 0 0 #00eaff; }
}
/* tighter RGB-split for round things (social icons) */
@keyframes mrpGlitchBox {
  0%, 100% { box-shadow: -2px 0 0 #ff0078, 2px 0 0 #00eaff; }
  33% { box-shadow: 3px 0 0 #00eaff, -3px 0 0 #ff0078; }
  66% { box-shadow: -3px 0 0 #ff0078, 3px 0 0 #00eaff; }
}
/* TEXT glitch for titles: add .mrp-rgb for the resting split, toggle
   .mrp-glitching (e.g. on scroll-into-view) for a one-shot burst. */
.mrp-rgb { text-shadow: -3px 0 0 #ff0078, 3px 0 0 #00eaff; }
.mrp-glitching { animation: mrpTextGlitch 0.3s linear 1; }
@keyframes mrpTextGlitch {
  10% { text-shadow: -7px 0 0 #ff0078, 6px 0 0 #06ff00, -8px 0 0 #00eaff; }
  20% { text-shadow: 5px 0 0 #ff0078, 1px 0 0 #06ff00, 2px 0 0 #00eaff; }
  30% { text-shadow: 8px 0 0 #ff0078, 5px 0 0 #06ff00, -4px 0 0 #00eaff; }
  40% { text-shadow: -6px 0 0 #ff0078, 13px 0 0 #06ff00, -9px 0 0 #00eaff; }
  50% { text-shadow: 15px 0 0 #ff0078, -5px 0 0 #06ff00, 7px 0 0 #00eaff; }
  0%, 60%, 100% { text-shadow: -3px 0 0 #ff0078, 3px 0 0 #00eaff; }
}

@media (prefers-reduced-motion: reduce) {
  .mrp-btn:hover, .mrp-tab:hover, .mrp-pill:hover, .mrp-social:hover { animation: none; }
  .mrp-glitching { animation: none; }
}

/* ==========================================================================
   QUICK RULES (the short version)
   - Canvas #0a0a0c, cards #16161d, lines #26262f, text #ececf1, muted #8a8a99.
   - ONE accent: acid green #43db24. Active states fill green with #0a0a0c text.
   - Body: Helvetica Neue. Headings / buttons / tabs: InterBlack 900, UPPERCASE,
     letter-spacing ~0.03-0.05em.
   - Corners are SHARP: buttons/tabs/pills = 0, cards = 5px, badges = 3px,
     avatars/social/pie = round. Avoid pill/rounded buttons.
   - Hover = glitch. Boxes use mrpBtnGlitch (.3s), round icons use mrpGlitchBox,
     titles use the .mrp-rgb / .mrp-glitching text split.
   - Logo: /assets/logo.png (light graffiti mark, reads on dark).
   ========================================================================== */