/* 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;
  }
}

@media (max-width: 991px) {
  /* Figma 101:520 is a 360 × 800 composition. Scale the entire coordinate
     system from 320 to 430px instead of freezing its 360px values. */
  .mi-hero {
    height: clamp(711.111px, 222.222vw, 955.556px);
  }

  .mi-hero__pin {
    position: sticky;
    top: 0;
    height: clamp(711.111px, 222.222vw, 955.556px);
  }

  .mi-hero__stage {
    min-height: clamp(711.111px, 222.222vw, 955.556px);
    height: clamp(711.111px, 222.222vw, 955.556px);
  }

  .mi-hero__sky {
    height: clamp(684.444px, 213.889vw, 919.444px);
  }

  .mi-hero__cloud {
    width: clamp(824px, 257.5vw, 1107.5px);
    height: clamp(336px, 105vw, 451.5px);
    animation-duration: 28s;
  }

  .mi-hero__cloud--l { left: clamp(-534px, -124.167vw, -397.334px); top: clamp(-10.972px, -2.553vw, -8.17px); }
  .mi-hero__cloud--r { right: auto; left: clamp(-152.542px, -35.475vw, -113.52px); top: clamp(131.386px, 41.058vw, 176.549px); }

  .mi-hero__col--l,
  .mi-hero__col--r {
    top: clamp(-86px, -20vw, -64px);
    width: clamp(269.13px, 84.103vw, 361.643px);
    height: clamp(699.21px, 218.503vw, 939.563px);
    overflow: hidden;
  }

  /* Figma 101:524/101:525 stretch the original column raster to the
     302.77 × 786.61 layer bounds; `contain` left both columns undersized. */
  .mi-hero__col img { object-fit: fill; }

  /* Figma layer exports 101:525 / 101:524 show only the inner 78px edge
     of each 302.77px layer. The raw asset contains transparent outer space,
     so crop its rendered position inside the layer before the hero clips it. */
  .mi-hero__col--l img {
    transform: translateX(clamp(103.111px, 32.222vw, 138.555px));
  }

  .mi-hero__col--r img {
    transform: translateX(clamp(-138.555px, -32.222vw, -103.111px)) scaleX(-1);
  }

  .mi-hero__col--l {
    left: clamp(-268.75px, -62.5vw, -200px);
    transform: translate3d(calc(-5% + var(--mi-hero-p, 0) * clamp(-143.332px, -33.333vw, -106.666px)), calc(var(--mi-hero-p, 0) * clamp(32px, 10vw, 43px)), 0);
  }

  .mi-hero__col--r {
    left: clamp(250.666px, 78.333vw, 336.832px);
    transform: translate3d(calc(5% + var(--mi-hero-p, 0) * clamp(106.666px, 33.333vw, 143.332px)), calc(var(--mi-hero-p, 0) * clamp(32px, 10vw, 43px)), 0);
  }

  .mi-hero__statue {
    top: clamp(247.11px, 77.222vw, 332.055px);
    width: clamp(347.555px, 108.611vw, 467.027px);
    height: clamp(427.555px, 133.611vw, 574.527px);
    transform: translate3d(-50%, calc(var(--mi-hero-p, 0) * clamp(-191.109px, -44.444vw, -142.221px)), 0);
  }

  .mi-hero__fade-top { height: clamp(85.334px, 26.667vw, 114.668px); }
  .mi-hero__fade-mid { top: clamp(353.779px, 110.556vw, 475.391px); height: clamp(357.334px, 111.667vw, 480.168px); }
  .mi-hero__fade-bottom { display: none; }

  .mi-hero__title {
    top: clamp(85.334px, 26.667vw, 114.668px);
    width: 78.889%;
    max-width: none;
    font-size: clamp(28.444px, 8.889vw, 38.222px);
    line-height: 1.1;
  }

  .mi-hero__scroll {
    top: clamp(514.667px, 160.833vw, 691.582px);
    width: clamp(56.889px, 17.778vw, 76.444px);
    height: clamp(56.889px, 17.778vw, 76.444px);
  }

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