/* ============================================================
   CARD ART — Aurelia Air portfolio
   Drawn in CSS + inline SVG so it stays sharp at any size and
   carries no generated-image artefacts. Aspect 1.586 (ID-1).
   ============================================================ */

.cardbox{container-type:inline-size;width:100%;perspective:1600px;position:relative}

.card{
  position:relative;width:100%;aspect-ratio:1.586;
  border-radius:4.4cqw;
  transform-style:preserve-3d;
  transition:transform 1.1s var(--e-out);
  will-change:transform;
}
.card__face{
  position:absolute;inset:0;border-radius:4.4cqw;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:5.6cqw 5.9cqw 5.2cqw;
  backface-visibility:hidden;
  box-shadow:0 2.4cqw 5.6cqw rgba(0,0,0,.42), 0 .4cqw 1.2cqw rgba(0,0,0,.28);
}
.card__face::after{ /* micro grain + edge light */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 .12cqw rgba(255,255,255,.13), inset 0 .5cqw 2cqw rgba(255,255,255,.05);
}
.card__sheen{
  position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.24) 47%,rgba(255,255,255,.05) 53%,transparent 62%);
  transform:translate3d(var(--sx,0px),var(--sy,0px),0);
  transition:transform .5s var(--e-out);
  mix-blend-mode:screen;opacity:.85;
}

/* ---- rows ---- */
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw;position:relative;z-index:2}
.card__mid{display:flex;align-items:center;gap:3cqw;position:relative;z-index:2}
.card__bot{display:flex;justify-content:space-between;align-items:flex-end;gap:3cqw;position:relative;z-index:2}

.card .mark{display:flex;align-items:center;gap:1.9cqw}
.card .mark svg{width:5.6cqw;height:5.6cqw;flex:none}
.card .mark .wm{font-size:3.5cqw;font-weight:500;letter-spacing:-.02em;line-height:1}
.card .mark .wm small{display:block;font-size:1.35cqw;letter-spacing:.42em;font-weight:600;margin-top:.5cqw;opacity:.72}

.card__tier{
  font-size:2.1cqw;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  white-space:nowrap;padding-top:.6cqw;
}
.card .emv{
  width:8.6cqw;height:6.6cqw;border-radius:1.1cqw;flex:none;position:relative;overflow:hidden;
  background:linear-gradient(133deg,#e6d6a4 0%,#c9b071 38%,#a68f52 62%,#dfcb98 100%);
}
.card .emv::before,.card .emv::after{content:"";position:absolute;background:rgba(0,0,0,.24)}
.card .emv::before{left:0;right:0;top:33%;height:.28cqw;box-shadow:0 2.2cqw 0 rgba(0,0,0,.24)}
.card .emv::after{top:0;bottom:0;left:34%;width:.28cqw;box-shadow:2.4cqw 0 0 rgba(0,0,0,.24)}
.card .ctls{width:4.2cqw;height:5.2cqw;opacity:.62;flex:none}

.card__num{
  font-size:3.05cqw;letter-spacing:.13em;font-weight:400;
  font-variant-numeric:tabular-nums;position:relative;z-index:2;
  opacity:.92;display:flex;gap:2.4cqw;
}
.card__num i{font-style:normal;letter-spacing:.02em}
.card .holder{
  font-size:1.72cqw;letter-spacing:.2em;text-transform:uppercase;font-weight:500;line-height:1.7;opacity:.9;
}
.card .holder span{display:block;font-size:1.32cqw;opacity:.62;letter-spacing:.16em}
.card .issuer{
  font-size:1.32cqw;letter-spacing:.13em;text-transform:uppercase;text-align:right;
  line-height:1.6;opacity:.62;
}
.card .issuer b{font-family:var(--mont);font-weight:700;letter-spacing:.02em;text-transform:lowercase;font-size:1.62cqw}
.card .networkmark{width:11.5cqw;height:6cqw;flex:none;opacity:1}

/* ============ TIER 01 — THE TRAVEL CARD (Fidem-supported entry) ============
   Warm canvas, matte, teal edge. Desirable on its own terms:
   the entry product is never punished visually. */
.card--travel .card__face{
  background:
    radial-gradient(120% 140% at 12% -10%, #FFFEF2 0%, #F7F5E1 42%, #EAE7CE 78%, #DEDBC0 100%);
  color:var(--ng-ink);
}
.card--travel .card__face::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,transparent 62%, rgba(47,75,168,.055) 100%),
    repeating-linear-gradient(114deg, rgba(47,75,168,.05) 0 1px, transparent 1px 7px);
  opacity:.85;
}
.card--travel .card__face::after{box-shadow:inset 0 0 0 .12cqw rgba(47,75,168,.24)}
.card--travel .card__tier{color:var(--ng-teal)}
.card--travel .mark svg .g{stroke:var(--ng-teal)}
.card--travel .card__sheen{opacity:.5;mix-blend-mode:overlay}

/* ============ TIER 02 — PLUS ============ */
.card--plus .card__face{
  /* Azure. The tier used to be teal; the palette moved off it, and leaving one teal
     stop in the gradient turned the face green-blue and muddy. */
  background:
    linear-gradient(168deg,#4A82D2 0%,#2F4BA8 42%,#20386F 76%,#17294E 100%);
  color:#EFF3FB;
}
.card--plus .card__face::before{ /* the curved limb of a horizon, drawn */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(150% 118% at 50% 172%,
      rgba(168,198,240,.26) 0 46.6%,
      rgba(245,244,223,.5) 47% 47.7%,
      rgba(255,255,255,.06) 48.1% 52%,
      transparent 52.4%),
    radial-gradient(80% 46% at 50% 104%, rgba(245,244,223,.18), transparent 70%);
}
.card--plus .card__tier{color:#A8C6F0}
.card--plus .mark svg .g{stroke:#EFF3FB}

/* ============ TIER 03 — PREMIER ============ */
.card--premier .card__face{
  background:linear-gradient(155deg,#3E789B 0%,#28638C 38%,#1B4A69 76%,#143E5B 100%);
  color:#E7EDF1;
}
.card--premier .card__face::before{ /* meridian arcs */
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(150% 100% at 120% 50%, transparent 47.6%, rgba(231,237,241,.14) 47.8%, transparent 48.4%),
    radial-gradient(150% 100% at 120% 50%, transparent 61.6%, rgba(231,237,241,.1) 61.8%, transparent 62.4%),
    radial-gradient(150% 100% at 120% 50%, transparent 75.6%, rgba(231,237,241,.07) 75.8%, transparent 76.4%);
}
.card--premier .card__tier{color:#A9C9DA}
.card--premier .mark svg .g{stroke:#E7EDF1}

/* ============ TIER 04 — PRIORITY (sapphire metal flagship) ============
   A deep sapphire metal card. The gradient still opens on #244B91 — the tier's
   documented navy — with a cool platinum sheen and fine guilloche over it. The warm
   gold furniture is kept deliberately: it is the flagship's own signature and the
   thing that stops a blue premium card reading as a copy of anyone else's. */
.card--priority .card__face{
  background:
    radial-gradient(128% 96% at 22% 4%, rgba(96,146,224,.34), transparent 62%),
    linear-gradient(148deg,#244B91 0%,var(--fd-navy-light) 26%,#0F2C63 56%,#0A2049 80%,#06142F 100%);
  color:#F0EEDD;
}
.card--priority .card__face::before{ /* guilloche over cool brushed metal */
  content:"";position:absolute;inset:0;opacity:.8;
  background:
    repeating-radial-gradient(circle at 78% 118%,
      transparent 0 3.1px, rgba(198,222,255,.055) 3.1px 3.7px),
    repeating-linear-gradient(96deg, rgba(214,232,255,.085) 0 1px, rgba(0,0,0,.06) 1px 2.4px),
    linear-gradient(112deg, transparent 22%, rgba(226,240,255,.2) 41%, rgba(255,255,255,.03) 52%, transparent 70%),
    radial-gradient(120% 90% at 84% 6%, rgba(228,215,174,.16), transparent 58%);
}
.card--priority .card__tier{color:#C6B27C}
.card--priority .mark svg .g{stroke:#E4D7AE}
.card--priority .emv{background:linear-gradient(133deg,#efe2bd,#cdb377 40%,#8e7a45 66%,#e3d3a6)}
.card--priority .card__face::after{box-shadow:inset 0 0 0 .14cqw rgba(228,215,174,.4), inset 0 .5cqw 2.6cqw rgba(206,228,255,.07)}

/* ---- 3D drag wrapper ---- */
.card3d{position:relative;transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-14deg));transition:none}
.card3d.dragging{transition:none}
.card-shadow{
  position:absolute;left:6%;right:6%;bottom:-7%;height:16%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 74%);
  filter:blur(14px);z-index:-1;transform:translateZ(-40px) scale(var(--shs,1));
}