body {
  width: 100vw;
  height: 100vh;
}

.main-screen {
  background-color: #2d2c2c;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100vh - clamp(28px, 2vw, 50px));
}

.logo {
  width: clamp(277px, 20vw, 500px);
  height: clamp(51px, 3.64vw, 93px);
}

.main-screen-content {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.7vw, 18px);
}

.main-screen-list {
  font-family: var(--font-arial);
  font-size: clamp(14px, 1vw, 25px);
  line-height: 111%;
  font-weight: bold;
  color: var(--color-light);
}

/* Пульсация центральной точки логотипа (B2): перенос с SVG SMIL на CSS.
   Хронометраж по ТЗ п.2 и исходной анимации: рост → удержание ~1с → спад →
   пауза ~1с (цикл 3с). Тайминги на каждом ключевом кадре повторяют keySplines
   исходного <animate> (плавный рост/спад, линейные удержание и пауза). */
.logo-dot {
  animation: shagikon-logo-pulse 3s infinite;
}

@keyframes shagikon-logo-pulse {
  0% {
    r: 9px;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  20% {
    r: 13px;
    animation-timing-function: linear;
  }
  50% {
    r: 13px;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  70% {
    r: 9px;
    animation-timing-function: linear;
  }
  100% {
    r: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-dot {
    animation: none;
  }
}