/* ===== Glass base (как у тебя) + premium soft-press hover, NO motion/JS ===== */

/* 1) Класс на SHAPE (tn-elem) — НЕ трогаем позицию */
.glass-card{}

/* 2) Рабочая поверхность — .tn-atom */
.glass-card .tn-atom{
  position: relative !important;
  z-index: 1; /* ⭐ добавили минимальный уровень */

  border-radius: 12px !important;
  overflow: hidden !important;

  /* матовое “пыльное” стекло */
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.20) !important;

  backdrop-filter: blur(12px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.02) !important;

  box-shadow:
    0 26px 60px rgba(0,0,0,.10),
    0 10px 24px rgba(0,0,0,.06),
    0 1px 0 rgba(255,255,255,.14) inset !important;

  transform: translate3d(0,0,0);
  will-change: transform, box-shadow, border-color, background;
  transition:
    transform .85s cubic-bezier(.16,1,.3,1),
    box-shadow .85s cubic-bezier(.16,1,.3,1),
    border-color .60s ease,
    background .60s ease;
}

/* 3) Дымка сверху — ВСЕГДА ниже текста */
.glass-card .tn-atom::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 0; /* ⭐ ключевая правка */

  background: radial-gradient(
    120% 80% at 50% 0%,
    rgba(255,255,255,.16),
    rgba(255,255,255,0) 62%
  );

  pointer-events:none;
  opacity:.45;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  transition:
    transform .85s cubic-bezier(.16,1,.3,1),
    opacity .60s ease;
}

/* 4) Глубина снизу — тоже ниже текста */
.glass-card .tn-atom::after{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 0; /* ⭐ ключевая правка */

  background: radial-gradient(
    120% 90% at 50% 115%,
    rgba(0,0,0,.08),
    rgba(0,0,0,0) 55%
  );

  pointer-events:none;
  opacity:.22;
  transition: opacity .60s ease;
}

/* ===== Premium “press-in” hover ===== */
@media (hover:hover){
  .glass-card:hover .tn-atom{
    transform: translate3d(0, 2px, 0) scale(.993);

    background: rgba(255,255,255,.050) !important;
    border-color: rgba(255,255,255,.16) !important;

    box-shadow:
      0 18px 46px rgba(0,0,0,.085),
      0 8px 18px rgba(0,0,0,.05),
      0 1px 0 rgba(255,255,255,.12) inset,
      0 12px 26px rgba(0,0,0,.07) inset !important;
  }

  .glass-card:hover .tn-atom::before{
    transform: translate3d(0, 10px, 0) scale(1.02);
    opacity: .34;
  }

  .glass-card:hover .tn-atom::after{
    opacity: .26;
  }

  .glass-card:active .tn-atom{
    transform: translate3d(0, 3px, 0) scale(.988);
    box-shadow:
      0 14px 36px rgba(0,0,0,.075),
      0 6px 14px rgba(0,0,0,.05),
      0 1px 0 rgba(255,255,255,.11) inset,
      0 16px 30px rgba(0,0,0,.08) inset !important;
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .glass-card .tn-atom,
  .glass-card .tn-atom::before,
  .glass-card .tn-atom::after{
    transition: none !important;
    transform: none !important;
  }
}