/* ===================================================================
   SHRS Digital Credential — the rotating identity card
   -------------------------------------------------------------------
   A physically-modelled ID-1 card (the 85.6 × 54 mm proportion of every
   bank and identity card in the world) rendered in CSS 3D. It turns
   slowly on its own axis, can be caught and spun by hand, and carries
   the devices a real credential carries: a gilt chip, a holographic
   foil that shifts with the angle, guilloche security engraving,
   microtext, and a machine-readable strip.

   It is decorative — the verification result beneath it is the truth.
   The card exists so that a page about credentials looks like one.
   =================================================================== */

.idc-stage{
  perspective:1600px;perspective-origin:50% 42%;
  display:grid;place-items:center;
  padding:clamp(30px,6vw,70px) 0 clamp(24px,4vw,44px);
  position:relative;
}
/* the pedestal glow the card floats above */
.idc-stage::after{
  content:"";position:absolute;left:50%;bottom:clamp(10px,3vw,30px);translate:-50% 0;
  width:min(78%,520px);height:34px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(var(--lv-gs,198,161,91),.34),transparent 70%);
  filter:blur(9px);
}

.idc{
  position:relative;width:min(92vw,470px);aspect-ratio:1.586;
  transform-style:preserve-3d;cursor:grab;touch-action:pan-y;
  transform:rotateX(var(--idc-rx,8deg)) rotateY(var(--idc-ry,0deg));
  animation:idc-spin 26s linear infinite;
  will-change:transform;
}
.idc.is-held{animation-play-state:paused;cursor:grabbing;}
.idc.is-manual{animation:none;}
@keyframes idc-spin{
  from{transform:rotateX(8deg) rotateY(0deg);}
  to{transform:rotateX(8deg) rotateY(360deg);}
}

.idc-face{
  position:absolute;inset:0;border-radius:20px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 2px 4px rgba(var(--lv-w01,20,12,4),.22),
    0 22px 44px -18px rgba(var(--lv-w01,20,12,4),.62),
    0 60px 90px -50px rgba(var(--lv-w01,20,12,4),.7),
    inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.28);
}
.idc-back{transform:rotateY(180deg);}

/* --- the substrate: deep coffee with a lit corner --- */
.idc-face::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 12% 8%, rgb(var(--lv-w127,92,66,34)) 0%, rgb(var(--lv-w128,58,39,18)) 42%, rgb(var(--lv-cfd,36,23,8)) 76%, rgb(var(--lv-cfd4s,26,16,6)) 100%);
}
/* --- guilloche engraving --- */
.idc-guilloche{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none;}
.idc-guilloche path{fill:none;stroke:rgba(var(--lv-gb,233,206,138),.34);stroke-width:.4;}

/* --- holographic foil that shifts with the card's angle --- */
.idc-foil{
  position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(
    var(--idc-foil,105deg),
    transparent 0%, rgba(var(--lv-w136,255,214,170),.12) 18%, rgba(190,235,255,.30) 32%,
    rgba(var(--lv-wh,255,255,255),.55) 40%, rgba(198,255,214,.28) 48%,
    rgba(var(--lv-gbs,233,206,138),.22) 60%, transparent 78%);
}

/* --- content layer --- */
.idc-body{position:absolute;inset:0;z-index:3;
  padding:clamp(15px,3.4vw,24px);display:flex;flex-direction:column;color:rgb(var(--lv-p3,247,238,223));}
/* The card turns, and the holographic sweep crosses the header as it
   goes: at one phase the name sat on deep coffee, at another on a bright
   gold band, and no single ink is right for both — measured 2.98:1 one
   way and 3.94:1 the other. The header gets a plate of its own, so the
   ground under the name is the same at every angle. */
.idc-head{display:flex;align-items:center;gap:11px;position:relative;
  padding:7px 11px;margin:-7px -11px 0;border-radius:10px;
  background:linear-gradient(90deg,rgba(var(--lv-w09,10,6,1),.34) 0%,rgba(var(--lv-w09,10,6,1),.24) 62%,rgba(var(--lv-w09,10,6,1),0) 100%);}
[dir="rtl"] .idc-head{
  background:linear-gradient(270deg,rgba(var(--lv-w09,10,6,1),.34) 0%,rgba(var(--lv-w09,10,6,1),.24) 62%,rgba(var(--lv-w09,10,6,1),0) 100%);}
.idc-head img{width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));}
.idc-inst{font-family:var(--font-label);font-size:clamp(.68rem,1.7vw,.84rem);
  line-height:1.2;color:rgb(var(--lv-gl4,255,243,216));letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(var(--lv-w09,10,6,1),.9);}
.idc-inst small{display:block;font-family:var(--font-body);font-weight:500;
  font-size:.58em;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--lv-w137,243,225,178),.95);
  text-shadow:0 1px 6px rgba(var(--lv-w09,10,6,1),.9);margin-top:3px;}

.idc-mid{display:flex;gap:clamp(11px,2.4vw,17px);margin-top:auto;align-items:flex-end;}
/* portrait well */
.idc-por{width:clamp(52px,13vw,74px);aspect-ratio:.8;border-radius:9px;flex-shrink:0;
  background:linear-gradient(160deg,rgba(var(--lv-gbs,233,206,138),.20),rgba(var(--lv-gs,198,161,91),.06));
  border:1px solid rgba(var(--lv-gbs,233,206,138),.44);display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.24);overflow:hidden;}
.idc-por svg{width:56%;height:56%;color:rgba(var(--lv-gb,233,206,138),.62);}
.idc-fields{flex:1;min-width:0;}
.idc-row{margin-bottom:6px;}
.idc-row:last-child{margin-bottom:0;}
.idc-k{display:block;font-family:var(--font-body);font-size:clamp(.44rem,1.1vw,.54rem);
  letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--lv-w138,238,214,155),.95);}
.idc-v{display:block;font-family:var(--font-label);font-size:clamp(.72rem,1.9vw,.96rem);
  color:#fff;letter-spacing:.02em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.idc-v.is-mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:.06em;}

/* gilt contact chip */
.idc-chip{position:absolute;right:clamp(15px,3.4vw,24px);top:clamp(52px,11vw,74px);
  width:clamp(30px,7vw,42px);aspect-ratio:1.32;border-radius:5px;
  background:linear-gradient(150deg,rgb(var(--lv-w129,243,223,174)),rgb(var(--lv-gs,198,161,91)) 45%,rgb(var(--lv-w130,142,108,49)) 100%);
  box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.7),0 2px 5px rgba(0,0,0,.45);}
.idc-chip::before,.idc-chip::after{content:"";position:absolute;background:rgba(var(--lv-w74,90,66,26),.55);}
.idc-chip::before{left:0;right:0;top:50%;height:1px;}
.idc-chip::after{top:0;bottom:0;left:34%;width:1px;box-shadow:14px 0 0 -0.5px rgba(var(--lv-w74,90,66,26),.55);}

/* machine-readable strip */
/* The machine-readable strip runs across the card's holographic sweep,
   which lifts the ground under it to a mid tone; the code measured
   3.3:1 there. A real MRZ is printed on its own band, so it gets one. */
.idc-mrz{margin-top:11px;padding:9px 10px 7px;border-radius:6px;
  background:rgba(var(--lv-w31s,8,5,1),.55);border-top:1px solid rgba(var(--lv-gbs,233,206,138),.26);
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:clamp(.42rem,1.05vw,.55rem);letter-spacing:.14em;color:rgba(var(--lv-w139,243,226,178),.96);
  white-space:nowrap;overflow:hidden;}

/* --- back face --- */
.idc-stripe{position:absolute;left:0;right:0;top:13%;height:19%;z-index:3;
  background:linear-gradient(180deg,rgb(var(--lv-w01,20,12,4)),rgb(var(--lv-cfd,36,23,8)) 40%,rgb(var(--lv-w01,20,12,4)));
  box-shadow:inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.08);}
.idc-back-body{position:absolute;inset:0;z-index:4;padding:clamp(15px,3.4vw,24px);
  display:flex;flex-direction:column;justify-content:flex-end;color:rgb(var(--lv-p3,247,238,223));}
.idc-qr{position:absolute;right:clamp(15px,3.4vw,24px);top:38%;
  width:clamp(46px,11vw,64px);aspect-ratio:1;border-radius:7px;padding:5px;
  background:rgb(var(--lv-w131,255,249,236));box-shadow:0 3px 10px rgba(0,0,0,.5);}
.idc-qr svg{width:100%;height:100%;}
.idc-micro{font-size:clamp(.38rem,.95vw,.48rem);letter-spacing:.06em;line-height:1.5;
  color:rgba(var(--lv-gb,233,206,138),.5);max-width:62%;}
.idc-sig{margin-top:9px;padding-top:8px;border-top:1px solid rgba(var(--lv-gbs,233,206,138),.22);max-width:62%;}
.idc-sig .idc-k{margin-bottom:3px;}
.idc-sig span.line{display:block;height:15px;
  background:linear-gradient(90deg,rgba(var(--lv-gbs,233,206,138),.5),transparent 72%);
  -webkit-mask:linear-gradient(90deg,#000 62%,transparent);mask:linear-gradient(90deg,#000 62%,transparent);}

/* --- the scan: an identity motif, a laser passing over the card --- */
.idc-scan{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:20px;}
.idc-scan::before{
  content:"";position:absolute;left:-10%;right:-10%;height:16%;top:-20%;
  background:linear-gradient(180deg,transparent,rgba(160,240,255,.42) 42%,rgba(var(--lv-wh,255,255,255),.75) 50%,rgba(160,240,255,.42) 58%,transparent);
  box-shadow:0 0 26px rgba(150,230,255,.6);
  animation:idc-scan 4.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes idc-scan{
  0%{top:-20%;opacity:0}
  8%{opacity:1}
  62%{top:104%;opacity:1}
  70%,100%{top:104%;opacity:0}
}

/* --- controls --- */
.idc-controls{display:flex;gap:10px;justify-content:center;align-items:center;
  margin-top:22px;flex-wrap:wrap;}
.idc-hint{font-size:.78rem;color:rgba(var(--lv-w140,238,224,196),.86);letter-spacing:.02em;}
/* The hint sits under the card, on the page, not on the card. */
html[data-pc-theme="light"] .idc-hint{color:rgb(var(--lv-ink2,87,71,47));}
.idc-flip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 18px;border-radius:999px;font-size:.84rem;font-weight:600;
  color:var(--pr-gold-text,rgb(var(--lv-gt,124,94,40)));background:linear-gradient(168deg,rgb(var(--lv-p1,255,253,249)),rgb(var(--lv-w58,243,234,218)));
  border:1px solid rgba(var(--lv-gs,198,161,91),.4);
  box-shadow:0 6px 16px -10px rgba(var(--lv-cfd2s,42,28,16),.5),inset 0 1px 0 rgba(var(--lv-bev,255,255,255),.85);
  transition:transform .35s cubic-bezier(.16,.8,.24,1),box-shadow .35s;}
.idc-flip:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(var(--lv-cfd2s,42,28,16),.6),0 0 18px -6px rgba(var(--lv-gs,198,161,91),.7);}
.idc-flip svg{width:15px;height:15px;}

/* --- when a real record comes back, the card takes its data --- */
.idc.is-live .idc-face::before{
  background:radial-gradient(120% 90% at 12% 8%, #2E5C3A 0%, #1E3F28 42%, #142A1B 76%, #0E1D13 100%);
}
.idc.is-revoked .idc-face::before{
  background:radial-gradient(120% 90% at 12% 8%, rgb(var(--lv-w132,106,42,40)) 0%, rgb(var(--lv-w133,72,29,28)) 42%, rgb(var(--lv-w134,46,18,17)) 76%, rgb(var(--lv-w135,30,12,11)) 100%);
}

@media (prefers-reduced-motion:reduce){
  .idc{animation:none;transform:rotateX(4deg) rotateY(-14deg);}
  .idc-scan::before{animation:none;opacity:0;}
  .idc-flip{transition:none;}
}
@media (max-width:520px){
  .idc-stage{perspective:1100px;}
}