/* The Tora member card, cut corner (captain 2026-10-23, after Revolut Ultra and Metal: "I really do like that cutoff
   Tora mock, especially the black one and the blue one ... if you press it, maybe you can change to the other one so
   they can see both cards ... Let's just make it look a little bit more realistic, metal, like the rendering").
   Two finishes on the same card, data-finish="ultra" (graphite) and "metal" (anodised steel blue), drawn as the
   round 21 mock-ups he picked: a clean gradient, a hairline grain, one soft band of light (closing.js and the waitlist
   script move it a little with --mc-sx), a lit top edge, etched type. Tora's cut corner is the card's shape. No
   outline, no dot grid. */
.mc-card:is([data-finish="ultra"],[data-finish="metal"]){--cut:11.4%;border-radius:1.125rem;
  clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 calc(var(--cut) * 1.6));box-shadow:none}
/* the waitlist card's shadow follows the cut shape (a drop shadow on the holder sees the clipped card); in the deck
   the shadow is a plain box shadow on a layer under each card, starting below the cut corner, so nothing is filtered
   as the cards tilt and swap (captain 2026-10-25: keep the card light) */
.mc-tilt:has(.mc-card:is([data-finish="ultra"],[data-finish="metal"])){filter:drop-shadow(0 1.6rem 2rem rgb(0 0 0 / .55))}
.mc-face::before{content:"";position:absolute;inset:22% 2.5% 1% 2.5%;border-radius:1.125rem;
  box-shadow:0 1.4rem 2.2rem rgb(0 0 0 / .5);pointer-events:none}
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) :is(.mc-shader,.mc-dots,.mc-vig,.mc-speck,.mc-edge,.mc-spec){display:none!important}
/* the finishes are the mock-ups' (captain 2026-10-23: "the mock-ups looked cleaner ... the metal for them was nicer ...
   Don't try to make it any special metal"): a smooth gradient with only a hairline grain, and one soft band of light */
/* graphite (Tora Ultra) */
.mc-card[data-finish="ultra"]{background:
    linear-gradient(115deg,transparent 30%,rgb(255 255 255 / .07) 45%,transparent 58%),
    repeating-linear-gradient(90deg,rgb(255 255 255 / .018) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#3a3f46,#22262c 45%,#17191d)!important}
/* steel blue (Tora Metal) */
.mc-card[data-finish="metal"]{background:
    linear-gradient(120deg,transparent 26%,rgb(255 255 255 / .28) 40%,rgb(255 255 255 / .05) 52%,transparent 64%),
    repeating-linear-gradient(0deg,rgb(255 255 255 / .03) 0 1px,transparent 1px 2px),
    linear-gradient(155deg,#a9c3d6,#6f94b1 42%,#3f6584 80%,#2f4f6b)!important}
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) .mc-brush{display:none!important}
/* the band of light, as in the mock-ups, drifting only a little as the card turns */
.mc-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 34%,rgb(255 255 255 / .06) 46%,transparent 58%) no-repeat;
  background-size:160% 100%;background-position:calc(100% - var(--mc-sx,70%) * .6) 0;transition:background-position .7s cubic-bezier(.22,1,.36,1)}
.mc-card.is-tilting .mc-sheen{transition:none}
.mc-card[data-finish="metal"] .mc-sheen{opacity:.6}
/* the big etched mark (graphite) or the wordmark run off the edge (blue), part of the metal, not printed on it */
.mc-big{position:absolute;pointer-events:none;-webkit-mask:var(--mc-big-src) center/contain no-repeat;mask:var(--mc-big-src) center/contain no-repeat}
.mc-card[data-finish="ultra"] .mc-big{--mc-big-src:url(brand/tora-mark.svg);aspect-ratio:202/140;
  background:linear-gradient(135deg,rgb(255 255 255 / .1),rgb(255 255 255 / .02))}
.mc-card[data-finish="metal"] .mc-big{--mc-big-src:url(brand/tora-wordmark-mask.svg);aspect-ratio:392/142}
/* the face, laid out as the mock-ups were (proportions of the card's width, so it holds at any size); everything
   etched: a darker cut with a hairline of light under it */
.mc-card:is([data-finish="ultra"],[data-finish="metal"]){container-type:inline-size}
.mc-card[data-finish="ultra"]{box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .28),inset 0 -1px 0 rgb(0 0 0 / .5)!important}
.mc-card[data-finish="metal"]{box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .55)!important}
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) .mc-inner{display:block;position:absolute;inset:0;padding:0;transform:none}
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) :is(.mc-top,.mc-foot){display:contents}
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) :is(.mc-wordmark,.mc-label,.mc-name,.mc-serial,.mc-since){position:absolute;margin:0}
.mc-label{font:500 1.96cqw/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) .mc-name{font:400 3.4cqw/1.15 var(--sans);letter-spacing:.02em}
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) .mc-serial{font:400 2.86cqw/1 var(--sans);letter-spacing:.16em;font-variant-numeric:tabular-nums}
/* flat type, as in the mock-ups: the 1px shadows read as a fake outline up close (captain 2026-10-25) */
.mc-card:is([data-finish="ultra"],[data-finish="metal"]) :is(.mc-label,.mc-name,.mc-serial,.mc-since,.mc-date){text-shadow:none}
.mc-card[data-finish="ultra"] :is(.mc-label,.mc-name,.mc-serial){color:#c9d2da}
.mc-card[data-finish="ultra"] .mc-label{color:#aeb7bf}
.mc-card[data-finish="ultra"] .mc-name{color:#d9dfe4}
.mc-card[data-finish="metal"] :is(.mc-label,.mc-name,.mc-serial){color:rgb(255 255 255 / .92)}
/* graphite: the wordmark top left, the founding line top right, the name bottom left, the number bottom right, and
   the Tora mark etched large and faint on the right */
.mc-card[data-finish="ultra"] .mc-wordmark{left:7.1cqw;top:7.5cqw;width:21cqw;max-width:none;height:auto;
  fill:#d3dae0}
.mc-card[data-finish="ultra"] .mc-label{right:7.1cqw;top:8.6cqw}
.mc-card[data-finish="ultra"] .mc-name{left:7.1cqw;bottom:6.1cqw}
.mc-card[data-finish="ultra"] .mc-serial{right:7.1cqw;bottom:6.3cqw}
.mc-card[data-finish="ultra"] .mc-since{display:none}
.mc-card[data-finish="ultra"] .mc-big{right:-6.4cqw;top:50%;width:53.6cqw;transform:translateY(-50%)}
/* blue: the founding line and the name at the top, the number and the year at the foot as one line (closing.js
   writes "№ 0001 · Since 2026" into the serial, so both share its type), the wordmark run off the edge */
.mc-card[data-finish="metal"] .mc-wordmark{display:none}
.mc-card[data-finish="metal"] .mc-label{left:7.1cqw;top:8.2cqw;color:#f3f8fc}
.mc-card[data-finish="metal"] .mc-name{left:7.1cqw;top:12.9cqw;font-size:3.75cqw;color:#fff}
.mc-card[data-finish="metal"] .mc-serial{left:7.1cqw;bottom:6.1cqw;font-size:2.68cqw}
.mc-card[data-finish="metal"] .mc-since{display:none}
.mc-card[data-finish="metal"] .mc-big{right:-12.5cqw;bottom:-8.5cqw;width:84cqw;
  background:linear-gradient(180deg,rgb(255 255 255 / .34),rgb(255 255 255 / .1))}

/* the deck in Founding: both finishes, one in front; a tap (or click, or Enter) sends the front card back as the other
   comes forward, in one continuous move of under half a second (captain 2026-10-25: "not smooth and it takes a little
   bit too long"): the leaving card dips toward you and down as it goes back, so the other rises over it rather than
   replacing it at once. The deck keeps its cards in one 3D space, so they pass each other by depth */
.mc-deck{position:relative;display:block;width:100%;aspect-ratio:1.6;perspective:70rem;transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent;
  border:0;padding:0;background:none;font:inherit;color:inherit}
.mc-deck:focus-visible{outline:2px solid var(--steel-5,#5d84a3);outline-offset:6px;border-radius:1.25rem}
.mc-face{position:absolute;inset:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
.mc-face .mc-card{width:100%;height:100%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mc-face .mc-card.is-tilting{transition:none}
/* a card is always drawn flat into its face, at full resolution: just under full opacity groups it the way the old
   drop-shadow filter did, at no cost (turned in 3D on its own, a phone's lean drew its type as a jagged texture) */
.mc-face.is-front{transform:none;opacity:.999}
.mc-face.is-back{transform:translate3d(6%,-9%,-60px) rotate(4deg) scale(.94);opacity:.85}
.mc-face:is(.mc-out,.mc-in){transition:none;animation:.42s cubic-bezier(.33,0,.2,1) both}
.mc-face.mc-out{animation-name:mc-out}
.mc-face.mc-in{animation-name:mc-in;animation-timing-function:cubic-bezier(.3,0,.15,1)}
@keyframes mc-out{
  0%{transform:none;opacity:.999}
  42%{transform:translate3d(-3%,15%,24px) rotate(-2deg);opacity:.999}
  100%{transform:translate3d(6%,-9%,-60px) rotate(4deg) scale(.94);opacity:.85}}
@keyframes mc-in{
  0%{transform:translate3d(6%,-9%,-60px) rotate(4deg) scale(.94);opacity:.85}
  100%{transform:none;opacity:.999}}
.mc-hint{display:block;margin:.9rem auto 0;font-size:var(--text-xs,.75rem);letter-spacing:.04em;color:rgb(255 255 255 / .55);text-align:center}
@media(prefers-reduced-motion:reduce){.mc-face,.mc-face .mc-card,.mc-sheen{transition:none}.mc-face:is(.mc-out,.mc-in){animation:none}}