/* 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/brand/ot-wordmark-1020.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}}

/* ---------- the key-tag pass in the portal (Jacob, call 10-21) ----------
   "I like these little key card things, these gold member cards... that wasn't reflected on the portal".
   Copied from the homepage plan heads (home-redesign.blade.php, 10-12 and 10-17), which keep their own
   inline copy because they sit inside a @verbatim block: change one, change the other. Drawn by
   partials/membership-card.blade.php with 'pass' => true; the holder and MEMBER SINCE sit under the tag
   because the tag has no room for a name. Every class is namespaced mpass (see MembershipCardTest). */
.mpass-wrap{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:.4rem 0 .2rem}
.mpass{position:relative;width:240px;height:86px;margin:0 auto;color:#4a3115;
  filter:drop-shadow(0 12px 14px rgba(60,40,10,.20)) drop-shadow(0 2px 3px rgba(40,28,10,.12))}
.mpass--silver{color:#3a3934}
.mpass--black{color:#E6D3A0;filter:drop-shadow(0 12px 14px rgba(0,0,0,.32)) drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.mpass__tag{position:absolute;inset:0;z-index:1;border-radius:18px;overflow:hidden;isolation:isolate;
  -webkit-mask:radial-gradient(circle at 23px 50%,transparent 7px,#000 7.6px);mask:radial-gradient(circle at 23px 50%,transparent 7px,#000 7.6px)}
.mpass--gold .mpass__tag{background:linear-gradient(118deg,#f6e7bc 0%,#dab963 18%,#f1dc9e 36%,#b8973f 54%,#e6ca7e 72%,#a8843a 88%,#e9d08f 100%)}
.mpass--silver .mpass__tag{background:linear-gradient(118deg,#f7f8f9 0%,#dfe2e6 18%,#f0f1f3 36%,#c5c9cf 54%,#e9ebee 72%,#cfd3d8 88%,#eceef0 100%)}
.mpass--black .mpass__tag{background:linear-gradient(118deg,#2e2921 0%,#181510 24%,#2a251d 48%,#100e0b 70%,#26211a 100%)}
/* Brushed metal along the tag, and the light that slides when the plan is hovered (the 09-08 card's one motion). */
.mpass__tag::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,transparent 1px 3px,rgba(0,0,0,.05) 3px 4px)}
.mpass--black .mpass__tag::before{opacity:.35}
/* The eyelet's rim, so the hole reads as punched metal rather than a missing pixel. */
.mpass__tag::after{content:"";position:absolute;z-index:2;left:13px;top:calc(50% - 10px);width:20px;height:20px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.14),inset 0 0 0 3px rgba(255,255,255,.3)}
.mpass__sheen{position:absolute;inset:-30% -40%;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.45) 47%,rgba(255,255,255,.12) 52%,transparent 60%);
  transform:translateX(-18%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mpass--black .mpass__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%)}
.plan:hover .mpass__sheen,.mpass-wrap:hover .mpass__sheen{transform:translateX(18%)}
.mpass__crest{position:absolute;z-index:2;left:42px;top:50%;width:20px;height:42px;transform:translateY(-50%);background-color:currentColor;opacity:.42;
  -webkit-mask:url(/redesign/membership/ot-mark-0908.svg) center/contain no-repeat;mask:url(/redesign/membership/ot-mark-0908.svg) center/contain no-repeat}
.mpass__name{position:absolute;z-index:2;left:72px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;
  font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);text-transform:uppercase;line-height:1;white-space:nowrap}
.mpass__name b{font-size:12.5px;font-weight:600;letter-spacing:.2em}
.mpass__name i{font-style:normal;font-size:8.5px;font-weight:500;letter-spacing:.28em;opacity:.78}
/* The scan code: bars of uneven width, the tier's own ink, like the gym tags Jacob described. */
.mpass__code{position:absolute;z-index:2;right:16px;top:50%;width:40px;height:38px;transform:translateY(-50%);opacity:.62;
  background:linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 7px,currentColor 7px 10px,transparent 10px 11px,currentColor 11px 12px,transparent 12px 15px,currentColor 15px 17px,transparent 17px 18px,currentColor 18px 21px,transparent 21px 23px,currentColor 23px 24px,transparent 24px 26px,currentColor 26px 28px,transparent 28px 31px,currentColor 31px 32px,transparent 32px 33px,currentColor 33px 36px,transparent 36px 38px,currentColor 38px 39px)}
/* The split ring sits behind the tag: it shows past the tag's end and through the eyelet, nowhere else. */
.mpass__ring{position:absolute;z-index:0;left:-15px;top:calc(50% - 19px);width:38px;height:38px;border-radius:50%;
  border:2.5px solid #c7cbd1;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.6)}
.mpass--gold .mpass__ring{border-color:#c9ab5c}
.mpass--black .mpass__ring{border-color:#57503f}
/* "A little more executive" (Jacob, Loom 10-17 at 4:02, keeping the tag he likes): a bevelled edge, the tier
   name engraved in the display serif instead of stamped mono, and a finer scan code. Same metals, same shape. */
.mpass__tag{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.14),inset 0 0 0 1px rgba(0,0,0,.07)}
.mpass--black .mpass__tag{box-shadow:inset 0 1px 0 rgba(230,211,160,.22),inset 0 -1px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(230,211,160,.12)}
.mpass__name{gap:7px}
.mpass__name b{font-family:"Fraunces",Georgia,serif;font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:none;
  text-shadow:0 1px 0 rgba(255,255,255,.42),0 -1px 0 rgba(0,0,0,.12)}
.mpass--black .mpass__name b{text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(230,211,160,.12)}
.mpass__name i{font-size:8px;letter-spacing:.34em;opacity:.72}
.mpass__code{height:30px;opacity:.5}
@media (prefers-reduced-motion:reduce){.mpass__sheen{transition:none}}

.mpass__who{margin:0;display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;line-height:1.3}
.mpass__who b{font-weight:600;font-size:14px}
.mpass__who span{font-family:var(--mono,"IBM Plex Mono",ui-monospace,monospace);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.62}