/* The Insider card: a landscape membership card that feels made, not rendered.
   Status reads as material. All four editions share one layout, so the card a member holds always
   looks like the same object, and the next one always looks like something worth reaching.
   Every size is in cqw so the card keeps its proportions from a thumbnail to the whole stage. */

.mwc {
  --px: .5;
  --py: .5;
  --rx: 0deg;
  --ry: 0deg;
  --r: 4.6cqw;
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1.586;
  perspective: 1500px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mwc[data-flip] { cursor: pointer; }
.mwc:focus-visible { outline: 0; }
.mwc:focus-visible .mwc__face { outline: 3px solid var(--focus); outline-offset: 3px; }

.mwc__tilt, .mwc__flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.mwc__tilt { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ease-expo); }
.mwc.is-live .mwc__tilt { transition: transform .12s ease-out; }
.mwc__flip { transition: transform 1s cubic-bezier(.3, .05, .1, 1); }
.mwc.is-back .mwc__flip { transform: rotateY(180deg); }

.mwc__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: var(--card-ink);
  background: var(--card-base);
  box-shadow: 0 .5cqw 1cqw rgb(0 3 20 / .5), 0 4cqw 9cqw rgb(0 3 20 / .6);
}
.mwc__back { transform: rotateY(180deg); }

/* Printed layers. They slide against each other as the card turns, which is where the depth comes from. */
.mwc__art, .mwc__grain, .mwc__holo, .mwc__dots, .mwc__glare, .mwc__sweep { position: absolute; inset: 0; pointer-events: none; }
.mwc__art {
  z-index: -3;
  inset: -3cqw;
  background: var(--art-ink);
  -webkit-mask: var(--art) var(--art-at, center) / var(--art-size, cover) var(--art-rep, no-repeat);
  mask: var(--art) var(--art-at, center) / var(--art-size, cover) var(--art-rep, no-repeat);
  transform: translate3d(calc((var(--px) - .5) * -2.4cqw), calc((var(--py) - .5) * -2.4cqw), 0);
}
.mwc__dots {
  z-index: -2;
  background-image: radial-gradient(circle, var(--dots, rgb(247 247 245 / .2)) .16cqw, transparent .2cqw);
  background-size: 1.05cqw 1.05cqw;
  -webkit-mask: linear-gradient(112deg, #000 0%, transparent 46%);
  mask: linear-gradient(112deg, #000 0%, transparent 46%);
}
.mwc__grain {
  z-index: -1;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: var(--grain-at, .5);
}
.mwc__holo { z-index: 1; opacity: 0; transition: opacity .5s; }
.mwc__glare {
  z-index: 4;
  background: radial-gradient(70% 90% at calc(var(--px) * 100%) calc(var(--py) * 100%), rgb(255 255 255 / .34), rgb(255 255 255 / .06) 42%, transparent 66%);
  mix-blend-mode: soft-light;
  opacity: .9;
}
.mwc__sweep {
  z-index: 5;
  overflow: hidden;
  border-radius: inherit;
}
.mwc__sweep::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .05) 46%, rgb(255 255 255 / .34) 50%, rgb(255 255 255 / .05) 54%, transparent 58%);
  transform: translateX(-70%);
}
.mwc.is-in .mwc__sweep::before { animation: mwc-sweep 1.5s var(--ease-swing) .35s both; }
@keyframes mwc-sweep { to { transform: translateX(70%); } }
/* The edge of the stock: a thin bevel that catches light on the top and falls off underneath. */
.mwc__face::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 .14cqw var(--edge, rgb(255 255 255 / .22)),
    inset 0 .28cqw .18cqw rgb(255 255 255 / .26),
    inset 0 -.36cqw .4cqw rgb(0 0 0 / .36);
  background: linear-gradient(160deg, rgb(255 255 255 / .09), transparent 34%);
}

/* Layout of the front */
.mwc__in {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 5.2cqw 5.6cqw 4.6cqw;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  column-gap: 3cqw;
}
.mwc__brand { display: flex; align-items: center; gap: 2cqw; min-width: 0; }
.mwc__logo { display: block; width: 15cqw; flex: none; color: var(--logo, var(--card-ink)); }
.mwc__logo svg { width: 100%; height: auto; }
.mwc__word {
  margin: 0;
  padding-left: 2cqw;
  border-left: .22cqw solid var(--rule-ink, rgb(255 255 255 / .34));
  font: 800 9.2cqw/.9 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .012em;
  text-transform: uppercase;
}
.mwc__patch {
  grid-row: 1 / 3;
  grid-column: 2;
  justify-self: end;
  width: 17cqw;
  height: 13.4cqw;
  object-fit: contain;
  object-position: right top;
  filter: drop-shadow(.32cqw .4cqw 0 rgb(0 3 20 / .55));
  transform: translate3d(calc((var(--px) - .5) * 1.3cqw), calc((var(--py) - .5) * 1.3cqw), 0);
}
.mwc__chip {
  align-self: end;
  display: block;
  width: 8.2cqw;
  height: 6.4cqw;
  margin-bottom: 1.8cqw;
  padding: .75cqw 1.1cqw;
  border-radius: 1.1cqw;
  color: rgb(0 6 33 / .78);
  background: var(--chip);
  box-shadow: inset 0 0 0 .1cqw rgb(255 255 255 / .55), inset 0 -.2cqw .3cqw rgb(0 0 0 / .28), 0 .16cqw .3cqw rgb(0 3 20 / .4);
}
.mwc__chip svg { width: 100%; height: 100%; }
.mwc__id {
  grid-column: 1 / -1;
  margin: 0 0 2.4cqw;
  font: 800 7.2cqw/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .15em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
  white-space: nowrap;
  text-shadow: 0 .14cqw 0 rgb(0 3 20 / .6), 0 -.08cqw 0 rgb(255 255 255 / .3);
}
.mwc__foil {
  background-image: var(--foil);
  background-size: 240% 240%;
  background-position: calc(var(--px) * 100%) calc(var(--py) * 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 .12cqw 0 rgb(0 3 20 / .55));
}
.mwc__who { min-width: 0; }
.mwc__name {
  margin: 0;
  font: 800 5.5cqw/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 .1cqw 0 rgb(0 3 20 / .45);
}
.mwc__handle {
  margin: .9cqw 0 0;
  min-height: 1.2em;
  font: 500 2.7cqw/1.2 var(--f-text);
  color: var(--card-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mwc__rank { align-self: end; text-align: right; min-width: 0; }
.mwc__tier {
  margin: 0;
  font: 800 3.5cqw/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mwc__since { margin: 1cqw 0 0; font: 500 2.1cqw/1.2 var(--f-text); color: var(--card-soft); white-space: nowrap; }
.mwc__micro {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 1.2cqw;
  margin: 0;
  overflow: hidden;
  font: 700 1.02cqw/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--card-soft);
  opacity: .5;
}

/* The reverse */
.mwc__back .mwc__art { opacity: .5; }
.mwc__stripe {
  position: absolute;
  left: 0;
  right: 0;
  top: 8cqw;
  height: 11cqw;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--stripe, #05060c);
  box-shadow: inset 0 .16cqw 0 rgb(255 255 255 / .12), inset 0 -.16cqw 0 rgb(0 0 0 / .5);
  color: var(--stripe-ink, rgb(255 255 255 / .2));
  font: 800 2.4cqw/1 var(--f-display);
  font-stretch: 75%;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mwc__stripe span { padding-left: 2cqw; }
.mwc__rear {
  position: absolute;
  z-index: 2;
  inset: 23cqw 5.6cqw 4cqw;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2cqw 4cqw;
  align-items: start;
}
.mwc__sign {
  margin: 0;
  padding: 1.5cqw 2cqw;
  border-radius: .6cqw;
  color: var(--void);
  background: repeating-linear-gradient(-45deg, #fff 0 .5cqw, #eceae3 .5cqw 1cqw);
  font: italic 500 3.4cqw/1.1 var(--f-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mwc__perks { margin: 0; padding: 0; font: 500 2.25cqw/1.34 var(--f-text); color: var(--card-soft); }
.mwc__perks li { position: relative; padding-left: 2.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwc__perks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1cqw; height: 1cqw; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.mwc__seal { grid-row: 1 / 4; grid-column: 2; position: relative; width: 19cqw; aspect-ratio: 1; color: var(--card-ink); }
.mwc__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mwc__ring text { font: 800 15.2px/1 var(--f-display); font-stretch: 75%; letter-spacing: .04em; text-transform: uppercase; fill: currentColor; }
.mwc__seal i { position: absolute; inset: 26%; display: grid; place-items: center; }
.mwc__seal svg:not(.mwc__ring) { width: 100%; height: auto; }
.mwc__line { grid-column: 1; margin: 0; font: 500 2.1cqw/1.3 var(--f-text); color: var(--card-soft); }

/* Editions */
.mwc--wanderer {
  --card-base: radial-gradient(118% 150% at 86% 10%, #7692f4 0%, #4f6de0 15%, #2f43b6 34%, #182276 58%, #0b1254 80%, #000621 100%);
  --card-ink: var(--moon);
  --card-soft: rgb(247 247 245 / .78);
  --art: linear-gradient(#000, #000);
  --art-ink: conic-gradient(from 8deg at 84% 15%, rgb(10 16 80 / .86) 0deg 9deg, transparent 9deg 21deg, rgb(10 16 80 / .86) 21deg 26deg, transparent 26deg 43deg, rgb(10 16 80 / .86) 43deg 58deg, transparent 58deg 69deg, rgb(10 16 80 / .86) 69deg 74deg, transparent 74deg 92deg, rgb(10 16 80 / .86) 92deg 104deg, transparent 104deg 118deg, rgb(10 16 80 / .86) 118deg 124deg, transparent 124deg 139deg, rgb(10 16 80 / .86) 139deg 155deg, transparent 155deg 168deg, rgb(10 16 80 / .86) 168deg 173deg, transparent 173deg 190deg, rgb(10 16 80 / .86) 190deg 203deg, transparent 203deg 216deg, rgb(10 16 80 / .86) 216deg 221deg, transparent 221deg 240deg, rgb(10 16 80 / .86) 240deg 254deg, transparent 254deg 268deg, rgb(10 16 80 / .86) 268deg 274deg, transparent 274deg 292deg, rgb(10 16 80 / .86) 292deg 303deg, transparent 303deg 318deg, rgb(10 16 80 / .86) 318deg 323deg, transparent 323deg 341deg, rgb(10 16 80 / .86) 341deg 352deg, transparent 352deg 360deg);
  --foil: linear-gradient(115deg, #ead11f 12%, #fff3a2 34%, #e0b915 50%, #fff3a2 66%, #ead11f 88%);
  --chip: linear-gradient(135deg, #f4e36a, #e0bf19 52%, #fbef9d);
  --rule-ink: rgb(234 209 31 / .55);
  --stripe: #000621;
}
.mwc--drift {
  --card-base: radial-gradient(120% 120% at 22% 0%, #e65a45 0%, #d13f30 38%, #b02c1f 78%, #8c1f14 100%);
  --card-ink: #fff;
  --card-soft: rgb(255 255 255 / .86);
  --art: url(/assets/art/aurora.webp);
  --art-size: 122cqw 58cqw;
  --art-at: -8cqw 15cqw;
  --art-ink: linear-gradient(to top, #000621 46%, #17051a 100%);
  --foil: linear-gradient(115deg, #ffe3c5 10%, #fff 32%, #f6c79a 50%, #fff 68%, #ffe3c5 90%);
  --chip: linear-gradient(135deg, #fff1e0, #f2c697 52%, #fff4e7);
  --rule-ink: rgb(255 227 197 / .6);
  --grain-at: .75;
  --dots: rgb(255 227 197 / .24);
  --stripe: #1a0509;
}
.mwc--special {
  --card-base: radial-gradient(120% 150% at 92% 2%, #0e6a4b 0%, #0d3f57 26%, #101a66 52%, #0a1050 74%, #000621 100%);
  --card-ink: #fff;
  --card-soft: rgb(255 255 255 / .8);
  --art: url(/assets/art/grid.webp);
  --art-size: 132cqw auto;
  --art-at: -14cqw -8cqw;
  --art-ink: linear-gradient(235deg, #22d974 0%, #22d974 24%, rgb(77 170 72 / .55) 58%, rgb(77 170 72 / .2) 100%);
  --foil: linear-gradient(115deg, #d8dde8 8%, #fff 30%, #a9b4c9 50%, #fff 70%, #d8dde8 92%);
  --chip: linear-gradient(135deg, #f3f5f9, #b6bfcf 52%, #fff);
  --rule-ink: rgb(255 255 255 / .5);
  --grain-at: .55;
  --dots: transparent;
  --stripe: #070c3a;
}
.mwc--mw001 {
  --card-base: radial-gradient(130% 130% at 80% 0%, #1a1a20 0%, #0b0b0f 45%, #030304 100%);
  --card-ink: #f5ecd0;
  --card-soft: rgb(245 236 208 / .74);
  --art: url(/assets/art/watch-tile.svg);
  --art-size: 11.2cqw 6.8cqw;
  --art-at: 0 0;
  --art-rep: repeat;
  --art-ink: linear-gradient(135deg, rgb(234 209 31 / .1), rgb(234 209 31 / .19) 50%, rgb(234 209 31 / .1));
  --foil: linear-gradient(115deg, #f7d84a 6%, #fff8c9 26%, #c9971a 46%, #fff3a2 62%, #e7bb22 82%, #fff8c9 96%);
  --chip: linear-gradient(135deg, #fbe777, #d9a81a 52%, #fff3a2);
  --rule-ink: rgb(234 209 31 / .5);
  --logo: #f5ecd0;
  --edge: rgb(234 209 31 / .46);
  --grain-at: .35;
  --dots: transparent;
  --stripe: #000;
  --stripe-ink: rgb(234 209 31 / .34);
}
/* Only the top tier carries real foil: iridescence through the eyes, wherever the light falls. */
.mwc--mw001 .mwc__holo {
  opacity: .72;
  background: linear-gradient(calc(105deg + var(--px) * 40deg), #ead11f 0%, #fff3a2 18%, #f6aac8 32%, #ead11f 46%, #fff8c9 60%, #a9bdf7 74%, #ead11f 88%, #fff3a2 100%);
  background-size: 240% 240%;
  background-position: calc(var(--px) * 100%) calc(var(--py) * 100%);
  -webkit-mask: radial-gradient(40% 62% at calc(var(--px) * 100%) calc(var(--py) * 100%), #000 0%, rgb(0 0 0 / .3) 52%, transparent 88%), var(--art) -3cqw -3cqw / 11.2cqw 6.8cqw repeat;
  mask: radial-gradient(40% 62% at calc(var(--px) * 100%) calc(var(--py) * 100%), #000 0%, rgb(0 0 0 / .3) 52%, transparent 88%), var(--art) -3cqw -3cqw / 11.2cqw 6.8cqw repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* A preview of a tier the member has not reached. */
.mwc--locked .mwc__face { filter: saturate(.86); }
.mwc--draft .mwc__name.is-empty, .mwc--draft .mwc__handle.is-empty, .mwc--draft .mwc__id.is-empty { opacity: .55; }

/* The stage the card sits on: pulsar rays turning slowly behind it. */
.mwc-stage { position: relative; isolation: isolate; }
.mwc-rays {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 170%;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, var(--ray) 0deg 7deg, transparent 7deg 22deg, var(--ray) 22deg 26deg, transparent 26deg 41deg, var(--ray) 41deg 52deg, transparent 52deg 66deg, var(--ray) 66deg 70deg, transparent 70deg 90deg, var(--ray) 90deg 98deg, transparent 98deg 113deg, var(--ray) 113deg 117deg, transparent 117deg 136deg, var(--ray) 136deg 148deg, transparent 148deg 163deg, var(--ray) 163deg 168deg, transparent 168deg 188deg, var(--ray) 188deg 196deg, transparent 196deg 208deg, var(--ray) 208deg 212deg, transparent 212deg 233deg, var(--ray) 233deg 246deg, transparent 246deg 262deg, var(--ray) 262deg 266deg, transparent 266deg 284deg, var(--ray) 284deg 293deg, transparent 293deg 310deg, var(--ray) 310deg 314deg, transparent 314deg 336deg, var(--ray) 336deg 348deg, transparent 348deg 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgb(0 0 0 / .55) 46%, transparent 92%);
  mask: radial-gradient(closest-side, #000 0%, rgb(0 0 0 / .55) 46%, transparent 92%);
  animation: mwc-turn 120s linear infinite;
  will-change: rotate;
}
@keyframes mwc-turn { to { rotate: 360deg; } }

/* Arrival */
.mwc.is-entering .mwc__tilt { animation: mwc-rise 1.1s var(--ease-expo) both; }
@keyframes mwc-rise {
  from { opacity: 0; transform: translate3d(0, 9cqw, 0) rotateX(26deg) rotateZ(-5deg) scale(.94); }
  to { opacity: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
}

.mwc-hint { display: inline-flex; align-items: center; gap: .5em; color: var(--fg-3); font-size: var(--t-xs); }

@media (prefers-reduced-motion: reduce) {
  .mwc-rays, .mwc.is-entering .mwc__tilt, .mwc.is-in .mwc__sweep::before { animation: none; }
  .mwc__flip { transition: none; }
}