/* Приветствие после входа */

#welcome {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: wIn 0.35s ease both;
}

#welcome.out {
  animation: wOut 0.45s ease forwards;
}

.w-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.w-av {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font:
    800 34px Inter,
    system-ui;
  color: #fff;
  background: linear-gradient(135deg, var(--g1, #6a5cf0), var(--acc), var(--g2, #1fb3a6));
  background-size: 200% 200%;
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--acc) 60%, transparent);
  animation:
    wPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.05s both,
    wGrad 2s linear infinite;
  position: relative;
}

.w-av::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  opacity: 0;
  animation: wRing 1.2s ease-out 0.35s both;
}

.w-hi {
  font:
    800 26px Inter,
    system-ui;
  opacity: 0;
  animation: wUp 0.5s ease 0.3s forwards;
}

.w-sub {
  font-size: 14px;
  color: var(--mut);
  opacity: 0;
  animation: wUp 0.5s ease 0.45s forwards;
}

.w-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  opacity: 0;
  animation: wBurst 0.9s ease-out 0.25s forwards;
}

.w-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.w-av.has-img {
  background: var(--card) !important;
  padding: 4px;
  box-shadow:
    0 0 0 3px var(--acc),
    0 18px 40px -12px color-mix(in srgb, var(--acc) 60%, transparent);
}

.w-nick {
  order: 3;
  font-size: 14px;
  font-weight: 600;
  color: var(--acc);
  opacity: 0;
  animation: wUp 0.5s ease 0.4s forwards;
  margin-top: -6px;
}

.w-card .w-sub {
  order: 4;
}

@keyframes wIn {
  from {
    opacity: 0;
  }
}

@keyframes wOut {
  to {
    opacity: 0;
  }
}

@keyframes wPop {
  from {
    transform: scale(0.2) rotate(-20deg);
    opacity: 0;
  }
}

@keyframes wGrad {
  to {
    background-position: 200% 200%;
  }
}

@keyframes wRing {
  0% {
    opacity: 0.8;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes wUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.4);
  }
}