html{
  box-sizing: border-box;
  overflow: hidden;    /* режем всё, что вылезает за экран */
  width: 100vw;
  height: 100vh;
}

body{
  margin: 0;
  height: 100dvh;      /* экран */
  font-family: "Staatliches", sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

#container{
  max-width: 500px;
  margin: 0 auto;
  height: 100%;        /* наследует 100dvh от body */
}


.bg-gradient {
  background: linear-gradient(
    135deg,
    #057CF7 0%,
    #95C9FF 82.88%
  );
}
.logo-header{
  margin-right: auto;
  margin-left: auto;
  width: 13.39vh;
  height: 7.70vh;
  top: 5.45vh;
  left: 0;
  right: 0;
  z-index: 2;
}
/* first step*/
.first-step{
  position: relative;
  height: 100vh;        /* тоже 100dvh */
  overflow: hidden;    /* ОБРЕЗАЕМ тучки здесь */
}
.first-step .absolute-image{
  z-index: 0;
}
.absolute-image{
  position: absolute;
}
.sky-right-coner-up {
  width: 231px;
  height: 180px;
  top:-61px;
  right: -65px;
  animation: moveCloudRightCornerUp 2s linear forwards;
}
@keyframes moveCloudRightCornerUp {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3vw, 3vh); }
  100% { transform: translate(10vw, -12vh); }
}

.sky-up {
  width: 727px;
  height: 567px;
  top: -180px;
  right: -212px;
  animation: moveCloudSkyUp 2s linear forwards;
}
@keyframes moveCloudSkyUp {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(7vh); }
  100% { transform: translateY(-30vh); }
}
.sky-down{
  width: 721px;
  height: 536px;
  bottom: -158px;
  right: -187px;
  animation: moveCloudSkyDown 2s linear forwards;
}
@keyframes moveCloudSkyDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5vh); }
  100% { transform: translateY(35vh); }
}
.sky-left-coner-down {
  width: 485px;
  height: 307px;
  bottom: -80px;
  left: -200px;
  animation: moveCloudLeftCornerDown 2s linear forwards;
}
@keyframes moveCloudLeftCornerDown {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(4vw, -3vh); }
  100% { transform: translate(-30vw, -3vh); }
}

.sky-right-coner-down {
  width: 454px;
  height: 286px;
  bottom: -65px;
  right: -382px;
  animation: moveCloudRightCornerDown 2s linear forwards;
}
@keyframes moveCloudRightCornerDown {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-9vw, -1vh); }
  100% { transform: translate(5vw, 12vh); }
}
/* second step */
.second-step{
  margin-top: 15.6vh;
  display: none;
  padding-right: 16px;
  padding-left: 16px;
}
.second-step-heading{
  font-size: 4.74vh;
  line-height: 5.8vh;
  font-family: "Staatliches", sans-serif;
  margin-bottom: 6.15vh;
}
.absolute-light-bottom-wrap{
  /*width: 100vw;*/
  /*height: 100vh;*/
  /*overflow: hidden;*/
}
.second-step .absolute-light-bottom{
  position: absolute;
  bottom: 0;
  right:0px;
  height: 100dvh;
  width: auto;
  z-index: -1;
}
.monster-wrapper{
  position: relative;
  text-align: left;
  margin-left: 8px;
}
.monster-wrapper .monster{
  width: 13.51vh;
  height:13.51vh;
}
.monster-close-eye {
  position: absolute;
  inset: 0;            /* поверх openEye */
  opacity: 0;          /* по умолчанию невидим */
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 2;
}
.monster-wrapper .hummer {
  width: 7.58vh;
  height: 7.58vh;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: 9.48vh;
  margin-top: 5.09vh;
  z-index: 9;

  transform-origin: center center;
  transition: transform 0.25s ease;
}

/* режим “качания” */
.monster-wrapper .hummer-anim {
  animation: hummerShake 1.5s ease-in-out infinite;
}

@keyframes hummerShake {
  0%   { transform: rotate(-30deg); }
  50%  { transform: rotate(30deg); }
  100% { transform: rotate(-30deg); }
}

/* удар: увеличился, повернулся, сдвинулся  //87.7v  80.25vw;*/
.monster-wrapper .hummer-hit {
  transform: rotate(60deg) scale(3) translate(14px, 2px);
}
.pig-wrapper {
  position: relative;
  width: 361px;
  min-width: 342px;
  /*height: 37.1vh;*/
  min-height: 381px;
  margin: -3vh auto -3vh auto;
}
.pig-wrapper .pig,
.pig-wrapper .pig-hit.active{
  width: 361px;
  min-width: 342px;
  /*height: 37.1vh;*/
  /*min-height: 313px;*/
  height: 381px;
  animation: piggyShake 2.5s ease infinite;
}


@keyframes piggyShake {
  0% { transform: rotate(0deg); } /* плавные качания */
  15% { transform: rotate(3deg); }
  30% { transform: rotate(-3deg); } /* начало тряски */
  50% { transform: rotate(0deg); } /* резкие хаотичные движения */
  60% { transform: rotate(6deg); }
  70% { transform: rotate(-6deg); }
  80% { transform: rotate(5deg); }
  90% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.pig-animated {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

/* лёгкий “подпрыг” свинки при ударе */
.pig-wrapper .pig-hit {
  animation: pigHit 1.5s ease;
}

@keyframes pigHit {
  0%   { transform:  scale(1); }
  15%   { transform: translateX(-5px) translateY(5px) scale(0.8); }
  25%  { transform: translateX(5px) translateY(-5px) scale(0.8); }
  35%  { transform: translateX(-5px) translateY(5px) scale(0.8); }
  45%  { transform: translateX(5px) translateY(-5px) scale(0.8); }
  50%  { transform: translateX(5px) translateY(5px) scale(0.98); }
  55%  { transform: translateX(1px) translateY(-6px) scale(1.01); }
  60%  { transform: translateX(4px) translateY(-2px) scale(1.01); }
  65%  { transform: translateX(-4px) translateY(7px) scale(0.99); }
  70%  { transform: translateX(6px) translateY(-3px) scale(1.02); }
  80%  { transform: translateX(2px) translateY(5px) scale(0.98); }
  90%  { transform: scale(1); }
}


.bonus-wrapper{
  border-radius: 5px;
  background: #6FC455;
  padding: 5px 31px;
  color:#fff;
  font-size: 22px;
  max-width: fit-content;
  position: absolute;
  bottom: 0;
  left: 120px;
  z-index: -1;
  opacity: 0;
}
.bonus-wrapper.active{
  opacity: 1;
  animation: bonusMove 1.5s ease;
}
@keyframes bonusMove {
  0%   { transform:  translateY(80px); }
  25%   { transform:  translateY(-55px); }
  50%   { transform:  translateY(-55px); }
  100%  { transform:   translateY(-45px) translateX(-124px); }
}


.footer{
  position: fixed;
  bottom: 20px;
  right:20px;
  left: 20px;
  width: calc(100% - 40px);
  z-index: 9;
}
@media screen and (max-height: 830px) {

  .second-step .absolute-light-bottom{
    min-height: 150vh;
    bottom: -33vh;
  }
  .second-step {
    margin-top: 14.6vh;
  }
  .second-step-heading{
    margin-bottom: 3.15vh;
  }
  .pig-wrapper{
    margin: -7vh auto 0 auto;
  }
  .pig-wrapper,
  .pig-wrapper .pig,
  .pig-wrapper .pig-hit.active{
    width: 320px;
    min-width: 320px;
    min-height: 320px;
    height: 320px;
  }
  .absolute-light-bottom-wrap{
    position: relative;
  }
  .third-step-heading{
    margin-top: 22vh;
  }
}
@media screen and (max-height: 700px) {
  html,body{
    height: auto;
    overflow-y: scroll;
  }
  body{
    overflow: hidden;
    min-height: 108vh;
  }
  .pig-wrapper{
    margin: -8vh auto -2vh auto;
  }
  .second-step .footer{
    position: relative;
    right:unset;
    left: unset;
    bottom: unset;
    width: 100%;
  }
}
@media screen and (max-height: 450px) {
  .pig-wrapper,
  .pig-wrapper .pig,
  .pig-wrapper .pig-hit.active{
    width: 220px;
    min-width: 220px;
    min-height: 220px;
    height: 220px;
  }
  .monster-wrapper{
    margin-left: 9vw;
  }
  .bonus-wrapper{
    font-size: 15px;
    margin-bottom: -30px;
  }
  .inner-glow{
    right: -170px;
  }
}
.button,
.button-bonus{
  font-family: "Staatliches", sans-serif;
  font-size:4.74vh;
  color:#fff;
  z-index: 999999;
  border-radius: 12px;
  padding: 2vh;
  cursor: pointer;
  width: 80vw;
  max-width: 400px;
  display: block;
  background: #6FC455;
  margin: 0 auto;
  text-decoration: unset;
  transition: all 1s ease;
  box-shadow:
          -1px 1px 2px rgba(63, 112, 48, 0.5),      /* тень слева-снизу */
          1px -1px 2px rgba(159, 255, 122, 0.3),    /* блик справа-сверху */
          inset 4px -4px 10px rgba(63, 112, 48, 0.9),   /* внутренняя тень */
          inset -4px 4px 8px rgba(159, 255, 122, 0.9),  /* внутренний блик */
          inset 4px 4px 8px rgba(63, 112, 48, 0.2),
          inset -4px -4px 8px rgba(63, 112, 48, 0.2);
  animation: pulse-btn 1.6s ease-in-out infinite;
}
@keyframes pulse-btn {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.button.active {
  background-color: #69A059;
  transform: scale(1);
  animation: none;
}
.button-description{
  font-size:7px;
  margin-top: 15px;
}
.smoke{
  mix-blend-mode: screen;
  width: 180px;
  height: 180px;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  right: -73px;
  top: 30px;
  transform: rotate(42deg);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.smoke.active {
  opacity: 1;
}
.inner-glow{
  mix-blend-mode: screen;
  width: 600px;
  height: 600px;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  right: -134px;
  top: -132px;
  transition: opacity 0.5s ease;
  z-index: -1;
  opacity: 0;
}
.inner-glow.active {
  opacity: 1;
  animation: pulse-glow 1.6s ease-in-out infinite;
}
@keyframes pulse-glow {
  0% { transform: scale(1); }
  50% { transform: scale(0.8); }
  100% { transform: scale(1.1); }
}
.blast {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.blast img {
  position: absolute;
  left: 0;
  width: 90px;
  height: 90px;
  top: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transition: 1s;
}
/* при активном состоянии запускаются анимации */
.blast.active .money       { animation-name: blast-money; }
.blast.active .money2      { animation-name: blast-money2; }
.blast.active .pearls      { animation-name: blast-pearls; }
.blast.active .pearls-2      { animation-name: blast-pearls-2; }
.blast.active .daimond-1   { animation-name: blast-d1; }
.blast.active .daimond-2   { animation-name: blast-d2; }
.blast.active .daimond-3   { animation-name: blast-d3; }
.blast.active .daimond-3-2 { animation-name: blast-d3-2; }
.blast.active .coin        { animation-name: blast-coin; }
.blast.active .coin2       { animation-name: blast-coin2; }

/* ===== траектории – только вверх / в стороны ===== */

/* money — сильно вверх-влево */
@keyframes blast-money {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-380px, -620px) rotate(-30deg); opacity: 1; }
}

/* money2 — мягче вверх-влево */
@keyframes blast-money2 {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(440px, -260px) rotate(-10deg); opacity: 1; }
}

/* pearls — вверх-вправо */
@keyframes blast-pearls {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(0px, -100vh) rotate(25deg); opacity: 1; }
}
@keyframes blast-pearls-2 {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-470px, -460px) rotate(25deg); opacity: 1; }
}

/* daimond-1 — вправо-вверх */
@keyframes blast-d1 {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(400px, -410px) rotate(60deg); opacity: 1; }
}

/* daimond-2 — чуть вправо и вверх */
@keyframes blast-d2 {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(260px, -610px) rotate(90deg); opacity: 1; }
}

/* daimond-3 — вверх-влево, ближе к центру */
@keyframes blast-d3 {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform:translate(-220px, -650px) rotate(-80deg); opacity: 1; }
}

/* daimond-3-2 — ещё один вверх-влево, но под другим углом */
@keyframes blast-d3-2 {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-460px, -360px) rotate(-40deg); opacity: 1; }
}

/* coin — вправо почти горизонтально (слегка вверх) */
@keyframes blast-coin {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(430px, -540px) rotate(360deg); opacity: 1; }
}

/* coin2 — влево почти горизонтально (слегка вверх) */
@keyframes blast-coin2 {
  0%   { transform: translate(-50%, -50%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-430px, -380px) rotate(-360deg); opacity: 1; }
}
.explosion{
  position: absolute;
  left: 50%;
  top: 36%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  display: none;
}

.konfeti{
  position: absolute;
  left: 50%;
  top: 36%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: screen;
}
.explosion{
  z-index: 20;
}

.monster-fly {
  animation: monsterFly 0.6s ease-out forwards;
}

.monster-wrapper .hummer-anim.hummer-fly {
  animation: hummerFly 0.6s ease-out forwards;
}

@keyframes monsterFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(-250px, -250px) rotate(-25deg) scale(0.6); opacity: 0; }
}

@keyframes hummerFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(250px, -250px) rotate(45deg) scale(0.6); opacity: 0; }
}

.third-step{
  display: none;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  position: relative;
  justify-content: space-between;
}
.background-gold-last-scene{
  height: 50vh;
  width: 100%;
}
.lights-bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.third-step-heading{
  margin-top: 32vh;
  font-size: 32px;
  animation: pulse-btn 1.6s ease-in-out infinite;
}
.third-step-bonus{
  font-size: 110px;
  letter-spacing: -2px;
}
.third-step-bonus-wrapper{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: pulse-btn 1.6s ease-in-out infinite;
}
.additional-bonus{
  border-radius: 5px;
  background: #6FC455;
  padding: 3px 13px;
  color:#fff;
  font-size: 22px;
  max-width: fit-content;
  margin-top: 35px;
}
.go-to-top {
  animation: flyToTop 1s ease-out forwards;
}

@keyframes flyToTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-200vh); /* улетает далеко вверх */
    opacity: 0;
  }
}