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

/* общий фон сайта после прелоадера */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f5f5;
}

/* --- PRELOADER --- */

.preloader {
  position: fixed;
  inset: 0;
  background: #05070a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

.preloader__inner {
  position: relative;
  width: 280px;
  height: 220px;
}

/* "земля" под маляром */
.preloader__ground {
  position: absolute;
  left: -60px;
  right: -60px;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to top, #05070a, #15171d);
}

/* Маляр */

.painter {
  position: absolute;
  bottom: 40px;
  left: 10px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.painter__body {
  position: relative;
  width: 60px;
  height: 110px;
}

.painter__head {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fefefe, #c4c4c6);
  border: 3px solid #1a1c22;
  position: absolute;
  top: 0;
  left: 8px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .3);
}

.painter__mask {
  position: absolute;
  left: 11px;
  top: 13px;
  width: 26px;
  height: 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, #00bcd4, #0288d1);
  box-shadow: 0 0 6px rgba(0, 188, 212, .7);
}

.painter__torso {
  position: absolute;
  bottom: 0;
  left: 8px;
  width: 44px;
  height: 70px;
  border-radius: 14px;
  background: linear-gradient(#273344, #151922);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .6);
}

.painter__arm {
  position: absolute;
  left: 38px;
  top: 40px;
  width: 40px;
  height: 10px;
  border-radius: 8px;
  background: linear-gradient(#273344, #151922);
  transform-origin: left center;
  animation: painter-spray-arm 2s ease-out forwards;
}

.painter__leg {
  position: absolute;
  bottom: -6px;
  left: 12px;
  width: 12px;
  height: 40px;
  border-radius: 6px;
  background: #151922;
  box-shadow: 16px 0 0 #151922;
}

/* Краскопульт */

.painter__gun {
  position: relative;
  margin-left: 4px;
  margin-bottom: 18px;
}

.painter__gun-body {
  width: 32px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(#eeeeee, #bdbdbd);
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
  position: relative;
}

.painter__gun-body::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: #bdbdbd;
}

.painter__gun-body::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: -10px;
  width: 14px;
  height: 10px;
  border-radius: 6px;
  background: #bdbdbd;
}

.painter__hose {
  position: absolute;
  left: -40px;
  bottom: -6px;
  width: 50px;
  height: 30px;
  border-radius: 50px;
  border: 3px solid rgba(80, 90, 110, .9);
  border-color: transparent transparent rgba(80, 90, 110, .9) rgba(80, 90, 110, .9);
}

/* Распыление */

.painter__spray {
  position: absolute;
  left: 32px;
  top: 2px;
  width: 80px;
  height: 46px;
  background: radial-gradient(circle at 0% 50%, rgba(0, 188, 212, .9), transparent 70%);
  opacity: 0;
  transform-origin: left center;
  animation: spray-beam 1.8s ease-out forwards;
}

/* Полоса краски, которая "открывает" сайт */

.preloader__paint-strip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #f5f5f5; /* цвет фона будущего сайта */
  animation: paint-screen 1.9s ease-out forwards;
  animation-delay: 0.2s;
}

/* Логотип на прелоадере — крупно по центру, с плавным появлением */

.preloader__logo {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #f5f5f5;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: 0;
  animation: preloader-logo-in 1.2s ease-out forwards;
  animation-delay: 0.6s;
}

.preloader__logo-main {
  display: block;
  font-size: 20px;
  font-weight: 800;
}

.preloader__logo-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .9;
}

.preloader__logo-url {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: .7;
}

/* Скрытие прелоадера после загрузки */

.preloader--hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

/* --- АНИМАЦИИ --- */

@keyframes paint-screen {
  0%   { width: 0; }
  20%  { width: 10vw; }
  60%  { width: 90vw; }
  100% { width: 140vw; }
}

@keyframes spray-beam {
  0%   { opacity: 0; transform: scaleX(.1); }
  15%  { opacity: 1; transform: scaleX(.9); }
  60%  { opacity: 1; transform: scaleX(1.2); }
  100% { opacity: 0; transform: scaleX(1.4); }
}

@keyframes painter-spray-arm {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-12deg); }
  60%  { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes preloader-logo-in {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

/* Адаптив под телефон */

@media (max-width: 480px) {
  .preloader__inner {
    transform: scale(.95);
  }

  .preloader__logo-main {
    font-size: 18px;
  }
}