/* ---------- Hero deck: the app's home-screen animation, in CSS ---------- */

/* One card is 170 × 238 at the stage's natural size; the stage is sized so the top card can
   pull clear of the deck to the left before it passes behind, which is how the web version
   avoids the app's masking work — nothing overlaps at the moment the stacking order changes. */
.deck {
  --card-w: 170px;
  --card-h: 238px;
  --tilt: -7deg;
  --shift: 58px;          /* the deck sits right of centre, leaving room to pull out left */
  position: relative;
  width: 470px;
  height: 320px;
  margin: 0 auto;
  transform-origin: 50% 50%;
}
.deck .card {
  position: absolute;
  left: calc(50% - var(--card-w) / 2 + var(--shift));
  top: calc(50% - var(--card-h) / 2);
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 15px;
  background: var(--edge);
  padding: 11px;
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.deck .card.gold   { --edge: linear-gradient(135deg, #FFE9A8, #F7C558 45%, #DE9B22); }
.deck .card.white  { --edge: linear-gradient(135deg, #FFFFFF, #EDEDED 45%, #D1D1D1); }
.deck .card.silver { --edge: linear-gradient(135deg, #F2F2F2, #C2C2C2 45%, #949494); }

.deck .face {
  position: relative;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(135deg, #1C6076, #0E3446);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* The icon's foil pass, travelling slowly across the art. */
.deck .face::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(135deg, transparent 36%, rgba(255,255,255,0.22) 47%, rgba(143,230,230,0.18) 53%, transparent 64%);
  animation: foil 3.4s linear infinite;
}
@keyframes foil { from { transform: translate3d(-40%, -40%, 0); } to { transform: translate3d(40%, 40%, 0); } }
.deck .face svg { width: 62%; height: auto; display: block; position: relative; }
/* The eye is a wide, shallow mark, so it needs more width to read at the same weight. */
/* The eye is a wide, shallow mark: same share of the card as the app uses (0.76). */
.deck .card.gold .face svg { width: 76%; }

/* Cards further back are dimmed rather than redrawn darker. */
.deck .card .shade {
  position: absolute; inset: 0; border-radius: 15px; background: #000; opacity: 0; pointer-events: none;
}

/* The scan line: white core, teal trail above it, fading out at both ends. */
.deck .scan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--card-w) * 1.34);
  height: 49px;
  margin-left: calc(var(--card-w) * -0.67 + var(--shift));
  z-index: 20;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.deck .scan i {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; display: block;
  background: linear-gradient(180deg, rgba(79,195,195,0), rgba(79,195,195,0.42));
}
.deck .scan b {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: block;
  background: #fff; box-shadow: 0 0 8px 2px rgba(209,255,255,0.75);
}

/* The coin stays in front of everything. */
.deck .coin {
  position: absolute;
  left: calc(50% + var(--shift) + 96px - 39px);
  top: calc(50% + 92px - 39px);
  width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(135deg, #FFE9A8, #F7C558 45%, #DE9B22);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  z-index: 30;
  display: grid; place-items: center;
  /* 600 is the heaviest Jost the page loads; 700 was being synthesised. */
  font: 600 46px/1 Jost, Futura, "Avenir Next", -apple-system, sans-serif;
  color: #0B1F2B;
}
/* Centring a line box centres the font's metrics, not the glyph's ink. Measured against Jost,
   the "$" sits 0.008em high — the old -2px nudge was pushing it further the wrong way. */
.deck .coin span { display: block; transform: translateY(0.008em); }

/* Narrow screens: scale the whole stage rather than reflowing it. */
@media (max-width: 900px) { .deck { transform: scale(0.94); } }
@media (max-width: 620px) { .deck { transform: scale(0.8); height: 280px; } }
@media (max-width: 420px) { .deck { transform: scale(0.66); height: 240px; } }

@media (prefers-reduced-motion: reduce) {
  .deck .face::after { animation: none; }
  .deck .scan { display: none; }
}