/* Realistic membership card face (.mcard.rc), shared by the fan card page,
   the member dashboard and anywhere a member's card is shown.
   Markup comes from card_face_html() in includes/card_face.php; pointer
   light comes from assets/js/card-face.js. Load after membership.css. */
/* ============================================================
   REALISTIC CARD FACE  (.mcard.rc)
   ISO ID-1 proportions; every element is placed in % of the card
   and sized in container units so it scales like a real object.
   ============================================================ */
.mcard.rc {
    --emb-hi: rgba(255,255,255,.32); --emb-lo: rgba(0,0,0,.55); --foil: #ece8de;
    container-type: inline-size; display: block; padding: 0; aspect-ratio: 1.586; border-radius: 4.4% / 7%;
    color: #f4f0e6; overflow: hidden; isolation: isolate;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.35),
        0 1px 1px rgba(20,18,14,.18), 0 10px 18px -8px rgba(20,18,14,.35), 0 34px 54px -26px rgba(20,18,14,.55);
}
.mcard-cell .mcard.rc { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease); }
.mcard-cell:hover .mcard.rc {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    transition: transform .12s linear, box-shadow .5s var(--m-ease);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.35),
        0 2px 2px rgba(20,18,14,.16), 0 18px 28px -10px rgba(20,18,14,.35), 0 50px 70px -30px rgba(20,18,14,.55);
}
.mcard.rc::after { display: none; }
.mcard.rc::before { opacity: 1; -webkit-mask-image: none; mask-image: none; background-size: auto; z-index: 0; }
.mcard.rc > * { position: absolute; z-index: 2; }

/* Brand + tier */
.rc-brand { left: 7%; top: 9%; display: flex; align-items: center; gap: 2.2cqw; font: 600 3.5cqw/1 'Inter', sans-serif; letter-spacing: .26em; text-transform: uppercase; }
.rc-mark { display: inline-grid; place-items: center; width: 6.6cqw; height: 6.6cqw; border: .35cqw solid currentColor; border-radius: 50%; font: italic 600 4.2cqw/1 'Playfair Display', serif; letter-spacing: 0; padding-right: .3cqw; opacity: .95; }
.rc-tier { right: 7%; top: 7.5%; text-align: right; font: italic 500 5.4cqw/1.05 'Playfair Display', serif; letter-spacing: -.01em; }
.rc-tier small { display: block; margin-bottom: 1.1cqw; font: 600 1.75cqw/1 'Inter', sans-serif; font-style: normal; letter-spacing: .3em; text-transform: uppercase; opacity: .72; }

/* EMV chip + contactless */
.rc-chip {
    left: 8.5%; top: 35%; width: 13.4%; aspect-ratio: 1.3; border-radius: 1.7cqw; overflow: hidden;
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.55), transparent 55%),
        linear-gradient(135deg, #f7e7ad 0%, #d8b25a 32%, #f2d98f 52%, #b48a36 78%, #e3c574 100%);
    box-shadow: inset 0 0 0 .25cqw rgba(105,75,18,.45), inset 0 -.4cqw .6cqw rgba(105,75,18,.25), 0 .25cqw .5cqw rgba(0,0,0,.28);
}
.rc-chip svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(98,68,14,.6); stroke-width: 1.1; }
.rc-chip svg rect { fill: rgba(255,240,190,.25); }
.rc-nfc { left: 24.5%; top: 37.5%; width: 6.4cqw; height: 6.4cqw; opacity: .8; }
.rc-nfc svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Embossed number, dates and name */
.rc-number, .rc-dates, .rc-holder { color: var(--foil); text-shadow: -.5px -.5px 0 var(--emb-hi), .8px .9px 1px var(--emb-lo); font-family: 'Share Tech Mono', 'OCR A Std', ui-monospace, monospace; }
.rc-number { left: 8.5%; top: 58%; display: flex; gap: 4.4cqw; font-size: 6.3cqw; line-height: 1; letter-spacing: .06em; }
.rc-dates { left: 8.5%; top: 72.5%; display: flex; gap: 7cqw; font-size: 3.5cqw; line-height: 1; }
.rc-dates > span { display: flex; align-items: center; gap: 1.6cqw; }
.rc-dates small { font: 600 1.55cqw/1.1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: none; opacity: .72; color: currentColor; }
.rc-holder { left: 8.5%; bottom: 8.5%; max-width: 62%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 4.3cqw; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }

/* Hologram patch */
.rc-holo {
    right: 7%; bottom: 8%; width: 15%; aspect-ratio: 1.45; border-radius: 1.4cqw;
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 .35cqw, transparent .35cqw 1.1cqw),
        conic-gradient(from 210deg at 50% 50%, #c9f3ff, #f5c6ff, #fff1b8, #b9ffd9, #c3d4ff, #ffc9d9, #c9f3ff);
    background-size: 100% 100%, 220% 220%; background-position: 0 0, var(--mx, 30%) var(--my, 30%);
    box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.45), 0 .2cqw .5cqw rgba(0,0,0,.22);
    opacity: .9;
}
.rc-holo::after { content: 'P'; position: absolute; inset: 0; display: grid; place-items: center; font: italic 600 5cqw/1 'Playfair Display', serif; color: rgba(255,255,255,.55); text-shadow: 0 0 .4cqw rgba(0,0,0,.15); }

/* Light that follows the pointer */
.rc-glare { inset: 0; z-index: 3 !important; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light;
    background: radial-gradient(circle at var(--mx, 22%) var(--my, 12%), rgba(255,255,255,.75), rgba(255,255,255,0) 52%), linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%); }

/* ---- Materials ---- */
/* General: matte forest stock with guilloché security lines */
.mcard.rc.general { background: radial-gradient(130% 140% at 12% 0%, #3a5a4c 0%, #1d2e26 46%, #0d1612 100%); }
.mcard.rc.general::before { background-image:
    repeating-radial-gradient(circle at 112% -18%, rgba(220,196,154,.09) 0 .5px, transparent 1px 6px),
    repeating-radial-gradient(circle at -12% 128%, rgba(220,196,154,.07) 0 .5px, transparent 1px 7px); }
/* Brushed metals */
.mcard.rc:is(.event, .vip, .meet_greet, .premium)::before { background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 2px, transparent 2px 4px),
    linear-gradient(100deg, transparent 22%, rgba(255,255,255,.28) 40%, transparent 56%, rgba(255,255,255,.14) 74%, transparent 86%); }
.mcard.rc.event { background: linear-gradient(125deg, #c48a57 0%, #8d5631 28%, #cf9765 50%, #74431f 76%, #4b2a14 100%); }
.mcard.rc.vip { --foil: #3b2a0b; --emb-hi: rgba(255,248,220,.75); --emb-lo: rgba(90,60,10,.45); color: #3b2a0b; background: linear-gradient(125deg, #f6e2a6 0%, #d0a24a 28%, #f8e8b4 50%, #b8872f 76%, #8a6120 100%); }
.mcard.rc.meet_greet { background: linear-gradient(125deg, #eab098 0%, #b9675a 28%, #e6a58e 50%, #93463f 76%, #5e2a2c 100%); }
.mcard.rc.premium { --foil: #20252c; --emb-hi: rgba(255,255,255,.85); --emb-lo: rgba(40,46,56,.4); color: #20252c; background: linear-gradient(125deg, #f7f8fa 0%, #c3c8d0 28%, #f1f3f6 50%, #989fab 76%, #6a717d 100%); }
/* Backstage: carbon weave with an iridescent edge */
.mcard.rc.backstage {
    border: 1.5px solid transparent;
    background: radial-gradient(130% 120% at 85% 0%, #2e323d 0%, #13151b 50%, #050608 100%) padding-box,
                conic-gradient(from 200deg, #7ec99a, #dcc49a, #8ab1e0, #c99ad8, #7ec99a) border-box;
}
.mcard.rc.backstage::before { background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.28) 0 2px, transparent 2px 4px); }
.mcard.rc:is(.vip, .premium) .rc-chip { box-shadow: inset 0 0 0 .25cqw rgba(105,75,18,.5), 0 .2cqw .4cqw rgba(0,0,0,.18); }
.rc-number > span:not(:last-child) { font-family: 'Inter', sans-serif; font-size: 4.6cqw; letter-spacing: .12em; align-self: center; }

/* ============================================================
   CARD REALISM PASS 2
   Laser-engraved type (modern metal cards are etched, not
   embossed), noise-based brushing, card edge thickness, a
   contact shadow, and back cards in the hero that show only
   what a real wallet would.
   ============================================================ */
.mcard.rc {
    --engrave-hi: rgba(255,255,255,.28); --engrave-lo: rgba(0,0,0,.45); --edge: #0b0f0d;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.32),
        0 1.5px 0 0 var(--edge), 0 2.5px 0 0 rgba(0,0,0,.18),
        0 12px 20px -10px rgba(20,18,14,.38), 0 40px 60px -30px rgba(20,18,14,.5);
}
.mcard-cell:hover .mcard.rc {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.38),
        0 1.5px 0 0 var(--edge), 0 2.5px 0 0 rgba(0,0,0,.18),
        0 22px 32px -12px rgba(20,18,14,.36), 0 56px 80px -34px rgba(20,18,14,.52);
}
.mcard.rc.event { --edge: #3d2210; }
.mcard.rc.vip { --edge: #7a5418; --engrave-hi: rgba(255,250,228,.8); --engrave-lo: rgba(80,52,8,.5); }
.mcard.rc.meet_greet { --edge: #52242a; }
.mcard.rc.premium { --edge: #5d6470; --engrave-hi: rgba(255,255,255,.9); --engrave-lo: rgba(35,40,50,.45); }
.mcard.rc.backstage { --edge: #000; }

/* Laser-engraved number, dates and name: recessed, not raised */
.rc-number, .rc-dates, .rc-holder {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500;
    color: var(--foil); opacity: .92;
    text-shadow: 0 -.5px 0 var(--engrave-lo), 0 .6px 0 var(--engrave-hi);
}
.rc-number { gap: 3.6cqw; font-size: 5.2cqw; letter-spacing: .16em; top: 59%; }
.rc-number > span:not(:last-child) { font-size: 4.2cqw; letter-spacing: .18em; }
.rc-dates { font-size: 3cqw; letter-spacing: .08em; top: 72.5%; }
.rc-holder { font-size: 3.7cqw; letter-spacing: .2em; font-weight: 600; }

/* Brushed metal: stretched fractal noise reads as real brushing instead of stripes */
.mcard.rc:is(.event, .vip, .meet_greet, .premium)::before {
    background-image:
        linear-gradient(100deg, transparent 18%, rgba(255,255,255,.26) 38%, transparent 54%, rgba(255,255,255,.12) 72%, transparent 86%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='250'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
    background-size: 100% 100%, 100% 100%;
    mix-blend-mode: soft-light; opacity: .9;
}
/* Fine print grain on the non-metal stocks */
.mcard.rc:is(.general, .backstage)::after {
    content: ''; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay; opacity: .35;
}

/* Hologram: diffraction foil that shifts with the light */
.rc-holo {
    width: 13%; border-radius: 50%; aspect-ratio: 1;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 .25cqw, transparent .25cqw .8cqw),
        conic-gradient(from calc(var(--hx, 0) * 1deg), #c9f3ff, #f5c6ff, #fff1b8, #b9ffd9, #c3d4ff, #ffc9d9, #c9f3ff);
    background-size: 100% 100%, 100% 100%;
    box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.55), inset 0 0 1.4cqw rgba(255,255,255,.35), 0 .2cqw .5cqw rgba(0,0,0,.25);
    transition: filter .3s ease;
}
.rc-holo::after { font-size: 4.4cqw; color: rgba(255,255,255,.7); }
.mcard.rc:hover .rc-holo { filter: saturate(1.35) brightness(1.06); }

/* Chip: a touch smaller with a brighter specular edge */
.rc-chip { width: 12.4%; top: 35.5%; }

.mcard.rc.meet_greet { --foil: #fff6f1; --engrave-lo: rgba(70,20,20,.6); background: linear-gradient(125deg, #d4907a 0%, #a85a4e 30%, #cf8e78 52%, #87403b 76%, #56262a 100%); }