@import url('./colors/default.css');
@import url('./fonts.css');
@import url('./interactive.css');
@import url('./fixedbar.css');
@import url('./header.css');
@import url('./main.css');
@import url('./footer.css');
@import url('./plug.css');

body {
  background-color: var(--primary-color-2);
  background:
    url('../images/decorative-1.svg'),
    url('../images/decorative-2.svg'),
    url('../images/decorative-3.svg'),
    url('../images/decorative-2.svg'),
    url('../images/decorative-4.svg'),
    url('../images/decorative-5.svg'),
    url('../images/decorative-6.svg'),
    url('../images/decorative-7.svg'),
    url('../images/decorative-8.svg'),
    url('../images/decorative-9.svg'),
    url('../images/decorative-2.svg');
  background-position:
    calc(50% - 704px) 628px,
    calc(50% + 938px) 203px,
    calc(50% + 778px) 1103px,
    calc(50% - 828px) 1603px,
    calc(50% + 828px) 2403px,
    calc(50% - 828px) 3203px,
    calc(50% + 928px) 4403px,
    calc(50% - 928px) 4842px,
    calc(50% + 928px) 5242px,
    calc(50% - 808px) 5603px,
    calc(50% + 728px) 6003px;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  margin: 0;
  font-family: 'Rubik', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@media (max-width: 920px) {
  body {
    background:
      url('../images/decorative-1.svg'),
      url('../images/decorative-2.svg'),
      url('../images/decorative-13.svg'),
      url('../images/decorative-6.svg'),
      url('../images/decorative-4.svg'),
      url('../images/decorative-2.svg'),
      url('../images/decorative-6.svg');
    background-position:
      0 548px,
      100% 1158px,
      calc(100% + 4px) 2033px,
      calc(100% + 4px) 3033px,
      0 4033px,
      calc(100% + 4px) 5233px,
      calc(100% + 4px) 7033px;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat;
    background-size:
      256px auto,
      88px auto,
      128px auto,
      128px auto,
      128px auto,
      128px auto,
      128px auto;
  }
}

@media (max-width: 680px) {
  body {
    position: relative;
    background:
      url('../images/decorative-2.svg'),
      url('../images/decorative-6.svg');
    background-position:
      0 851px,
      calc(100% + 4px) 861px;
    background-repeat:
      no-repeat,
      no-repeat;
    background-size:
      96px auto,
      96px auto;
  }
}

@media (max-width: 470px) {
  body {
    background: none;
  }
}

.container {
  box-sizing: border-box;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 auto;
  width: 100%;
  max-width: 1430px;
}

@media (max-width: 1460px) {
  .container {
    max-width: 1160px;
  }
}

@media (max-width: 1220px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
    max-width: 960px;
  }
}

@media (max-width: 680px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
  }
}

@media (max-width: 470px) {
  .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
}

/* Анимация при скролле */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.8s ease-out;
}

/* Разные направления для разных элементов */
.header__carousel.animate-on-scroll {
  transform: translateY(-30px);
}

.header__title.animate-on-scroll {
  transform: translateY(-30px);
}

.main__section-about.animate-on-scroll {
  transform: translateX(-40px);
}

.main__section-news.animate-on-scroll {
  transform: translateX(-40px);
}

.main__section-anounces.animate-on-scroll {
  transform: translateX(40px);
}

.main__section-archive.animate-on-scroll {
  transform: translateX(-40px);
}

.main__section-projects.animate-on-scroll {
  transform: translateX(40px);
}

.main__section-articles.animate-on-scroll {
  transform: translateX(-40px);
}

.footer__section-info.animate-on-scroll {
  transform: translateY(40px);
}

.footer__section-partners.animate-on-scroll {
  transform: translateY(40px);
}

.footer__bottombar.animate-on-scroll {
  transform: translateY(40px);
}

/* Состояние "видимо" */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .animate-on-scroll {
    transition-duration: 0.6s;
  }
  
  .main__section-about.animate-on-scroll,
  .main__section-news.animate-on-scroll,
  .main__section-anounces.animate-on-scroll,
  .main__section-archive.animate-on-scroll,
  .main__section-projects.animate-on-scroll,
  .main__section-articles.animate-on-scroll {
    transform: translateX(-20px);
  }
  
  .footer__section-info.animate-on-scroll,
  .footer__section-partners.animate-on-scroll,
  .footer__bottombar.animate-on-scroll {
    transform: translateY(20px);
  }
  
  .header__carousel.animate-on-scroll,
  .header__title.animate-on-scroll {
    transform: translateY(-20px);
  }
}