/* Страница 404 */

.lavrus-error {
  position: relative;
  width: 100%;
  margin-bottom: 70px;
  overflow: hidden;
}

.lavrus-error__wrapper {
  position: relative;
  width: 100%;
  max-width: 1728px;
  margin: 0 auto;
  aspect-ratio: 1728 / 1035;
}

.lavrus-error__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Листья */

.lavrus-error__leaves {
  opacity: 0;
}

.lavrus-error__leaves--ready {
  opacity: 1;
}

.lavrus-error__leaf {
  position: absolute;
  display: block;
  width: 2.6042%;
  aspect-ratio: 1;
  background: url("../assets/icons/lavrus.svg") no-repeat;
  background-size: contain;
  backface-visibility: hidden;
  transform-origin: 0 0;
  will-change: transform;
}

.lavrus-error__leaf:nth-child(1) {
  top: 55.1729%;
  left: 7.9063%;
}

.lavrus-error__leaf:nth-child(2) {
  top: 75.8222%;
  left: 18.5313%;
}

.lavrus-error__leaf:nth-child(3) {
  top: 79.143%;
  left: 18.1551%;
}

.lavrus-error__leaf:nth-child(4) {
  top: 99.5614%;
  left: 19.2812%;
}

.lavrus-error__leaf:nth-child(5) {
  top: 4.8135%;
  left: 29.0156%;
}

.lavrus-error__leaf:nth-child(6) {
  top: 17.7469%;
  left: 35.0909%;
}

.lavrus-error__leaf:nth-child(7) {
  top: 22.1111%;
  left: 40.0469%;
}

.lavrus-error__leaf:nth-child(8) {
  top: 3.1459%;
  left: 42.6834%;
}

.lavrus-error__leaf:nth-child(9) {
  top: 13.1034%;
  left: 47.7859%;
}

.lavrus-error__leaf:nth-child(10) {
  top: 20.971%;
  left: 55.4184%;
}

.lavrus-error__leaf:nth-child(11) {
  top: 35.2444%;
  left: 38.7506%;
}

.lavrus-error__leaf:nth-child(12) {
  top: 16.0106%;
  left: 76.4514%;
}

.lavrus-error__leaf:nth-child(13) {
  top: 1.5594%;
  left: 65.5689%;
}

.lavrus-error__leaf:nth-child(14) {
  top: 14.4%;
  left: 81.9201%;
}

.lavrus-error__leaf:nth-child(15) {
  top: 10.0899%;
  left: 80.9149%;
}

.lavrus-error__leaf:nth-child(16) {
  top: 20.2531%;
  left: 88.0376%;
}

.lavrus-error__leaf:nth-child(17) {
  top: 19.3623%;
  left: 94.0463%;
}

.lavrus-error__leaf:nth-child(18) {
  top: 40.1575%;
  left: 92.1094%;
}

.lavrus-error__leaf:nth-child(19) {
  top: 31.6744%;
  left: 99.0584%;
}

.lavrus-error__leaf:nth-child(20) {
  top: 43.9614%;
  left: 94.3929%;
}

.lavrus-error__leaf:nth-child(21) {
  top: 66.171%;
  left: 90.7049%;
}

.lavrus-error__leaf:nth-child(22) {
  top: 73.3778%;
  left: 89.7888%;
}

.lavrus-error__leaf:nth-child(23) {
  top: 71.944%;
  left: 80.4132%;
}

.lavrus-error__leaf:nth-child(24) {
  top: 78.8744%;
  left: 90.1088%;
}

.lavrus-error__leaf:nth-child(25) {
  top: 90.3923%;
  left: 81.1672%;
}

.lavrus-error__leaf:nth-child(26) {
  top: 88.458%;
  left: 78.1765%;
}

.lavrus-error__leaf:nth-child(27) {
  top: 70.8705%;
  left: 63.4774%;
}

.lavrus-error__leaf:nth-child(28) {
  top: 51.2841%;
  left: 60.6152%;
}

.lavrus-error__leaf:nth-child(29) {
  top: 43.1604%;
  left: 58.2639%;
}

.lavrus-error__leaf:nth-child(30) {
  top: 42.7121%;
  left: 54.1869%;
}

.lavrus-error__leaf:nth-child(31) {
  top: 73.7604%;
  left: 63.6464%;
}

.lavrus-error__leaf:nth-child(32) {
  top: 77.1565%;
  left: 66.4167%;
}

/* Цифры и текст */

.lavrus-error__code {
  position: absolute;
  top: -1.9295%;
  left: 14.8368%;
  z-index: 1;
  width: 63.125%;
  height: 35.7382%;
  background: url("../assets/icons/404.svg") no-repeat;
  background-size: contain;
  transform: rotate(46deg);
  transform-origin: 0 0;
}

.lavrus-error__message {
  position: absolute;
  right: 0;
  bottom: -26.2727%;
  left: 0;
  margin: 0;
  font-family: var(--font-family);
  font-size: 58px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-grey-20);
  white-space: nowrap;
}

.lavrus-error__link {
  position: absolute;
  top: 68.715%;
  left: 0.0984%;
  z-index: 3;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: var(--color-black-solid);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.lavrus-error__link:hover,
.lavrus-error__link:focus-visible {
  text-decoration: none;
}

/* Промежуточные размеры */

@media (max-width: 1439px) {
  .lavrus-error__message {
    font-size: 44px;
  }

  .lavrus-error__link {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 1199px) {
  .lavrus-error {
    margin-bottom: 50px;
  }

  .lavrus-error__message {
    font-size: 36px;
  }

  .lavrus-error__link {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 1024px) {
  .lavrus-error__message {
    font-size: 30px;
  }
}

@media (min-width: 576px) and (max-width: 899px) {
  .lavrus-error__message {
    font-size: 24px;
  }

  .lavrus-error__link {
    top: 78.715%;
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 575px) {
  .lavrus-error {
    margin-bottom: 40px;
  }

  .lavrus-error__wrapper {
    max-width: none;
    height: 650px;
    aspect-ratio: auto;
  }

  .lavrus-error__scene {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 312px;
    height: 650px;
    transform: translateX(-50%);
  }

  .lavrus-error__leaves {
    position: absolute;
    inset: 0;
  }

  .lavrus-error__leaf {
    width: 32.5px;
  }

  .lavrus-error__leaf:nth-child(1) {
    top: 174.38px;
    left: 49.91px;
  }

  .lavrus-error__leaf:nth-child(2) {
    top: 240.57px;
    left: 107.07px;
  }

  .lavrus-error__leaf:nth-child(3) {
    top: 248.85px;
    left: 101.94px;
  }

  .lavrus-error__leaf:nth-child(4) {
    top: 314.82px;
    left: 108.24px;
  }

  .lavrus-error__leaf:nth-child(5) {
    top: 17.9px;
    left: 161.22px;
  }

  .lavrus-error__leaf:nth-child(6) {
    top: 56.45px;
    left: 190.68px;
  }

  .lavrus-error__leaf:nth-child(7) {
    top: 71.7px;
    left: 216.93px;
  }

  .lavrus-error__leaf:nth-child(8) {
    top: 12.53px;
    left: 230.91px;
  }

  .lavrus-error__leaf:nth-child(9) {
    top: 43.81px;
    left: 257.22px;
  }

  .lavrus-error__leaf:nth-child(10) {
    top: 68.23px;
    left: 295.5px;
  }

  .lavrus-error__leaf:nth-child(11) {
    top: 113.58px;
    left: 208.82px;
  }

  .lavrus-error__leaf:nth-child(12) {
    top: 331.87px;
    left: 169.39px;
  }

  .lavrus-error__leaf:nth-child(13) {
    top: 277.52px;
    left: 101.38px;
  }

  .lavrus-error__leaf:nth-child(14) {
    top: 325.02px;
    left: 206.02px;
  }

  .lavrus-error__leaf:nth-child(15) {
    top: 310.06px;
    left: 197.13px;
  }

  .lavrus-error__leaf:nth-child(16) {
    top: 348.41px;
    left: 241.97px;
  }

  .lavrus-error__leaf:nth-child(17) {
    top: 342.73px;
    left: 280.4px;
  }

  .lavrus-error__leaf:nth-child(18) {
    top: 422.76px;
    left: 270.23px;
  }

  .lavrus-error__leaf:nth-child(19) {
    top: 391.66px;
    left: 312.73px;
  }

  .lavrus-error__leaf:nth-child(20) {
    top: 437.95px;
    left: 282.86px;
  }

  .lavrus-error__leaf:nth-child(21) {
    top: 521.66px;
    left: 261.64px;
  }

  .lavrus-error__leaf:nth-child(22) {
    top: 547.9px;
    left: 254.45px;
  }

  .lavrus-error__leaf:nth-child(23) {
    top: 544.48px;
    left: 195.45px;
  }

  .lavrus-error__leaf:nth-child(24) {
    top: 570.72px;
    left: 254.18px;
  }

  .lavrus-error__leaf:nth-child(25) {
    top: 614.73px;
    left: 199.36px;
  }

  .lavrus-error__leaf:nth-child(26) {
    top: 606.86px;
    left: 180.69px;
  }

  .lavrus-error__leaf:nth-child(27) {
    top: 538.52px;
    left: 87.99px;
  }

  .lavrus-error__leaf:nth-child(28) {
    top: 465.78px;
    left: 68.51px;
  }

  .lavrus-error__leaf:nth-child(29) {
    top: 430.08px;
    left: 60.01px;
  }

  .lavrus-error__leaf:nth-child(30) {
    display: none;
  }

  .lavrus-error__leaf:nth-child(31) {
    top: 597.37px;
    left: 87.79px;
  }

  .lavrus-error__leaf:nth-child(32) {
    top: 544.04px;
    left: 62.71px;
  }

  .lavrus-error__code {
    top: -5.98px;
    left: 86.66px;
    width: 332.8px;
    height: 110.5px;
  }

  .lavrus-error__message {
    bottom: -34.31px;
    font-size: 18.2px;
    line-height: 25.48px;
  }

  .lavrus-error__link {
    top: 534.95px;
    left: -3px;
    font-size: 24px;
    line-height: 32px;
  }
}

@media (max-width: 359px) {
  .lavrus-error__wrapper {
    height: 521px;
  }

  .lavrus-error__scene {
    transform: translateX(-50%) scale(0.82);
    transform-origin: 50% 0;
  }
}

@media (max-width: 279px) {
  .lavrus-error__wrapper {
    height: 378px;
  }

  .lavrus-error__scene {
    transform: translateX(-50%) scale(0.62);
  }
}