/* Открытие сайта устроено прологом.

   Перед лендингом стоит пустой блок высотой --wp-hero-scroll, внутри него
   прилипший кадр во весь экран. Пока прокручивается пролог, кадр раскрывается
   из маленького окна в полноэкранный, а шапка проявляется. Когда пролог
   заканчивается, страница оказывается ровно в начале героя: тот же кадр уже
   лежит фоном самого героя, поэтому переход бесшовный, а дальше идёт обычный
   скролл к секциям.

   Это перенос присланного React-компонента на нативный CSS: clip-path и
   background-size там вёл framer-motion, здесь их ведёт --wp-hero-progress. */

:root {
  --wp-hero-progress: 0; /* 0 — маленький кадр, 1 — полноэкранный */
  --wp-hero-scroll: 1100px; /* длина пролога */
  --wp-hero-image: url("/wallstreet-hero.webp");

  /* шапка проявляется во второй половине пролога */
  --wp-hero-reveal: calc((var(--wp-hero-progress) - 0.45) * 2.6);
}

/* ---------- пролог ---------- */

.wp-hero-wrap {
  position: relative;
  height: var(--wp-hero-scroll);
  z-index: 0;
  pointer-events: none;
  background: #000;
}

.wp-hero-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: #000;
  background-image: var(--wp-hero-image);
  background-repeat: no-repeat;
  /* к концу пролога кадр приходит ровно к тому, что стоит фоном героя */
  background-position: calc(38% + 12% * var(--wp-hero-progress)) calc(30% + 25% * var(--wp-hero-progress));
  background-size: calc(170% - 70% * var(--wp-hero-progress));
  /* окно 25%..75%, как в присланном компоненте */
  clip-path: polygon(
    calc(25% - 25% * var(--wp-hero-progress)) calc(25% - 25% * var(--wp-hero-progress)),
    calc(75% + 25% * var(--wp-hero-progress)) calc(25% - 25% * var(--wp-hero-progress)),
    calc(75% + 25% * var(--wp-hero-progress)) calc(75% + 25% * var(--wp-hero-progress)),
    calc(25% - 25% * var(--wp-hero-progress)) calc(75% + 25% * var(--wp-hero-progress))
  );
  will-change: clip-path, background-size;
}

/* Затемнение набирается к концу пролога, чтобы стык с героем был незаметен */
.wp-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--wp-hero-reveal);
  background:
    radial-gradient(110% 80% at 50% 45%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.94) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.96) 100%);
}

/* ---------- сам лендинг ---------- */

#root,
main.xero-root {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body {
  background: #000;
}

/* Родная подложка героя непрозрачная и мешает картинке */
.xero-hero-bg,
.xero-hero-video-bg,
.xero-hero video,
.xero-hero-video {
  display: none !important;
}

/* Герой продолжает кадр пролога: та же картинка, то же кадрирование */
.xero-hero {
  background-color: #000 !important;
  background-image:
    radial-gradient(110% 80% at 50% 45%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.94) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.96) 100%),
    var(--wp-hero-image) !important;
  background-repeat: no-repeat !important;
  background-position: center, center, 50% 55% !important;
  background-size: cover, cover, cover !important;
}

/* Шапка появляется вместе с раскрытием кадра */
.xero-nav,
.xero-navbar,
header {
  opacity: var(--wp-hero-reveal);
  transition: opacity 0.12s linear;
}

@media (max-width: 768px) {
  :root { --wp-hero-scroll: 760px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --wp-hero-reveal: 1; }
  .wp-hero-wrap { height: 0; }
  .wp-hero-frame { display: none; }
}