/* ============================================================================
   site/xray.css — «Рентген» (site/xray.js): закрытый фургон FLUX, курсор
   протирает кузов до груза и ценников.

   Слой сам не решает, где и какого размера стоит: пластина (.xr-plate) —
   кадр 2880×1607 с холстом и ценниками поверх, всё в долях пластины. Место
   ей даёт раздел, где она живёт, — сейчас каталог на главной (pantry.css).
   Без JS или WebGL остаётся закрытый фургон картинкой — законченный вид.

   Геометрия кадра (site/xray/make.py, вторая пара 23.09): силуэт фургона
   по ширине 0.0879…0.9259, по высоте 0.1680…0.8581 пластины (с колёсами);
   пропорция 1.7922.
   ========================================================================== */

.xr{ position:relative; overflow:hidden; border-radius:var(--r) }

.xr-plate{ position:relative; width:100%; aspect-ratio:2880 / 1607 }
.xr-plate picture{ display:contents }
.xr-img,
.xr-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }

/* Холст проявляется после первого кадра: до него это чёрный прямоугольник.
   Под ним та же картинка тегом — подмены не видно. */
.xr-canvas{ opacity:0; transition:opacity .3s var(--e-micro) }
.xr-live .xr-canvas{ opacity:1 }

/* ── ценники ──────────────────────────────────────────────────────────────
   Точка стоит на ящике, нить поднимается к стеклянной плашке. Позицию
   точки ставит xray.js из data-x/data-y (проценты пластины), показ — класс
   .is-on. Без JS ценники не видны: протирать нечем. */

.xr-tags{ position:absolute; inset:0; margin:0; padding:0; list-style:none; pointer-events:none }

.xr-tag{ position:absolute; width:0; height:0; opacity:0;
  transition:opacity .22s var(--e-micro) }   /* = FADE_MS в xray.js (с запасом) */
.xr-tag.is-on{ opacity:1 }

.xr-tag::before{
  content:""; position:absolute; left:-4.5px; top:-4.5px; width:9px; height:9px; border-radius:50%;
  background:var(--blue, #8FE3C4);
  box-shadow:0 0 0 4px rgba(143,227,196,.16), 0 0 14px rgba(143,227,196,.55);
}
.xr-tag::after{
  content:""; position:absolute; left:-.5px; bottom:5px; width:1px; height:calc(var(--lead, 52px) - 5px);
  background:linear-gradient(to top, rgba(143,227,196,.85), rgba(143,227,196,.2));
  transform:scaleY(.2); transform-origin:50% 100%;
  transition:transform .3s var(--e-reveal);
}
.xr-tag.is-on::after{ transform:none }

.xr-chip{
  position:absolute; left:0; bottom:var(--lead, 52px); translate:-50% 0;
  display:grid; gap:3px; white-space:nowrap;
  padding:8px 12px 9px; border-radius:12px;
  background:rgba(7,17,14,.8);
  border:1px solid rgba(143,227,196,.26);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.8);
  transform:translate3d(0,6px,0) scale(.96); transform-origin:50% 100%;
  transition:transform .34s var(--e-reveal);
}
.xr-tag.is-on .xr-chip{ transform:none }
.xr-chip b{ font:600 13px/1.2 Manrope, system-ui, sans-serif; color:var(--ink); letter-spacing:-.005em }
.xr-chip span{ font:500 12px/1.2 "Space Grotesk", Manrope, system-ui, sans-serif;
  color:var(--muted); font-variant-numeric:tabular-nums }

/* Пометка «пример»: цены на ценниках иллюстрация, а не прайс. Появляется
   вместе с первым ценником и дальше остаётся. */
.xr-note{ position:absolute; right:8.4%; top:86.8%; margin:0;
  font-size:11.5px; letter-spacing:.01em; color:var(--dim);
  opacity:0; transition:opacity .5s var(--e-micro) }
.xr-seen .xr-note{ opacity:1 }

@media (max-width:900px){
  .xr-chip{ padding:6px 10px 7px; border-radius:10px }
  .xr-chip b{ font-size:12px }
  .xr-chip span{ font-size:11px }
  .xr-note{ font-size:10.5px }
}