/*
 * Единый эффект «живых» стеклянных плиток портала.
 *
 * Файл подключается только на страницах, где нужны одинаковые карточки:
 * поддержка, видеонаблюдение, звонки АТС, о портале, инструкции и статусы.
 * Эффект повторяет блок поддержки: прозрачное стекло, мягкий перелив,
 * тёплое оранжевое свечение по контуру без смещения текста при наведении.
 */

/* Родительский класс ставится на body, чтобы стиль не затрагивал служебные страницы случайно. */
body.kxm-tiles .grid,
body.kxm-tiles .kxm-status-grid{
  perspective:1000px;
}

/* Основные блоки-плитки: обычные .card, карточка «О портале» и карточки статусов. */
body.kxm-tiles .card,
body.kxm-tiles .about-card,
body.kxm-tiles .kxm-card,
body.kxm-tiles .kb-card,
body.kxm-tiles .kb-hero-copy,
body.kxm-tiles .kb-hero-stats,
body.kxm-tiles .kb-stat{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  will-change:box-shadow, border-color;
  background:
    linear-gradient(270deg,
      rgba(0,164,219,.14),
      rgba(255,255,255,.05),
      rgba(0,164,219,.14));
  background-size:400% 400%;
  border-color:rgba(255,255,255,.20);
  backdrop-filter:blur(8px) saturate(180%);
  -webkit-backdrop-filter:blur(8px) saturate(180%);
  box-shadow:
    inset 0 0 12px rgba(0,164,219,.15),
    0 4px 16px rgba(0,164,219,.15),
    0 10px 26px rgba(0,0,0,.28);
  animation:kxmTileGlass 20s linear infinite;
  transition:
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}

/* Все элементы внутри плитки поднимаем над стеклянным фоном. */
body.kxm-tiles .card > *,
body.kxm-tiles .about-card > *,
body.kxm-tiles .kxm-card > *,
body.kxm-tiles .kb-card > *,
body.kxm-tiles .kb-hero-copy > *,
body.kxm-tiles .kb-hero-stats > *,
body.kxm-tiles .kb-stat > *{
  position:relative;
  z-index:1;
}

/* Наведение: свечение как у блока «ИИ КХМ», но без transform, чтобы текст не размывался. */
body.kxm-tiles .card:hover,
body.kxm-tiles .about-card:hover,
body.kxm-tiles .kxm-card:hover,
body.kxm-tiles .kb-card:hover,
body.kxm-tiles .kb-hero-copy:hover,
body.kxm-tiles .kb-hero-stats:hover,
body.kxm-tiles .kb-stat:hover{
  transform:none;
  border-color:var(--brand, #ff8c00);
  background:
    linear-gradient(270deg,
      rgba(0,164,219,.18),
      rgba(255,255,255,.07),
      rgba(0,164,219,.18));
  background-size:400% 400%;
  box-shadow:
    inset 0 0 24px rgba(255,140,0,.50),
    0 12px 36px rgba(255,140,0,.45),
    0 8px 28px rgba(0,164,219,.35);
}

@keyframes kxmTileGlass{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}

/* Уважаем системную настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce){
body.kxm-tiles .card,
body.kxm-tiles .about-card,
body.kxm-tiles .kxm-card,
body.kxm-tiles .kb-card,
body.kxm-tiles .kb-hero-copy,
body.kxm-tiles .kb-hero-stats,
body.kxm-tiles .kb-stat{
    animation:none;
  }
}

/* 2026-05-15: один эффект для всех панелей портала, включая вложенные блоки страниц. */
body.kxm-tiles :where(
  .card,
  .about-card,
  .kxm-card,
  .kb-card,
  .kxm-kb-card,
  .kb-hero-copy,
  .kb-hero-stats,
  .kb-stat,
  .kxm-resource-panel,
  .info-hints,
  .info-hints-item,
  .video-presence-card,
  .presence-item,
  .kpi,
  details.diag.card,
  .kxm-tile,
  .admin-hero,
  .stat-card,
  .ticket-card,
  .attachment-card,
  .not-found__card,
  .s-card,
  .cam-card
){
  background:
    linear-gradient(270deg,
      rgba(0,164,219,.14),
      rgba(255,255,255,.05),
      rgba(0,164,219,.14));
  background-size:400% 400%;
  border-color:rgba(255,255,255,.20);
  backdrop-filter:blur(8px) saturate(180%);
  -webkit-backdrop-filter:blur(8px) saturate(180%);
  box-shadow:
    inset 0 0 12px rgba(0,164,219,.15),
    0 4px 16px rgba(0,164,219,.15),
    0 10px 26px rgba(0,0,0,.22);
  animation:kxmTileGlass 20s linear infinite;
  translate:0!important;
  transition:
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}

@media (hover:hover) and (pointer:fine){
  body.kxm-tiles :where(
    .card,
    .about-card,
    .kxm-card,
    .kb-card,
    .kxm-kb-card,
    .kb-hero-copy,
    .kb-hero-stats,
    .kb-stat,
    .kxm-resource-panel,
    .info-hints,
    .info-hints-item,
    .video-presence-card,
    .presence-item,
    .kpi,
    details.diag.card,
    .kxm-tile,
    .admin-hero,
    .stat-card,
    .ticket-card,
    .attachment-card,
    .not-found__card,
    .s-card,
    .cam-card
  ):hover{
    transform:none!important;
    border-color:var(--brand, #ff8c00)!important;
    background:
      linear-gradient(270deg,
        rgba(0,164,219,.18),
        rgba(255,255,255,.07),
        rgba(0,164,219,.18));
    background-size:400% 400%;
    box-shadow:
      inset 0 0 24px rgba(255,140,0,.50),
      0 12px 36px rgba(255,140,0,.45),
      0 8px 28px rgba(0,164,219,.35)!important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.kxm-tiles :where(
    .card,
    .about-card,
    .kxm-card,
    .kb-card,
    .kxm-kb-card,
    .kb-hero-copy,
    .kb-hero-stats,
    .kb-stat,
    .kxm-resource-panel,
    .info-hints,
    .info-hints-item,
    .video-presence-card,
    .presence-item,
    .kpi,
    details.diag.card,
    .kxm-tile,
    .admin-hero,
    .stat-card,
    .ticket-card,
    .attachment-card,
    .not-found__card,
    .s-card,
    .cam-card
  ):hover{
    transform:none!important;
  }
}