/* Overtime membership pass (2026-09-08). One stylesheet for every surface that shows a member's card:
   the homepage plan cards, /membership, the portal's My membership and Home, and /preview/cards.

   Replaces the generated charge-card renders and the old CSS mock-up with its chip. Jacob, OT tech call
   09-04 at 12:49: "I don't think it needs its own like chip. Because, like, people might get confused
   and actually think they're buying a credit card... something that more indicates like a membership
   card." Clement: "a country club kind of vibe." On the finishes: Silver "has got like a platinum Amex
   feel to it... make that silver look closer to silver... make the gold a little more gold."

   ISO ID-1 proportions (85.6 x 54 mm). No chip, no contactless mark, no number: the wordmark, an
   embossed hourglass crest cut from the real logo files as masks (so the tier's own tone fills them),
   the tier, and the holder's name or the word Member.

   Namespaced mcard on purpose: the portal uses the plain card class for every panel, and an
   un-namespaced rule in this file once squashed all of them (MembershipCardTest pins that). No token
   from any one page is relied on except --mono, which every consumer defines. */
.mcard{position:relative;display:block;width:min(100%,330px);aspect-ratio:1.586;margin:0 auto;border-radius:14px;overflow:hidden;isolation:isolate;container-type:inline-size;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
  box-shadow:0 22px 34px -14px rgba(60,40,10,.38),0 3px 6px rgba(40,28,10,.10),inset 0 0 0 1px rgba(255,255,255,.28)}
.mcard--silver{color:#3a3934;background:
  linear-gradient(118deg,#f7f8f9 0%,#dfe2e6 18%,#f0f1f3 36%,#c5c9cf 54%,#e9ebee 72%,#cfd3d8 88%,#eceef0 100%)}
.mcard--gold{color:#4a3115;background:
  linear-gradient(118deg,#f6e7bc 0%,#dab963 18%,#f1dc9e 36%,#b8973f 54%,#e6ca7e 72%,#a8843a 88%,#e9d08f 100%)}
.mcard--black{color:#E6D3A0;background:
  linear-gradient(118deg,#2e2921 0%,#181510 24%,#2a251d 48%,#100e0b 70%,#26211a 100%);
  box-shadow:0 22px 34px -14px rgba(0,0,0,.5),0 3px 6px rgba(0,0,0,.18),inset 0 0 0 1px rgba(230,211,160,.22)}
/* Brushed finish: hairline strokes along the card, then grain, both under the type. */
.mcard::before{content:"";position:absolute;inset:0;z-index:0;opacity:.55;mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,rgba(0,0,0,0) 1px 3px,rgba(0,0,0,.05) 3px 4px)}
.mcard--black::before{opacity:.35}
.mcard__grain{position:absolute;inset:0;z-index:0;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>")}
.mcard--black .mcard__grain{opacity:.28;mix-blend-mode:screen}
/* The one authored motion: the light on the metal slides when the card, or the panel holding it, is hovered. */
.mcard__sheen{position:absolute;inset:-20% -40%;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.42) 47%,rgba(255,255,255,.12) 52%,transparent 60%);
  transform:translateX(-14%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mcard:hover .mcard__sheen,.plan:hover .mcard__sheen,.tier:hover .mcard__sheen{transform:translateX(16%)}
.mcard--black .mcard__sheen{mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent 38%,rgba(230,211,160,.22) 47%,rgba(230,211,160,.06) 52%,transparent 60%)}
/* Wordmark and crest are the real logo files used as masks, so the tier's own tone fills them. */
.mcard__logo,.mcard__crest{position:absolute;z-index:2;background-color:currentColor;
  -webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}
.mcard__logo{--mask:url(/redesign/ot-logo.svg);top:9.5%;left:7.5%;width:36%;height:13%;opacity:.9;
  -webkit-mask-position:left center;mask-position:left center}
.mcard__crest{--mask:url(/redesign/membership/ot-mark-0908.svg);right:8%;top:50%;height:58%;width:29%;transform:translateY(-50%);opacity:.2;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.mcard--black .mcard__crest{opacity:.34;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.mcard__tier,.mcard__holder,.mcard__since{position:absolute;z-index:2;margin:0;font-size:clamp(9px,3.3cqw,11.5px);letter-spacing:.24em;text-transform:uppercase;line-height:1;white-space:nowrap}
.mcard__tier{left:7.5%;bottom:9.5%;font-weight:600}
.mcard__holder{right:7.5%;bottom:9.5%;font-weight:500;opacity:.92;max-width:52%;overflow:hidden;text-overflow:ellipsis;text-align:right}
/* Member since sits above the tier, quieter, only when the caller has a real month to print. */
.mcard__since{left:7.5%;bottom:calc(9.5% + 1.9em);font-size:clamp(7.5px,2.6cqw,9.5px);letter-spacing:.2em;opacity:.7}
@media (prefers-reduced-motion:reduce){.mcard__sheen{transition:none}}