/* Hero / banner — Figma 1:285 + Jitter «Рекламное агентство 360.mp4»
   Load: word reveal ~1.2–2.8s (timed)
   Scroll: title crop → mild columns/statue → dark handoff to services
*/

.mi-hero {
  --mi-hero-p: 0;
  --mi-hero-col-w: 617px;
  --mi-hero-col-h: 1603px;
  --mi-hero-col-top: -110px;
  --mi-hero-col-offset: 529px; /* inner edge from center — Figma 1:291 / 30:75 */
  --mi-hero-bg-shift-x: 573px; /* фон 1:287 x=-573 */
  --mi-hero-bg-shift-y: 110px; /* фон 1:287 y=-110 */
  --mi-hero-cloud-l-nudge: 120px; /* visual fine-tune vs Figma */
  --mi-hero-cloud-r-inset: 14px; /* 1920 − (−364 + 2270) */
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--mi-hero-scroll, 200vh);
  color: var(--mi-color-inverse);
  background: var(--mi-color-surface-dark);
}

.mi-hero__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.mi-hero__stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.mi-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mi-hero__sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(1493px * var(--mi-s));
  background: linear-gradient(180deg, #8db5d5 0%, #6398c3 100%);
}

.mi-hero__cloud {
  position: absolute;
  display: block;
  width: calc(2270px * var(--mi-s));
  height: calc(924px * var(--mi-s));
  opacity: 0.3;
  will-change: transform;
  animation: mi-hero-cloud 28s ease-in-out infinite alternate;
  background: none;
  pointer-events: none;
}

/* Figma 1:289 / 1:290 — coords inside фон, shifted to viewport */
.mi-hero__cloud--l {
  left: calc(50% - ((960px + var(--mi-hero-bg-shift-x) - var(--mi-hero-cloud-l-nudge)) * var(--mi-s)));
  top: calc((18px - var(--mi-hero-bg-shift-y)) * var(--mi-s));
  animation-duration: 32s;
}

.mi-hero__cloud--r {
  left: auto;
  right: calc(var(--mi-hero-cloud-r-inset) * var(--mi-s));
  top: calc((404px - var(--mi-hero-bg-shift-y)) * var(--mi-s));
  animation-duration: 36s;
  animation-direction: alternate-reverse;
}

@keyframes mi-hero-cloud {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(36px * var(--mi-s)), calc(-18px * var(--mi-s)), 0);
  }
}

.mi-hero__cloud img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.mi-hero__cloud--r img {
  object-fit: cover;
  object-position: right center;
}

.mi-hero__col {
  position: absolute;
  display: block;
  z-index: 1;
  max-width: none;
  line-height: 0;
  will-change: transform;
}

.mi-hero__col img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}

/* Figma 1:291 / 30:75 — 617×1603, top -110, symmetric ±529 inner gap */
.mi-hero__col--l,
.mi-hero__col--r {
  top: calc(var(--mi-hero-col-top) * var(--mi-s));
  width: calc(var(--mi-hero-col-w) * var(--mi-s));
  height: calc(var(--mi-hero-col-h) * var(--mi-s));
}

.mi-hero__col--l {
  left: calc(
    54% - (var(--mi-hero-col-offset) + var(--mi-hero-col-w)) * var(--mi-s)
  );
  transform: translate3d(
    calc(var(--mi-hero-p, 0) * -120px * var(--mi-s)),
    calc(var(--mi-hero-p, 0) * 36px * var(--mi-s)),
    0
  );
}

.mi-hero__col--r {
  left: calc(46% + var(--mi-hero-col-offset) * var(--mi-s));
  transform: translate3d(
    calc(var(--mi-hero-p, 0) * 120px * var(--mi-s)),
    calc(var(--mi-hero-p, 0) * 36px * var(--mi-s)),
    0
  );
}

/* Figma 30:75 — same asset, mirrored */
.mi-hero__col--r img {
  transform: scaleY(-1) rotate(180deg);
}

/* Video: statue rises through mid→late scroll (center brightens ~3–5.4s) */
.mi-hero__statue {
  position: absolute;
  left: 50%;
  top: calc(554px * var(--mi-s));
  width: calc(888px * var(--mi-s));
  height: calc(939px * var(--mi-s));
  transform: translate3d(-50%, calc(var(--mi-hero-p, 0) * -320px * var(--mi-s)), 0);
  display: block;
  z-index: 1;
  max-width: none;
  line-height: 0;
  will-change: transform;
}

.mi-hero__statue img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}

/* Bottom fade — anchored to hero track bottom (below first viewport).
   Soft handoff into services; does not sit on the sticky banner screen. */
.mi-hero__fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: calc(330px * var(--mi-s));
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(17, 35, 49, 0) 0%,
    rgba(17, 35, 49, 0.28) 28%,
    rgba(17, 35, 49, 0.7) 62%,
    #112331 100%
  );
}

.mi-hero__fade-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(213px * var(--mi-s));
  z-index: 4;
  background: linear-gradient(180deg, #4a7ca3 0%, rgba(150, 187, 217, 0) 100%);
}

/* Figma 1:295 — bottom vignette inside viewport (top 900, h 593) */
.mi-hero__fade-mid {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(900px * var(--mi-s));
  height: calc(593px * var(--mi-s));
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(17, 35, 49, 0) 0%,
    rgba(17, 35, 49, 0.7) 44.96%,
    #112331 74.933%
  );
}

.mi-hero__title {
  --mi-hero-reveal-start: 1.05s;
  --mi-hero-reveal-step: 0.3s;
  position: absolute;
  left: 50%;
  top: calc(195px * var(--mi-s));
  width: calc(1065px * var(--mi-s));
  max-width: calc(100% - 2 * var(--mi-gutter));
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--mi-font);
  font-size: var(--mi-fs-96);
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Each line crops independently — video title exit ~2.9–3.4s */
.mi-hero__title-line {
  display: block;
  overflow: hidden;
  width: 100%;
}

.mi-hero__title-line-inner {
  display: block;
  will-change: transform, clip-path, opacity;
  transform: translate3d(0, calc(var(--mi-line-t, 0) * -110%), 0);
}

.mi-hero__scroll {
  position: absolute;
  left: 50%;
  top: min(calc(878px * var(--mi-s)), calc(100vh - calc(120px * var(--mi-s))));
  width: calc(86px * var(--mi-s));
  height: calc(86px * var(--mi-s));
  transform: translateX(-50%);
  z-index: 4;
  opacity: calc(1 - var(--mi-hero-p, 0) * 1.4);
  pointer-events: auto;
  color: #fff;
  transition: transform var(--mi-duration) var(--mi-ease);
}

.mi-hero__scroll:hover {
  transform: translateX(-50%) translateY(4px);
}

.mi-hero__scroll svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mi-hero__scroll-arrow {
  transform-origin: center;
  animation: mi-scroll-arrow 1.6s var(--mi-ease) infinite;
}

@keyframes mi-scroll-arrow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Opening: L→R reveal per line — linear sequence (next starts when previous ends) */
.mi-js .mi-hero__title.is-ready .mi-hero__title-line:nth-child(1) .mi-reveal {
  transition-delay: var(--mi-hero-reveal-start);
}

.mi-js .mi-hero__title.is-ready .mi-hero__title-line:nth-child(2) .mi-reveal {
  transition-delay: calc(var(--mi-hero-reveal-start) + var(--mi-hero-reveal-step));
}

.mi-js .mi-hero__title.is-ready .mi-hero__title-line:nth-child(3) .mi-reveal {
  transition-delay: calc(var(--mi-hero-reveal-start) + 2 * var(--mi-hero-reveal-step));
}

@media (prefers-reduced-motion: reduce) {
  .mi-hero {
    height: 100vh;
  }

  .mi-js .mi-hero__title .mi-reveal {
    transition-delay: 0s !important;
  }

  .mi-hero__title-line-inner,
  .mi-hero__col--l,
  .mi-hero__col--r {
    transform: none !important;
  }

  .mi-hero__statue {
    transform: translateX(-50%) !important;
  }

  .mi-hero__scroll {
    opacity: 1 !important;
  }

  .mi-hero__scroll-arrow,
  .mi-hero__cloud {
    animation: none !important;
  }
}