/* ==========================================================================
   baskt-cards.css - "Signature Series S1" collectible card (contest winner c3)
   Markup: inject/baskt-cards.js (BasktCards.html). Textures: /assets/cards/
   (baked once by assets/cards/_src/bake.mjs - no runtime SVG generation).
   Outer node stays <article class="holo-card {rarity}[ mini]">; everything
   inside uses bkc-* names so the ~400 lines of legacy .holo-* CSS can't touch
   it, and the legacy rules that DO hit the outer node are neutralised below.
   Perf: minis = 1 baked background, no blend/filter/animation. Big cards: at
   rest 0 blend layers and a FLAT 2D paint (crisp print at 2x/3x); the 3D tilt
   and the holo fx stack only exist while .bkc-live (hover), one card at a time.
   Fonts: one non-blocking Google Fonts sheet injected by baskt-cards.js (no
   render-blocking @import here).
   ========================================================================== */

/* ---------------------------------------------------------------- tier tokens */
.holo-card.bkc.legendary {
  --c1: #fff3cc; --c2: #f4c862; --c3: #b4822a; --c4: #5c3c0c; --glow: 255,190,90; --ink: #2b1a03;
  --foil: linear-gradient(180deg,#fffbe8 0%,#ffe39a 26%,#d9a443 48%,#8c5f17 53%,#e9c06a 66%,#fff0c0 84%,#c99436 100%);
  --plate: linear-gradient(180deg,#fff6d6 0%,#f3d07e 30%,#c8963c 52%,#e8c272 70%,#fbe6ae 100%);
  --sky: url(/assets/cards/sky-legendary.webp); --frame: url(/assets/cards/frame-legendary.svg);
  --glass: url(/assets/cards/glass-legendary.webp); --crest: url(/assets/cards/crest-legendary.svg);
  --corona: url(/assets/cards/corona-legendary.webp); --foilplate: url(/assets/cards/foil-legendary.webp);
  --mini: url(/assets/cards/mini-legendary.webp);
  --tierfoil: url(/assets/cards/etch.webp) 0 0/100% 100%;
}
.holo-card.bkc.epic {
  --c1: #f0e6ff; --c2: #b993ff; --c3: #6c43e4; --c4: #2a1166; --c5: #3be3b4; --glow: 168,120,255; --ink: #1c0f44;
  --foil: linear-gradient(180deg,#ffffff 0%,#e6dcff 24%,#ae8cff 45%,#4f2db8 51%,#2fcf9f 58%,#d6fff0 80%,#a58cf2 100%);
  --plate: linear-gradient(180deg,#fbf8ff 0%,#d9c9ff 30%,#a184ec 52%,#9fe9d2 74%,#efe6ff 100%);
  --sky: url(/assets/cards/sky-epic.webp); --frame: url(/assets/cards/frame-epic.svg);
  --glass: url(/assets/cards/glass-epic.webp); --crest: url(/assets/cards/crest-epic.svg);
  --corona: url(/assets/cards/corona-epic.webp); --foilplate: url(/assets/cards/foil-epic.webp);
  --mini: url(/assets/cards/mini-epic.webp);
  --tierfoil: url(/assets/cards/cosmos.svg) 0 0/100% 100%;
}
.holo-card.bkc.rare {
  --c1: #e6f3ff; --c2: #93c8ff; --c3: #2f78dc; --c4: #0c2a5c; --glow: 96,164,255; --ink: #0a2142;
  --foil: linear-gradient(180deg,#ffffff 0%,#e3f0ff 26%,#9cc6f5 48%,#3c6aa8 53%,#8db8ec 66%,#f2f8ff 84%,#9db9dc 100%);
  --plate: linear-gradient(180deg,#ffffff 0%,#dcebff 30%,#9dbfe8 52%,#c9def7 72%,#f4f9ff 100%);
  --sky: url(/assets/cards/sky-rare.webp); --frame: url(/assets/cards/frame-rare.svg);
  --glass: url(/assets/cards/glass-rare.webp); --crest: url(/assets/cards/crest-rare.svg);
  --corona: url(/assets/cards/corona-rare.webp); --foilplate: url(/assets/cards/foil-rare.webp);
  --mini: url(/assets/cards/mini-rare.webp);
  /* bar holo: two fine, irregular pitches (1.1% / 1.7%) at low contrast - moiré, not blinds */
  --tierfoil: repeating-linear-gradient(90deg,#d2d2d2 0 .42%,#8e8e8e .62% .88%,#c4c4c4 1.1%),
              repeating-linear-gradient(90deg,#e4e4e4 0 .7%,#9a9a9a 1.05% 1.35%,#dadada 1.7%);
}

/* ---------------------------------------------------------------- outer node: neutralise legacy */
article.holo-card.bkc {
  position: relative; display: block; flex: 0 0 auto; container-type: inline-size; aspect-ratio: 5 / 7; height: auto; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; filter: none; overflow: visible;
  font-family: Barlow, var(--base-font, system-ui), sans-serif; text-align: left; color: #fff;
  perspective: none; will-change: auto; -webkit-tap-highlight-color: transparent;
}
article.holo-card.bkc.bkc-live { perspective: 1000px; }
article.holo-card.bkc::before { content: none; display: none; }
article.holo-card.bkc::after {           /* contact shadow on the table (flat gradient, no blur filter) */
  content: ""; position: absolute; top: auto; right: 7%; left: 7%; bottom: -4.5%; width: auto; height: 8%;
  z-index: -1; pointer-events: none; filter: none; border: 0;
  background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,.28) 55%, transparent);
}
article.holo-card.bkc * { box-sizing: border-box; }
.holo-card.bkc h3, .holo-card.bkc h4, .holo-card.bkc p { margin: 0; padding: 0; }

/* ==========================================================================
   BIG CARD (hero trio, reveal) - 250-unit master, --u = 1 design px
   ========================================================================== */
.holo-card.bkc:not(.mini) { --u: calc(100cqw / 250); }
/* At rest the card is painted FLAT (no preserve-3d, no translateZ, no layer) so the
   printed micro-type rasterises crisply at 2x/3x; thickness is a 2D stack of the two
   baked edge silhouettes. Only .bkc-live (pointer on the card) builds the 3D object. */
.bkc-card {
  --mx: 30%; --my: 12%; --px: 30; --py: 12; --lift: 0;
  --band: calc((var(--px) * .57 + var(--py) * .43) * 1%);
  position: absolute; inset: 0; transform-style: flat; transform: none;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.holo-card.bkc-live .bkc-card {
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--lift) * 1cqw)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.holo-card.bkc-hot .bkc-card { transition: transform .14s linear; --lift: 3.2; }
.bkc-edge { position: absolute; inset: 0; background: url(/assets/cards/edge-1.svg) 0 0/100% 100% no-repeat; pointer-events: none; }
.bkc-e1 { background-image: url(/assets/cards/edge-0.svg); transform: translate(calc(.9 * var(--u)), calc(1.3 * var(--u))); }
.bkc-e2 { transform: translate(calc(1.8 * var(--u)), calc(2.7 * var(--u))); }
.holo-card.bkc-live .bkc-e1 { transform: translateZ(-.9cqw); }
.holo-card.bkc-live .bkc-e2 { transform: translateZ(-1.8cqw); }
.bkc-face { position: absolute; inset: 0; }
.holo-card.bkc-live .bkc-face { transform: translateZ(0); }

/* art window */
.bkc-win {
  position: absolute; left: calc(9 * var(--u)); top: calc(9 * var(--u)); width: calc(232 * var(--u)); height: calc(332 * var(--u));
  overflow: hidden; background: #050506;
  clip-path: polygon(0 0, calc(100% - 13 * var(--u)) 0, 100% calc(13 * var(--u)), 100% 100%, calc(21 * var(--u)) 100%, 0 calc(100% - 21 * var(--u)));
}
.bkc-sky { position: absolute; inset: 0; background: var(--sky) 0 0/100% 100% no-repeat; }
.holo-card.bkc[data-art="light"] .bkc-sky { background-image: var(--foilplate); }

.bkc-art { position: absolute; left: 50%; top: 0; width: calc(232 * var(--u)); aspect-ratio: 1; transform: translateX(-50%); }
.bkc-art-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
/* eclipse - black-bg portrait is the moon; tier corona behind it */
.bkc-art--eclipse { width: calc(222 * var(--u)); top: calc(-1 * var(--u)); }
.bkc-art--eclipse::before { content: ""; position: absolute; inset: -6.5%; background: var(--corona) center/100% 100% no-repeat; }
/* orb - black-bg object feathered into space (alpha baked) */
.bkc-art--orb { width: calc(214 * var(--u)); top: calc(-4 * var(--u)); }
.bkc-art--orb::before { content: ""; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(var(--glow),.14) 55%, transparent 100%); }
/* float - transparent logo hovering over the starfield */
.bkc-art--float { width: calc(204 * var(--u)); top: calc(2 * var(--u)); }
.bkc-art--float::before { content: ""; position: absolute; inset: 6% 6% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow),.42), rgba(var(--glow),.12) 58%, transparent); }
/* full - illustration/photo full-bleed; bottom fade baked into the art */
.bkc-art--full { width: calc(232 * var(--u)); top: 0; }
.bkc-art--full .bkc-art-img { object-fit: cover; }
/* light - white-bg logo baked to un-multiplied ink (white = transparent): printed onto the tier
   foil with NORMAL blending (no runtime multiply, so no blend group to glitch under compositing) */
.bkc-art--light { width: calc(240 * var(--u)); top: calc(-6 * var(--u)); }
.bkc-art--light .bkc-art-img { object-fit: cover; }
/* port - flat-colour logos + unknown/remote logos: a chrome porthole at hero scale */
.bkc-art--port { width: calc(232 * var(--u)); height: calc(200 * var(--u)); aspect-ratio: auto; }
.bkc-art--port::before { content: ""; position: absolute; left: 50%; top: calc(98 * var(--u)); width: calc(210 * var(--u)); height: calc(210 * var(--u));
  transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--glow),.45), rgba(var(--glow),.12) 60%, transparent); }
.bkc-port {
  position: absolute; left: 50%; top: calc(16 * var(--u)); width: calc(164 * var(--u)); height: calc(164 * var(--u)); margin-left: calc(-82 * var(--u));
  border-radius: 50%; padding: calc(6 * var(--u));
  background: linear-gradient(150deg, #fff 0%, #8d95a3 28%, #f3f5f8 50%, #59616e 76%, #d8dde4 100%);
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(0,0,0,.8), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.7), inset 0 0 0 calc(1.6 * var(--u)) var(--c2);
}
.bkc-port-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 40% 30%, #26324a, #0a0d14);
  box-shadow: 0 0 0 calc(1.4 * var(--u)) var(--c3); }
.bkc-port::after { content: ""; position: absolute; inset: calc(6 * var(--u)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(110% 70% at 30% 8%, rgba(255,255,255,.42), rgba(255,255,255,0) 46%), radial-gradient(closest-side, transparent 80%, rgba(0,0,0,.45)); }

/* monogram fallback when a remote logo is missing/broken */
.bkc-noimg { background: radial-gradient(circle at 36% 28%, var(--c2), var(--c3) 55%, var(--c4)) !important; }
.bkc-noimg::before { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font: 800 calc(var(--fs, 60) * var(--u)) / 1 "Barlow Condensed", sans-serif; color: rgba(255,255,255,.92); text-shadow: 0 calc(1.5 * var(--u)) 0 rgba(0,0,0,.4); }
.bkc-port.bkc-noimg { --fs: 92; }
.bkc-art.bkc-noimg { background: none !important; }

/* glass rarity slab - engine-turned print + frosted, art bleeds behind its top */
.bkc-glass { position: absolute; left: 0; top: calc(188 * var(--u)); width: calc(232 * var(--u)); height: calc(144 * var(--u));
  background: var(--glass) 0 0/100% 100% no-repeat; }

/* info */
.bkc-info { position: absolute; inset: 0; font-size: calc(10 * var(--u)); line-height: 1; }
/* stat row: foil-stamped RARITY plate + recessed MCAP plate, side by side on one baseline */
.bkc-statrow { position: absolute; left: calc(12 * var(--u)); top: calc(216 * var(--u)); height: calc(19 * var(--u));
  display: flex; align-items: stretch; gap: calc(5 * var(--u)); }
.bkc-rar { position: relative; display: flex; align-items: center; gap: calc(3.6 * var(--u)); height: 100%;
  padding: 0 calc(6.5 * var(--u)) 0 calc(5.5 * var(--u)); border-radius: calc(2.4 * var(--u));
  font: 800 calc(9 * var(--u)) / 1 Barlow, sans-serif; letter-spacing: .11em; color: var(--ink);
  text-shadow: 0 calc(.6 * var(--u)) 0 rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%, rgba(0,0,0,.08) 54%, rgba(255,255,255,.2)), var(--plate);
  box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255,255,255,.6), inset 0 calc(-1 * var(--u)) 0 rgba(0,0,0,.24),
    0 0 0 calc(.9 * var(--u)) rgba(0,0,0,.72), 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.1), 0 calc(1.6 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6); }
.bkc-rar i { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); transform: rotate(45deg); flex: none;
  background: var(--ink); box-shadow: 0 calc(.6 * var(--u)) 0 rgba(255,255,255,.5); }

.holo-card.bkc .bkc-mcap.holo-stat {
  position: relative; height: 100%; margin: 0;
  display: flex; flex-direction: row; align-items: center; gap: calc(4.5 * var(--u)); line-height: 1;
  padding: 0 calc(6.5 * var(--u)) 0 calc(5.5 * var(--u)); border-radius: calc(2.4 * var(--u));
  border: calc(.8 * var(--u)) solid transparent;
  background: linear-gradient(180deg, #1a1b21, #0a0b0e) padding-box, linear-gradient(160deg, var(--c1), var(--c3) 42%, var(--c2) 68%, var(--c4)) border-box;
  box-shadow: inset 0 calc(.8 * var(--u)) 0 rgba(255,255,255,.12), 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6);
}
.holo-card.bkc .bkc-mcap.holo-stat em { font: 800 calc(6.6 * var(--u)) / 1 Barlow, sans-serif; letter-spacing: .14em; color: var(--c2); font-style: normal; }
.holo-card.bkc .bkc-mcap.holo-stat b { font: 700 calc(14 * var(--u)) / 1 "Barlow Condensed", sans-serif; letter-spacing: .01em; color: #fff; margin: 0;
  text-shadow: 0 calc(1 * var(--u)) 0 rgba(0,0,0,.6); }

/* foil-stamped, embossed text: shadow layer = element, foil = ::after */
.bkc-emb { position: absolute; color: transparent; margin: 0;
  text-shadow: 0 calc(-.5 * var(--u)) 0 rgba(255,255,255,.5), 0 calc(1.2 * var(--u)) 0 rgba(0,0,0,.9), 0 calc(2.5 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.55); }
.bkc-emb::after { content: attr(data-t); position: absolute; left: 0; top: 0; text-shadow: none;
  background: var(--efoil, var(--foil)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bkc-name { left: calc(10 * var(--u)); top: calc(244 * var(--u)); white-space: nowrap; letter-spacing: -.005em;
  font: 800 min(calc(54 * var(--u)), calc(290 * var(--u) / var(--len, 5))) / .86 "Barlow Condensed", sans-serif;
  --efoil: linear-gradient(180deg, #ffffff 0%, #f4f6fa 40%, #c3cad5 54%, #ffffff 76%, #d9dee6 100%); }
.holo-card.bkc.legendary .bkc-name { --efoil: var(--foil); }
.bkc-micro { position: absolute; left: calc(12 * var(--u)); top: calc(292 * var(--u)); white-space: nowrap;
  font: 700 calc(4.5 * var(--u)) / 1 "JetBrains Mono", monospace; letter-spacing: .18em; color: rgba(var(--glow), .7); }
.bkc-tag { position: absolute; left: calc(12 * var(--u)); top: calc(300 * var(--u)); max-width: calc(170 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 calc(10.5 * var(--u)) / 1.1 Barlow, sans-serif; color: rgba(255,255,255,.84); text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.7); }

.bkc-rcol { position: absolute; right: calc(12 * var(--u)); top: calc(194 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; }
.bkc-crest { position: relative; width: calc(22 * var(--u)); height: calc(26 * var(--u)); background: var(--crest) center/100% 100% no-repeat; margin-bottom: calc(5 * var(--u)); }
.bkc-crest i { position: absolute; left: 22%; top: 24%; width: 56%; height: 44%;
  -webkit-mask: url(/assets/baskt-mark.png) center/contain no-repeat; mask: url(/assets/baskt-mark.png) center/contain no-repeat;
  background: linear-gradient(180deg, #fff, var(--c2) 60%, var(--c3)); }
.bkc-ser { position: relative; display: flex; align-items: baseline; gap: calc(1.5 * var(--u)); }
.bkc-ser small { font: 700 calc(7 * var(--u)) / 1 "Barlow Condensed", sans-serif; letter-spacing: .06em; color: var(--c2); opacity: .9; }
.bkc-ser .bkc-emb { position: relative; font: 800 calc(26 * var(--u)) / .9 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.bkc-season { margin-top: calc(4 * var(--u)); font: 700 calc(5.6 * var(--u)) / 1 "JetBrains Mono", monospace; letter-spacing: .2em; color: rgba(255,255,255,.55); }

.bkc-seal { position: absolute; right: calc(12 * var(--u)); top: calc(294 * var(--u)); width: calc(17 * var(--u)); height: calc(17 * var(--u));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(calc(var(--px) * 1.8deg + 20deg), #ff7ac3, #ffd36b 20%, #8dffb0 38%, #6fd8ff 56%, #a98bff 74%, #ff7ac3 92%); }
.bkc-seal::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(60deg, rgba(255,255,255,.35) 0 calc(.5 * var(--u)), transparent calc(.5 * var(--u)) calc(1.3 * var(--u))); }
.bkc-seal i { position: absolute; inset: 24%; background: rgba(20,22,30,.72);
  -webkit-mask: url(/assets/baskt-mark.png) center/contain no-repeat; mask: url(/assets/baskt-mark.png) center/contain no-repeat; }
.bkc-fine { position: absolute; left: calc(24 * var(--u)); right: calc(10 * var(--u)); bottom: calc(6 * var(--u)); display: flex; justify-content: space-between; align-items: center;
  font: 500 calc(4.4 * var(--u)) / 1 "JetBrains Mono", monospace; letter-spacing: .14em; color: rgba(255,255,255,.4); white-space: nowrap; }
.bkc-fine::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-5 * var(--u)); height: calc(.6 * var(--u));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 20%, rgba(255,255,255,.16) 80%, transparent); }

/* frame + machined details */
.bkc-frame { position: absolute; inset: 0; background: var(--frame) 0 0/100% 100% no-repeat; pointer-events: none; }
.bkc-rail { position: absolute; left: calc(234.5 * var(--u)); top: calc(64 * var(--u)); width: calc(13 * var(--u)); height: calc(76 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u));
  font: 800 calc(6.2 * var(--u)) / 1 Barlow, sans-serif; letter-spacing: .26em; color: rgba(18,20,26,.86);
  text-shadow: 0 calc(.6 * var(--u)) 0 rgba(255,255,255,.65); }
.bkc-rail span { writing-mode: vertical-rl; }
.bkc-rail i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); flex: none; background: rgba(18,20,26,.86);
  -webkit-mask: url(/assets/baskt-mark.png) center/contain no-repeat; mask: url(/assets/baskt-mark.png) center/contain no-repeat; }
/* foil-stamped ticker plate (replaces the app pill) */
.bkc-tick { position: absolute; right: calc(25 * var(--u)); top: calc(16 * var(--u)); height: calc(14.5 * var(--u)); padding: 0 calc(6.5 * var(--u));
  display: flex; align-items: center; border-radius: calc(2 * var(--u));
  font: 800 calc(8 * var(--u)) / 1 Barlow, sans-serif; letter-spacing: .08em; color: var(--ink); text-shadow: 0 calc(.6 * var(--u)) 0 rgba(255,255,255,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 48%, rgba(0,0,0,.06) 52%, rgba(255,255,255,.18)), var(--plate);
  box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(255,255,255,.55), inset 0 calc(-.9 * var(--u)) 0 rgba(0,0,0,.22), 0 0 0 calc(.6 * var(--u)) rgba(0,0,0,.55), 0 calc(1.6 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.6); }

/* rest-light: a static gloss coat (normal blending - free to composite) */
.bkc-gloss { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/assets/cards/mask-sil.svg) 0 0/100% 100% no-repeat; mask: url(/assets/cards/mask-sil.svg) 0 0/100% 100% no-repeat;
  background: linear-gradient(126deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 16%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 64%, rgba(255,255,255,.035) 76%, rgba(255,255,255,0) 88%); }

/* coin medallion overlapping the top edge */
.bkc-medal { position: absolute; left: calc(1 * var(--u)); top: calc(-15 * var(--u)); width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: 50%;
  background: url(/assets/cards/medal.svg) center/100% 100% no-repeat;
  box-shadow: 0 calc(5 * var(--u)) calc(9 * var(--u)) rgba(0,0,0,.7), 0 0 0 calc(.7 * var(--u)) rgba(0,0,0,.55); }
.holo-card.bkc-live .bkc-medal { transform: translateZ(calc(var(--lift) * 1cqw)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bkc-medal::before { content: ""; position: absolute; inset: calc(7.5 * var(--u)); border-radius: 50%;
  background: linear-gradient(160deg, var(--c1), var(--c2) 35%, var(--c3) 70%, var(--c4)); box-shadow: 0 0 calc(5 * var(--u)) rgba(var(--glow),.55); }
.bkc-mface { position: absolute; inset: calc(10 * var(--u)); border-radius: 50%; overflow: hidden; background: #0b0c10; --fs: 24; }
.bkc-mface-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bkc-mface::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background: radial-gradient(120% 80% at 32% 12%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 32%, rgba(255,255,255,0) 46%), radial-gradient(closest-side, transparent 78%, rgba(0,0,0,.5) 100%);
  box-shadow: inset 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.7); }

/* ---------------------------------------------------------------- holo fx - hover only */
.bkc-fx { display: none; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.holo-card.bkc-live .bkc-fx { display: block; }
.bkc-fx-sheen, .bkc-fx-glitter { left: calc(9 * var(--u)); top: calc(9 * var(--u)); width: calc(232 * var(--u)); height: calc(332 * var(--u)); inset: auto; }
/* tier foil (etched contour / cosmos discs / bar holo) lit by a refractor band near the light; kept off the face */
.bkc-fx-sheen {
  clip-path: polygon(0 0, calc(100% - 13 * var(--u)) 0, 100% calc(13 * var(--u)), 100% 100%, calc(21 * var(--u)) 100%, 0 calc(100% - 21 * var(--u)));
  background:
    var(--tierfoil),
    linear-gradient(118deg, transparent calc(var(--band) - 26%), #ff3d9a calc(var(--band) - 17%), #ffb13b calc(var(--band) - 11%), #c9ff45 calc(var(--band) - 5%), #3dffb0 var(--band), #3cc4ff calc(var(--band) + 5%), #8a5cff calc(var(--band) + 11%), transparent calc(var(--band) + 19%)),
    radial-gradient(circle at var(--mx) var(--my), #fff 0%, #9a9a9a 32%, #3a3a3a 72%);
  background-blend-mode: multiply; mix-blend-mode: color-dodge;
  -webkit-mask: radial-gradient(circle at 50% 33%, transparent 0 13%, rgba(0,0,0,.55) 20%, #000 29%); mask: radial-gradient(circle at 50% 33%, transparent 0 13%, rgba(0,0,0,.55) 20%, #000 29%);
}
.holo-card.bkc[data-art="full"] .bkc-fx-sheen {
  -webkit-mask: radial-gradient(ellipse 34% 26% at 50% 30%, transparent 0 40%, #000 100%); mask: radial-gradient(ellipse 34% 26% at 50% 30%, transparent 0 40%, #000 100%); }
/* light art (SON…): the subject fills the whole art area - keep the foil on the info slab only */
.holo-card.bkc[data-art="light"] .bkc-fx-sheen {
  -webkit-mask: linear-gradient(180deg, transparent 0 52%, #000 61%); mask: linear-gradient(180deg, transparent 0 52%, #000 61%); }
/* RARE bar holo: only a lit patch of bars around the pointer, intersected with the face hole */
.holo-card.bkc.rare .bkc-fx-sheen {
  -webkit-mask: radial-gradient(38% 30% at var(--mx) var(--my), #000, transparent 75%), radial-gradient(circle at 50% 33%, transparent 0 15%, rgba(0,0,0,.55) 22%, #000 30%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(38% 30% at var(--mx) var(--my), #000, transparent 75%), radial-gradient(circle at 50% 33%, transparent 0 15%, rgba(0,0,0,.55) 22%, #000 30%);
  mask-composite: intersect; }
.holo-card.bkc.rare[data-art="light"] .bkc-fx-sheen {
  -webkit-mask: radial-gradient(38% 30% at var(--mx) var(--my), #000, transparent 75%), linear-gradient(180deg, transparent 0 52%, #000 61%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(38% 30% at var(--mx) var(--my), #000, transparent 75%), linear-gradient(180deg, transparent 0 52%, #000 61%);
  mask-composite: intersect; }
.bkc-fx-glitter { background: url(/assets/cards/glitter.svg) 0 0/100% 100% no-repeat;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 18%, transparent 40%); mask: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 18%, transparent 40%);
  mix-blend-mode: color-dodge; }
.bkc-fx-frame {
  -webkit-mask: url(/assets/cards/mask-frame.svg) 0 0/100% 100% no-repeat; mask: url(/assets/cards/mask-frame.svg) 0 0/100% 100% no-repeat;
  background: repeating-linear-gradient(118deg, #ff6fb4 0%, #ffcf5a 3%, #7dff9b 6%, #56e3ff 9%, #8b7bff 12%, #ff6fb4 15%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my), #fff 0%, #c8c8c8 14%, #6e6e6e 34%, #2a2a2a 58%, #141414 80%);
  background-size: 260% 260%, 100% 100%; background-position: calc(var(--px) * 1%) calc(var(--py) * 1%), 0 0;
  background-blend-mode: multiply; mix-blend-mode: color-dodge; }
.bkc-fx-bloom {     /* the specular hotspot on the gloss coat - no streak across the face */
  -webkit-mask: url(/assets/cards/mask-sil.svg) 0 0/100% 100% no-repeat; mask: url(/assets/cards/mask-sil.svg) 0 0/100% 100% no-repeat;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.62) 0%, rgba(255,248,235,.3) 9%, rgba(255,255,255,.08) 24%, transparent 42%);
  mix-blend-mode: screen; }
.holo-card.bkc-hot .bkc-fx-sheen { opacity: .8; }
.holo-card.bkc-hot .bkc-fx-glitter { opacity: .85; }
.holo-card.bkc-hot .bkc-fx-frame { opacity: 1; }
.holo-card.bkc-hot .bkc-fx-bloom { opacity: 1; }
.holo-card.bkc.legendary.bkc-hot .bkc-fx-sheen { opacity: .9; }
.holo-card.bkc.rare.bkc-hot .bkc-fx-sheen { opacity: .55; }

/* ---------------------------------------------------------------- homepage trio ("Open your packs")
   A flat 2D fan (the rest pose stays crisp): no scale() anywhere - the centre card is
   simply wider and the hover lifts instead of upscaling a raster. The fan is sized to
   its column: ≥960 it sits absolutely in the right column, <960 it flows under the CTA. */
.baskt-holo-trio .holo-card.bkc { --cw: clamp(176px, 15vw, 232px); width: var(--cw); cursor: pointer; }
.baskt-holo-trio .holo-card.bkc:nth-child(1) { transform: rotate(-9deg) translateY(16px); }
.baskt-holo-trio .holo-card.bkc:nth-child(2) { width: calc(var(--cw) * 1.07); margin: 0 calc(var(--cw) * -.065); transform: translateY(-26px); }
.baskt-holo-trio .holo-card.bkc:nth-child(3) { transform: rotate(9deg) translateY(16px); }
.baskt-holo-trio .holo-card.bkc:hover { transform: translateY(-34px); z-index: 6; }
.baskt-holo-trio.deck:not(.is-dealt) .holo-card.bkc:nth-child(2) { transform: translateY(44px); }
@media (min-width: 960px) {
  /* no translateX: the fan stays inside the section panel (side cards overhang ~0.2 × width) */
  .baskt-holo-trio.baskt-pack-trio { transform: none; right: clamp(36px, calc(4vw - 14px), 56px); }
  /* keep the lead copy a compact column so it never runs under the fan */
  .sc-kEUgoD:has(> .baskt-holo-trio) > :first-child > :nth-child(2) { max-width: 36ch; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .sc-kEUgoD:has(> .baskt-holo-trio) > :first-child > :nth-child(2) { max-width: 30ch; }
}
/* tablets / phones: the fan flows below the CTA (never over the copy) and fits the gutters */
@media (max-width: 959px) {
  .baskt-holo-trio.baskt-pack-trio { height: auto; margin: 28px auto 0; padding: 34px 0 40px; transform: none; }
  .baskt-holo-trio .holo-card.bkc { --cw: clamp(150px, 26vw, 200px); }
  .baskt-holo-trio .holo-card.bkc:nth-child(2) { margin: 0 calc(var(--cw) * -.065); }
}
@media (max-width: 600px) {
  .baskt-holo-trio .holo-card.bkc { --cw: 29vw; }
  .baskt-holo-trio .holo-card.bkc:nth-child(1) { transform: rotate(-5deg) translateY(18px); }
  .baskt-holo-trio .holo-card.bkc:nth-child(2) { margin: 0 -2.5vw; transform: translateY(-24px); }
  .baskt-holo-trio .holo-card.bkc:nth-child(3) { transform: rotate(5deg) translateY(18px); }
  .baskt-holo-trio .holo-card.bkc:hover { transform: translateY(-30px); }
}

/* ---------------------------------------------------------------- homepage first fold (index.html .bkh)
   Five live Signature cards in two tilted clusters over the pool photo (replaces the old
   pre-rendered PNGs). Rest = flat 2D paint, 0 blend layers, no filters: the lift off the photo
   is a static box-shadow plate under each card + one dark radial halo per cluster. Holo fx and
   3D tilt come from the shared pointer handler (one card at a time, hover only).
   Card slots are keyed by data-sym (BasktCards.upgrade rewrites className, never data-sym).
   ≥960: clusters sit left/right of the centred copy + form, sized to the free side space
   (50vw − 245px) so they never run under the subtitle or the form. <960: one fanned hand in
   normal flow above the headline (never over the copy). */
/* z 11: the headline block is a flex item with z-index 10 spanning the whole hero top - it would
   swallow the hover on the upper half of the cards (nothing overlaps visually; the sticky site
   header lives in a higher stacking context, so the cards never paint over it) */
.bkh { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.bkh-group { position: absolute; width: clamp(240px, calc(50vw - 245px), 470px); aspect-ratio: 1; container-type: inline-size; }
/* below ~1360px the centred subtitle reaches the left cluster's column: step the cluster down.
   Past ~1500px the clusters stop hugging the window edges and stay ~48px off the 424px form. */
.bkh-left { left: max(2.5vw, calc(50vw - 730px)); top: calc(124px + max(0px, (1360px - 100vw) * .3)); }
.bkh-right { right: max(2vw, calc(50vw - 730px)); top: 218px; }
.bkh-group::before { content: ""; position: absolute; inset: -6% -9% -2%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.46), rgba(0,0,0,.2) 62%, rgba(0,0,0,0)); }
.bkh .holo-card.bkc {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; pointer-events: auto; cursor: default;
  transform: rotate(var(--r)); transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.bkh .holo-card.bkc:hover { z-index: 6; transform: rotate(var(--r)) translateY(-1.6cqw); }
/* lift plate: soft static shadow under the card (dark fill covers the chamfer notches) */
.bkh article.holo-card.bkc::before {
  content: ""; display: block; position: absolute; left: 3%; right: 2.5%; top: 2.5%; bottom: 2%; z-index: -1; pointer-events: none;
  border-radius: 5cqw; background: rgba(0,0,0,.42);
  box-shadow: 0 0 9cqw 1cqw rgba(0,0,0,.5), 0 9cqw 16cqw rgba(0,0,0,.55);
}
.bkh article.holo-card.bkc::after { bottom: -6%; height: 10%; }
/* left: MEW in front at the bottom of the pile, below TROLL's name and left of ZEREBRO's;
   right: CATE overlaps ANSEM's rail. Every left-aligned name stays readable. */
.bkh [data-sym="TROLL"]   { --w: 41cqw; --x: 0cqw;  --y: -3cqw; --r: -7deg;   z-index: 1; }
.bkh [data-sym="ZEREBRO"] { --w: 38cqw; --x: 55cqw; --y: 19cqw; --r: 7deg;    z-index: 2; }
.bkh [data-sym="MEW"]     { --w: 37cqw; --x: 16.5cqw; --y: 47.5cqw; --r: -2.5deg; z-index: 3; }
.bkh [data-sym="ANSEM"]   { --w: 52cqw; --x: 5cqw;  --y: 6cqw;  --r: -4deg;   z-index: 1; }
.bkh [data-sym="CATE"]    { --w: 39cqw; --x: 57cqw; --y: 17cqw; --r: 6deg;    z-index: 2; }
@media (max-width: 959px) {
  .bkh { position: relative; inset: auto; width: calc(100% - 44px); max-width: 560px; margin: 26px auto 4px; aspect-ratio: 100 / 58; container-type: inline-size; }
  .bkh-group { display: contents; }
  .bkh-group::before { content: none; }
  .bkh::before { content: ""; position: absolute; inset: -8% -6% -4%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,.16) 64%, rgba(0,0,0,0)); }
  /* a held hand: each card overlaps its left neighbour's right edge, names stay readable */
  .bkh [data-sym="TROLL"]   { --w: 27cqw;   --x: 0cqw;    --y: 12cqw;  --r: -13deg;  z-index: 1; }
  .bkh [data-sym="MEW"]     { --w: 28cqw;   --x: 16.5cqw; --y: 5.5cqw; --r: -6.5deg; z-index: 2; }
  .bkh [data-sym="ANSEM"]   { --w: 35cqw;   --x: 31.5cqw; --y: 1.5cqw; --r: 0deg;    z-index: 3; }
  .bkh [data-sym="ZEREBRO"] { --w: 28cqw;   --x: 57.5cqw; --y: 5.5cqw; --r: 6.5deg;  z-index: 4; }
  .bkh [data-sym="CATE"]    { --w: 26.5cqw; --x: 74.5cqw; --y: 12cqw;  --r: 12deg;   z-index: 5; }
}

/* ==========================================================================
   MINI (marquee / reveal / wallet) - 116 px, one baked background
   ========================================================================== */
article.holo-card.bkc.mini {
  --u: calc(100cqw / 116);
  width: 116px; flex: 0 0 auto; isolation: isolate; perspective: none; filter: none; animation: none; will-change: auto;
  background: var(--mini) 0 0/100% 100% no-repeat; cursor: default;
}
article.holo-card.bkc.mini::after { bottom: -5%; height: 9%; left: 8%; right: 8%; background: radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,.2) 60%, transparent); }
.bkc-m-coin {
  position: absolute; left: 50%; top: calc(8 * var(--u)); width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin-left: calc(-32 * var(--u));
  border-radius: 50%; padding: calc(3.2 * var(--u)); --fs: 34;
  background: linear-gradient(150deg, #ffffff 0%, #8d95a3 30%, #f3f5f8 52%, #59616e 78%, #d8dde4 100%);
  box-shadow: 0 0 0 calc(.8 * var(--u)) rgba(0,0,0,.75), 0 0 calc(14 * var(--u)) rgba(var(--glow),.5), 0 calc(4 * var(--u)) calc(7 * var(--u)) rgba(0,0,0,.7);
}
.bkc-m-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 40% 30%, #26324a, #0a0d14); box-shadow: 0 0 0 calc(1.2 * var(--u)) var(--c3); }
.bkc-m-coin::after { content: ""; position: absolute; inset: calc(3.2 * var(--u)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(110% 70% at 30% 10%, rgba(255,255,255,.45), rgba(255,255,255,0) 45%); }
.bkc-m-coin.bkc-noimg::before { inset: calc(3.2 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 36% 28%, var(--c2), var(--c3) 55%, var(--c4)); }
.bkc-m-tick { position: absolute; left: 50%; top: calc(66 * var(--u)); transform: translateX(-50%); z-index: 2; height: calc(11 * var(--u)); padding: 0 calc(4 * var(--u));
  display: flex; align-items: center; border-radius: calc(2 * var(--u)); white-space: nowrap;
  font: 800 calc(7 * var(--u)) / 1 Barlow, sans-serif; letter-spacing: .04em; color: var(--ink);
  background: var(--plate); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255,255,255,.6), 0 0 0 calc(.5 * var(--u)) rgba(0,0,0,.5), 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.55); }
.bkc-m-ser { position: absolute; right: calc(9 * var(--u)); top: calc(87 * var(--u)); font: 800 calc(9 * var(--u)) / 1 "Barlow Condensed", sans-serif; letter-spacing: .03em; color: var(--c2); }
.holo-card.bkc.mini .bkc-mcap.holo-stat { position: absolute; left: calc(8 * var(--u)); top: calc(92.5 * var(--u)); height: calc(13.5 * var(--u)); margin: 0;
  display: flex; flex-direction: row; align-items: center; gap: calc(3 * var(--u)); line-height: 1; padding: 0 calc(4 * var(--u)) 0 calc(3.5 * var(--u));
  border-width: calc(.6 * var(--u)); border-radius: calc(2 * var(--u)); box-shadow: inset 0 calc(.6 * var(--u)) 0 rgba(255,255,255,.12); }
.holo-card.bkc.mini .bkc-mcap.holo-stat em { font: 700 calc(7 * var(--u)) / 1 Barlow, sans-serif; letter-spacing: .12em; color: rgba(255,255,255,.62); font-style: normal; }
.holo-card.bkc.mini .bkc-mcap.holo-stat b { font: 700 calc(12 * var(--u)) / 1 "Barlow Condensed", sans-serif; color: #fff; margin: 0; }
.bkc-m-name { position: absolute; left: calc(8 * var(--u)); top: calc(108 * var(--u)); white-space: nowrap; letter-spacing: 0;
  font: 800 min(calc(25 * var(--u)), calc(132 * var(--u) / var(--len, 5))) / .88 "Barlow Condensed", sans-serif; color: #fff;
  text-shadow: 0 calc(1 * var(--u)) 0 rgba(0,0,0,.85); }
.bkc-m-tag { position: absolute; left: calc(9 * var(--u)); top: calc(131.5 * var(--u)); max-width: calc(98 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 calc(7 * var(--u)) / 1.1 Barlow, sans-serif; color: rgba(255,255,255,.8); }
.bkc-m-rar { position: absolute; left: calc(16 * var(--u)); top: calc(144.5 * var(--u)); display: flex; align-items: center; gap: calc(3 * var(--u));
  font: 800 calc(7 * var(--u)) / 1 Barlow, sans-serif; letter-spacing: .16em; color: var(--c1); }
.bkc-m-rar::before { content: ""; width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); transform: rotate(45deg); background: linear-gradient(135deg, #fff, var(--c2), var(--c3)); }

/* ---------------------------------------------------------------- reveal + wallet contexts (neutralise legacy filters on minis) */
.bp-pull.is-new .holo-card.bkc.mini { animation: bkc-pop .62s cubic-bezier(.2,1.3,.35,1) .05s both; filter: none; }
@keyframes bkc-pop { 0% { transform: scale(.94); } 45% { transform: scale(1.06); } 100% { transform: none; } }
.bp-pull.is-dup .holo-card.bkc.mini { filter: none; opacity: .9; }
.bd-coin:hover .holo-card.bkc.mini { filter: none; }
.baskt-mq-track .holo-card.bkc.mini { margin-right: clamp(12px, 1.3vw, 20px); }

/* face-down card in the pack-opening reveal: the baked Baskt card back */
.bp-pull .holo-back:not(.failed) {
  width: 116px; aspect-ratio: 5 / 7; border: 0; border-radius: 0; overflow: visible; box-shadow: none;
  background: url(/assets/cards/back-mini.webp) 0 0/100% 100% no-repeat;
}
.bp-pull .holo-back:not(.failed) > * { display: none; }
.bp-pull .holo-back:not(.failed)::after { content: none; display: none; animation: none; }
.bp-pull.pending .holo-back:not(.failed) { animation: bkc-back-bob 1.4s ease-in-out infinite; }
@keyframes bkc-back-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }


/* ==========================================================================
   PACK-OPENING THEATRE - the revealed coin lands as a big Signature card
   ========================================================================== */
/* tap-through reveal (signature pack / baskets): card flips over from its printed back */
.theatre-card.bkc-tc {
  width: auto; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  transform: none; opacity: 1; transition: none; animation: none !important;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.theatre-card.bkc-tc .tc-halo { inset: -6% -40% 10%; }
.bkc-tc-flip { position: relative; z-index: 2; transform-style: preserve-3d; transform: rotateY(-180deg) scale(.6); opacity: 0;
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
.theatre-card.bkc-tc.flip-in .bkc-tc-flip { transform: none; opacity: 1; }
.bkc-tc-flip > article.holo-card.bkc { width: min(360px, 70vw, calc((100vh - 260px) / 1.4)); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* the legacy stage grid stretches its rows (660/204 at 900px) and parks the card high above
   the prompt - size rows to content and centre card + band + prompt as one group */
.baskt-theatre .theatre-stage.stage-card:has(> .theatre-card.bkc-tc) { align-content: center; gap: 30px; }
.bkc-tc-back { position: absolute; inset: 0; transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none;
  background: url(/assets/cards/back-hero.webp) 0 0/100% 100% no-repeat; }
.theatre-card.bkc-tc .tc-rar-band, .theatre-card.bkc-tc .tc-payline { position: relative; z-index: 3; opacity: 0; transform: translateY(8px); transition: opacity .5s ease .55s, transform .5s ease .55s; }
.theatre-card.bkc-tc.flip-in .tc-rar-band, .theatre-card.bkc-tc.flip-in .tc-payline { opacity: 1; transform: none; }

/* opening-tier reveal (rv2): tier tag, the card, then a receipt strip with the SOL value */
.rv2-card.bkc-rv2 {
  width: auto; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; padding: 0; gap: 10px;
  filter: none !important;
  animation: rv2-card-in 1100ms cubic-bezier(.14,.9,.2,1) 600ms both, bkc-rv2-breathe 3.4s ease-in-out 1700ms infinite alternate;
}
@keyframes bkc-rv2-breathe { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.rv2-card.bkc-rv2 .rv2-card-halo { inset: -4% -45% 18%; }
.rv2-card.bkc-rv2 .rv2-tier { margin-bottom: 14px; }
.bkc-rv2-slot { position: relative; z-index: 4; }
.bkc-rv2-slot > article.holo-card.bkc { width: min(264px, 62vw, calc((100vh - 360px) / 1.4)); }
.bkc-rv2-strip { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
.bkc-rv2-chg { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.bkc-rv2-chg b { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .bkc-card, .bkc-medal { transition: none; }
  .bp-pull.pending .holo-back:not(.failed) { animation: none; }
  .bkc-tc-flip { transition: opacity .3s ease; }
  .rv2-card.bkc-rv2 { animation: none; }
}