/* ─── X-RAY SCANNER CARDS (Corales 39 · Corales 78 · Altum) ───────────
   Photo + pixel-aligned system-scan render of the SAME frame, overlaid.
   Drag the teal line to sweep the scan. --x is set by xray-scan.js. */
@property --x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
.xrscan {
  position: absolute;
  inset: 0;
  --x: 50%;
  overflow: hidden;
  touch-action: pan-y;
}
.xrscan img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.xrscan .xrs-xr {
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
  filter: saturate(1.08);
}
.xrscan .xrs-grain {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
  background: repeating-linear-gradient(180deg, rgba(45,212,191,0.05) 0 2px, transparent 2px 5px);
  pointer-events: none;
  z-index: 2;
}
.xrscan .xrs-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, #2DD4BF 14%, #2DD4BF 86%, transparent);
  box-shadow: 0 0 22px 2px rgba(45,212,191,0.6);
  z-index: 3;
  cursor: ew-resize;
  touch-action: none;
}
.xrscan .xrs-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 30px;
}
.xrscan .xrs-line i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 42px;
  border-radius: 100px;
  background: rgba(10,10,10,0.85);
  border: 1px solid #2DD4BF;
  display: grid;
  place-items: center;
  font: 500 10px/1 var(--mono, ui-monospace, Menlo, monospace);
  color: #2DD4BF;
  font-style: normal;
  animation: xrs-pulse 2.6s ease-in-out infinite;
}
@keyframes xrs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0.45); }
  50% { box-shadow: 0 0 0 10px rgba(45,212,191,0); }
}
.xrscan .xrs-tag {
  position: absolute;
  bottom: 10px;
  z-index: 2;
  font: 600 8.5px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.24em;
  color: var(--ivory, #FAFAF9);
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(250,250,249,0.12);
  padding: 5px 9px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.xrscan .xrs-tag.l { left: 12px; color: #2DD4BF; border-color: rgba(45,212,191,0.4); }
.xrscan .xrs-tag.r { right: 12px; }
/* intro hint: one gentle sweep when the card first enters the viewport */
.xrscan.xrs-hint { animation: xrs-sweep 2.2s cubic-bezier(0.16,1,0.3,1) 1; }
@keyframes xrs-sweep {
  0% { --x: 50%; }
  40% { --x: 64%; }
  100% { --x: 50%; }
}
/* the scanner replaces hover-video on these cards; keep Ken-Burns zoom off
   so the scan geometry stays put under the cursor */
.project:hover .project-media:has(.xrscan) {
  transform: none;
  filter: none;
}
/* systems ledger chips under the description */
.project-systems {
  margin-top: 10px;
  font: 500 9.5px/1.8 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.18em;
  color: rgba(250,250,249,0.45);
  text-transform: uppercase;
}
.project-systems b { font-weight: 500; color: #2DD4BF; }
.project-systems b.acc { color: #9B5CFF; }
.project-systems b.fire { color: #FF7A59; }
.project-systems b.gnd { color: #E8A33D; }
@media (prefers-reduced-motion: reduce) {
  .xrscan.xrs-hint { animation: none; }
  .xrscan .xrs-line i { animation: none; }
}