/* Final direction based on the annotated Open Caption screenshot. */

.responsive-stage {
  position:absolute;
  inset:0;
}

@media (min-width:1601px) {
  .scaled-desktop .responsive-stage {
    inset:auto;
    top:0;
    left:0;
    width:1536px;
    height:864px;
    transform:scale(var(--desktop-stage-scale,1));
    transform-origin:top left;
  }

  .scaled-desktop .hero-offer {
    margin-left:var(--desktop-visual-shift,0px);
  }

  .scaled-desktop .offer-field {
    transform:none;
  }

  /*
   * Keep every cloud on its original vertical track while progressively
   * spreading the secondary field into the extra width of wide screens.
   */
  .scaled-desktop.final-target .offer.slot-1 {
    left:calc(39% + var(--desktop-cloud-spread-20,0px));
  }
  .scaled-desktop.final-target .offer.slot-2 {
    left:28%;
  }
  .scaled-desktop.final-target .offer.slot-3 {
    left:calc(65% + var(--desktop-cloud-spread-70,0px));
  }
  .scaled-desktop.final-target .offer.slot-4 {
    left:calc(38% + var(--desktop-cloud-spread-18,0px));
  }
  .scaled-desktop.final-target .offer.slot-5 {
    left:calc(50% + var(--desktop-cloud-spread-45,0px));
  }
  .scaled-desktop.final-target .offer.slot-6 {
    left:calc(66% + var(--desktop-cloud-spread-72,0px));
  }
  .scaled-desktop.final-target .offer.slot-7 {
    left:calc(79% + var(--desktop-cloud-spread-100,0px));
  }
  .scaled-desktop.final-target .offer.slot-8 {
    right:calc(0px - var(--desktop-cloud-spread-100,0px));
  }
}

@media (min-width:901px) {
  /* Larger main-partner button below the copy. */
  .final-target .focus-card {
    top:clamp(550px,69vh,596px);
    width:clamp(500px,34vw,535px);
    height:140px;
    min-height:140px;
    grid-template-columns:126px 1fr 160px;
    gap:14px;
    padding:15px;
    border-radius:23px;
  }

  .final-target .focus-logo {
    width:126px;
    height:96px;
    padding:12px 10px;
    border-radius:16px;
  }

  .final-target .focus-logo img {
    width:108px;
    max-height:48px;
  }

  .final-target .focus-copy small { font-size:9px; }
  .final-target .focus-copy b { font-size:22px; }
  .final-target .focus-copy i { margin-top:7px;font-size:10px; }

  .final-target .focus-card > .focus-action {
    min-height:110px;
    padding:8px 12px;
    font-size:18px;
    line-height:.92;
  }

  /*
   * The two lower-left V5 clouds are moved into the two free lower slots
   * marked on the screenshot. Every other cloud keeps its V5 coordinate.
   */
  .final-target .offer.one {
    left:39%;
    top:235px;
    width:170px;
    height:158px;
    transform:rotate(-6deg);
  }

  .final-target .offer.apex {
    left:65%;
    top:235px;
  }
}

@media (min-width:901px) and (max-height:800px) {
  .final-target .offer-field {
    top:calc(100vh - 453px);
  }

  .final-target .focus-card {
    top:auto;
    bottom:78px;
  }

  .scaled-desktop.final-target .offer-field {
    top:372px;
  }

  .scaled-desktop.final-target .focus-card {
    top:596px;
    bottom:auto;
  }
}

@media (max-width:900px) {
  /* Keep the headline high, above the open palm. */
  .clarified.mobile-3.final-target .copy {
    inset:0;
    top:0;
    left:0;
    right:0;
    width:auto;
    padding:0;
    pointer-events:none;
  }

  .final-target .copy :is(h1,.h1) {
    position:absolute;
    left:15px;
    top:76px;
    width:150px;
    max-width:150px;
    margin:0;
    font-size:23px;
    line-height:.9;
  }

  .final-target .copy :is(h1,.h1) strong { margin-top:3px; }

  .final-target .copy :is(h1,.h1) em {
    color:#d8ba6d;
    opacity:1;
    background:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    -webkit-text-fill-color:#d8ba6d;
    filter:none;
  }

  /* Seasonal label and the current-offer copy become a second block lower down. */
  .final-target .eyebrow {
    position:absolute;
    left:15px;
    top:322px;
    width:210px;
    margin:0;
    font-size:7px;
  }

  .clarified.mobile-3.final-target .lead {
    position:absolute;
    left:15px;
    top:346px;
    width:284px;
    max-width:284px;
    margin:0;
    font-size:10.2px;
    line-height:1.38;
  }

  /* Bonus fan starts only below the seasonal text. */
  .final-target .hero-offer {
    left:50% !important;
    top:63.5% !important;
    width:178px !important;
    height:172px !important;
  }

  .final-target .offer.one {
    left:-8% !important;
    right:auto !important;
    top:56% !important;
  }
  .final-target .offer.apex {
    left:7% !important;
    right:auto !important;
    top:53% !important;
  }
  .final-target .offer.norm {
    left:4% !important;
    right:auto !important;
    top:61% !important;
  }
  .final-target .offer.riobet {
    left:auto !important;
    right:4% !important;
    top:61% !important;
  }
  .final-target .offer.mad {
    left:auto !important;
    right:7% !important;
    top:53% !important;
  }
  .final-target .offer.seven {
    left:auto !important;
    right:-8% !important;
    top:56% !important;
  }

  /* Larger main-partner button at the bottom. */
  .final-target .focus-card {
    left:10px;
    right:10px;
    bottom:88px;
    width:auto;
    height:96px;
    min-height:96px;
    grid-template-columns:112px 1fr 122px;
    gap:9px;
    padding:10px;
    border-radius:16px;
  }

  .final-target .focus-logo {
    width:116px;
    height:60px;
    padding:8px 10px;
    border-radius:12px;
  }

  .final-target .focus-logo img {
    width:98px;
    max-height:39px;
  }

  .final-target .focus-copy small { font-size:7px; }
  .final-target .focus-copy b { font-size:15px; }
  .final-target .focus-copy i { margin-top:4px;font-size:7px; }

  .final-target .focus-card > .focus-action {
    min-height:66px;
    padding:6px 8px;
    font-size:14px;
    line-height:.94;
  }
}

.final-target .focus-card > .focus-action span {
  display:block;
}

.final-target .focus-card > .focus-action {
  transform-origin:center;
  animation:focus-action-pulse 1.55s ease-in-out infinite;
}

@keyframes focus-action-pulse {
  0%,100% {
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,225,145,0),0 8px 22px rgba(0,0,0,.16);
  }
  48% {
    transform:scale(1.065);
    box-shadow:0 0 0 9px rgba(255,225,145,.1),0 12px 32px rgba(247,164,193,.34);
  }
}

/* Ninth partner keeps the full desktop set at the configured maximum. */
@media (min-width:901px) {
  /*
   * Desktop positions are slot-based, not brand-based. Admin sorting and
   * smaller partner sets therefore keep the same balanced composition.
   */
  .final-target .offer.slot-1 {
    left:39%;
    top:235px;
    width:clamp(158px,12.6vw,194px);
    height:clamp(146px,11.7vw,180px);
    transform:rotate(-6deg);
  }
  .final-target .offer.slot-2 {
    left:28%;
    top:112px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(4deg);
  }
  .final-target .offer.slot-3 {
    left:65%;
    top:235px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:none;
  }
  .final-target .offer.slot-4 {
    left:38%;
    top:42px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(-3deg);
  }
  .final-target .offer.slot-5 {
    left:50%;
    top:182px;
    width:clamp(158px,12.6vw,194px);
    height:clamp(146px,11.7vw,180px);
    transform:none;
  }
  .final-target .offer.slot-6 {
    left:66%;
    top:64px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(3deg);
  }
  .final-target .offer.slot-7 {
    left:79%;
    top:183px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:none;
  }
  .final-target .offer.slot-8 {
    left:auto;
    right:0;
    top:57px;
    width:clamp(158px,12.6vw,194px);
    height:clamp(146px,11.7vw,180px);
    transform:rotate(6deg);
  }

  .final-target .offer.joy:not([class*="slot-"]) {
    left:28%;
    top:112px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(4deg);
  }

  .dynamic-partners .partner-cloud.is-current-partner {
    filter:saturate(1.12) brightness(1.07);
  }

  /*
   * Every desktop cloud has its own orbit, duration and phase. The stage
   * therefore breathes as separate objects instead of moving as one layer.
   */
  .final-target .offer[class*="slot-"] {
    animation-name:independent-cloud-drift;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    animation-direction:alternate;
  }
  .final-target .offer.slot-1 {
    --drift-mid-x:9px;--drift-mid-y:-8px;--drift-end-x:-5px;--drift-end-y:-14px;
    animation-duration:6.4s;animation-delay:-1.1s;
  }
  .final-target .offer.slot-2 {
    --drift-mid-x:-11px;--drift-mid-y:5px;--drift-end-x:6px;--drift-end-y:-9px;
    animation-duration:7.15s;animation-delay:-3.6s;
  }
  .final-target .offer.slot-3 {
    --drift-mid-x:5px;--drift-mid-y:11px;--drift-end-x:13px;--drift-end-y:-4px;
    animation-duration:5.75s;animation-delay:-2.2s;
  }
  .final-target .offer.slot-4 {
    --drift-mid-x:-7px;--drift-mid-y:-12px;--drift-end-x:-14px;--drift-end-y:3px;
    animation-duration:6.85s;animation-delay:-4.4s;
  }
  .final-target .offer.slot-5 {
    --drift-mid-x:13px;--drift-mid-y:3px;--drift-end-x:4px;--drift-end-y:-12px;
    animation-duration:7.6s;animation-delay:-.7s;
  }
  .final-target .offer.slot-6 {
    --drift-mid-x:-5px;--drift-mid-y:12px;--drift-end-x:10px;--drift-end-y:6px;
    animation-duration:5.95s;animation-delay:-3.1s;
  }
  .final-target .offer.slot-7 {
    --drift-mid-x:8px;--drift-mid-y:-13px;--drift-end-x:-10px;--drift-end-y:-6px;
    animation-duration:7.35s;animation-delay:-5.2s;
  }
  .final-target .offer.slot-8 {
    --drift-mid-x:-13px;--drift-mid-y:-4px;--drift-end-x:-3px;--drift-end-y:11px;
    animation-duration:6.15s;animation-delay:-2.8s;
  }
}

@keyframes independent-cloud-drift {
  0% { translate:0 0; }
  43% { translate:var(--drift-mid-x) var(--drift-mid-y); }
  100% { translate:var(--drift-end-x) var(--drift-end-y); }
}

.cloud-kicker,
.cloud-action {
  display:none;
}

@media (prefers-reduced-motion:reduce) {
  .final-target .focus-card > .focus-action,
  .final-target .offer[class*="slot-"] {
    animation:none !important;
  }
}

/*
 * Mobile momentum coverflow.
 * Every cloud uses the same coordinate system; JavaScript only supplies
 * the continuously changing x/y/scale values.
 */
@media (max-width:900px) {
  .mobile-carousel-ready .offer-field {
    inset:0 !important;
    width:auto !important;
    z-index:auto !important;
    overflow:visible;
  }

  .mobile-carousel-ready .partner-cloud,
  .mobile-carousel-ready .hero-offer,
  .mobile-carousel-ready .offer,
  .mobile-carousel-ready .offer.one,
  .mobile-carousel-ready .offer.apex,
  .mobile-carousel-ready .offer.norm,
  .mobile-carousel-ready .offer.riobet,
  .mobile-carousel-ready .offer.mad,
  .mobile-carousel-ready .offer.seven,
  .mobile-carousel-ready .offer.spinto,
  .mobile-carousel-ready .offer.joy {
    display:flex !important;
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    top:63.5% !important;
    width:178px !important;
    height:172px !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:52% 48% 55% 45% / 46% 57% 43% 54% !important;
    opacity:var(--carousel-opacity,1) !important;
    translate:none !important;
    scale:none !important;
    transform:
      translate3d(
        calc(-50% + var(--carousel-x,0px)),
        calc(-50% + var(--carousel-y,0px)),
        0
      )
      scale(var(--carousel-scale,1)) !important;
    transform-origin:center;
    z-index:var(--carousel-z,50) !important;
    animation:none !important;
    transition:
      transform .28s cubic-bezier(.2,.75,.25,1),
      opacity .2s ease,
      filter .2s ease !important;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    will-change:transform;
  }

  .mobile-carousel-ready.carousel-dragging .partner-cloud {
    transition:none !important;
    cursor:grabbing;
  }

  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) .hero-kicker,
  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) .cloud-kicker,
  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) .cloud-action,
  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) > .hero-action {
    display:none !important;
  }

  .mobile-carousel-ready .partner-cloud.is-carousel-main .hero-kicker,
  .mobile-carousel-ready .partner-cloud.is-carousel-main .cloud-kicker {
    display:block;
    margin:0 0 8px;
    color:rgba(255,255,255,.72);
    font-size:7px;
    font-weight:900;
    letter-spacing:.15em;
  }

  .mobile-carousel-ready .partner-cloud.is-carousel-main .cloud-action {
    display:block;
    margin-top:9px;
    padding:8px 15px;
    border-radius:999px;
    color:#2b161b;
    background:linear-gradient(90deg,#fff0a4,#f8b5c9);
    font-size:6px;
    font-weight:950;
  }

  .mobile-carousel-ready .partner-cloud.is-carousel-main > .hero-action {
    display:block !important;
    margin-top:9px;
  }

  .mobile-carousel-ready .partner-cloud .logo-plate,
  .mobile-carousel-ready .hero-offer .logo-plate,
  .mobile-carousel-ready .offer .logo-plate {
    width:96px;
    min-width:96px;
    height:39px;
    min-height:39px;
    padding:5px 8px;
    border-radius:12px;
  }

  .mobile-carousel-ready .partner-cloud .logo-plate img,
  .mobile-carousel-ready .hero-offer .logo-plate img,
  .mobile-carousel-ready .offer .logo-plate img {
    width:82px;
    max-width:82px;
    height:27px;
  }

  .mobile-carousel-ready .partner-cloud strong,
  .mobile-carousel-ready .partner-cloud b {
    margin-top:7px;
    font-size:22px;
  }

  .mobile-carousel-ready .partner-cloud small {
    margin-top:3px;
    font-size:7px;
  }

  .mobile-carousel-ready .partner-cloud.is-current-partner {
    filter:saturate(1.09) brightness(1.05);
  }
}

/*
 * Раскладка облачков на любое число площадок (десктоп).
 *
 * Правила выше расставляют карточки по слотам slot-1…slot-8 и по именам
 * брендов: они задают не только left/top, но и размер, поворот и right.
 * Пока площадок было восемь, этого хватало. Теперь их пятнадцать, и
 * девятая карточка получала размер «по умолчанию», а восьмая — right:0 и
 * уезжала за край экрана.
 *
 * Поэтому на десктопе позицию, размер и центровку задаёт один блок:
 * координаты приходят из PHP в --x/--y (raскладка рядами в нижней половине
 * экрана), наклон — в --tilt. Карточка центрируется по своей точке, так что
 * поля по краям считаются от центра и за экран ничего не выносит.
 * Мобильная карусель живёт в блоке max-width:900px и этих правил не видит.
 */
@media (min-width:901px) {
  /* Зона раскладки: правый нижний прямоугольник, свободный от заголовка,
     главного предложения и карточки выбранного партнёра. */
  /*
   * Верх поля считается ДОЛЕЙ ВЫСОТЫ СЦЕНЫ, а не от 100vh.
   *
   * ЧТО БЫЛО. Стояло top:max(340px, 100vh - 528px). На широких экранах
   * (min-width:1601px) сцена .responsive-stage перестаёт быть на весь экран:
   * она получает фиксированные 1536×864 и масштабируется transform:scale().
   * Единица vh при этом продолжает мерить ОКНО. На мониторе 1080 точек
   * получалось top:552px внутри восьмисотсорокачетырёхпиксельной сцены —
   * поле оставалось высотой 250px, все четыре ряда облачков складывались в
   * стопки и наезжали на бегущую строку.
   *
   * КАК СТАЛО. Проценты меряют родителя, поэтому 42% одинаково верны и для
   * сцены во весь экран, и для масштабируемой. Нижняя граница в пикселях
   * оставлена, чтобы на низких экранах поле не заезжало под главный круг.
   */
  body .offer-field {
    left:max(43%, 590px) !important;
    right:1.5% !important;
    top:max(336px, 42%) !important;
    bottom:62px !important;
    width:auto !important;
    display:block !important;
  }
  body .offer-field > a.offer.partner-cloud {
    display:flex !important;
    position:absolute !important;
    left:var(--x) !important;
    top:var(--y) !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    width:var(--cloud-size,clamp(84px,7vw,120px)) !important;
    height:calc(var(--cloud-size,clamp(84px,7vw,120px)) * .94) !important;
    transform:translate(-50%,-50%) rotate(var(--tilt,0deg)) !important;
    opacity:1 !important;
    animation:none !important;
  }
  /* Плашка логотипа тоже считается от размера круга: на ноутбучных 1366
     точках карточка ужимается до 84 px, а плашка сохраняла свои 98 и
     торчала за края. */
  body .offer-field > a.offer.partner-cloud > .logo-plate {
    max-width:82% !important;
    min-width:0 !important;
    padding:4px 6px !important;
  }
  body .offer-field > a.offer.partner-cloud > .logo-plate img {
    max-width:100% !important;
    height:auto !important;
    max-height:clamp(18px,1.9vw,32px) !important;
  }

  /* Длинная подпись («до 300.000 ₽ + 500 FS») переносится внутри круга, а
     не вылезает за его край: ширина ограничена, перенос разрешён в любом
     месте, кегль на четверть мельче прежнего. */
  body .offer-field > a.offer.partner-cloud > b {
    max-width:84% !important;
    line-height:1.06;
    text-align:center;
    overflow-wrap:anywhere;
    font-size:clamp(11px,.95vw,17px) !important;
  }
  body .offer-field > a.offer.partner-cloud > small {
    max-width:84% !important;
    line-height:1.05;
    text-align:center;
    overflow-wrap:anywhere;
  }
  body .offer-field > a.offer.partner-cloud:hover,
  body .offer-field > a.offer.partner-cloud:focus-visible,
  body .offer-field > a.offer.partner-cloud.is-active {
    transform:translate(-50%,-50%) rotate(var(--tilt,0deg)) scale(1.08) !important;
    z-index:40;
  }
}

/* На невысоких экранах (ноутбучные 768 точек) карточка ужимается: рядов
   столько же, но между ними остаётся воздух. Действует только там, где
   браузер не умеет контейнерные единицы, — см. лесенку ниже. */
@media (min-width:901px) and (max-height:840px) {
  body .offer-field { --cloud-size:clamp(74px,5.9vw,102px); }
}

/*
 * ЛЕСЕНКА (7 октября). Облака снова идут ступенями — зигзагом, как было
 * задумано в первой версии витрины (top 42 / 182 / 64 / 183 px в
 * showcase-clouds-2.css), — и заметно крупнее прежних 84–120 px.
 *
 * Поле становится контейнером, поэтому размеры считаются от НЕГО, а не от
 * окна: 100cqw — ширина поля, 100cqh — высота. Это верно и для сцены во
 * весь экран, и для масштабируемой сцены 1536×864 на широких мониторах.
 *
 * --rw  число ступеней: 2 (зигзаг вверх-вниз) или 3 (лестница). Приходит
 *       из PHP (больше десяти облаков — три), на узком десктопе всегда 3.
 * --lv  ступень облака 0…1, --xf — место по горизонтали 0…1 (из PHP).
 * --w   размер: обычный (--cloud-max), но
 *         • не шире доли поля, при которой облако не наезжает на соседа по
 *           СВОЕЙ ступени (--s2 / --s3 из PHP);
 *         • не выше, чем позволяет высота поля при размахе ступеней.
 * --amp размах ступеней — 0.42 высоты облака при двух ступенях: соседние
 *       облака заходят друг за друга краем, и ряд читается лесенкой, а не
 *       двумя строками; при трёх — 0.95, чтобы слои не слипались.
 *
 * Браузеры без контейнерных единиц (Chrome до 105, Safari до 16) остаются
 * на прежней раскладке рядами — правила выше.
 */
@supports (width:1cqw) {
  @media (min-width:901px) {
    body .offer-field {
      container-type:size;
      --cloud-max:clamp(124px, 11.5vw, 210px);
    }
    body .offer-field > a.offer.partner-cloud {
      --lv:calc(var(--l2,0) * (3 - var(--rw,2)) + var(--l3,0) * (var(--rw,2) - 2));
      --share:calc(var(--s2,.2) * (3 - var(--rw,2)) + var(--s3,.25) * (var(--rw,2) - 2));
      /* Размах: при двух ступенях облака заходят друг за друга (0.42 h) —
         зигзаг; при трёх ступени разведены почти на целое облако (0.95 h),
         иначе три слоя ложатся друг на друга. Высота поля должна вместить
         облако и два размаха — отсюда делитель 1.84 / 2.9. */
      --ak:calc(.42 * (3 - var(--rw,2)) + .95 * (var(--rw,2) - 2));
      --hk:calc(1.84 * (3 - var(--rw,2)) + 2.9 * (var(--rw,2) - 2));
      --w:min(var(--cloud-max), calc(var(--share) * 100cqw), calc(100cqh / var(--hk) / .94));
      --h:calc(var(--w) * .94);
      --amp:calc(var(--h) * var(--ak));
      left:calc(var(--w) / 2 + var(--xf,.5) * (100cqw - var(--w))) !important;
      top:calc(50cqh + (var(--lv) - .5) * 2 * var(--amp)) !important;
      width:var(--w) !important;
      height:var(--h) !important;
    }
    /* Плашка логотипа и подпись растут вместе с облаком, а не стоят
       прежними 96 px и 9–13 px внутри круга вдвое больше. */
    body .offer-field > a.offer.partner-cloud > .logo-plate {
      width:62% !important;
      height:auto !important;
      aspect-ratio:2.3;
      max-width:62% !important;
    }
    body .offer-field > a.offer.partner-cloud > .logo-plate img {
      width:100% !important;
      max-height:none !important;
      height:100% !important;
      object-fit:contain;
    }
    body .offer-field > a.offer.partner-cloud > b {
      font-size:clamp(12px, 1.05vw, 19px) !important;
    }
  }
  @media (min-width:901px) and (max-height:840px) {
    body .offer-field { --cloud-max:clamp(112px, 10.5vw, 180px); }
  }
  /* Узкий десктоп: поле под облака около 420 px в ширину. Две ступени
     дали бы облака по 70 px, три — заметно крупнее. */
  @media (min-width:901px) and (max-width:1180px) {
    body .offer-field { --rw:3 !important; }
  }
  /* Широкие мониторы: сцена масштабируется целиком, vw мерил бы окно. */
  @media (min-width:1601px) {
    body.scaled-desktop .offer-field { --cloud-max:210px; }
  }
}