/* ============================================================
   COA Certificate Lightbox Verify Effects
   Added to quality page COA cards: scan-line + click-to-verify
   ============================================================ */

/* ------------------------------------------------------------
   1) Layout fix: portrait A4 certificates must fill the HEIGHT
   Theme CSS (.lb__fig img) assumes landscape photos:
     width:100%; max-height:74vh; object-fit:contain
   For a 1347x1743 portrait cert that caps height at 74vh and
   leaves the cert tiny in a wide box. Here we override so the
   cert scales to the available height, centered.
   ------------------------------------------------------------ */
.lb.is-coa .lb__fig {
  position: relative;           /* anchor for overlays */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-self: center;         /* shrink-wrap around the cert */
  width: fit-content;
  max-width: min(680px, 92vw);  /* portrait A4 ~0.77 ratio; keeps it dominant */
  max-height: calc(100vh - 130px);   /* leave room for nav + caption */
  background: #fff;
  margin: 0;
  box-sizing: border-box;
}
.lb.is-coa .lb__fig img {
  width: auto !important;            /* override theme width:100% */
  max-width: 100% !important;
  height: auto;
  max-height: calc(100vh - 175px) !important; /* under fig max-height + caption */
  object-fit: contain;
  display: block;
}
.lb.is-coa .lb__fig .lb__cap {
  flex: none;
  width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   2) Enter animation for the certificate image
   ------------------------------------------------------------ */
.lb.is-coa .lb__box {
  animation: coaBoxIn .45s cubic-bezier(.22,1,.36,1);
}
.lb.is-coa #lbImg {
  animation: coaImgIn .5s cubic-bezier(.22,1,.36,1);
}
@keyframes coaBoxIn {
  from { transform: scale(.82); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes coaImgIn {
  from { transform: scale(.9) translateY(8px); opacity: 0; filter: blur(2px); }
  to   { transform: scale(1) translateY(0);   opacity: 1; filter: blur(0); }
}

/* ------------------------------------------------------------
   3) Always-visible "click to verify" affordance
   A badge pinned to the image + cursor pointer on the image.
   ------------------------------------------------------------ */
.lb.is-coa .lb__fig img {
  cursor: pointer;
}
.lb.is-coa .lb__fig::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px rgba(38, 197, 255, 0);
  transition: box-shadow .3s ease;
  pointer-events: none;
  z-index: 4;
}
.lb.is-coa .lb__fig:hover::before {
  box-shadow: inset 0 0 0 3px rgba(38, 197, 255, .55), 0 0 40px rgba(38,197,255,.18);
}

/* Click-badge: always visible on the cert (pulsing) */
.lb.is-coa .lb__verify-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(6, 60, 130, .92);
  color: #fff;
  font: 700 12px/1 'Inter', sans-serif;
  letter-spacing: .05em;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  z-index: 6;
  pointer-events: none;
  animation: coaBadgePulse 2.2s ease-in-out infinite;
  white-space: nowrap;
}
.lb.is-coa .lb__verify-badge svg {
  width: 14px;
  height: 14px;
  stroke: #7CFC9B;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes coaBadgePulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
  50%      { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(38,197,255,.45); }
}

/* Big centered hint that auto-shows right after opening, then fades.
   Re-appears on hover (JS toggles .hint-on). */
.lb.is-coa .lb__verify-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(9, 32, 30, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 700 15px/1.3 'Inter', sans-serif;
  letter-spacing: .03em;
  padding: 16px 24px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(124, 252, 155, .35);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  transition: opacity .35s ease, transform .35s ease;
  white-space: nowrap;
}
.lb.is-coa .lb__verify-hint svg {
  width: 22px;
  height: 22px;
  stroke: #7CFC9B;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: coaHintSwing 1.6s ease-in-out infinite;
}
@keyframes coaHintSwing {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-14deg); }
  75%      { transform: rotate(10deg); }
}
.lb.is-coa.hint-on .lb__verify-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.lb.is-coa.hint-gone .lb__verify-hint {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
}
.lb.is-coa .lb__fig:hover .lb__verify-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ------------------------------------------------------------
   4) Scan line overlay (idle demo after open)
   ------------------------------------------------------------ */
.lb.is-coa .lb__scan {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(38,197,255,.0), rgba(38,197,255,.9), rgba(38,197,255,.0));
  filter: drop-shadow(0 0 6px rgba(38,197,255,.8));
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}
.lb.is-coa.scanning .lb__scan {
  animation: coaScanLine 1.1s cubic-bezier(.45,.05,.35,1) forwards;
}
@keyframes coaScanLine {
  0%   { top: 8%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* ------------------------------------------------------------
   5) Verification confirm state (after click)
   ------------------------------------------------------------ */
.lb.is-coa.verifying #lbImg {
  animation: coaVerifying .5s ease;
  filter: saturate(1.05);
}
.lb.is-coa.verifying .lb__scan {
  animation: coaScanFast .55s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes coaScanFast {
  0%   { top: 4%;  opacity: 1; }
  100% { top: 96%; opacity: 1; }
}
.lb.is-coa.verifying .lb__verify-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.4);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(6, 148, 84, .94);
  box-shadow: 0 0 0 0 rgba(6, 148, 84, .5), 0 10px 30px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 8;
  animation: coaCheckPop .6s cubic-bezier(.22,1.4,.36,1) forwards .18s;
  pointer-events: none;
}
.lb.is-coa.verifying .lb__verify-check svg {
  width: 40px;
  height: 40px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: coaCheckDraw .45s ease forwards .4s;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
@keyframes coaCheckPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes coaCheckDraw {
  to { stroke-dashoffset: 0; }
}

/* --- Redirect message --- */
.lb.is-coa.verifying .lb__redirect {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.96);
  color: #0a3c78;
  font: 700 14px/1.4 'Inter', sans-serif;
  padding: 11px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  white-space: nowrap;
  opacity: 0;
  z-index: 8;
  animation: coaMsgIn .3s ease forwards .6s;
  pointer-events: none;
}
@keyframes coaMsgIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- pulse glow on image while verifying --- */
.lb.is-coa.verifying .lb__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 3px rgba(6,148,84,.55);
  animation: coaPulse .8s ease-out 3;
  pointer-events: none;
  z-index: 5;
}
@keyframes coaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(6,148,84,.55); }
  100% { box-shadow: 0 0 0 26px rgba(6,148,84,0); }
}

/* ------------------------------------------------------------
   6) Caption: add a "Verify ↗" affordance line
   ------------------------------------------------------------ */
.lb.is-coa .lb__cap .lb__verify-link {
  color: #0a6cd8;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}