/* Базовые настройки */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  cursor: url("cursor_huwabag.png") 16 16, auto;
}

body {
  font-family: "Peralta", serif;
  overflow: hidden;
  cursor: url("cursor_huwabag.png") 16 16, auto;
}

/* Фон */

.background-layer {
  position: fixed;
  inset: 0;
  background: url("bg_huwabag.png") center center / cover no-repeat;
  z-index: 0;
}

/* Левый верхний текст — БЕЗ анимации */

.title-top {
  position: absolute;
  top: 40px;
  left: 40px;
  font-size: 45px;
  z-index: 5;
}

/* Персонаж — W571 H884 по нижней грани */

.character-wrapper {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 485px;
  height: 800px;
  z-index: 4;
}

.character {
  width: 485px;
  height: 800px;
}

/* COMING — слева, с анимацией */

.coming {
  position: absolute;
  left: 180px;
  top: 300px;
  font-size: 132px;
  transform: rotate(-50deg);
  text-shadow: 0 6px 0 rgba(0,0,0,0.3);
  animation: floatShadow 4.5s ease-in-out infinite;
  z-index: 4;
}

/* SOON — справа, с анимацией */

.soon {
  position: absolute;
  right: 180px;
  top: 300px;
  font-size: 132px;
  transform: rotate(14deg);
  text-shadow: 0 6px 0 rgba(0,0,0,0.3);
  animation: floatShadow 4.5s ease-in-out infinite;
  z-index: 4;
}

/* TWITTER — правый нижний угол, БЕЗ анимации */

.twitter-label {
  position: absolute;
  right: 40px;
  bottom: 30px;

  font-family: "Peralta", serif;
  font-size: 57px;

  background: none;
  border: none;
  padding: 0;
  color: #000;
  cursor: url("cursor_huwabag.png") 16 16, auto;

  /* убираем любые анимации */
  animation: none;
  transition: none;
}

.twitter-label:hover,
.twitter-label:active {
  transform: none;
  text-shadow: none;
}

/* Анимации для COMING / SOON */

@keyframes floatShadow {
  0% {
    transform: translateY(0) rotate(var(--t, 0deg));
    text-shadow: 0 6px 0 rgba(0,0,0,0.3);
  }
  50% {
    transform: translateY(-10px) rotate(var(--t, 0deg));
    text-shadow: 0 10px 0 rgba(0,0,0,0.35);
  }
  100% {
    transform: translateY(0) rotate(var(--t, 0deg));
    text-shadow: 0 6px 0 rgba(0,0,0,0.3);
  }
}