/* ===== GLASS CARD — мягкое стекло без квадратной тени ===== */

.glass-card{}

/* основа */
.glass-card .tn-atom{
  position: relative !important;
  z-index: 1;

  border-radius: 22px !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 10px 28px rgba(0,0,0,.045),
    0 3px 10px rgba(0,0,0,.03),
    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;
}

/* верхняя дымка */
.glass-card .tn-atom::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

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

  opacity:.42;

  transform: translate3d(0,0,0);
  will-change: transform, opacity;

  transition:
    transform .85s cubic-bezier(.16,1,.3,1),
    opacity .60s ease;
}

/* нижнюю темную подложку сильно ослабляем */
.glass-card .tn-atom::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background: radial-gradient(
    95% 55% at 50% 100%,
    rgba(0,0,0,.045),
    rgba(0,0,0,0) 68%
  );

  opacity:.10;
  transition: opacity .60s ease;
}

/* ===== hover ===== */
@media (hover:hover){

  .glass-card:hover .tn-atom{
    transform: translate3d(0, 2px, 0) scale(.993);

    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.17) !important;

    /* убираем тяжелую inset-тень, из-за которой был квадрат */
    box-shadow:
      0 7px 18px rgba(0,0,0,.035),
      0 2px 8px rgba(0,0,0,.025),
      0 1px 0 rgba(255,255,255,.12) inset !important;
  }

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

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

  .glass-card:active .tn-atom{
    transform: translate3d(0, 3px, 0) scale(.989);

    box-shadow:
      0 5px 14px rgba(0,0,0,.03),
      0 1px 5px rgba(0,0,0,.02),
      0 1px 0 rgba(255,255,255,.11) inset !important;
  }
}



/* ===== GLASS CARD 2 — STATIC (без hover вообще) ===== */

/* 1) Класс на SHAPE */
.glass-card2{}

/* 2) Основа */
.glass-card2 .tn-atom{
  position: relative !important;
  z-index: 1;

  border-radius: 22px !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 20px 40px rgba(0,0,0,.07),
  0 8px 16px rgba(0,0,0,.05),
  0 1px 0 rgba(255,255,255,.14) inset !important;

  transform: translate3d(0,0,0);
}

/* 3) Верхняя дымка */
.glass-card2 .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;
}

/* 4) Нижняя глубина */
.glass-card2 .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;
}






/* ===== 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;
  }
}