/* ─── 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; }
}

/* ─── DISCIPLINE CARDS: REAL INSTALL FRAMES ─────────────────────────── */
.service { overflow: hidden; }
.service-media {
  position: relative;
  margin: -32px -28px 20px;
  height: 178px;
  overflow: hidden;
  border-bottom: 1px solid rgba(250,250,249,0.06);
}
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.service:hover .service-media img { transform: scale(1.06); }
.service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,0.88) 98%);
  pointer-events: none;
}
.svc-chip {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  font: 600 8.5px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.24em;
  color: #2DD4BF;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(45,212,191,0.35);
  padding: 5px 9px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
  .service-media { height: 150px; }
}

/* content-visibility removed 2026-07-31 — blanked sections/text in Safari (Adolfo report: tests segment 02 + missing text) */

/* ─── PROCESS: real artifacts per step ──────────────────────────────── */
.step-media {
  position: relative;
  margin: -28px -24px 18px;
  height: 150px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(250,250,249,0.06);
}
.step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.step:hover .step-media img { transform: scale(1.05); }
.step-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.85) 98%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .step-media { margin: -18px -4px 16px; height: 140px; border-radius: 10px; }
}

/* ─── ROSTER: completed-residence thumbnails ────────────────────────── */
.rcard { overflow: hidden; }
.rcard-media {
  position: relative;
  margin: -20px -20px 16px;
  height: 140px;
  overflow: hidden;
  border-bottom: 1px solid rgba(250,250,249,0.06);
}
.rcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.rcard:hover .rcard-media img { transform: scale(1.06); }
.rcard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.8) 98%);
  pointer-events: none;
}
.rc-chip {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  font: 600 8px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.26em;
  color: #2DD4BF;
  background: rgba(10,10,10,0.6);
  border: 1px solid rgba(45,212,191,0.35);
  padding: 5px 8px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

/* ─── WALKTHROUGH BAND ──────────────────────────────────────────────── */
.walkband {
  position: relative;
  height: clamp(360px, 56vh, 560px);
  overflow: hidden;
}
.walkband-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.walkband-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.06) 42%, rgba(10,10,10,0.55) 100%);
  pointer-events: none;
}
.walkband-content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 46px;
  gap: 12px;
}
.walkband-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  color: var(--ivory, #FAFAF9);
  margin: 0;
  line-height: 1.1;
}
.walkband-title em {
  font-style: italic;
  background: linear-gradient(100deg, #9B5CFF, #E24DD0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.walkband-cta {
  font: 600 12px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #2DD4BF;
  text-decoration: none;
  border: 1px solid rgba(45,212,191,0.4);
  border-radius: 100px;
  padding: 12px 18px;
  background: rgba(10,10,10,0.45);
  backdrop-filter: blur(6px);
  transition: background 300ms ease, transform 300ms ease;
}
.walkband-cta:hover { background: rgba(45,212,191,0.12); transform: translateY(-2px); }

/* ─── LIVE STATS ────────────────────────────────────────────────────── */
.stats-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  font: 600 9.5px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.3em;
  color: rgba(250,250,249,0.5);
  text-align: center;
}
.stats-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2DD4BF;
  box-shadow: 0 0 10px 2px rgba(45,212,191,0.7);
  animation: statpulse 2.8s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes statpulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { .stats-live i { animation: none; } }

/* ─── HERO PROOF STRIP: real installations, slow marquee ────────────── */
.proof-strip {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(250,250,249,0.07);
  border-bottom: 1px solid rgba(250,250,249,0.07);
  background: #0A0A0A;
  padding: 14px 0;
}
.proof-strip { contain: layout paint; }
.proof-track {
  transform: translateZ(0);
  display: flex;
  gap: 14px;
  width: max-content;
  animation: proofscroll 46s linear infinite;
}
.proof-strip:hover .proof-track { animation-play-state: paused; }
.proof-tile {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  width: 190px;
  height: 106px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(250,250,249,0.08);
}
.proof-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) brightness(0.92);
  transition: filter 400ms ease, transform 700ms cubic-bezier(0.16,1,0.3,1);
}
.proof-tile:hover img { filter: saturate(1.08) brightness(1.04); transform: scale(1.05); }
.proof-tile figcaption {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font: 600 8px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.24em;
  color: rgba(250,250,249,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
@keyframes proofscroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .proof-track { animation: none; } }
@media (max-width: 700px) {
  .proof-tile { width: 150px; height: 88px; }
  .proof-track { animation-duration: 36s; }
}

/* ─── TOURS: scanner-language upgrade (teal sweep + ENTER chip) ─────── */
.xrt-scan {
  background: linear-gradient(180deg, transparent, rgba(45,212,191,0.2), transparent) !important;
}
.xrt-tile::before {
  content: "ENTER →";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font: 600 8.5px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.26em;
  color: #2DD4BF;
  background: rgba(10,10,10,0.6);
  border: 1px solid rgba(45,212,191,0.35);
  padding: 6px 10px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.xrt-tile:hover::before { opacity: 1; transform: none; }
.xrt-tile:hover {
  border-color: rgba(45,212,191,0.55) !important;
  box-shadow: 0 18px 48px -12px rgba(45,212,191,0.25), 0 0 0 1px rgba(45,212,191,0.2) !important;
}
.xrt-tile img { transition: transform 900ms cubic-bezier(0.16,1,0.3,1), filter 400ms ease; }
.xrt-tile:hover img { transform: scale(1.04); filter: brightness(1.08) saturate(1.06); }

/* ─── ANIMATION GATING (2026-07-31): pause everything offscreen ───────
   Safari-safe replacement for content-visibility. xray-scan.js toggles
   .anim-offstage on the gated containers via IntersectionObserver. */
.anim-offstage,
.anim-offstage * {
  animation-play-state: paused !important;
}
/* tour scan sweep: was infinite x5 — now one sweep on hover only */
.xrt-scan { animation: none !important; }
.xrt-tile:hover .xrt-scan { animation: xrtScan 1.6s linear 1 !important; }

/* ─── SERVICE PAGES: evidence bands + overview media panes ──────────── */
.svc-evidence { max-width: 1100px; margin: -8px auto 0; padding: 0 28px; }
.svc-evidence-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(250,250,249,0.08);
}
.svc-evidence-frame img {
  width: 100%;
  height: clamp(240px, 40vw, 420px);
  object-fit: cover;
  display: block;
  filter: saturate(1.04);
}
.svc-evidence-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.6) 100%);
  pointer-events: none;
}
.svc-evidence-link {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font: 600 9px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.24em;
  color: #2DD4BF;
  background: rgba(10,10,10,0.6);
  border: 1px solid rgba(45,212,191,0.35);
  padding: 7px 11px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  text-decoration: none;
  transition: background 300ms ease;
}
.svc-evidence-link:hover { background: rgba(45,212,191,0.14); }
.svc-card { overflow: hidden; position: relative; }
.svc-card .svc-media {
  position: relative;
  margin: -28px -26px 18px;
  height: 150px;
  overflow: hidden;
  border-bottom: 1px solid rgba(250,250,249,0.06);
}
.svc-card .svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.16,1,0.3,1);
}
.svc-card:hover .svc-media img { transform: scale(1.05); }
.svc-card .svc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.85) 98%);
  pointer-events: none;
}
.svc-card:hover { border-color: rgba(45,212,191,0.5) !important; }