/* AQcredix — Neural Face UI */

.face-stage{
  position:relative;width:100%;height:100%;min-height:520px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
}
.face-wrap{
  position:relative;width:100%;height:100%;
  margin:0 auto;
}
#faceCanvas{width:100%;height:100%;display:block;}

.face-fallback{
  width:80%;aspect-ratio:1/1;border-radius:50%;margin:auto;
  background:radial-gradient(circle at 38% 32%, rgba(79,70,229,.5), rgba(14,165,160,.22) 55%, transparent 75%);
  display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(255,255,255,.6);font-size:13px;padding:20px;
}

.face-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  color:rgba(255,255,255,.4);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  transition:opacity .5s ease;pointer-events:none;
}
.face-loading .spin{width:24px;height:24px;border-radius:50%;border:2px solid rgba(94,234,212,.2);border-top-color:#5eead4;animation:facespin .8s linear infinite;}
@keyframes facespin{to{transform:rotate(360deg);}}
.face-loading.hidden{opacity:0;}

.face-node-hit{
  position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);
  background:transparent;border:none;border-radius:50%;cursor:pointer;padding:0;
  pointer-events:auto;transition:opacity .25s ease;
}
.face-node-hit:focus-visible{
  outline:2px solid #5eead4;outline-offset:3px;background:rgba(94,234,212,.12);border-radius:50%;
}

.face-tooltip{
  position:absolute;z-index:20;transform:translate(-50%,-100%);max-width:280px;
  background:rgba(8,11,32,.94);backdrop-filter:blur(10px);
  border:1px solid rgba(94,234,212,.3);border-radius:10px;padding:10px 14px;
  font-size:12px;color:#fff;
  opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease;
}
.face-tooltip.show{opacity:1;transform:translate(-50%,-108%);}
.face-tooltip b{display:block;font-family:var(--font-display);font-size:13px;font-weight:700;margin-bottom:3px;white-space:nowrap;}
.face-tooltip span{display:block;font-size:11px;color:#5eead4;font-family:var(--font-mono);margin-bottom:4px;}
.face-tooltip em{display:block;font-style:normal;font-size:10px;color:rgba(255,255,255,.55);line-height:1.5;font-family:var(--font-mono);white-space:normal;}

@media (prefers-reduced-motion: reduce){
  .face-loading .spin{animation:none;}
}

@media (max-width:1100px){
  .face-stage{min-height:440px;}
}
@media (max-width:900px){
  .face-stage{min-height:340px;height:auto;}
  .face-wrap{height:auto;aspect-ratio:1/1;}
}
@media (max-width:600px){
  /* The hero stacks to one column here, so the canvas would otherwise run the full
     width of the screen and sit tight against the headline above and the stat row
     below. Capping it and adding breathing room keeps the organ clear of both; face.js
     dollies the camera back to match so the model still fills its box properly rather
     than shrinking into a corner. */
  /* The canvas keeps a generous square; the shrinking is done by the camera in face.js,
     which measures the widest shape and pulls back until it fits. Capping the canvas
     harder than this would only shrink the drawing surface — the model would still meet
     whatever edge it was going to meet, because the framing is set by field of view, not
     by canvas size. 320px keeps the wireframe legible on a 360px screen. */
  .face-stage{min-height:300px;margin:8px auto 4px;}
  .face-wrap{max-width:320px;margin:0 auto;}
  /* The tooltip is anchored above the node it describes and is not clipped by the
     canvas, so near the top of the model it could float over the headline. Keeping it
     inside the stage and narrower stops that. */
  .face-tooltip{max-width:220px;font-size:11.5px;}
  .organ-label{font-size:10px;padding:5px 12px;bottom:6px;}
}

/* ---- Organ name label, shown as each shape settles ---- */
.organ-label{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(6px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-bright);background:rgba(8,11,32,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(94,234,212,.28);border-radius:999px;padding:6px 16px;
  pointer-events:none;opacity:0;transition:opacity .6s ease, transform .6s ease;white-space:nowrap;
}
.organ-label.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion: reduce){.organ-label{transition:none;}}