.hx-subhero[data-fx-mode] .hx-subhero__still { overflow: hidden; }

.x-lens__layer {
  position: absolute; inset: 0; pointer-events: none;
  --lx: -999px; --ly: -999px; --lr: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1px), transparent var(--lr));
          mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 calc(var(--lr) - 1px), transparent var(--lr));
}
.x-lens__reveal {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(1.55) contrast(1.15) saturate(0.35);
}
.x-lens__reveal::after {
  content: ""; position: absolute; inset: 0; background: rgba(var(--pillar-accent-rgb), 0.16); mix-blend-mode: screen;
}
.x-lens__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.x-lens__pin {
  position: absolute; width: 0; height: 0; pointer-events: none;
}
.x-lens__pin::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pillar-accent); box-shadow: 0 0 0 3px rgba(var(--pillar-accent-rgb), 0.22), 0 0 12px rgba(var(--pillar-accent-rgb), 0.6);
}
.x-lens__pin::after {
  content: ""; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(var(--pillar-accent-rgb), 0.55); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .x-lens__pin::after { animation: x-lens-ping 3.2s var(--ease-out) infinite; }
  .x-lens__pin:nth-child(2n)::after { animation-delay: 1.1s; }
  .x-lens__pin:nth-child(3n)::after { animation-delay: 2.2s; }
}
@keyframes x-lens-ping { 0% { transform: scale(0.4); opacity: 0.9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

.fx-loupe--pillar .fx-loupe__ring { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 24px rgba(var(--pillar-accent-rgb), 0.35); }
.x-lens__val { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--color-text-primary); }
.x-lens__state { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
.x-lens__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.x-lens__state[data-sev="normal"] { color: var(--color-text-primary); }
.x-lens__state[data-sev="normal"]::before { width: 12px; height: 2px; border-radius: 1px; background: var(--pillar-accent); }
.x-lens__state[data-sev="adv"] { color: var(--sev-adv); }
.x-lens__state[data-sev="adv"]::before { width: 0; height: 0; border-radius: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; }
.x-lens__state[data-sev="warn"] { color: var(--sev-warn); }
.x-lens__state[data-sev="warn"]::before { width: 0; height: 0; border-radius: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; }
.x-lens__state[data-sev="crit"] { color: var(--sev-crit); }
.x-lens__state[data-sev="crit"]::before { border-radius: 1px; transform: rotate(45deg) scale(0.85); }

@media (max-width: 900px) { .x-lens__layer, .x-lens__pin { display: none; } }