/* Local study. Entry, idle, pointer tilt and flip each own a transform layer. */
.card-tilt,.card-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.card-tilt{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 240ms cubic-bezier(.2,.7,.2,1)}
.card-flipper{transform:rotateY(0deg)}
.card-back{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;transform:rotateY(180deg) translateZ(1.6px);overflow:hidden;border:1px solid #a7856630;background:linear-gradient(135deg,#252322,#101416 55%,#29231f);box-shadow:inset 1px 1px 1px #c4a18825,inset -1px -1px 2px #000}
.card-back::before{content:"";position:absolute;inset:12px;border:1px solid #b18a5f55;border-radius:15px;background:url('card-back-pattern.svg?v=organic') center/100% 100% no-repeat;opacity:.9}
.card-back::after{content:"";position:absolute;inset:17px;border:1px solid #b18a5f24;border-radius:11px;pointer-events:none}
.card-back-medallion{position:absolute;inset:26% 16%;display:grid;place-items:center;border:1px solid #b7936a77;border-radius:50%;background:radial-gradient(ellipse,#25201c 40%,#18191a 75%);box-shadow:0 0 0 5px #1a1b1c,0 0 0 6px #b7936a44}
.card-back .etched-crest{position:relative;left:auto;top:auto;width:76%;background:linear-gradient(140deg,#dfb58b,#7e6f62 40%,#e2be97 58%,#82736a);opacity:.9}
.card-back .face-light{opacity:.7}
.card-trigger{position:absolute;z-index:3;padding:0;margin:0;border:0;border-radius:24px;background:transparent;box-shadow:none;color:inherit;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;outline-offset:8px}
.card-trigger:focus-visible{outline:1px solid #c88f68}
.card-trigger[hidden]{display:none}
.trial-signature .object-perspective{transition:opacity 300ms ease}
.hero.card-active .object-perspective{opacity:.46}
.hero.card-active .face-light{animation-play-state:paused;transform:translateX(var(--light-x,5%)) rotate(-30deg);transition:transform 240ms ease}
.hero.card-flipping .signature-object{animation-play-state:paused}
.hero .hero-bio{z-index:4}
/* A slim graphite body with a polished nickel rim. Only the edge catches light. */
@property --rim-angle{syntax:'<angle>';inherits:true;initial-value:105deg}
.card-flipper > .object-face{transform:translateZ(1.6px);border-color:#bbc5ce35;box-shadow:inset 1px 1px 1px #cdd4d422,inset -1px -1px 2px #030404}
.card-flipper > .object-layer{border-color:#8996a044;box-shadow:none;background:#171a1d}
.card-flipper > .l0{transform:translateZ(-1.4px)}
.card-flipper > .l1{transform:translateZ(-.9px)}
.card-flipper > .l2{transform:translateZ(-.4px)}
.card-flipper > .l3{transform:translateZ(.1px)}
.card-flipper > .l4{transform:translateZ(.6px)}
.card-flipper > .l5{transform:translateZ(1.1px)}
.card-rim{position:absolute;inset:-.35px;padding:.85px;border-radius:24.35px;transform:translateZ(var(--rim-depth));backface-visibility:visible;pointer-events:none;opacity:.78;
 background:conic-gradient(from var(--rim-angle),#303a43 0deg,#75838d 30deg,#b8c7d1 43deg,#fffaf0 49deg,#d9e6ed 54deg,#4a5762 67deg,#252b31 105deg,#b48c6e 151deg,#e9c19d 166deg,#faf3e9 172deg,#736b68 182deg,#22292f 218deg,#526472 266deg,#c3d6e5 281deg,#fff 287deg,#5b6d7b 301deg,#303a43 360deg);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.hero.card-flipping .card-rim{opacity:1}
@media(prefers-reduced-motion:reduce){.card-tilt{transform:none;transition:none}.trial-signature .object-perspective{transition:none}.hero.card-active .face-light{transition:none}}

/* The scene reveals a little light only while the card turns edge-on. */
@property --rim-flash{syntax:'<number>';inherits:true;initial-value:1}
.card-rim{filter:brightness(var(--rim-flash,1))}
.card-backlight{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-50%);filter:blur(24px);
 /* All colour fades out before the element edges; no clipped ellipse. */
 background:
  radial-gradient(ellipse at 39% 40%,#b8795c80 0%,#b8795c42 24%,#b8795c10 47%,#b8795c00 69%),
  radial-gradient(ellipse at 61% 45%,#81769b70 0%,#81769b38 25%,#81769b0d 49%,#81769b00 70%),
  radial-gradient(ellipse at 49% 60%,#5e8a8855 0%,#5e8a882c 23%,#5e8a880a 46%,#5e8a8800 68%);
 -webkit-mask-image:radial-gradient(ellipse closest-side,#000 20%,#000b 44%,#0004 64%,transparent 86%);
 mask-image:radial-gradient(ellipse closest-side,#000 20%,#000b 44%,#0004 64%,transparent 86%)}
@media(prefers-reduced-motion:reduce){.card-backlight{display:none}.card-rim{filter:none}}

/* Keep the two-digit value inside the same corner position. */
.signature-object[data-rank="10"] .card-index{font-size:clamp(25px,2.3vw,36px);letter-spacing:-.06em;white-space:nowrap}
@media(max-width:700px){.signature-object[data-rank="10"] .card-index{font-size:24px}}

/* Classical suit under both corner values; the lower index already rotates 180°. */
.trial-signature .card-index .card-suit{display:block;fill:currentColor;width:.44em;height:.51em;margin-top:2px;flex:none}
.trial-signature .card-index .card-suit[hidden]{display:none}

/* Centre the glyph advance independently of inherited heading tracking. */
.trial-signature .card-index > span{display:block;text-align:center;letter-spacing:0;min-width:.78em}
/* Small optical correction for the spade under Georgia's K, in card coordinates. */
.trial-signature .card-index .card-suit[data-suit="spades"]{transform:translateX(.035em)}