/* ======================================================================
   Ритуал появления башни при заходе на сайт.

   Раньше сборку играл ролик, но у него был запечённый чёрный фон — он
   закрывал поле с пылью, ради которого всё переделывалось. Здесь та же
   драматургия собрана кодом на уже существующих слоях:

     1. Башня проявляется из размытия и поднимается (900ms, blur 14→0).
     2. По её силуэту снизу вверх проходит световая волна — она обрезана
        той же luminance-маской, что и сам рендер, поэтому светится
        только конструкция, а не весь кадр.
     3. Волна «включает» этажи: пары экранов вспыхивают снизу вверх
        и гаснут — подсказка, что этажи живые и на них можно навести.

   Всё на transform / opacity / filter. Ноль новых картинок.
   ====================================================================== */

/* --- 1. проявление башни --------------------------------------------- */

.theme-original .hero[data-arrive] .system-image,
.theme-original .hero[data-arrive] .system-composite {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  filter: blur(14px);
}

.theme-original .hero[data-arrive="run"] .system-image,
.theme-original .hero[data-arrive="run"] .system-composite {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition: opacity 900ms var(--ease),
              transform 900ms var(--ease),
              filter 900ms var(--ease);
}

/* Пока башня в полёте, по этажам не кликают. */
.theme-original .hero[data-arrive] .system-hotspots {
  pointer-events: none;
}

/* --- 2. световая волна по силуэту ------------------------------------- */

.tower-sweep {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: url("assets/hero-tower-mask-lum-1600.webp?v=2");
          mask-image: url("assets/hero-tower-mask-lum-1600.webp?v=2");
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-source-type: luminance;
          mask-mode: luminance;
}

.tower-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 24%;
  background: linear-gradient(to top,
    rgba(150, 205, 255, 0),
    rgba(170, 215, 255, .50) 50%,
    rgba(150, 205, 255, 0));
  transform: translate3d(0, 440%, 0);
}

.theme-original .hero[data-arrive="run"] .tower-sweep {
  opacity: 1;
}

.theme-original .hero[data-arrive="run"] .tower-sweep::before {
  animation: tower-sweep-pass 1300ms cubic-bezier(.33, 0, .2, 1) 850ms forwards;
}

@keyframes tower-sweep-pass {
  to { transform: translate3d(0, -120%, 0); }
}

/* Кадрирование маски повторяет кадрирование картинки по брейкпойнтам. */
@media (max-width: 900px) {
  .tower-sweep {
    -webkit-mask-position: 74% center;
            mask-position: 74% center;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .tower-sweep {
    -webkit-mask-position: 80% center;
            mask-position: 80% center;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .tower-sweep {
    -webkit-mask-position: 72% center;
            mask-position: 72% center;
  }
}

/* --- 3. этажи вспыхивают вслед за волной ------------------------------- */

.theme-original .hero[data-arrive] .system-hotspot > img {
  transition: opacity 320ms var(--ease);
}

.theme-original .hero[data-arrive] .system-hotspot.lit > img {
  opacity: 1;
}

/* --- уважение к reduced-motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .theme-original .hero[data-arrive] .system-image,
  .theme-original .hero[data-arrive] .system-composite {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .tower-sweep {
    display: none;
  }
}