/* ============================================================
   Medisson Select · тур «Пройдите через Select»
   Кинематографичное открытие экранов при скролле.

   Прогрессивный энхансмент поверх собранного бандла: JS двигает
   --frame-opacity / --frame-scale / --frame-shift / --story-opacity,
   отсюда чистым CSS выводится --rev — «насколько экран открыт»
   (0..1; у пройденных экранов остаётся 1, они лежат стопкой ниже).
   Браузеры без min()/max() в calc() игнорируют блок и остаются
   на старом кроссфейде из бандла.
   ============================================================ */

/* ---------- кадры: «двери зала» раскрываются из центра ---------- */
.ms-tour__frame{
  /* пройден ли кадр: у пройденных --frame-scale > 1.045 */
  --gone: min(1, calc((var(--frame-scale) - 1.045) * 1800));
  /* 0..1 — открытие экрана; у пройденных всегда 1 */
  --rev: max(var(--frame-opacity), var(--gone));

  opacity: min(1, calc(var(--rev) * 4));
  clip-path: inset(0 calc((1 - var(--rev)) * 50%) 0 calc((1 - var(--rev)) * 50%));
  /* камера «выдыхает»: входящий чуть крупнее и оседает к базовому масштабу,
     как медленный зум в hero-интро */
  transform: translate3d(var(--frame-shift), 0, 0)
             scale(calc(1.045 + (1 - var(--rev)) * .035));
  will-change: transform, opacity, clip-path;
}

/* тональное проявление: открывающийся кадр темнее и «высветляется» —
   характер тот же, что у brightness-раскрытия hero-фото */
.ms-tour__frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#020202;
  opacity: calc((1 - var(--rev)) * .55);
  pointer-events:none;
}

/* золотые кромки на краях раскрытия: тонкая линия + мягкое свечение,
   видимы только в момент перехода (колокол по --rev) */
.ms-tour__frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background-image:
    linear-gradient(180deg, transparent 3%, rgba(255,242,217,.9) 32%, #d1b066 50%, rgba(255,242,217,.9) 68%, transparent 97%),
    linear-gradient(180deg, transparent 3%, rgba(255,242,217,.9) 32%, #d1b066 50%, rgba(255,242,217,.9) 68%, transparent 97%),
    linear-gradient(180deg, transparent 6%, rgba(209,176,102,.44) 50%, transparent 94%),
    linear-gradient(180deg, transparent 6%, rgba(209,176,102,.44) 50%, transparent 94%);
  background-size: 2px 100%, 2px 100%, 46px 100%, 46px 100%;
  background-repeat: no-repeat;
  background-position-x:
    calc((1 - var(--rev)) * 50%),
    calc(100% - (1 - var(--rev)) * 50%),
    calc((1 - var(--rev)) * 50%),
    calc(100% - (1 - var(--rev)) * 50%);
  background-position-y: 0, 0, 0, 0;
  opacity: calc(min(1, var(--rev) * 7) * min(1, (1 - var(--rev)) * 7) * .95);
  pointer-events:none;
}

/* ---------- текст истории: стагер в характере интро ---------- */
.ms-tour__story{
  --so: var(--story-opacity);
  --so-fast: min(1, calc(var(--so) * 1.7));   /* кикер — приходит первым */
  --so-slow: max(0, calc(var(--so) * 1.45 - .45)); /* описание — последним */
  /* сжимаем окно видимости: старый и новый заголовки не мешаются в середине */
  opacity: max(0, calc(var(--so) * 1.3 - .3));
}

/* кикер: лёгкое сжатие трекинга, как титр */
.ms-tour__story>p{
  opacity: var(--so-fast);
  transform: translateY(calc((1 - var(--so-fast)) * 10px));
  letter-spacing: calc(.24em + (1 - var(--so-fast)) * .12em);
}

/* заголовок: выныривает из-под нижней кромки */
.ms-tour__story h2{
  transform: translateY(calc((1 - var(--so)) * .3em));
  clip-path: inset(-.2em 0 calc((1 - var(--so)) * 28%) 0);
}

/* описание: приходит последним, мягче */
.ms-tour__story>span{
  opacity: var(--so-slow);
  transform: translateY(calc((1 - var(--so-slow)) * 16px));
}
.ms-tour__story .ms-button{
  opacity: var(--so-slow);
  transform: translateY(calc((1 - var(--so-slow)) * 12px));
}

/* гигантская цифра: оседает в масштабе чуть позже заголовка */
.ms-tour__story-index{
  opacity: min(1, calc(var(--so) * 1.2));
  transform: scale(calc(1 + (1 - var(--so)) * .12));
  transform-origin: 50% 22%;
}

/* ---------- бережный режим ---------- */
@media (prefers-reduced-motion: reduce){
  .ms-tour__frame::before{ display:none; }
  .ms-tour__frame{ clip-path:none; transform:none; }
  .ms-tour__frame::after{ opacity: calc((1 - var(--rev)) * .3); }
  .ms-tour__story h2{ clip-path:none; transform:none; }
}