/* assets/mcard.css · the member-card object (build spec C4.1, round 1, 30 Oct 2026)
   A small physical "membership card" at the top of each paid membership card: ID-1 shape (1.586), one registered duo
   per tier, the RIVET on-dark mark (its magenta ® does not count toward the page's magenta), the tier and the term.
   Duos and safe regions (Brand OS v1.2):
     Pro       Command  black → cyan, 135deg, 40% hold: white text kept top-left (body text, anchor two-thirds)
     Infinite  Prestige black → gold, 135deg, 40% hold: white text kept top-left (anchor two-thirds)
     Max       Depth    black → purple, 135deg, 40% hold: full field safe for white text (owner, 30 Oct 2026)
     Teams     Graphite black → slate, full field (kept for /plans/teams; /pricing has no Teams card since 30 Oct 2026)
     Live      Honor    purple → gold, 135deg, 40% hold: white text kept top-left (anchor two-thirds)
   The text block sits in the top-left 60% of the gradient line, so it never reaches the light end.
   Cards have no border, and this object has no ring: its duo separates it from the ground.
   Motion (assets/mcard.js): rises 12px and fades in once on first view (560ms emphasized); tilts up to 6deg after a fine
   pointer (320ms standard), and resets on leave. Touch and reduced motion: no rise, no tilt. */

.mcardobj{
  --mc-tilt-x:0deg; --mc-tilt-y:0deg;
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr; column-gap:12px; row-gap:2px;
  align-content:start; width:100%; max-width:240px; aspect-ratio:1.586; padding:16px; border-radius:12px;
  color:var(--on-duo-ink, #fff); overflow:hidden; isolation:isolate;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 18px 32px -18px rgba(0,0,0,.55);
  transform:perspective(700px) rotateX(var(--mc-tilt-x)) rotateY(var(--mc-tilt-y));
  transform-style:preserve-3d;
  transition:transform var(--dur-base, 320ms) var(--ease-standard, cubic-bezier(.2,0,0,1)),
             opacity var(--dur-slow, 560ms) var(--ease-emphasized, cubic-bezier(.3,0,0,1)),
             translate var(--dur-slow, 560ms) var(--ease-emphasized, cubic-bezier(.3,0,0,1));
  -webkit-user-select:none; user-select:none;
}
.mcardobj__mark{ grid-row:1 / span 2; width:26px; height:auto; display:block; }
.mcardobj__tier{ align-self:end; font:600 14px/1.2 var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--on-duo-ink, #fff); }
.mcardobj__term{ align-self:start; color:var(--on-duo-ink, #fff); }   /* two short lines (a <br> in the markup), so the text block stays in the dark anchor */
/* the contactless-chip cue: a scrim rectangle, bottom-left (inside the black hold on every duo) */
.mcardobj__chip{ position:absolute; inset-inline-start:16px; inset-block-end:16px; width:28px; height:20px; border-radius:4px; background:var(--scrim, rgba(0,0,0,.55)); }
.mcardobj__chip::before, .mcardobj__chip::after{ content:""; position:absolute; inset-inline:0; height:1px; background:rgba(255,255,255,.18); }
.mcardobj__chip::before{ inset-block-start:7px; }
.mcardobj__chip::after{ inset-block-end:7px; }

.mcardobj--pro{      background:linear-gradient(135deg, var(--black, #000) 0 40%, var(--cyan, #4CF3FE) 100%); }
.mcardobj--infinite{ background:linear-gradient(135deg, var(--black, #000) 0 40%, var(--gold, #F5C24B) 100%); }
.mcardobj--teams{    background:linear-gradient(135deg, var(--black, #000), var(--slate, #4A4A68)); }
.mcardobj--live{     background:linear-gradient(135deg, var(--purple, #3B06D4) 0 40%, var(--gold, #F5C24B) 100%); }
.mcardobj--live .mcardobj__chip{ background:rgba(0,0,0,.32); }
/* Live (Honor duo): the mark's magenta ® on the purple anchor is about 2.9:1, under the 3:1 a magenta on a duo needs.
   A scrim chip behind the mark puts it on near-black (about 5:1). The other three objects hold black under the mark. */
.mcardobj--live .mcardobj__mark{ box-sizing:content-box; padding:5px; margin-block-start:-5px; margin-inline-start:-5px; border-radius:6px; background:var(--scrim, rgba(0,0,0,.55)); }

/* right to left: mirror the duo so the anchor sits under the text, which starts on the right */
[dir="rtl"] .mcardobj--pro{      background:linear-gradient(225deg, var(--black, #000) 0 40%, var(--cyan, #4CF3FE) 100%); }
[dir="rtl"] .mcardobj--infinite{ background:linear-gradient(225deg, var(--black, #000) 0 40%, var(--gold, #F5C24B) 100%); }
[dir="rtl"] .mcardobj--teams{    background:linear-gradient(225deg, var(--black, #000), var(--slate, #4A4A68)); }
[dir="rtl"] .mcardobj--live{     background:linear-gradient(225deg, var(--purple, #3B06D4) 0 40%, var(--gold, #F5C24B) 100%); }
:lang(ar) .mcardobj__tier{ letter-spacing:0; }

/* first-view rise: mcard.js adds .mc-pre only to objects that start below the fold, then removes it on view */
.mcardobj.mc-pre, .mc-rise.mc-pre{ opacity:0; translate:0 12px; }
.mc-rise{ transition:opacity var(--dur-slow, 560ms) var(--ease-emphasized, cubic-bezier(.3,0,0,1)), translate var(--dur-slow, 560ms) var(--ease-emphasized, cubic-bezier(.3,0,0,1)); }
.mc-rise.mc-pre{ translate:0 16px; }

@media (prefers-reduced-motion:reduce){
  .mcardobj, .mc-rise{ transition:none; transform:none; }
  .mcardobj.mc-pre, .mc-rise.mc-pre{ opacity:1; translate:none; }
}

/* Max (owner, 30 Oct 2026): the Depth duo, black -> purple, the registered "authority" duo. Depth is full-field safe for white ink,
   so the text needs no hold; the 40% black hold keeps the mark's magenta (R) on black (>= 3:1) and separates it from Pro's Command
   and Infinite's Prestige at a glance. */
.mcardobj--max{ background:linear-gradient(135deg, var(--black, #000) 0 40%, var(--purple, #3B06D4) 100%); }
[dir="rtl"] .mcardobj--max{ background:linear-gradient(225deg, var(--black, #000) 0 40%, var(--purple, #3B06D4) 100%); }