/* Герой главной, вариант D «Сцена»: всё играет само при загрузке.
   0.15–1.2 с — заголовок собирается из слов, тире прочерчивается; 0.3–3 с — луч света проходит по сетке;
   1–3.4 с — рисуется траектория; 0–3.6 с — шапка опускается (видео); 3.6 с — удар: кольцо по земле,
   точка траектории загорается; дальше — спокойный idle-цикл видео и лёгкое дыхание объекта.
   Дизайн-система сайта сохранена, тексты не менялись. 07.09.2026 */

.mf-hero-v4 {
  position: relative;
  overflow: hidden;
  --mx: 0.72;
  --my: 0.55;
  min-height: min(820px, calc(100vh - 118px));
  display: flex;
  align-items: stretch;
}

/* сетка + фонарь за курсором */
.mf-hero-v4__grid,
.mf-hero-v4__sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(250, 251, 254, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 251, 254, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
}
.mf-hero-v4__grid {
  -webkit-mask-image: radial-gradient(440px 440px at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
          mask-image: radial-gradient(440px 440px at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
}
/* однократный луч света слева направо */
.mf-hero-v4__sweep {
  background-image:
    linear-gradient(rgba(245, 192, 74, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 192, 74, 0.28) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 50%, transparent 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 50%, transparent 100%);
  -webkit-mask-size: 45% 100%;
          mask-size: 45% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: -60% 0;
          mask-position: -60% 0;
  animation: mfSweep 2.8s cubic-bezier(0.45, 0, 0.2, 1) 0.3s 1 forwards;
}
@keyframes mfSweep {
  to { -webkit-mask-position: 170% 0; mask-position: 170% 0; }
}

/* траектория: рисуется сама, точка загорается при ударе */
.mf-hero-v4__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.mf-hero-v4__path .line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mfDraw 2.4s cubic-bezier(0.3, 0, 0.2, 1) 1s 1 forwards;
}
@keyframes mfDraw { to { stroke-dashoffset: 0; } }
.mf-hero-v4__path .dot {
  fill: var(--color-accent);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.mf-hero-v4.is-landed .mf-hero-v4__path .dot {
  animation: mfDotIn 0.5s ease forwards, mfHeroPulse 2.4s ease-in-out 0.5s infinite;
}
@keyframes mfDotIn { to { opacity: 1; } }
@keyframes mfHeroPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.7); }
}

.mf-hero-v4 .fd-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 36px;
  padding-bottom: 36px;
}

/* заголовок-монумент, собирается из слов */
.mf-hero-v4__title { display: block; margin: 0; }
.mf-hero-v4__lead {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(52px, 7.3vw, 106px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.mf-hero-v4__lead .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.06em 0.04em 0.1em 0;
  margin: -0.06em 0 -0.1em 0;
}
.mf-hero-v4__lead .nb { white-space: nowrap; }
.mf-hero-v4__lead .wi {
  display: inline-block;
  transform: translateY(112%);
  animation: mfRise 0.9s cubic-bezier(0.2, 0.7, 0.15, 1) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.14s);
}
.mf-hero-v4__lead .dash {
  transform: scaleX(0);
  transform-origin: left center;
  animation: mfDash 0.7s cubic-bezier(0.2, 0.7, 0.15, 1) 0.85s forwards;
}
@keyframes mfRise { to { transform: translateY(0); } }
@keyframes mfDash { to { transform: scaleX(1); } }

.mf-hero-v4__rest {
  display: block;
  margin-top: 20px;
  max-width: 540px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.25;
  color: var(--color-white);
}

/* появление остального текста лесенкой */
.mf-hero-v4 .fu {
  opacity: 0;
  transform: translateY(14px);
  animation: mfFadeUp 0.8s ease forwards;
  animation-delay: var(--d, 1s);
}
@keyframes mfFadeUp { to { opacity: 1; transform: translateY(0); } }

.mf-hero-v4__bottom {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: end;
}
.mf-hero-v4__text {
  margin-top: 18px;
  max-width: 560px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--color-light);
}
.mf-hero-v4__label {
  margin-top: 22px;
  font-family: 'FD-JB', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-grey);
}
.mf-hero-v4__ledger {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  border-top: 1px solid var(--color-border);
}
.mf-hero-v4__ledger li {
  padding: 12px 22px 12px 0;
  margin-right: 22px;
  border-right: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-white);
}
.mf-hero-v4__ledger li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.mf-hero-v4__cta { margin-top: 22px; }
.mf-hero-v4__note {
  justify-self: end;
  align-self: end;
  max-width: 340px;
  margin-left: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-light);
}

/* живой объект: параллакс за курсором + дыхание + удар при приземлении */
.mf-hero-v4__object {
  position: absolute;
  right: calc(50% - 700px + 8px);
  top: 39%;
  width: min(44vw, 660px);
  aspect-ratio: 2160 / 1920;
  transform: translate(calc((var(--mx) - 0.5) * -18px), calc(-50% + (var(--my) - 0.5) * -14px));
  z-index: 1;
  will-change: transform;
}
.mf-hero-v4__float {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 34px 70px rgba(8, 12, 22, 0.6));
}
.mf-hero-v4.is-landed .mf-hero-v4__float {
  animation: mfBreath 7s ease-in-out 1.2s infinite;
}
@keyframes mfBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.mf-hero-v4__poster,
.mf-hero-v4__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mf-hero-v4__canvas { opacity: 0; transition: opacity 0.35s ease; }
.mf-hero-v4__object.is-playing .mf-hero-v4__canvas { opacity: 1; }
.mf-hero-v4__object.is-playing .mf-hero-v4__poster { opacity: 0; transition: opacity 0.35s ease; }

/* кольцо удара по плоскости земли */
.mf-hero-v4__impact {
  position: absolute;
  left: 50%;
  top: 79%;
  width: 52%;
  aspect-ratio: 2.7;
  border: 2px solid rgba(245, 192, 74, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(245, 192, 74, 0.35), inset 0 0 28px rgba(245, 192, 74, 0.15);
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  pointer-events: none;
}
.mf-hero-v4.is-landed .mf-hero-v4__impact {
  animation: mfImpact 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.mf-hero-v4.is-landed .mf-hero-v4__impact--2 {
  animation-delay: 0.18s;
  border-color: rgba(250, 251, 254, 0.45);
}
@keyframes mfImpact {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@media (max-width: 1400px) {
  .mf-hero-v4__object { right: 2vw; }
}

/* планшет и телефон */
@media (max-width: 1100px) {
  .mf-hero-v4 { display: block; min-height: 0; }
  .mf-hero-v4__path, .mf-hero-v4__sweep { display: none; }
  .mf-hero-v4 .fd-container { padding-top: 32px; padding-bottom: 36px; gap: 28px; }
  .mf-hero-v4__lead { font-size: clamp(40px, 9vw, 84px); }
  .mf-hero-v4__object {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: min(100%, 520px);
    margin: 8px auto 0;
  }
  .mf-hero-v4__bottom { grid-template-columns: 1fr; }
  .mf-hero-v4__note { justify-self: start; }
  .mf-hero-v4__grid {
    -webkit-mask-image: radial-gradient(70% 60% at 60% 45%, #000 0%, transparent 100%);
            mask-image: radial-gradient(70% 60% at 60% 45%, #000 0%, transparent 100%);
  }
}
@media (max-width: 700px) {
  .mf-hero-v4__lead { font-size: min(8.5vw, 44px); }
  .mf-hero-v4__rest { font-size: 18px; }
  .mf-hero-v4__ledger { grid-template-columns: 1fr; }
  .mf-hero-v4__ledger li { border-right: 0; margin-right: 0; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
  .mf-hero-v4__ledger li:last-child { border-bottom: 0; }
  .mf-hero-v4__cta { width: 100%; }
  .mf-hero-v4__object { width: 118%; max-width: none; margin: 4px -9% 0; }   /* телефон: объект крупнее, слегка за края */
}
@media (prefers-reduced-motion: reduce) {
  .mf-hero-v4__lead .wi, .mf-hero-v4__lead .dash, .mf-hero-v4 .fu { animation: none; transform: none; opacity: 1; }
  .mf-hero-v4__sweep, .mf-hero-v4__canvas, .mf-hero-v4__impact { display: none; }
  .mf-hero-v4__path .line { animation: none; stroke-dashoffset: 0; }
  .mf-hero-v4__path .dot { opacity: 1; animation: none; }
  .mf-hero-v4.is-landed .mf-hero-v4__float { animation: none; }
}

/* сенсорные экраны: без drop-shadow на герое (мобильный Safari рисует белый прямоугольник вместо сцены) */
@media (hover: none), (max-width: 900px) {
  .mf-hero-v4__float { filter: none !important; }
}