/**
 * srazuvvazu_anime.css — анимации фото+маски для /test/
 * Герой (.hit-prodaj-wrapper) и блок «24/7» (.social-block)
 *
 * ⚠️ ГЕРОЙ ЗАМОРОЖЕН (2026-07-17): НЕ МЕНЯТЬ без явного запроса —
 *    фото/crop, маска, высоты, keyframes, ::before слои героя.
 * ⚠️ ФОТО 24/7 ЗАМОРОЖЕНО (десктоп+мобилка crop) — не двигать/не масштабировать
 *    без явного запроса. См. .cursor/rules/srazuvvazu-freeze-hero-header.mdc
 *    Хедер тоже заморожен — тот же rule-файл.
 *
 * Запуск через JS в base.html:
 *   sv-hero-photo-ready  — после загрузки hero-изображения
 *   sv-social-photo-ready — при появлении .social-block в viewport
 */

body.page-test-srazuvvazu {
  --sv-anime-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sv-anime-delay: 0.15s;
  --sv-hero-photo-duration: 3.5s;
  --sv-social-photo-duration: 3.5s;
  --sv-social-photo-image: url("/static/srazu_v_vazu_new/images/24animation.png");

  /* Высоты блоков */
  --sv-social-block-h: 841px; /* Figma Subtract desktop */
  --sv-hero-h: 487px;
  --sv-hero-layer-height: calc(var(--sv-hero-h) + 8px);

  /* Герой — кроп и слой фото+маски */
  --sv-hero-photo-width: 56%;
  --sv-hero-photo-crop-top: 0.36;
  --sv-hero-photo-crop-bottom: 0.09;
  --sv-hero-photo-visible: 0.55;
  --sv-hero-photo-scale: 0.92;
  --sv-hero-photo-height: calc(var(--sv-hero-layer-height) / var(--sv-hero-photo-visible) * var(--sv-hero-photo-scale));
  --sv-hero-photo-drop: 60px;
  --sv-hero-photo-offset-y: calc(var(--sv-hero-h) - var(--sv-hero-photo-height) + var(--sv-hero-photo-drop));
  --sv-hero-blue-mask: url("/static/srazu_v_vazu_new/images/Subtract%20hero%20blue.png");
  --sv-hero-mask-offset: -93px;
  --sv-mask-photo-fill-x: 50%;

  /* Social — слой фото+маски (как у героя + запас по краям) */
  --sv-social-blue-mask: url("/static/srazu_v_vazu_new/images/Subtract%20hero%20blue.png");
  /* Левее, чем 0 — иначе вырез у правого края и фото почти не видно (герой: -120px) */
  --sv-social-mask-offset: -550px;
  --sv-social-mask-bleed-top: 2px;
  --sv-social-mask-bleed-bottom: 2px;
  --sv-social-layer-height: calc(
    var(--sv-social-block-h) + 8px + var(--sv-social-mask-bleed-top) + var(--sv-social-mask-bleed-bottom)
  );
}

/* ========== Высоты обёрток ========== */

body.page-test-srazuvvazu .hit-prodaj-wrapper.conditional-section_bg {
  min-height: var(--sv-hero-h);
  height: var(--sv-hero-h);
}

/* ========== Keyframes ========== */

@keyframes sv-hero-photo-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes sv-hero-mobile-slide-in {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ========== 1. Герой — десктоп: фото + маска, выезд справа ========== */

body.page-test-srazuvvazu .hit-prodaj-wrapper.conditional-section_bg::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #d6e5ff;
  background-image:
    var(--sv-hero-blue-mask),
    url("/static/srazu_v_vazu_new/images/srazu_v_vazu_hero.png");
  background-repeat: no-repeat, no-repeat;
  background-position: var(--sv-hero-mask-offset) center, var(--sv-mask-photo-fill-x) center;
  background-size: auto var(--sv-hero-layer-height), cover;
  transform: translateX(100%);
  animation: none;
  will-change: transform;
  pointer-events: none;
}

body.page-test-srazuvvazu.sv-hero-photo-ready .hit-prodaj-wrapper.conditional-section_bg::before {
  animation: sv-hero-photo-in var(--sv-hero-photo-duration) var(--sv-anime-easing) var(--sv-anime-delay) forwards;
}

/* Десктоп: размер 160% зафиксирован; фото прижато к правому краю */
@media (min-width: 768px) {
  body.page-test-srazuvvazu .hit-prodaj-wrapper.conditional-section_bg::before {
    background-position: var(--sv-hero-mask-offset) center, right 65%;
    background-size: auto var(--sv-hero-layer-height), auto 160%;
  }
}

/* ========== 2. Блок «24/7» — десктоп (как герой: маска + фото на одном ::before) ========== */

@media (min-width: 768px) {
  body.page-test-srazuvvazu .social-block.conditional-section {
    min-height: var(--sv-social-block-h);
    height: var(--sv-social-block-h);
  }

  body.page-test-srazuvvazu .social-block .container {
    min-height: var(--sv-social-block-h);
    height: var(--sv-social-block-h);
  }

  body.page-test-srazuvvazu .social-block.conditional-section::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #d6e5ff;
    background-image:
      var(--sv-social-blue-mask),
      var(--sv-social-photo-image);
    background-repeat: no-repeat, no-repeat;
    background-position: var(--sv-social-mask-offset) center, calc(100% + 10px) 2px;
    background-size: auto var(--sv-social-layer-height), auto 165%;
    transform: translateX(100%);
    will-change: transform;
    animation: none;
    pointer-events: none;
  }

  body.page-test-srazuvvazu.sv-social-photo-ready .social-block.conditional-section::before {
    animation: sv-hero-photo-in var(--sv-social-photo-duration) var(--sv-anime-easing) var(--sv-anime-delay) forwards;
  }
}

/* ========== 3. Герой — мобилка: наезд снизу ========== */

@media (max-width: 767px) {
  body.page-test-srazuvvazu .hit-prodaj-wrapper.conditional-section_bg {
    --sv-hero-h: 520px;
    --sv-hero-mobile-split-y: 210px;
    --sv-hero-mobile-notch-r: clamp(50px, 14.74vw, 57.5px);
    --sv-hero-mobile-notch-drop: 8px;
    min-height: 520px;
    height: 520px;
  }

  body.page-test-srazuvvazu .hit-prodaj-wrapper.conditional-section_bg::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    /* Не navy: иначе при поздней загрузке фото мелькает «чёрный» слой */
    background-color: #d6e5ff;
    background-image:
      radial-gradient(
        circle var(--sv-hero-mobile-notch-r) at 50% calc(100% + var(--sv-hero-mobile-notch-drop)),
        transparent calc(var(--sv-hero-mobile-notch-r) - 0.5px),
        #d6e5ff var(--sv-hero-mobile-notch-r)
      ),
      url("/static/srazu_v_vazu_new/images/srazu_v_vazu_hero.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center calc(100% + 142px);
    background-size: 100% var(--sv-hero-mobile-split-y), cover;
    transform: translate3d(0, 100%, 0);
    opacity: 1;
    animation: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    pointer-events: none;
  }

  body.page-test-srazuvvazu.sv-hero-photo-ready .hit-prodaj-wrapper.conditional-section_bg::before {
    animation: sv-hero-mobile-slide-in var(--sv-hero-photo-duration) var(--sv-anime-easing) var(--sv-anime-delay) forwards;
  }

  /* Social — мобилка: Frame 231 Figma — 731px, фото снизу ~44% */
  /* Не использовать navy как fallback под фото — только #d6e5ff */
  body.page-test-srazuvvazu {
    --sv-social-mobile-h: 731px;
    --sv-social-mobile-split-y: 402px;
  }

  body.page-test-srazuvvazu .social-block.conditional-section {
    --sv-social-mobile-notch-r: clamp(50px, 14.74vw, 57.5px);
    --sv-social-mobile-notch-drop: 8px;
    min-height: var(--sv-social-mobile-h);
    height: var(--sv-social-mobile-h);
  }

  body.page-test-srazuvvazu .social-block .container {
    position: relative;
    z-index: 10;
    min-height: var(--sv-social-mobile-h);
    height: var(--sv-social-mobile-h);
    box-sizing: border-box;
  }

  body.page-test-srazuvvazu .social-block.conditional-section::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    background-color: #d6e5ff;
    background-image:
      radial-gradient(
        circle var(--sv-social-mobile-notch-r) at 50% calc(100% + var(--sv-social-mobile-notch-drop)),
        transparent calc(var(--sv-social-mobile-notch-r) - 0.5px),
        #d6e5ff var(--sv-social-mobile-notch-r)
      ),
      var(--sv-social-photo-image);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center 160px;
    background-size: 100% var(--sv-social-mobile-split-y), cover;
    transform: translate3d(0, 100%, 0);
    opacity: 1;
    animation: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    pointer-events: none;
  }

  body.page-test-srazuvvazu.sv-social-photo-ready .social-block.conditional-section::before {
    animation: sv-hero-mobile-slide-in var(--sv-social-photo-duration) var(--sv-anime-easing) var(--sv-anime-delay) forwards;
  }
}

/* ========== prefers-reduced-motion ========== */

@media (prefers-reduced-motion: reduce) {
  body.page-test-srazuvvazu .hit-prodaj-wrapper.conditional-section_bg::before,
  body.page-test-srazuvvazu.sv-social-photo-ready .social-block.conditional-section::before {
    animation: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  body.page-test-srazuvvazu .hit-prodaj-wrapper.conditional-section_bg::before,
  body.page-test-srazuvvazu .social-block.conditional-section::before {
    opacity: 1;
  }
}