/* ============================================================
 * BUDDY ORIGIN — the archive skin
 *
 * The styling of the site Mega Buddies ran before the rebuild, kept as an
 * exhibit and reachable from the [THEME] menu. Ported from
 * website-old/css/style.css and website-old/css/neon.css onto the class
 * names the current markup actually uses.
 *
 * THIS FILE BREAKS THE STYLE BOOK ON PURPOSE. Glow, border-radius,
 * gradients, backdrop blur, lift-on-hover, a travelling scan line — all of
 * it is forbidden everywhere else in this repo and all of it is the point
 * here. `tools/audit.js` skips its radius / shadow / blur / gradient
 * assertions on this axis and only on this axis.
 *
 * Three rules still hold, and they are what keep the exhibit from leaking:
 *
 *   1. Every selector is scoped to `[data-theme='origin']`. Nothing here
 *      can reach another theme.
 *   2. Nothing here hides content. The skin repaints; it never withholds.
 *   3. `.mb-modal*` and `.mb-legacy-bar*` are never named. The warning
 *      that fronts this theme is the site speaking about the exhibit, not
 *      part of it, so its scrim, box, chamfer and type stay in the
 *      system's own language. Do not "fix" that inconsistency. (The two
 *      buttons inside the dialog are ordinary `.mb-btn`s and do take the
 *      skin — they are controls on the page, and a control that does not
 *      look like the page's controls is a worse lie than a consistent
 *      one.)
 *
 * Literal hex is correct in this file and nowhere else: the usual rule
 * exists because a literal is broken in the themes it was not written for,
 * and this file only ever applies to one theme.
 *
 * Do not copy a pattern out of here. It is an archive, not a source.
 * ============================================================ */

/* -------------------- LOCAL VOCABULARY -------------------- */
/* The old site drew everything in one grey and glowed it. These four are
   that grey and its haloes, kept as variables so the inverted band can
   restate them once instead of every rule restating them. */

[data-theme='origin'] {
  --mb-o-accent: #929397;
  --mb-o-accent-2: #1391FF;
  --mb-o-glow: rgba(146, 147, 151, 0.5);
  --mb-o-glow-soft: rgba(146, 147, 151, 0.22);
  --mb-o-fill: rgba(146, 147, 151, 0.05);
  --mb-o-radius: 5px;
}

/* The counter-ground is pale, so the halo has to be dark or it is invisible
   and the border has to be dark or it is a smear. Same four names, so no
   rule below needs to know which band it is in. */
[data-theme='origin'] .mb-section--invert {
  --mb-o-accent: #4A4B50;
  --mb-o-accent-2: #0B4C87;
  --mb-o-glow: rgba(30, 31, 36, 0.35);
  --mb-o-glow-soft: rgba(30, 31, 36, 0.18);
  --mb-o-fill: rgba(30, 31, 36, 0.05);
}

/* -------------------- GROUND ------------------------------ */
/* The 20px hairline grid the old body carried (style.css:370). */

[data-theme='origin'] body {
  background-image:
    linear-gradient(0deg, rgba(146, 147, 151, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 147, 151, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
}

/* The scan line (neon.css:160). A pseudo-element rather than a real node so
   it needs no markup on ten pages and cannot outlive the attribute that
   paints it. `pointer-events: none` because it crosses every control on the
   page on its way down. */
[data-theme='origin'] body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 1200;
  pointer-events: none;
  opacity: 0.12;
  background: linear-gradient(90deg, var(--mb-o-accent), var(--mb-o-accent-2));
  animation: mb-o-scan 6s linear infinite;
}

@keyframes mb-o-scan {
  from { transform: translateY(0); }
  to   { transform: translateY(100vh); }
}

/* -------------------- TYPE -------------------------------- */
/* Press Start 2P for anything that was a heading, in the accent grey with
   its halo (style.css:434). Sizes come from the token block, which already
   halves the scale for this face. */

[data-theme='origin'] .mb-h1,
[data-theme='origin'] .mb-h2,
[data-theme='origin'] .mb-h3,
[data-theme='origin'] .mb-h4,
[data-theme='origin'] .mb-section-title,
[data-theme='origin'] .mb-page-title,
[data-theme='origin'] .mb-card-title,
[data-theme='origin'] .mb-quest-title,
[data-theme='origin'] .mb-phase-title,
[data-theme='origin'] .mb-milestone-title,
[data-theme='origin'] .mb-rail-title,
[data-theme='origin'] .mb-footer-title,
[data-theme='origin'] .mb-stat-value,
[data-theme='origin'] .mb-error-code {
  color: var(--mb-o-accent);
  letter-spacing: 2px;
  text-shadow: 0 0 10px var(--mb-o-glow);
  /* Press Start 2P has no descender room to speak of and the display
     line-height is set for a face that does. */
  line-height: 1.4;
  /* A pixel face at a fixed size cannot shrink to fit, so a long word has
     to be allowed to break rather than to push the page sideways. */
  overflow-wrap: anywhere;
}

/* The hero wordmark is drawn out of modules by js/mb-pixel.js when it can,
   and set in the display face when it cannot. Either way it is the one
   place the halo would smear a grid rather than a letter. */
[data-theme='origin'] .mb-hero-wordmark {
  color: var(--mb-o-accent);
  letter-spacing: 4px;
  text-shadow: 0 0 15px var(--mb-o-glow), 0 0 30px var(--mb-o-glow-soft);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

[data-theme='origin'] .mb-wm-grid,
[data-theme='origin'] .mb-logo-grid { color: var(--mb-o-accent); }

/* -------------------- NAVBAR ------------------------------ */
/* Translucent, blurred, with a 2px accent rule under it (style.css:470).
   The chamfer is switched off rather than reshaped — the old bar was a
   plain rectangle. The clip stays on the pseudo-element either way; a
   clip-path on the header itself would cut off the fixed mobile menu
   inside it. */

[data-theme='origin'] .mb-nav::before {
  background: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--mb-o-accent);
  clip-path: none;
}

[data-theme='origin'] .mb-logo { color: var(--mb-o-accent); }
[data-theme='origin'] .mb-logo img { filter: drop-shadow(0 0 5px var(--mb-o-accent)); }

/* Bordered pills with a halo, and a gradient that scales in underneath on
   hover (style.css:547). The system's hover inversion is replaced, not
   layered on top of. */
[data-theme='origin'] .mb-nav-link {
  border: 1px solid var(--mb-o-accent);
  border-radius: 2px;
  background: var(--mb-o-fill);
  color: var(--mb-fg);
  text-shadow: 0 0 5px var(--mb-o-glow-soft);
  box-shadow: 0 0 3px var(--mb-o-glow-soft);
  letter-spacing: 1px;
  transition: color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

[data-theme='origin'] .mb-nav-link:hover {
  background: var(--mb-o-fill);
  color: var(--mb-o-accent);
  transform: translateY(-2px);
  text-shadow: 0 0 5px var(--mb-o-accent), 0 0 10px var(--mb-o-glow);
  box-shadow: 0 0 5px var(--mb-o-accent), 0 0 10px var(--mb-o-glow-soft);
}

[data-theme='origin'] .mb-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mb-o-accent), transparent);
  transform: scaleX(0);
  transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme='origin'] .mb-nav-link:hover::after { transform: scaleX(1); }

[data-theme='origin'] .mb-dropdown {
  background: linear-gradient(135deg, rgba(18, 18, 24, 0.95) 0%, rgba(25, 25, 35, 0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--mb-o-accent);
  border-radius: var(--mb-o-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  clip-path: none;
}

[data-theme='origin'] .mb-dropdown-link:hover { color: var(--mb-o-accent-2); }

[data-theme='origin'] .mb-burger span { background: var(--mb-o-accent); }

/* -------------------- BUTTONS ----------------------------- */
/* The old corner cut (style.css:855) — a single clipped corner rather than
   the system's four chamfers — with a halo and a lift on hover. */

[data-theme='origin'] .mb-btn {
  border: 2px solid var(--mb-o-accent);
  color: var(--mb-o-accent);
  letter-spacing: 1px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%);
  box-shadow: 0 0 10px var(--mb-o-glow-soft);
  transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

[data-theme='origin'] .mb-btn:hover {
  background: var(--mb-o-fill);
  color: var(--mb-o-accent);
  transform: translateY(-3px);
  box-shadow: 0 0 15px var(--mb-o-glow), 0 0 30px var(--mb-o-glow-soft);
}

[data-theme='origin'] .mb-btn--solid,
[data-theme='origin'] .mb-section--invert .mb-btn--solid {
  background: var(--mb-solid-bg);
  border-color: var(--mb-solid-bg);
  color: var(--mb-solid-fg);
}

[data-theme='origin'] .mb-btn--solid:hover,
[data-theme='origin'] .mb-section--invert .mb-btn--solid:hover {
  background: var(--mb-solid-bg);
  color: var(--mb-solid-fg);
  box-shadow: 0 0 15px var(--mb-o-glow), 0 0 30px var(--mb-o-glow-soft);
}

[data-theme='origin'] .mb-section--invert .mb-btn,
[data-theme='origin'] .mb-section--invert .mb-btn:hover {
  border-color: var(--mb-o-accent);
  color: var(--mb-o-accent);
  background: var(--mb-o-fill);
}

[data-theme='origin'] .mb-top {
  border: 2px solid var(--mb-o-accent);
  border-radius: var(--mb-o-radius);
  color: var(--mb-o-accent);
  box-shadow: 0 0 10px var(--mb-o-glow-soft);
  clip-path: none;
}

[data-theme='origin'] .mb-top:hover {
  background: var(--mb-surface-2);
  color: var(--mb-o-accent);
  box-shadow: 0 0 15px var(--mb-o-glow);
}

/* -------------------- BOXES ------------------------------- */
/* Every raised surface the old site had was the same object: a rounded,
   accent-bordered, glowing panel over a shallow diagonal gradient
   (style.css:1152, 3180). One rule, applied to every current class that
   plays that role. */

[data-theme='origin'] .mb-card,
[data-theme='origin'] .mb-panel,
[data-theme='origin'] .mb-quest,
[data-theme='origin'] .mb-phase,
[data-theme='origin'] .mb-milestone,
[data-theme='origin'] .mb-rail-panel,
[data-theme='origin'] .mb-alert,
[data-theme='origin'] .mb-roll-item,
[data-theme='origin'] .mb-msg {
  border: 2px solid var(--mb-o-accent);
  border-radius: var(--mb-o-radius);
  background: linear-gradient(135deg, rgba(26, 26, 34, 0.85) 0%, rgba(34, 34, 44, 0.85) 100%);
  box-shadow: 0 0 10px var(--mb-o-glow-soft);
  clip-path: none;
}

[data-theme='origin'] .mb-section--invert .mb-card,
[data-theme='origin'] .mb-section--invert .mb-panel,
[data-theme='origin'] .mb-section--invert .mb-quest,
[data-theme='origin'] .mb-section--invert .mb-phase,
[data-theme='origin'] .mb-section--invert .mb-milestone,
[data-theme='origin'] .mb-section--invert .mb-rail-panel,
[data-theme='origin'] .mb-section--invert .mb-alert {
  background: rgba(255, 255, 255, 0.42);
  color: var(--mb-light-fg);
}

[data-theme='origin'] a.mb-card:hover,
[data-theme='origin'] .mb-card--interactive:hover {
  border-color: var(--mb-o-accent-2);
  box-shadow: 0 0 15px var(--mb-o-glow), 0 5px 15px var(--mb-o-glow-soft);
  transform: translateY(-5px);
}

/* The terminal caret the old site put on anything that read as a console
   (neon.css:88). One per panel, in the corner the chamfer used to occupy. */
[data-theme='origin'] .mb-panel { position: relative; }

[data-theme='origin'] .mb-panel::after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 8px;
  height: 14px;
  background: var(--mb-o-accent);
  animation: mb-o-caret 1s step-end infinite;
  pointer-events: none;
}

@keyframes mb-o-caret {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

[data-theme='origin'] .mb-tag,
[data-theme='origin'] .mb-status {
  border-radius: 2px;
  clip-path: none;
}

[data-theme='origin'] .mb-stat { border-color: var(--mb-o-accent); }

/* -------------------- SECTION FURNITURE ------------------- */
/* The old `.section-line`: a 3px gradient bar that pulses, rather than the
   hairline rule the system draws between a title and the section note
   (style.css:447). */

[data-theme='origin'] .mb-section-rule {
  position: relative;
  height: 3px;
  background: var(--mb-o-accent);
  overflow: hidden;
}

[data-theme='origin'] .mb-section-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--mb-o-accent), var(--mb-o-accent-2));
  animation: mb-o-line 2s infinite alternate;
}

@keyframes mb-o-line {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

[data-theme='origin'] .mb-section { border-top-color: var(--mb-o-glow-soft); }

[data-theme='origin'] .mb-footer { border-top: 2px solid var(--mb-o-accent); }
[data-theme='origin'] .mb-footer-mark img { filter: drop-shadow(0 0 5px var(--mb-o-accent)); }
[data-theme='origin'] .mb-footer-links a:hover { color: var(--mb-o-accent-2); }

[data-theme='origin'] .mb-ticker { border-color: var(--mb-o-glow-soft); }

/* -------------------- FORMS ------------------------------- */

[data-theme='origin'] .mb-input {
  border: 1px solid var(--mb-o-accent);
  border-radius: 3px;
  background: rgba(10, 10, 15, 0.6);
  clip-path: none;
  transition: box-shadow 300ms ease, border-color 300ms ease;
}

/* The old site dropped the focus ring here and the glow stood in for it.
   The glow is kept and the ring is not dropped: a halo that also appears
   on a mouse click is decoration, and a keyboard user needs the one
   indicator that only ever means "this is where you are". */
[data-theme='origin'] .mb-input:focus {
  border-color: var(--mb-o-accent-2);
  box-shadow: 0 0 8px var(--mb-o-glow), inset 0 0 8px rgba(19, 145, 255, 0.15);
}

/* -------------------- TAB SWITCH -------------------------- */
/* The board's tab strip, so it does not sit among rounded boxes as the one
   square thing on the page. */

[data-theme='origin'] .mb-tabs {
  border: 1px solid var(--mb-o-accent);
  border-radius: var(--mb-o-radius);
  overflow: hidden;
}

[data-theme='origin'] .mb-tab[aria-selected='true'] {
  background: var(--mb-o-accent);
  color: var(--mb-bg);
}

/* -------------------- MOTION OFF -------------------------- */
/* The three animations this skin adds, and nothing else — the current
   motion and pixel layers already refuse under the same query on their own
   side. A visitor who has asked for less movement gets the archive's look
   and none of its ticking. */

@media (prefers-reduced-motion: reduce) {
  [data-theme='origin'] body::after,
  [data-theme='origin'] .mb-section-rule::after,
  [data-theme='origin'] .mb-panel::after {
    animation: none;
  }

  [data-theme='origin'] body::after { opacity: 0; }

  [data-theme='origin'] .mb-btn:hover,
  [data-theme='origin'] .mb-nav-link:hover,
  [data-theme='origin'] a.mb-card:hover,
  [data-theme='origin'] .mb-card--interactive:hover {
    transform: none;
  }
}