/* Mercury's page (templates/mercury.html). Wow Buffet's cards, type and buttons, plus one dark stage where the
   skins are shown, lit in each skin's own colour (--glow, set by mercury.js). This file loads before style.css,
   so a rule that changes one of the site's own classes needs the extra .mc- class to win. */

.hero.mc-hero { padding-bottom: 0; }
.mc-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gap); margin-top: 22px; }
.mc-fine { margin: 12px 0 0; color: var(--ink-3); font-size: 11px; letter-spacing: 0.02em; }
/* The short heads-up under the buttons; "More" jumps to the full one in the download block (.mc-heads-up). */
.mc-warn {
  display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%; margin: 18px 0 0; padding: 7px 12px;
  border: 1px solid var(--line); color: var(--ink-2); font-size: 11.5px; letter-spacing: 0.02em; text-align: left;
}
.mc-warn b { flex: none; color: var(--dot); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-warn a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the counts (admins only) ---------- */
.glance.mc-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin: 28px auto 0; text-align: left; }
.mc-glance-note { text-align: center; }

/* ---------- the stage ---------- */
.mc-stage {
  --glow: #f1c4ff;  /* the first skin's; mercury.js sets each one's */
  position: relative; margin-top: 32px; padding: 14px 16px 18px; overflow: hidden;
  background:
    radial-gradient(55% 60% at 50% 46%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 72%),
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--glow) 10%, transparent), transparent 60%),
    #070707;
  color: #f2f2f2; transition: background 0.6s;
}
.mc-stage .card-top span + span { color: #9c9c9c; }
.mc-stage-art { position: relative; height: clamp(260px, 52vw, 620px); margin: 6px 0 0; }
.mc-skin {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(10px) scale(0.97); pointer-events: none;
  transition: opacity 0.45s, transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.mc-skin.on { opacity: 1; transform: none; pointer-events: auto; }
.mc-skin picture { display: contents; }
.mc-skin img {
  max-width: min(100%, 860px); max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.55));
}
.mc-skin.on img { animation: mc-float 7s ease-in-out infinite; }
/* The live player: the frame sits over the skin's picture, sized to fit, and the player inside zooms to match
   (mercury.js). The page and the frame both use the normal colour scheme, so it stays see-through in dark mode. */
.mc-live-frame {
  position: absolute; border: 0; background: transparent; color-scheme: normal; opacity: 0; transition: opacity 0.5s;
}
.mc-skin.ready .mc-live-frame { opacity: 1; }
.mc-skin.ready img { opacity: 0; transition: opacity 0.5s; }
@keyframes mc-float { 50% { translate: 0 -8px; } }
.mc-stage-line { max-width: 60ch; min-height: 3em; margin: 8px auto 0; color: #b7b7b7; font-size: 13px; text-align: center; text-wrap: balance; }
.mc-stage-note { margin: 4px auto 0; color: #6f6f6f; font-size: 11px; letter-spacing: 0.02em; text-align: center; text-wrap: balance; }

.mc-thumbs {
  display: flex; gap: 6px; margin: 14px -16px -18px; padding: 10px 16px 14px; overflow-x: auto;
  border-top: 1px solid #1d1d1d; scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.mc-thumb {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; padding: 8px 6px 6px;
  border: 1px solid transparent; background: transparent; color: #8a8a8a; font-size: 10.5px; letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.mc-thumb img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.mc-thumb:hover { color: #f2f2f2; background: #111; }
.mc-thumb.on { color: #f2f2f2; border-color: #3a3a3a; background: #121212; }
.mc-thumb:focus-visible { outline: 1px solid #f2f2f2; outline-offset: -1px; }

/* ---------- features ---------- */
.mc-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.mc-feature { padding: 14px 16px 20px; }
.mc-feature h2 { margin: 44px 0 8px; font: 600 22px/1.05 var(--font-display); letter-spacing: -0.03em; }
.mc-feature p { margin: 0; color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }

/* ---------- shared bits ---------- */
.mc-kicker { margin: 0 0 10px; color: var(--ink-2); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.mc-head { margin: 0; font: 600 clamp(28px, 3.6vw, 52px)/0.95 var(--font-display); letter-spacing: -0.045em; }
.mc-section { margin-top: 72px; }
.mc-section > .mc-head { margin-bottom: 22px; }
.mc-dark { background: #070707; }
kbd {
  display: inline-block; min-width: 1.7em; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px;
  background: var(--card); font: 500 11px/1.6 var(--mono); text-align: center;
}
.mc-small { margin: 22px 0 0; color: var(--ink-3); font-size: 11px; }

/* ---------- the shelf ---------- */
.mc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); margin-top: 72px; }
.mc-split-art { display: flex; align-items: center; justify-content: center; padding: 28px; min-height: 420px;
  background: radial-gradient(60% 55% at 50% 45%, rgb(125 255 177 / 0.16), transparent 70%), #070707; }
.mc-split-art img { max-height: 620px; width: auto; filter: drop-shadow(0 26px 36px rgb(0 0 0 / 0.6)); }
.mc-split-text { display: flex; flex-direction: column; justify-content: center; padding: 28px clamp(16px, 4vw, 56px); background: var(--card); }
.mc-split-text .mc-head { margin-bottom: 22px; }
.mc-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.mc-steps li { position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; counter-increment: step; }
.mc-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 11px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--card); font: 600 12px/24px var(--font); text-align: center;
}
.mc-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; }

/* ---------- the Bismuth V2 demo (a silent loop, playing while it's on screen) ---------- */
.mc-split-art.mc-demo-art { background: #070707; }
.mc-demo-video { display: block; width: 100%; max-width: 620px; height: auto; aspect-ratio: 1; object-fit: cover; background: #111; }

/* ---------- install ---------- */
.mc-install { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.mc-step { display: flex; flex-direction: column; padding: 14px 16px 20px; }
.mc-step h3 { margin: 18px 0 8px; font: 600 20px/1.1 var(--font-display); letter-spacing: -0.03em; }
.mc-step p { margin: 0; color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
.mc-step p b { color: var(--ink); font-weight: 600; }
.mc-step-art {
  display: flex; align-items: center; justify-content: center; gap: 14px; height: 150px; margin-top: 12px;
  background: var(--page); border: 1px solid var(--line);
}
.mc-file, .mc-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-2); }
.mc-file {
  width: 56px; height: 68px; justify-content: center; border: 1px solid var(--ink); background: var(--card);
  color: var(--ink); font: 600 13px/1 var(--font-display); letter-spacing: 0.04em;
}
.mc-file small { position: absolute; margin-top: 98px; color: var(--ink-2); font: 400 10px/1 var(--font); letter-spacing: 0; }
.mc-file { position: relative; }
.mc-app img { width: 64px; height: 64px; }
.mc-arrow { color: var(--ink-3); font-size: 22px; }
.mc-mock {
  display: flex; flex-direction: column; gap: 8px; width: min(92%, 330px); padding: 12px;
  border-radius: 10px; background: var(--card); box-shadow: 0 10px 30px -14px var(--shade); font: 11px/1.35 -apple-system, system-ui, sans-serif;
}
.mc-mock-label { font-weight: 600; font-size: 12px; }
.mc-mock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.mc-mock-btn { flex: none; padding: 3px 10px; border-radius: 6px; background: #0a84ff; color: #fff; font-weight: 500; }
.mc-mock-stack .mc-mock-row + .mc-mock-row { padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- specs ---------- */
.mc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; }
.mc-specs { margin: 0; }
.mc-specs > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.mc-specs > div:last-child { border-bottom: 1px solid var(--line); }
.mc-specs dt { color: var(--ink-2); }
.mc-specs dd { margin: 0; line-height: 1.5; }

/* ---------- download ---------- */
.mc-download { margin-top: 72px; padding: 22px 20px 18px; background: var(--ink); color: var(--card); }
.mc-download .mc-kicker { color: color-mix(in srgb, var(--card) 62%, var(--ink)); }
.mc-download-main { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px; }
.mc-download-main > div { flex: 1; min-width: 220px; }
.mc-icon { width: 96px; height: 96px; }
.mc-download-sub { margin: 10px 0 0; color: color-mix(in srgb, var(--card) 70%, var(--ink)); }
.mc-download .mc-get, .mc-download .mc-get:hover { border-color: var(--dot); background: var(--dot); color: #0b0b0b; }
.mc-download .mc-get:hover { opacity: 0.85; }
.mc-heads-up { margin: 20px 0 0; padding: 12px 16px 14px; border-left: 3px solid var(--dot); background: color-mix(in srgb, var(--card) 7%, var(--ink)); }
.mc-heads-up .mc-kicker { margin-bottom: 6px; color: var(--dot); }
.mc-heads-up p:last-child { max-width: 80ch; margin: 0; color: color-mix(in srgb, var(--card) 80%, var(--ink)); line-height: 1.55; text-wrap: pretty; }
.mc-heads-up b { color: var(--card); font-weight: 600; }
.mc-download-req { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--card) 18%, var(--ink)); font-size: 12px; }
.mc-sha { display: flex; gap: 10px; margin: 8px 0 0; color: color-mix(in srgb, var(--card) 55%, var(--ink)); font-size: 10.5px; }
.mc-sha > span { flex: none; white-space: nowrap; }
.mc-sha code { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); -webkit-user-select: all; user-select: all; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .mc-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-install { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mc-split, .mc-two { grid-template-columns: minmax(0, 1fr); }
  .mc-split-art { min-height: 0; padding: 20px 12px; }
  .mc-split-art img { max-height: 460px; }
  .mc-features { grid-template-columns: minmax(0, 1fr); }
  .mc-feature h2 { margin-top: 24px; }
  .mc-specs > div { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .mc-thumb { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-skin, .mc-stage, .mc-live-frame { transition: none; }
  .mc-skin.on img { animation: none; }
}