/* =========================================================
   V32.2.2 Shatter Title Effect
   Icon top, title bottom
   Target: "Как работает Visib Studio"
   ========================================================= */

.v32-shatter-title{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:default;
  gap:.22em;
}

.v32-title-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:56px;
  border-radius:999px;
  margin:0 auto .08em;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 18px rgba(255,90,95,.14),
    0 0 28px rgba(0,229,255,.08),
    inset 0 0 24px rgba(255,255,255,.035);
  font-size:22px;
  line-height:1;
  transform:none !important;
}

.v32-title-text{
  position:relative;
  display:inline-block;
}

.v32-title-original{
  display:inline-block;
  transition:opacity .18s ease, filter .18s ease;
}

.v32-shatter-title.v32-active .v32-title-original{
  opacity:.16;
  filter:blur(1.5px);
}

.v32-shatter-piece{
  position:absolute;
  left:0;
  top:0;
  display:inline-block;
  pointer-events:none;
  will-change:transform, opacity, filter;
  color:inherit;
  text-shadow:
    0 0 12px rgba(0,229,255,.34),
    0 0 20px rgba(255,90,95,.22);
  transition:
    transform .62s cubic-bezier(.17,.84,.44,1),
    opacity .38s ease,
    filter .38s ease;
}

.v32-shatter-title.v32-active .v32-shatter-piece{
  opacity:.94;
  filter:blur(.15px);
}

.v32-shatter-title:not(.v32-active) .v32-shatter-piece{
  transform:translate3d(0,0,0) rotate(0deg) scale(1) !important;
  opacity:0;
}

@media(max-width:768px){
  .v32-shatter-title{
    gap:.12em;
  }

  .v32-title-icon{
    width:76px;
    height:48px;
    font-size:20px;
    margin-bottom:.04em;
  }

  .v32-title-original{
    opacity:1 !important;
    filter:none !important;
  }

  .v32-shatter-piece{
    display:none !important;
  }
}