/* Holographic certificate cards: tilt toward the cursor, glare + foil sheen.
   Each variant can override --cert-* tokens to match its palette. */
.certs { --cert-radius: 14px; --cert-muted: #71717a; --cert-line: rgba(0,0,0,.08); --cert-link: currentColor;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cert { perspective: 900px; }
.holo {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --o: 0; --s: 1;
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in;
  aspect-ratio: 1.5; border-radius: var(--cert-radius); overflow: hidden; isolation: isolate;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transform-style: preserve-3d; will-change: transform;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -12px rgba(0,0,0,.25), 0 0 0 1px var(--cert-line);
}
.holo.active {
  transition: transform .12s linear, box-shadow .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 30px 60px -20px rgba(0,0,0,.45), 0 0 0 1px var(--cert-line);
}
.holo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; }
/* monochrome sheen: a light streak that follows the cursor across a slightly darker surface */
.holo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, rgba(0,0,0,.035) 0%, rgba(0,0,0,0) 32%, rgba(255,255,255,.28) 50%, rgba(0,0,0,0) 68%, rgba(0,0,0,.035) 100%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  opacity: var(--o); transition: opacity .4s;
}
/* spotlight glare */
.holo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 60%, rgba(0,0,0,.06) 100%);
  opacity: var(--o); transition: opacity .4s;
}
.holo .edge { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); opacity: var(--o); }
.cert-meta { margin-top: 14px; }
.cert-meta b { display: block; font-weight: 500; font-size: 14px; line-height: 1.35; }
.cert-meta span { display: block; font-size: 12px; color: var(--cert-muted); margin-top: 2px; }
.cert-meta a, .cert-meta .verify { display: inline-block; margin-top: 6px; padding: 0; font: inherit; font-size: 12px; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--cert-link); cursor: pointer; }

/* hover: only the certificate image zooms (growing up and out from its bottom edge, edge cards inwards);
   the caption below stays exactly where it was. The neighbours step back slightly. */
.cert { position: relative; transition: opacity .4s; }
.holo { transform-origin: 50% 100%; }
.cert:first-child .holo { transform-origin: 0 100%; }
.cert:last-child .holo { transform-origin: 100% 100%; }
@media (hover: hover) and (pointer: fine) {
  .cert:hover { z-index: 5; }
  .cert:hover .holo { --s: 1.175; }
  .certs:hover .cert:not(:hover) { opacity: .6; }
}

/* popup: shares the project popup shell (cases.css); certificate fills the right column */
.ct-dlg .cs-sheet { max-width: 1120px; height: min(660px, calc(100% - 56px)); }
.ct-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.ct-view { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 32px 32px; }
.ct-view img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 60px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06); }
.ct-id { font: 500 12.5px "Geist Mono", monospace; letter-spacing: .02em; }
.ct-skill { padding: 3px 10px; }
.sd-links button.btn { font: 500 13px var(--sans, system-ui); cursor: pointer; }

@media (max-width: 720px) {
  .certs { grid-template-columns: 1fr; gap: 28px; }
  .ct-dlg .cs-sheet { height: auto; }
  .ct-main { display: block; }
  .ct-view { padding: 4px 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .holo, .cert { transform: none !important; transition: none; } }