/* Анимации главной страницы: сборка дома в первом экране.
   Порядок сцены: камера отъезжает (azCam), кладка выкладывается блок за
   блоком (azBlock), ставится крыша (azRoof), появляются проёмы (azFade),
   поднимается пыль (azDust). azRise — появление текстовых блоков. */

@keyframes azCam {
  0%   { transform: scale(2.6) translate(16px, 4px); }
  20%  { transform: scale(2.6) translate(-72px, -2px); }
  30%  { transform: scale(2.4) translate(-56px, -12px); }
  60%  { transform: scale(.62) translate(126px, -10px); }
  100% { transform: scale(.66) translate(122px, -18px); }
}

@keyframes azBlock {
  0%   { opacity: 0; transform: translateY(-28px) rotate(-1.5deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes azFade {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}

@keyframes azRoof {
  0%   { opacity: 0; transform: translateY(-60px); }
  100% { opacity: 1; transform: none; }
}

@keyframes azDust {
  0%   { opacity: 0; transform: translate(0, 0); }
  30%  { opacity: .5; }
  100% { opacity: 0; transform: translate(26px, -40px); }
}

@keyframes azRise {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: none; }
}

/* Видео — фон всего первого экрана. Крутится без остановки. */
.az-hero { min-height: 640px; display: flex; align-items: center; }
.az-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* Затемнение поверх видео: слева темнее — под текст, справа виден дом. */
.az-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12,14,17,.94) 0%, rgba(12,14,17,.72) 46%, rgba(12,14,17,.28) 100%),
    linear-gradient(180deg, rgba(12,14,17,.35) 0%, transparent 30%, rgba(12,14,17,.55) 100%);
}
.az-hero-inner { width: 100%; }
.az-hero-cap {
  position: absolute; right: 28px; bottom: 22px; z-index: 2;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em;
  color: #9198A1; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

@media (max-width: 720px) {
  .az-hero { min-height: 560px; }
  /* На узком экране текст идёт во всю ширину — затемняем сильнее и вертикально. */
  .az-hero-scrim {
    background:
      linear-gradient(180deg, rgba(12,14,17,.72) 0%, rgba(12,14,17,.55) 45%, rgba(12,14,17,.82) 100%);
  }
  .az-hero-cap { display: none; }
}