/* The Yoru Social metal card. Rotation and the light position (--mx, --my, --mxb) are driven by card_controller.js. */

.card-stage { perspective: 1100px; display: grid; justify-items: center; gap: 26px; padding-block: 24px; }
.card-float { width: min(440px, 100%); position: relative; }
.card-float::after {
  content: ""; position: absolute; inset: auto 12% -30px; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); filter: blur(6px); z-index: -1;
}

.metal-card {
  --mx: 30%; --my: 20%; --mxb: 70%;
  display: block; position: relative; width: 100%; aspect-ratio: 1.586; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; border-radius: 16px;
  transform-style: preserve-3d; will-change: transform;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.is-dragging .metal-card { cursor: grabbing; }

/* The rim (the card's edge) is built by card_controller.js; --half is half the card's thickness. */
.rim { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.rim-segment {
  position: absolute; left: 50%; top: 50%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .06) 55%, rgba(0, 0, 0, .35));
}

.face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; backface-visibility: hidden;
  display: grid; padding: 8% 8.5%; transform: translateZ(var(--half, 2px));
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 236, 244, .30), transparent 42%),
    linear-gradient(115deg, transparent calc(var(--mx) - 28%), rgba(217, 165, 184, .20) var(--mx), transparent calc(var(--mx) + 28%)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #3b3242 0%, #221e29 38%, #43384a 58%, #1c1922 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .18), 0 24px 60px -24px rgba(0, 0, 0, .9);
}
.face.back {
  transform: rotateY(180deg) translateZ(var(--half, 2px));
  background:
    radial-gradient(circle at var(--mxb) var(--my), rgba(255, 236, 244, .26), transparent 42%),
    linear-gradient(115deg, transparent calc(var(--mxb) - 28%), rgba(217, 165, 184, .18) var(--mxb), transparent calc(var(--mxb) + 28%)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #2c2632 0%, #1d1a23 50%, #332b38 100%);
}

/* Dusty rose foil: a metallic gradient clipped to the text, shifting with the light. */
.foil {
  background: linear-gradient(110deg, #b57d93 0%, #f4d6e1 calc(var(--mx) - 6%), #d9a5b8 var(--mx), #8f5f73 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: var(--foil-opacity, 1);
}
.back .foil { background-image: linear-gradient(110deg, #b57d93 0%, #f4d6e1 calc(var(--mxb) - 6%), #d9a5b8 var(--mxb), #8f5f73 100%); }

.front { grid-template-rows: 1fr auto auto; align-items: end; text-align: left; }
.card-mark { font: 300 clamp(30px, 7vw, 42px)/1 var(--display); letter-spacing: .01em; }
.card-sub { font: 500 clamp(9px, 1.9vw, 11px)/1 var(--body); letter-spacing: .26em; text-transform: uppercase; margin-top: 10px; }
.card-no { position: absolute; top: 9%; right: 8.5%; font: 400 clamp(10px, 2vw, 12px)/1 var(--body); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
/* Front layout: serial top right, wordmark bottom left, and a large blind-embossed mark (no foil, just light and shadow) cropped by the right edge. */
.front > .foil { position: relative; z-index: 1; }
.front > .card-no { position: absolute; }
/* Two offset copies of the mark: a dark one for the pressed-in shadow, a light one for the lit edge.
   The light side follows --mx, so the emboss catches the light as the card turns. */
.card-emboss { position: absolute; top: 20%; right: -12%; height: 88%; aspect-ratio: 286 / 254; }
.card-emboss::before, .card-emboss::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("/assets/brand/mark-1.35-tight-0446e9a0.svg") center / contain no-repeat; mask: url("/assets/brand/mark-1.35-tight-0446e9a0.svg") center / contain no-repeat;
}
.card-emboss::before { background: rgba(0, 0, 0, .16); transform: translate(1px, 1px); }
.card-emboss::after {
  background: linear-gradient(110deg, rgba(255, 236, 244, .02) 0%, rgba(255, 236, 244, .07) var(--mx), rgba(255, 236, 244, .015) 100%);
}

.back { align-content: center; justify-items: center; text-align: center; gap: 10px; }
.back-title { font: 400 italic clamp(22px, 5vw, 30px)/1.1 var(--display); }
.back-text { font: 400 clamp(11px, 2.4vw, 13px)/1.5 var(--body); max-width: 30ch; }

.metal-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.card-hint { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }