/* ---------------------------------------------------------------
   Certificate — uses the real certificate artwork as an image
   (crisp at every size, identical to the printed PDF). Only the
   recipient name is live text, positioned exactly where the PDF
   sets it: x 45.6pt, y 193.4pt, Manrope Bold ~13.75pt on 842.25pt.
---------------------------------------------------------------- */
.cert { container-type: inline-size; aspect-ratio: 842.25 / 595.5; width: 100%; position: relative; }
.cert__paper { position: absolute; inset: 0; background: #fff; overflow: hidden; border-radius: .9cqw; }
.cert__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.cert__name {
  position: absolute; left: 5.414%; top: 32.48%; margin: 0;
  max-width: 40.9%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 1.6325cqw; line-height: normal; letter-spacing: 0;
  color: #000; transition: color .3s;
}
.cert__name.is-placeholder { color: #9aa39f; }
.cert.is-bumped .cert__name { animation: certBump .35s ease; }
@keyframes certBump { 40% { color: #2b5509; } }

/* ---------------------------------------------------------------
   Holographic "Authentic" sticker — a shine layer placed exactly
   over the sticker in the artwork (measured from the 2400px render).
   ::before  hue-shifting foil tint (blend: color, so black text stays black)
   ::after   moving light band (blend: overlay)
   Driven by --hx/--px/--py (pointer on desktop, scroll on phones).
---------------------------------------------------------------- */
.cert__holo { position: absolute; pointer-events: none; overflow: hidden; border-radius: 11.4%;
  left: 72.833%; top: 78.020%; width: 11.250%; height: 15.969%; }
/* [VC-LIVE] §12.11 step A: the regenerated biz artwork uses the master sticker position → same values as .cert__holo */
.cert__holo--biz { left: 72.833%; top: 78.020%; width: 11.250%; height: 15.969%; border-radius: 11.4%; }
.cert__holo::before { content: ''; position: absolute; inset: -30%;
  background: conic-gradient(from calc((var(--hx, var(--sh, 0)) * 360deg) + 20deg) at var(--px, 62%) var(--py, 38%),
    #ff7ac8, #8fd3ff, #9dffc4, #ffe58a, #c9a2ff, #ff7ac8);
  mix-blend-mode: color; opacity: .42; transition: opacity .4s; }
.cert__holo::after { content: ''; position: absolute; inset: -60% -80%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%);
  mix-blend-mode: overlay; transform: translateX(-60%); animation: certHoloSweep 5.5s ease-in-out infinite; }
@keyframes certHoloSweep { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
/* desktop pointer: the light follows the cursor instead of sweeping */
.cert.is-lit .cert__holo::after { animation: none; transform: translateX(calc((var(--px, 50%) - 50%) * 1.2)); transition: transform .12s linear; }
.cert.is-lit .cert__holo::before { opacity: .6; }
/* typing a name: one bright sweep across the sticker */
.cert.is-bumped .cert__holo::after { animation: certHoloFlash .9s ease-out; }
@keyframes certHoloFlash { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .cert__holo::after { animation: none !important; transform: translateX(-60%); } }