.sticker-container {
  display: flex; /* Flexbox для центрирования */
  justify-content: center; /* Горизонтальное центрирование */
  align-items: center; /* Вертикальное центрирование */
  height: 100vh; /* Высота контейнера на всю высоту экрана */
  overflow: hidden; /* Обрезка контента, выходящего за границы */
  position: relative;
}

.sticker-container .circle {
  width: 50vmin; /* Адаптивный размер */
  height: 50vmin;
  transform-style: preserve-3d;
  position: relative;
}

.sticker-container .circle::before, .sticker-container .circle::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: center/cover url('https://i.postimg.cc/8zHH47jN/image.png');
}

.sticker-container .circle::before {
  animation: f 4s both;
}

@keyframes f {
  from {
    clip-path: inset(0 80% 0 0);
  }
  50%, to {
    clip-path: inset(0 0% 0 0);
  }
}

.sticker-container .circle::after {
  filter: brightness(0.2);
  transform: rotateY(-180deg);
  animation: g 4s both;
}

@keyframes g {
  from {
    clip-path: inset(0 0 0 20%);
    transform-origin: 20% 0;
  }
  50%, to {
    clip-path: inset(0 0 0 100%);
    transform-origin: 100% 0;
  }
}

.sticker-container .circle {
  animation: h 1s both;
  transform-origin: center bottom;
}

@keyframes h {
  from {
    transform: rotate(-50deg);
  }
  to {
    transform: rotate(-40deg);
  }
}

.rock-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000000; /* Чёрный фон */
  position: relative;
  overflow: hidden;
}

.rock {
  font-family: 'Open Sans', sans-serif;
  font-size: 500px;
  margin: 0;
  color: #FFB300; /* Пчелиный цвет текста */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.hand {
  position: relative;
  width: 100px;
  height: 100px;
  animation: rockit .8s ease infinite alternate;
  z-index: 5;
}


.palm {
  width: 125px;
  height: 140px;
  background: #FEDCCA;
  transform: rotate(26deg);
  box-shadow: inset 0 0 50px #E77F7B;
}

.palm:after {
  content: '';
  background: #F2ADA1;
  width: 20px;
  height: 30px;
  border-radius: 0 0 0 100% / 50%;
  position: absolute;
  left: -20px;
  bottom: 25px;
  z-index: 5;
}

.palm:before {
  content: '';
  background-image: linear-gradient(-180deg, #E56C4C 0, #F68E60 100%);
  width: 100%;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: -15px;
}

.mobile {
  width: 260px;
  height: 135px;
  background: #FFB300;
  border: 4px solid #705674;
  border-width: 4px 10px 4px 10px;
  border-radius: 20px;
  position: absolute;
  top: -80px;
  left: 80%;
  transform: rotate(-5deg) translateX(-50%);
  z-index: 1;
  overflow: hidden;
}

.screensaver {
  width: 30px;
  height: 30px;
  background: #000000; /* Чёрный центральный круг */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 
    0 0 0 30px #FFB300,  /* Пчелиный цвет */
    0 0 0 50px #000000,  /* Чёрный цвет */
    0 0 0 70px #FFB300,  /* Пчелиный цвет */
    0 0 0 100px #000000; /* Чёрный цвет */
    0 0 0 120px #FFB300; /* Чёрный цвет */
  animation: screensaver .5s linear infinite;
}

.mobile-shadow {
  width: 100px;
  height: 50px;
  background: #C7656C;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: rotate(-5deg) translateX(-40%);
  filter: blur(10px);
}

.finger {
  position: absolute;
  width: 45px;
  background: #FEDCCA; /* Цвет пальцев */
  border-radius: 22px;
  box-shadow: inset 11px -17px 40px #E77F7B;
}

.finger-shadow {
  width: 35px;
  height: 50px;
  background: #C7656C;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translatex(-50%);
  filter: blur(10px);
}

.finger-5 {
  height: 115px;
  top: -130px;
  left: -15px;
  transform: rotate(2deg);
}

.finger-4 {
  height: 90px;
  top: -100px;
  left: 30px;
  transform: rotate(-8deg);
  z-index: 1;
}

.finger-3 {
  height: 105px;
  top: -105px;
  left: 75px;
  transform: rotate(-8deg);
  z-index: 1;
}

.finger-2 {
  height: 120px;
  top: -165px;
  left: 120px;
  transform: rotate(15deg);

  .finger-shadow {
    bottom: -5px;
  }
}

.finger-1 {
  height: 100px;
  top: -10px;
  right: -50px;
  transform: rotate(-65deg);
  z-index: 1;

  .fingernail {
    top: 10px;
    bottom: auto;
    transform: translatex(-50%) scale(-1);
  }
}

.thumb-base {
  background-image: linear-gradient(-125deg, #E97E79 42%, #FDD8C7 77%);
  width: 42px;
  height: 85px;
  border-radius: 17px 20px 0 79px;
  position: absolute;
  top: 26px;
  right: -51px;
  transform: rotate(50deg);
}


.bone {
  width: 30px;
  height: 50px;
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  background: #F5E5E9;
  position: absolute;
  bottom: -50px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}

.bone:after, .bone:before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F5E5E9;
  box-shadow: inset 0 -5px 5px #ECD6DA;
  position: absolute;
  bottom: -20px;
}

.bone:after {
  left: -20px;
}

.bone:before {
  right: -20px;
}

.fingernail {
  width: 30px;
  height: 25px;
  background: rgba(253, 253, 253, 0.3); /* Цвет ногтей */
  box-shadow: 1px 1px #E5BAA7;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translatex(-50%);
}

.palm-shadow {
  width: 20px;
  height: 70px;
  background: #C7656C;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(10px);
}

@keyframes rockit {
  from { transform: translateY(30px) rotate(-45deg); }
  to { transform: translateY(30px) rotate(10deg); }
}

@keyframes screensaver {
  to {
    box-shadow: 
      0 0 0 80px #FFB300,  /* Пчелиный цвет */
      0 0 0 120px #000000, /* Чёрный цвет */
      0 0 0 200px #FFB300, /* Пчелиный цвет */
      0 0 0 250px #000000; /* Чёрный цвет */
      0 0 0 300px #FFB300; /* Чёрный цвет */
  }
}