/* ════════════════════════════════════════════════════════════════════════
   edge-glow.css — подсветка ГРАНЕЙ объектов вслед за курсором/тапом.
   Когда курсор (или тап) рядом — у близких объектов светятся края (рамка),
   градиент следует за позицией. Несколько объектов в зоне светятся сразу.
   Позицию пишет edge-glow.js в --ex/--ey (относительно каждого элемента).
   Техника: радиальный градиент в ::after + маска (показываем только рамку).
   ════════════════════════════════════════════════════════════════════════ */

.room-item,
.dm-item,
.fwd-item {
  position: relative;
}

.room-item::after,
.dm-item::after,
.fwd-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;                 /* толщина светящейся грани */
  /* свет в точке курсора; далеко от --ex/--ey → центр за пределами → не видно */
  background: radial-gradient(
    220px circle at var(--ex, -500px) var(--ey, -500px),
    rgba(150, 175, 255, 0.95),
    rgba(150, 175, 255, 0.0) 65%
  );
  /* маска: оставить только рамку (border-box минус content-box) */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.3s var(--ease-out, ease);
}

/* На устройствах без точного указателя эффект не нужен в покое — он включается
   по тапу (edge-glow.js ставит координаты на pointerdown и гасит через паузу). */
@media (prefers-reduced-motion: reduce) {
  .room-item::after,
  .dm-item::after,
  .fwd-item::after { display: none; }
}