/* ==========================================================
   Перший екран — колонки віджетів, що пливуть
   ----------------------------------------------------------
   Замість скріншота дашборда: три колонки живих віджетів,
   які повільно їдуть у різні боки. Колаж навмисно виходить
   за правий край — обрізаний кадр читається як «застосунок
   продовжується далі», акуратний прямокутник — як «це все».
   ========================================================== */

/* .hero-right — це вікно, крізь яке видно колаж. Він більший
   за вікно і зменшений трансформом, тому віджети лишаються
   у своїх справжніх пропорціях і нічого не переноситься. */
[data-site-refresh-content] .hero--split2 .hero-right {
  position: relative;
  overflow: hidden;
  /* висоту вікна тримаємо у змінній: колаж рахує з неї свою
     висоту до масштабування, тож брейкпоінт міняє одне число */
  --hero-h: 620px;
  height: var(--hero-h);
}
/* згасання — на вікні, а не на колажі: інакше воно теж масштабується */
[data-site-refresh-content] .hero--split2 .hero-right::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom,
    var(--surface-base) 0, transparent 90px,
    transparent 64%, var(--surface-base) 100%);
}

/* Герой вирівнюємо по тому самому контейнеру, що й решта сторінки.
   Раніше він розтягувався до min(1360px, 92vw) під широкий скріншот —
   із колажем це виглядало ширшим за все інше на сторінці. */
[data-site-refresh-content] .hero--split2 .hero-split-inner {
  max-width: var(--container);
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: var(--sp-8);
}
/* заголовок ліз по одному слову в рядок — на 470 px «journal»
   і «actually» не вміщалися поруч із сусідами */
[data-site-refresh-content] .hero--split2 .hero-left h1 {
  font-size: clamp(var(--fs-32), 3.1vw, var(--fs-40));
  line-height: 1.1;
  /* інакше останній рядок лишався з одним словом «goes» */
  text-wrap: balance;
}
[data-site-refresh-content] .hero--split2 .hero-left .hero-description { max-width: 42ch; }

[data-site-refresh-content] .hero-drift {
  /* Малюємо у «великих» пікселях, а вміщаємо трансформом:
     --hero-k рахує скрипт як ширина вікна / 912. */
  position: absolute; inset: 0 auto 0 0;
  width: 912px;
  height: calc(var(--hero-h, 620px) / var(--hero-k, .65));
  transform: scale(var(--hero-k, .65));
  transform-origin: 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
[data-site-refresh-content] .hero-drift .col { overflow: hidden; }
[data-site-refresh-content] .hero-drift .track {
  display: flex; flex-direction: column; gap: 14px;
  animation: heroSlide var(--dur, 56s) linear infinite;
  will-change: transform;
}
[data-site-refresh-content] .hero-drift .cell { flex: 0 0 auto; }
@keyframes heroSlide { to { transform: translateY(-50%); } }

/* згасання по краях — накладкою, а не маскою:
   у Safari й Firefox правила композиції масок розходяться */


/* курсор зупиняє рух — щоб можна було роздивитися віджет */
[data-site-refresh-content] .hero-drift:hover .track { animation-play-state: paused; }

/* дрібніший масштаб віджетів, ніж у секціях */
[data-site-refresh-content] .hero-drift .dashboard-widget { border-radius: 16px; }
[data-site-refresh-content] .hero-drift .widget-header { padding: 12px 14px 6px; min-height: 0; }
[data-site-refresh-content] .hero-drift .widget-title .widget-title-text { font-size: 13px; }
[data-site-refresh-content] .hero-drift .widget-content { padding: 0 14px 14px; gap: 6px; }
/* max-height тут розплющував стовпчики: svg тягнеться по viewBox,
   тож висоту лишаємо графіку, а стримуємо ширину колонки */
[data-site-refresh-content] .hero-drift .chart { height: auto; }
[data-site-refresh-content] .hero-drift .metrics-panel { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .hero-drift .track { animation: none; }
}

@media (max-width: 1100px) {
  [data-site-refresh-content] .hero--split2 .hero-right { --hero-h: 520px; }
}

/* ----- телефон -----
   Три колонки на 350 px дали б масштаб 0.38 — підписи по 5 px,
   тобто рівно та сама нечитабельність, через яку ми викинули
   скріншоти. Тому лишаємо одну колонку в її справжній ширині
   (293 px) і розтягуємо під екран: текст стає навіть більшим
   за десктопний колаж. Віджети в треку все одно змінюються,
   тож видно не один віджет, а п'ять. */
@media (max-width: 900px) {
  [data-site-refresh-content] .hero--split2 .hero-split-inner { grid-template-columns: 1fr; }
  [data-site-refresh-content] .hero--split2 .hero-right {
    display: block;
    --hero-h: 400px;
    margin-top: var(--sp-4);
    /* без стелі колонка на планшеті розтягнулась би до 700px,
       тобто масштаб 2.4 — віджет із підписами по 30px.
       justify-self, а не margin: auto: авто-поля знімають зі
       grid-елемента розтягування, і він схлопується до 32px,
       бо єдина його дитина позиціонована абсолютно. */
    width: 100%;
    max-width: 430px;
    justify-self: center;
  }
  [data-site-refresh-content] .hero-drift {
    display: grid;
    grid-template-columns: 1fr;
    width: 293px;
  }
  [data-site-refresh-content] .hero-drift .col + .col { display: none; }
  /* трек одинарний — хай їде трохи швидше, інакше на телефоні
     здається, що картинка застигла */
  [data-site-refresh-content] .hero-drift .track { animation-duration: 38s; }
  /* верхнє згасання під навбар на телефоні не потрібне —
     колаж і так починається нижче кнопок */
  [data-site-refresh-content] .hero--split2 .hero-right::after {
    background: linear-gradient(to bottom,
      var(--surface-base) 0, transparent 40px,
      transparent 70%, var(--surface-base) 100%);
  }
}

/* Trading Sessions у вузькій колонці
   ----------------------------------------------------------
   Віджет розрахований на 366 px. На 264 px чотири стовпчики
   перетворювалися на голки, а підписи ламалися на два рядки
   («New York») і збивали крапки з лінії. Тому в колажі —
   нижчий трек, ширші стовпчики й тісніший проміжок. */
[data-site-refresh-content] .hero-drift .session-bars-container { gap: 10px; }
[data-site-refresh-content] .hero-drift .session-bar-track { height: 104px; }
[data-site-refresh-content] .hero-drift .session-bar-fill { width: 76%; }
[data-site-refresh-content] .hero-drift .session-bar-label {
  gap: 4px; font-size: 11px;
  white-space: nowrap;
}
[data-site-refresh-content] .hero-drift .session-bar-dot { width: 6px; height: 6px; }
[data-site-refresh-content] .hero-drift .session-best { padding: 8px 10px; }
[data-site-refresh-content] .hero-drift .session-best-label { font-size: 10px; }