/* The mastery banner: a display case for a mastered set. The set's logo and a
   "Set Master" ribbon on the left; the booster wrapper and the chase card
   standing on the case's shelf on the right, lit in the set's two colours.
   Markup comes from js/mastery-banner.js (masteryBannerHtml, bannerBlockHtml).

   Sizing is in container units (cqh, cqw) of the banner itself, so one set of
   rules reads at 68px (a picker thumbnail), 112px (a phone header), 164px (a
   desktop header) and 190px (the Mastery tab). The host gives the banner its
   height; everything else follows. Two container queries swap the head from a
   row to a column when the banner is squarer, and drop the plaque when it is
   too short to read. Colour comes from --b1 and --b2 like every banner.

   Cheap to paint: images are lazy, everything but the card's foil sheen is
   static, and the sheen is one transform on a layer clipped to the card. It is
   off under body.no-motion and prefers-reduced-motion (the band then rests at
   a fixed spot, so the card still looks foil). No blend modes, no SVG filters. */

.mbn {
  --bed: color-mix(in oklab, var(--b1, #f0c14b) 15%, #0a0910);
  --bed-2: color-mix(in oklab, var(--b2, #ff7a3d) 9%, #07060a);
  --lit-1: color-mix(in oklab, var(--b1, #f0c14b) 52%, #fff);
  --lit-2: color-mix(in oklab, var(--b1, #f0c14b) 78%, #fff);
  --lit-3: color-mix(in oklab, var(--b2, #ff7a3d) 58%, #fff);
  --cluster: 112cqh; /* how far in from the right the objects reach */
  position: relative; display: block; min-height: 44px; overflow: hidden; isolation: isolate;
  container-type: size; contain: paint;
  background: linear-gradient(180deg, var(--bed), var(--bed-2));
}

/* The lining of the case: engraved hatching, and rings spreading from behind the objects like a certificate border. */
.mbn-bed { position: absolute; inset: 0; z-index: 0; }
.mbn-bed {
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 6px);
}
.mbn-bed::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-radial-gradient(circle at calc(100% - 52cqh) 112%, color-mix(in oklab, var(--b1, #f0c14b) 34%, transparent) 0 1px, transparent 1px 2.2cqh);
  -webkit-mask-image: radial-gradient(ellipse 95cqh 125cqh at calc(100% - 52cqh) 112%, #000 20%, transparent 74%);
  mask-image: radial-gradient(ellipse 95cqh 125cqh at calc(100% - 52cqh) 112%, #000 20%, transparent 74%);
}

/* The card's own art, huge and dim, so the case is lit by the set rather than by a gradient. */
.mbn-haze {
  position: absolute; z-index: 1; top: 0; right: 0; width: 74cqw; height: 100%; object-fit: cover; object-position: 50% 24%;
  opacity: 0.5; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 62%);
}

/* Light: a pool under the objects, a dark ramp under the words, a cold edge along the top. */
.mbn-light {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bed) 0%, color-mix(in oklab, var(--bed) 70%, transparent) 30%, transparent 62%),
    radial-gradient(ellipse 78cqh 96cqh at calc(100% - 52cqh) 100%, color-mix(in oklab, var(--b1, #f0c14b) 62%, transparent), transparent 72%),
    radial-gradient(ellipse 70cqh 70cqh at 100% 0, color-mix(in oklab, var(--b2, #ff7a3d) 46%, transparent), transparent 76%);
}

/* A cone of light from above, onto the objects. */
.mbn-light::after {
  content: ""; position: absolute; top: 0; bottom: 8cqh; right: 12cqh; width: 92cqh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 88%);
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
}

/* The shelf the objects stand on. */
.mbn-floor {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 8cqh; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--b1, #f0c14b) 24%, #17140f), #08070a);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--b1, #f0c14b) 55%, #fff), 0 -1.4cqh 3cqh color-mix(in oklab, var(--b1, #f0c14b) 40%, transparent);
}

/* The wrapper, leaning on the card. */
.mbn-pack {
  position: absolute; z-index: 4; display: block; right: calc(11cqh + 48cqh); bottom: 7cqh; height: 78cqh; aspect-ratio: 180 / 323;
  transform: rotate(-5deg); transform-origin: 50% 100%;
}
.mbn-pack img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 1.2cqh 1.6cqh rgba(0, 0, 0, 0.62));
  pointer-events: none; user-select: none;
}

/* No wrapper (a promo set): the card's back, turned the other way. */
.mbn-back {
  position: absolute; z-index: 4; right: calc(11cqh + 42cqh); bottom: 7cqh; height: 70cqh; width: auto; aspect-ratio: 300 / 419;
  border-radius: 5% / 3.6%; transform: rotate(-7deg); transform-origin: 50% 100%;
  box-shadow: 0 1.2cqh 2cqh rgba(0, 0, 0, 0.6);
  pointer-events: none; user-select: none;
}

/* The chase card, whole, standing on the shelf with its edge lit. */
.mbn-card {
  position: absolute; z-index: 5; right: 11cqh; bottom: 7cqh; height: 84cqh; aspect-ratio: 300 / 419;
  border-radius: 5% / 3.6%; overflow: hidden; transform: rotate(3.5deg); transform-origin: 50% 100%;
  box-shadow: 0 0 0 0.3cqh rgba(255, 255, 255, 0.16), 0 1.4cqh 2.4cqh rgba(0, 0, 0, 0.66);
  pointer-events: none; user-select: none;
}
.mbn-card-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Foil: a still wash of the set's colours over the card, and a band of light that crosses it now and then. */
.mbn-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(128deg, transparent 18%, color-mix(in oklab, var(--b1, #f0c14b) 34%, transparent) 38%, color-mix(in oklab, var(--b2, #ff7a3d) 30%, transparent) 54%, rgba(255, 255, 255, 0.16) 66%, transparent 84%);
  opacity: 0.55;
}
.mbn-foil {
  position: absolute; inset: -10% auto -10% 0; width: 70%;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.5) 50%, transparent 82%);
  transform: translate3d(-130%, 0, 0) skewX(-18deg);
  will-change: transform;
  animation: mbn-foil 10s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
@keyframes mbn-foil {
  0%, 62% { transform: translate3d(-130%, 0, 0) skewX(-18deg); }
  100% { transform: translate3d(240%, 0, 0) skewX(-18deg); }
}

/* The head: logo, then the ribbon that says what it is. */
.mbn-head {
  position: absolute; z-index: 6; left: 6cqh; top: 11cqh; right: calc(var(--cluster) + 6cqh);
  display: flex; align-items: flex-start; gap: 3cqh 5cqh; min-width: 0; pointer-events: none;
}
.mbn-logo {
  flex: none; display: block; width: auto; height: 40cqh; max-width: min(34cqw, 120cqh); object-fit: contain; object-position: left center;
  filter: drop-shadow(0 0.5cqh 1.2cqh rgba(0, 0, 0, 0.78));
  pointer-events: none; user-select: none;
}
.mbn-plaque { align-self: center; display: grid; gap: 0.9cqh; justify-items: start; min-width: 0; max-width: 100%; }
/* A ribbon cut with a swallowtail, in foil. */
.mbn-rank {
  display: block; padding: 0.4em 1.5em 0.44em 0.75em;
  background: linear-gradient(100deg, var(--lit-1), var(--lit-2) 46%, var(--lit-3));
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.72em) 50%, 100% 100%, 0 100%);
  color: #16110a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  font: 800 clamp(10px, 11.5cqh, 21px) / 1 "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "opsz" 24, "wdth" 92; letter-spacing: 0.005em; white-space: nowrap;
}
.mbn-set {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  font: 700 clamp(11px, 12.5cqh, 23px) / 1.08 "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "opsz" 36; letter-spacing: -0.005em;
}
.mbn-count {
  display: none; color: rgba(255, 255, 255, 0.66); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  font: 520 clamp(10px, 8.5cqh, 14px) / 1.1 "Bricolage Grotesque", system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
@container (min-height: 130px) { .mbn-count { display: block; } }

/* Glass: a pane of reflection across the case. Still. */
.mbn-glass {
  position: absolute; z-index: 7; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.045) 38% 47%, transparent 47% 52%, rgba(255, 255, 255, 0.03) 52% 55%, transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ---- Squarer banners (a phone header, the Mastery tab on a phone): the logo takes the left, and the panel below says the rest ---- */
@container (max-aspect-ratio: 3 / 1) {
  .mbn-head { top: 10cqh; flex-direction: column; align-items: flex-start; gap: 4cqh; }
  .mbn-logo { height: clamp(32px, 23cqh, 46px); max-width: min(46cqw, 130cqh); }
  .mbn-plaque { display: none; }
}
/* Tall enough (a phone header): the ribbon stays, under the logo, well above where the header fades out. */
@container (max-aspect-ratio: 3 / 1) and (min-height: 160px) {
  .mbn-plaque { display: grid; align-self: flex-start; }
  .mbn-rank { font-size: clamp(11px, 8cqh, 16px); }
  .mbn-set, .mbn-count { display: none; }
}
/* ---- Very wide banners (a profile on a desktop): the objects come in off the edge so the case is not empty ---- */
@container (min-aspect-ratio: 5 / 1) {
  .mbn-pack { right: calc(11cqh + 48cqh + 9cqw); height: 78cqh; }
  .mbn-back { right: calc(11cqh + 42cqh + 9cqw); }
  .mbn-card { right: calc(11cqh + 9cqw); height: 86cqh; }
  .mbn-light::after { right: calc(12cqh + 9cqw); }
  .mbn-head { right: calc(var(--cluster) + 9cqw + 6cqh); top: 8cqh; gap: 3cqh 6cqh; }
  .mbn-logo { height: 48cqh; }
  .mbn-rank { font-size: clamp(11px, 13.5cqh, 26px); }
  .mbn-set { font-size: clamp(12px, 15.5cqh, 30px); }
  .mbn-count { font-size: clamp(11px, 9.5cqh, 15px); }
}
/* Too short for words. */
@container (max-height: 80px) { .mbn-plaque { display: none; } }

/* ---- No wrapper (promo sets): the back sits behind the card ----------------- */
.mbn[data-pack="0"] { --cluster: 86cqh; }

/* ---- No card art (a set that is not in set-chase.js yet) -------------------- */
.mbn[data-card="0"] .mbn-light {
  background:
    linear-gradient(90deg, var(--bed) 0%, transparent 70%),
    radial-gradient(ellipse 110cqh 120cqh at 78% 118%, color-mix(in oklab, var(--b1, #f0c14b) 70%, transparent), transparent 74%),
    radial-gradient(ellipse 90cqh 100cqh at 100% 0, color-mix(in oklab, var(--b2, #ff7a3d) 52%, transparent), transparent 76%);
}
.mbn[data-card="0"] .mbn-head { right: 6cqh; }

/* ---- Tile: logo, shelf and card. A shelf of these has to stay cheap. -------- */
.mbn[data-variant="tile"] { --cluster: 60cqh; }
.mbn[data-variant="tile"] .mbn-card { height: 80cqh; right: 8cqh; }
.mbn[data-variant="tile"] .mbn-head { top: 0; bottom: 8cqh; left: 8cqh; right: calc(var(--cluster) + 6cqh); align-items: center; }
.mbn[data-variant="tile"] .mbn-logo { height: 44cqh; max-width: 100%; }
.mbn[data-variant="tile"] .mbn-bed::before { display: none; }
.mbn[data-variant="tile"] .mbn-foil { display: none; }

/* ---- Hosts ------------------------------------------------------------------- */
.tip-banner.mbn { height: 84px; }
.tip-banner.mbn .mbn-plaque { display: none; }
/* A swatch holds still: the sheen rests across the card. */
.mbn.is-still .mbn-foil { animation: none; transform: translate3d(34%, 0, 0) skewX(-18deg); will-change: auto; }

/* ---- Motion off ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mbn-foil { animation: none; transform: translate3d(34%, 0, 0) skewX(-18deg); will-change: auto; }
}
body.no-motion .mbn-foil { animation: none; transform: translate3d(34%, 0, 0) skewX(-18deg); will-change: auto; }