/* ==========================================
   ULTRA FROZEN GLASS — STATIC (NO ANIMATION / NO GRID)
   Tilda Zero Block (Shape/Rectangle)
   Использование:
   1) На шейп назначь CSS class: ice-glass-ultra
   2) Если нужно ещё больше инея: ice-glass-ultra ice-max
   ========================================== */

.ice-glass-ultra{
  --r: 28px;
  --ice: 182, 242, 255; /* #B6F2FF */
  --deep: 11, 30, 58;   /* #0B1E3A */

  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  isolation: isolate;

  /* Двойная премиум-окантовка + холодный оттенок */
  border: 1px solid rgba(255,255,255,0.22);
  background:
    /* тело стекла */
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)) padding-box,
    /* холодная кайма */
    linear-gradient(135deg,
      rgba(255,255,255,0.68),
      rgba(var(--ice),0.30),
      rgba(255,255,255,0.14)
    ) border-box;

  -webkit-backdrop-filter: blur(22px) saturate(145%) brightness(1.08);
  backdrop-filter: blur(22px) saturate(145%) brightness(1.08);

  /* Премиум-глубина + двойная линия (как на рефе) */
  box-shadow:
    0 28px 80px rgba(var(--deep),0.20),
    0 10px 30px rgba(var(--deep),0.12),
    0 0 0 1px rgba(var(--ice),0.22),          /* внешняя холодная линия */
    inset 0 0 0 1px rgba(255,255,255,0.22),   /* внутренняя белая линия */
    inset 0 0 0 3px rgba(var(--ice),0.08),    /* мягкий ледяной “ободок” */
    inset 0 1px 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 rgba(255,255,255,0.14);
}

/* Иней + “снежная пыль” (сильнее по краям, без сетки) */
.ice-glass-ultra::before{
  content:"";
  position:absolute;
  inset:-24%;
  border-radius: inherit;
  pointer-events:none;

  background:
    /* крупная морозная дымка */
    radial-gradient(72% 56% at 14% 18%, rgba(235,250,255,0.78) 0%, rgba(235,250,255,0.00) 62%),
    radial-gradient(66% 56% at 88% 20%, rgba(210,245,255,0.62) 0%, rgba(210,245,255,0.00) 62%),
    radial-gradient(92% 74% at 50% 104%, rgba(200,235,255,0.38) 0%, rgba(200,235,255,0.00) 58%),

    /* ледяные “пластины” (очень мягко) */
    conic-gradient(from 220deg at 18% 36%,
      rgba(255,255,255,0) 0 20deg,
      rgba(225,246,255,0.34) 22deg 30deg,
      rgba(255,255,255,0) 32deg 78deg,
      rgba(205,236,255,0.24) 82deg 90deg,
      rgba(255,255,255,0) 92deg 360deg
    ),
    conic-gradient(from 12deg at 82% 60%,
      rgba(255,255,255,0) 0 24deg,
      rgba(225,246,255,0.28) 26deg 34deg,
      rgba(255,255,255,0) 36deg 124deg,
      rgba(205,236,255,0.22) 128deg 138deg,
      rgba(255,255,255,0) 142deg 360deg
    ),

    /* “снежная пыль” (точки вручную, чтобы не было сетки) */
    radial-gradient(1.6px 1.6px at 10% 60%, rgba(255,255,255,0.42) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(2.3px 2.3px at 18% 72%, rgba(255,255,255,0.28) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(1.2px 1.2px at 26% 54%, rgba(255,255,255,0.30) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(2.0px 2.0px at 34% 66%, rgba(255,255,255,0.22) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(1.4px 1.4px at 42% 84%, rgba(255,255,255,0.18) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(2.2px 2.2px at 58% 90%, rgba(255,255,255,0.16) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(1.5px 1.5px at 70% 70%, rgba(255,255,255,0.22) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(2.4px 2.4px at 78% 62%, rgba(255,255,255,0.30) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(1.3px 1.3px at 86% 48%, rgba(255,255,255,0.24) 0 60%, rgba(255,255,255,0) 76%),
    radial-gradient(1.8px 1.8px at 92% 56%, rgba(255,255,255,0.20) 0 60%, rgba(255,255,255,0) 76%);

  /* Маска: максимум эффекта по краям, центр чище */
  -webkit-mask-image: radial-gradient(farthest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 73%);
  mask-image: radial-gradient(farthest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 73%);

  opacity: 0.98;
  filter: blur(0.34px) contrast(1.20) saturate(1.06);
  mix-blend-mode: screen;
  transform: translateZ(0);
}

/* Внутренний холодный подсвет + “ледяной” кант (статично) */
.ice-glass-ultra::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background:
    /* холодный блик сверху слева */
    radial-gradient(85% 65% at 20% 18%, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.00) 62%),
    /* мягкая холодная дымка снизу */
    radial-gradient(120% 86% at 50% 112%, rgba(var(--ice),0.18) 0%, rgba(var(--ice),0.00) 60%),
    /* усиление ледяного края */
    radial-gradient(120% 90% at 50% 50%,
      rgba(255,255,255,0.00) 58%,
      rgba(var(--ice),0.20) 74%,
      rgba(255,255,255,0.00) 88%
    ),
    /* микро-статичные “стеклянные” полосы (без движения) */
    linear-gradient(120deg,
      rgba(255,255,255,0.00) 36%,
      rgba(225,246,255,0.12) 50%,
      rgba(255,255,255,0.00) 64%
    );

  opacity: 0.58;
}

/* Больше льда: добавь класс ice-max */
.ice-glass-ultra.ice-max{
  -webkit-backdrop-filter: blur(26px) saturate(155%) brightness(1.10);
  backdrop-filter: blur(26px) saturate(155%) brightness(1.10);

  box-shadow:
    0 32px 96px rgba(var(--deep),0.22),
    0 12px 34px rgba(var(--deep),0.14),
    0 0 0 1px rgba(var(--ice),0.26),
    inset 0 0 0 1px rgba(255,255,255,0.24),
    inset 0 0 0 4px rgba(var(--ice),0.10),
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 -1px 0 rgba(255,255,255,0.16);
}
.ice-glass-ultra.ice-max::before{
  -webkit-mask-image: radial-gradient(farthest-side, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 71%);
  mask-image: radial-gradient(farthest-side, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 71%);
  filter: blur(0.28px) contrast(1.24) saturate(1.07);
}
.ice-glass-ultra.ice-max::after{
  opacity: 0.64;
}

/* Мобилки: чуть легче, но эффект сохраняем */
@media (max-width: 480px){
  .ice-glass-ultra{
    --r: 20px;
    -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.06);
    backdrop-filter: blur(16px) saturate(140%) brightness(1.06);
  }
  .ice-glass-ultra::before{ opacity: 0.92; }
  .ice-glass-ultra::after{ opacity: 0.52; }
}

/* Фоллбек, если нет backdrop-filter */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .ice-glass-ultra{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.12)) padding-box,
      linear-gradient(135deg, rgba(255,255,255,0.70), rgba(var(--ice),0.30), rgba(255,255,255,0.14)) border-box;
  }
  .glass-panel{
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
  }
  .glass-panel::after{ opacity:.06; }
}

.glass-panel{
  /* ВАЖНО: БЕЗ position, чтобы не ломать Zero-блок */

  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.38);

  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);

  box-shadow:
    0 20px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.08);
}

.glass-panel::before{
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:42%;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity:.65;
}

.glass-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
\
\
\
\
");
}

/* МОБИЛКА */
@media screen and (max-width: 640px){
  body .glass-panel{
    border-radius: 16px !important;
    box-shadow:
      0 6px 10px rgba(0,0,0,.16) !important,
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(0,0,0,.04);
  }

  body .glass-panel::before{
    opacity: .35 !important;
  }

  body .glass-panel::after{
    opacity: .08 !important;
  }