/* Interactive histology specimen explorer — used on the Research page hero.
   (Moved off the homepage; relies on the site design tokens: --green, --signal,
   --mono, --serif, --sans, --dark, --mid, --fade, --border, --bg, --green-deep.) */
.specimen{margin:0;display:flex;flex-direction:column;gap:18px;width:100%}
.specimen-stage{
  position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;
  background:#0a0f0c;cursor:grab;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
    0 0 0 1px rgba(27,107,74,.18),
    0 34px 64px -30px rgba(11,22,34,.55);
  -webkit-user-select:none;user-select:none;touch-action:none;
}
.specimen-stage.is-dragging{cursor:grabbing}
/* While dragging, the pan must follow the finger exactly — the base .12s transform
   transition lags on slow drags and reads as a shake, so disable it mid-drag. */
.specimen-stage.is-dragging .specimen-pan{transition:none}
.specimen-pan{
  position:absolute;inset:0;
  transform:translate(var(--px,0px),var(--py,0px)) scale(var(--mag,1.4));
  transform-origin:center;will-change:transform;transition:transform .12s ease-out;
}
.specimen-pan.animate{transition:transform .55s cubic-bezier(.22,.7,.25,1)}
.specimen-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease;will-change:opacity;-webkit-user-drag:none;user-select:none;pointer-events:none}
.specimen-img.is-active{opacity:1}
.specimen-stage.refocus .specimen-img.is-active{animation:focusPull .7s ease}
@keyframes focusPull{0%{filter:blur(10px) saturate(.65)}55%{filter:blur(2px) saturate(.9)}100%{filter:blur(0) saturate(1)}}
.specimen-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(6,12,8,.38) 100%);
  box-shadow:inset 0 0 64px rgba(0,0,0,.4)}
.specimen-reticle{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;mix-blend-mode:screen}
.specimen-reticle line,.specimen-reticle circle{stroke:#fff;stroke-width:.18;vector-effect:non-scaling-stroke}
.specimen-readout{position:absolute;top:14px;left:14px;z-index:5;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:rgba(255,255,255,.92);
  background:rgba(8,16,11,.55);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:6px 11px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.specimen-readout .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 7px var(--signal);animation:roDot 1.6s ease-in-out infinite}
@keyframes roDot{0%,100%{opacity:1}50%{opacity:.35}}
.specimen-readout .ro-div{width:1px;height:11px;background:rgba(255,255,255,.25)}
.specimen-readout .ro-live{font-size:8.5px;font-weight:700;letter-spacing:1.4px;color:var(--signal);border:1px solid var(--signal);border-radius:4px;padding:1px 5px}
.specimen-grab{position:absolute;right:14px;bottom:15px;z-index:5;font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(8,16,11,.5);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:5px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .4s}
.specimen-stage.touched .specimen-grab{opacity:0}
.specimen-caption{display:flex;flex-direction:column;gap:3px;padding:0 4px;min-height:42px}
.sc-tissue{font-family:var(--serif);font-weight:600;font-size:16.5px;color:var(--dark);line-height:1.25}
.sc-note{font-size:13px;color:var(--fade);line-height:1.4;text-wrap:pretty}
.specimen-controls{display:flex;flex-direction:column;gap:15px}
.specimen-stains{display:flex;flex-wrap:wrap;gap:8px}
.stain-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--mid);background:#fff;border:1px solid var(--border);border-radius:100px;padding:7px 14px 7px 11px;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.stain-chip span{width:10px;height:10px;border-radius:50%;background:var(--chip);box-shadow:0 0 0 3px color-mix(in srgb,var(--chip) 22%,transparent)}
.stain-chip:hover{border-color:var(--chip);color:var(--dark)}
.stain-chip.is-active{color:#fff;background:var(--dark);border-color:var(--dark)}
.specimen-mag{display:flex;align-items:center;gap:13px}
.mag-end{font-family:var(--mono);font-size:11px;color:var(--fade);font-weight:600;flex-shrink:0}
#mag-range{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--signal));outline:none;cursor:pointer}
#mag-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--green);box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:grab;transition:transform .12s}
#mag-range::-webkit-slider-thumb:active{transform:scale(1.16);cursor:grabbing}
#mag-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--green);box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:grab}
@media (prefers-reduced-motion:reduce){
  .specimen-pan,.specimen-img{transition:none}
  .specimen-stage.refocus .specimen-img.is-active{animation:none}
}