@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+Expanded:wght@200;400;500;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=block');

/* =====================================
   GLOBAL HEADER / uc-site-header
   Safe base: closed state first
   ===================================== */

/* Header stays transparent over hero */
.uc-site-header .t450,
.uc-site-header .t228,
.uc-site-header .t456 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Main header height */
.uc-site-header .t450__maincontainer,
.uc-site-header .t228__maincontainer,
.uc-site-header .t456__maincontainer {
  min-height: 84px !important;
  display: flex !important;
  align-items: center !important;
}

/* Desktop menu typography */
.uc-site-header .t-menu__link-item,
.uc-site-header .t450__menu__content a,
.uc-site-header .t228__list_item a {
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
}

/* Desktop socials: make icons bigger, keep them in normal flow */
.uc-site-header .t-sociallinks,
.uc-site-header .t450__right_social_links,
.uc-site-header .t228__right_social_links {
  position: static !important;
}

.uc-site-header .t-sociallinks__item {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.uc-site-header .t-sociallinks__item svg,
.uc-site-header .t-sociallinks__item img,
.uc-site-header .t-sociallinks__svg {
  width: 20px !important;
  height: 20px !important;
}

/* Burger button size */
.uc-site-header .t-menuburger,
.uc-site-header .t-menu-burger {
  width: 42px !important;
  height: 42px !important;
}

/* Burger lines visible on dark background */
.uc-site-header .t-menuburger__line,
.uc-site-header .t-menu-burger__line {
  background-color: #ffffff !important;
}

#rec2010372483 .t-text,
#rec2010372483 .tn-atom {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  box-sizing: border-box !important;
}

/* tablet: text width = image width */
@media screen and (min-width: 641px) and (max-width: 980px) {
  #rec2010372483 .t-text,
  #rec2010372483 .tn-atom {
    max-width: 560px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

#rec2015253973 .t-text,
#rec2015253973 .tn-atom {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  box-sizing: border-box !important;
}

/* tablet: text width = image width */
@media screen and (min-width: 641px) and (max-width: 980px) {
  #rec2015253973 .t-text,
  #rec2015253973 .tn-atom {
    max-width: 560px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =====================================
   TABLET + MOBILE
   ===================================== */
@media (max-width: 980px) {
  /* Slightly smaller header on mobile */
  .uc-site-header .t450__maincontainer,
  .uc-site-header .t228__maincontainer,
  .uc-site-header .t456__maincontainer {
    min-height: 72px !important;
  }

  /* Keep logo visible */
  .uc-site-header .t450__logo,
  .uc-site-header .t228__logo,
  .uc-site-header .t-menu__logo {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  /* Keep burger visible above content */
  .uc-site-header .t-menuburger,
  .uc-site-header .t-menu-burger {
    position: relative !important;
    z-index: 10001 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide desktop socials in closed mobile header */
  .uc-site-header .t-sociallinks,
  .uc-site-header .t450__right_social_links,
  .uc-site-header .t228__right_social_links {
    display: none !important;
  }

  /* Slightly larger mobile links if visible in native menu */
  .uc-site-header .t450__menu a,
  .uc-site-header .t228__mobilelist_item a,
  .uc-site-header .tmenu-mobile__list-item a {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  /* Center menu items */
  .uc-site-header .t450__menu,
  .uc-site-header .t228__mobilelist,
  .uc-site-header .tmenu-mobile__list {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  /* Mobile menu links bigger */
  .uc-site-header .t450__menu a,
  .uc-site-header .t228__mobilelist_item a,
  .uc-site-header .tmenu-mobile__list-item a {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* Socials pinned near bottom */
  .uc-site-header .t-sociallinks,
  .uc-site-header .t450__right_social_links,
  .uc-site-header .t228__right_social_links {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 28px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
  }
}

/* =========================================
   PROJECT GALLERIES
   Only for:
   - uc-project-4
   - uc-project-gallery-2
   ========================================= */

:root {
  --project-gallery-mobile-side-padding: 16px;
  --project-gallery-tablet-side-padding: 40px;
  --project-gallery-mobile-gap: 40px;
  --project-gallery-block-gap: 40px;
}

/* =========================================
   GL12 / 4-photo gallery
   class: uc-project-4
   Mobile: stack into 1 column
   ========================================= */
@media screen and (max-width: 640px) {
  #allrecords .uc-project-4 {
    overflow: hidden !important;
  }

  #allrecords .uc-project-4 .t667__container {
    padding-left: var(--project-gallery-mobile-side-padding) !important;
    padding-right: var(--project-gallery-mobile-side-padding) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #allrecords .uc-project-4 .t667__row,
  #allrecords .uc-project-4 .t667__row_indent-40px {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #allrecords .uc-project-4 .t667__tile,
  #allrecords .uc-project-4 .t667__tile_left,
  #allrecords .uc-project-4 .t667__tile_right {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 var(--project-gallery-mobile-gap) 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #allrecords .uc-project-4 .t667__tile:last-child,
  #allrecords .uc-project-4 .t667__tile_left:last-child,
  #allrecords .uc-project-4 .t667__tile_right:last-child {
    margin-bottom: 0 !important;
  }

  #allrecords .uc-project-4 .t667__bgimg,
  #allrecords .uc-project-4 .t-bgimg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* =========================================
   PROJECT GALLERIES
   Real mapping from inspect:
   - uc-project-4 = T603
   - uc-project-gallery-2 = T667
   ========================================= */

:root {
  --project-gallery-mobile-side-padding: 16px;
  --project-gallery-tablet-side-padding: 40px;
  --project-gallery-gap-mobile: 40px;
}

/* =========================================
   4-photo gallery
   class: uc-project-4
   real block: T603
   mobile only: 1 photo per row
   ========================================= */
@media screen and (max-width: 640px) {
  #allrecords .t-rec.uc-project-4[data-record-type="603"] {
    overflow: hidden !important;
  }

  #allrecords .t-rec.uc-project-4[data-record-type="603"] .t603__container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--project-gallery-mobile-side-padding) !important;
    padding-right: var(--project-gallery-mobile-side-padding) !important;
    box-sizing: border-box !important;
  }

  #allrecords .t-rec.uc-project-4[data-record-type="603"] .t603__tile,
  #allrecords .t-rec.uc-project-4[data-record-type="603"] .t603__tile_50,
  #allrecords .t-rec.uc-project-4[data-record-type="603"] [class*="t603__tile"] {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 var(--project-gallery-gap-mobile) 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
  }

  #allrecords .t-rec.uc-project-4[data-record-type="603"] .t603__tile:last-child,
  #allrecords .t-rec.uc-project-4[data-record-type="603"] .t603__tile_50:last-child,
  #allrecords .t-rec.uc-project-4[data-record-type="603"] [class*="t603__tile"]:last-child {
    margin-bottom: 0 !important;
  }

  #allrecords .t-rec.uc-project-4[data-record-type="603"] .t603__blockimg,
  #allrecords .t-rec.uc-project-4[data-record-type="603"] .t-bgimg,
  #allrecords .t-rec.uc-project-4[data-record-type="603"] img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* =========================================
   2-photo gallery
   class: uc-project-gallery-2
   real block: T667
   tablet + mobile: 1 photo per row
   ========================================= */
@media screen and (max-width: 980px) {
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] {
    overflow: hidden !important;
  }

  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: var(--project-gallery-tablet-side-padding) !important;
    padding-right: var(--project-gallery-tablet-side-padding) !important;
  }

  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__row,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__row_indent-40px,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__tile,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__tile_left,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__tile_right {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 var(--project-gallery-gap-mobile) 0 !important;
    box-sizing: border-box !important;
  }

  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__tile:last-child,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__tile_left:last-child,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__tile_right:last-child {
    margin-bottom: 0 !important;
  }

  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__bgimg,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t-bgimg,
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 640px) {
  #allrecords .t-rec.uc-project-gallery-2[data-record-type="667"] .t667__container {
    padding-left: var(--project-gallery-mobile-side-padding) !important;
    padding-right: var(--project-gallery-mobile-side-padding) !important;
  }
}  
/* =========================================================
   HERO TEXT / CR02 / custom class: uc-herotext
   ---------------------------------------------------------
   Этот CSS работает ТОЛЬКО для hero-блока с классом:
   uc-herotext

   Он НЕ должен ломать header, галереи и другие блоки.

   Важно:
   - Animation Title = None в Tilda
   - Animation Description = None в Tilda
   - Reset text styles ты уже сделал
   ========================================================= */


/* =========================================================
   [A] DESKTOP SETTINGS
   ---------------------------------------------------------
   ГЛАВНЫЙ БЛОК РУЧНОЙ НАСТРОЙКИ.
   ЕСЛИ ТЕБЕ НУЖНО ЧТО-ТО ПОМЕНЯТЬ — СМОТРИ СНАЧАЛА СЮДА.

   Что тут меняется:
   1. Шрифт TITLE
   2. Шрифт DECOR
   3. Размер TITLE
   4. Размер DECOR
   5. Line-height TITLE / DECOR
   6. Letter-spacing TITLE / DECOR
   7. Цвет TITLE / DECOR
   8. Gap между TITLE и DECOR
   9. Ширина текстовых блоков
   10. Анимация: duration / delay / смещения / blur
   ========================================================= */
#allrecords .uc-herotext {
  /* =========================
     [A1] TITLE FONT FAMILY
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ ШРИФТ ЗАГОЛОВКА
     Примеры:
     "Cormorant Garamond", serif
     "Bodoni Moda", serif
     "Playfair Display", serif
     "Inter", sans-serif
     ========================= */
  --hero-title-font-family: "Zalando Sans Expanded", sans-serif;

  /* =========================
     [A2] TITLE SIZE
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ РАЗМЕР ЗАГОЛОВКА НА DESKTOP
     ========================= */
  --hero-title-font-size: 34px;

  /* [A3] TITLE LINE HEIGHT */
  --hero-title-line-height: 1.5;

  /* [A4] TITLE WEIGHT */
  --hero-title-font-weight: 200;

  /* =========================
     [A5] TITLE LETTER SPACING
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ МЕЖБУКВИЕ ЗАГОЛОВКА
     Примеры:
     0em
     0.04em
     0.08em
     1px
     ========================= */
  --hero-title-letter-spacing: 0.08em;

  /* [A6] TITLE TEXT TRANSFORM */
  --hero-title-text-transform: uppercase;

  /* [A7] TITLE COLOR */
  --hero-title-color: #BDBDBD;

  /* [A8] TITLE MAX WIDTH */
  --hero-title-max-width: 980px;
  


  /* =========================
     [A9] DECOR FONT FAMILY
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ ШРИФТ SUBTITLE / DECOR
     ========================= */
  --hero-decor-font-family: "Pinyon Script", cursive;

  /* =========================
     [A10] DECOR SIZE
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ РАЗМЕР SUBTITLE / DECOR НА DESKTOP
     ========================= */
  --hero-decor-font-size: 40px;

  /* [A11] DECOR LINE HEIGHT */
  --hero-decor-line-height: 1.5;

  /* [A12] DECOR WEIGHT */
  --hero-decor-font-weight: 400;

  /* =========================
     [A13] DECOR LETTER SPACING
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ МЕЖБУКВИЕ SUBTITLE / DECOR
     ========================= */
  --hero-decor-letter-spacing: 0.01em;

  /* [A14] DECOR TEXT TRANSFORM */
  --hero-decor-text-transform: none;

  /* [A15] DECOR COLOR */
  --hero-decor-color: #939393;

  /* [A16] DECOR MAX WIDTH */
  --hero-decor-max-width: 760px;


  /* =========================
     [A17] TEXT ALIGNMENT
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ ВЫРАВНИВАНИЕ
     Варианты:
     left / center / right
     ========================= */
  --hero-text-align: center;

  /* =========================
     [A18] SIDE PADDING
     -------------------------------------------------
     ВНУТРЕННИЙ ОТСТУП ТЕКСТА СЛЕВА/СПРАВА
     ========================= */
  --hero-side-padding: 24px;

  /* =========================
     [A19] GAP BETWEEN TITLE AND DECOR
     -------------------------------------------------
     МЕНЯТЬ ЗДЕСЬ РАССТОЯНИЕ МЕЖДУ
     ЗАГОЛОВКОМ И ПОДЗАГОЛОВКОМ НА DESKTOP
     ========================= */
  --hero-gap: 10px;


  /* =========================
     [A20] ANIMATION DURATION
     -------------------------------------------------
     ГЛАВНАЯ ДЛИТЕЛЬНОСТЬ АНИМАЦИИ
     Ты просил одинаковую на всех девайсах —
     поэтому меняется ОДИН РАЗ ЗДЕСЬ.
     Под видео 9 сек оставь 9s
     ========================= */
  --hero-loop-duration: 9s;

  /* =========================
     [A21] TITLE DELAY
     -------------------------------------------------
     Через сколько после старта цикла
     начинает появляться TITLE
     ========================= */
  --hero-title-delay: 0s;

  /* =========================
     [A22] DECOR DELAY
     -------------------------------------------------
     Через сколько после старта цикла
     начинает появляться DECOR
     Если subtitle должен появляться позже —
     увеличивай это значение
     Примеры: 0.3s / 0.5s / 0.8s / 1s
     ========================= */
  --hero-decor-delay: 0.35s;

  /* [A23] EASING */
  --hero-title-ease: linear;
  --hero-decor-ease: linear;


  /* =========================
     [A24] TITLE START / END MOTION
     -------------------------------------------------
     Это ручки движения TITLE.
     Обычно их часто не трогают,
     но если надо — можно.
     ========================= */
  --hero-title-start-y: 18px;
  --hero-title-end-y: -8px;
  --hero-title-start-scale: 0.94;
  --hero-title-end-scale: 1.02;
  --hero-title-start-blur: 6px;
  --hero-title-end-blur: 3px;


  /* =========================
     [A25] DECOR START / END MOTION
     -------------------------------------------------
     Это ручки движения DECOR.
     ========================= */
  --hero-decor-start-y: 14px;
  --hero-decor-end-y: -6px;
  --hero-decor-start-blur: 4px;
  --hero-decor-end-blur: 2px;
}


/* =========================================================
   [B] TABLET SETTINGS
   ---------------------------------------------------------
   ТВОЙ BREAKPOINT: max-width 980px

   ЕСЛИ ХОЧЕШЬ МЕНЯТЬ TABLET:
   - размер TITLE
   - размер DECOR
   - gap
   - side padding
   - letter spacing
   меняй тут
   ========================================================= */
@media screen and (max-width: 980px) {
  #allrecords .uc-herotext {
    /* [B1] TITLE SIZE ON TABLET */
    --hero-title-font-size: 34px;

    /* [B2] TITLE LINE HEIGHT ON TABLET */
    --hero-title-line-height: 1.10;

    /* [B3] TITLE LETTER SPACING ON TABLET */
    --hero-title-letter-spacing: 0.07em;

    /* [B4] TITLE MAX WIDTH ON TABLET */
    --hero-title-max-width: 760px;


    /* [B5] DECOR SIZE ON TABLET */
    --hero-decor-font-size: 36px;

    /* [B6] DECOR LINE HEIGHT ON TABLET */
    --hero-decor-line-height: 1.35;

    /* [B7] DECOR LETTER SPACING ON TABLET */
    --hero-decor-letter-spacing: 0.04em;

    /* [B8] DECOR MAX WIDTH ON TABLET */
    --hero-decor-max-width: 620px;


    /* [B9] GAP BETWEEN TITLE AND DECOR ON TABLET */
    --hero-gap: 16px;

    /* [B10] SIDE PADDING ON TABLET */
    --hero-side-padding: 8px;
  }
}


/* =========================================================
   [C] MOBILE SETTINGS
   ---------------------------------------------------------
   ТВОЙ BREAKPOINT: max-width 640px

   ЕСЛИ ХОЧЕШЬ МЕНЯТЬ MOBILE:
   - размер TITLE
   - размер DECOR
   - gap
   - side padding
   - letter spacing
   меняй тут
   ========================================================= */
@media screen and (max-width: 640px) {
  #allrecords .uc-herotext {
    /* [C1] TITLE SIZE ON MOBILE */
    --hero-title-font-size: 17px;

    /* [C2] TITLE LINE HEIGHT ON MOBILE */
    --hero-title-line-height: 1.1;

    /* [C3] TITLE LETTER SPACING ON MOBILE */
    --hero-title-letter-spacing: 0.1em;

    /* [C4] TITLE MAX WIDTH ON MOBILE */
    --hero-title-max-width: 100%;


    /* [C5] DECOR SIZE ON MOBILE */
    --hero-decor-font-size: 22px;

    /* [C6] DECOR LINE HEIGHT ON MOBILE */
    --hero-decor-line-height: 1.38;

    /* [C7] DECOR LETTER SPACING ON MOBILE */
    --hero-decor-letter-spacing: 0.08em;

    /* [C8] DECOR MAX WIDTH ON MOBILE */
    --hero-decor-max-width: 100%;


    /* [C9] GAP BETWEEN TITLE AND DECOR ON MOBILE */
    --hero-gap: 13px;

    /* [C10] SIDE PADDING ON MOBILE */
    --hero-side-padding: 2px;
  }
}


/* =========================================================
   [D] STRUCTURE RESET
   ---------------------------------------------------------
   Убираем дефолтные отступы Tilda только внутри hero-блока
   ========================================================= */
#allrecords .uc-herotext .t102 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--hero-gap) !important;
  padding-left: var(--hero-side-padding) !important;
  padding-right: var(--hero-side-padding) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

#allrecords .uc-herotext .t-cover__wrapper,
#allrecords .uc-herotext .t-container,
#allrecords .uc-herotext .t-col {
  width: 100% !important;
  max-width: 100% !important;
}

#allrecords .uc-herotext .t102__title,
#allrecords .uc-herotext .t102__descr {
  margin: 0 auto !important;
  padding: 0 !important;
  width: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

#allrecords .uc-herotext .t102 .space {
  display: none !important;
}


/* =========================================================
   [E] TITLE STYLE
   ---------------------------------------------------------
   Стили TITLE.
   Обычно руками тут ничего менять не надо —
   все берется из блока [A], [B], [C]
   ========================================================= */
#allrecords .uc-herotext .t102__title {
  width: fit-content !important;
  max-width: min(calc(100% - (var(--hero-side-padding) * 2)), var(--hero-title-max-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: var(--hero-text-align) !important;
}

#allrecords .uc-herotext .t102__title,
#allrecords .uc-herotext .t102__title * {
  font-family: var(--hero-title-font-family) !important;
  font-size: var(--hero-title-font-size) !important;
  line-height: var(--hero-title-line-height) !important;
  font-weight: var(--hero-title-font-weight) !important;
  letter-spacing: var(--hero-title-letter-spacing) !important;
  text-transform: var(--hero-title-text-transform) !important;
  color: var(--hero-title-color) !important;
  text-align: var(--hero-text-align) !important;
}


/* =========================================================
   [F] DECOR STYLE
   ---------------------------------------------------------
   Стили DECOR / subtitle.
   Обычно руками тут ничего менять не надо —
   все берется из блока [A], [B], [C]
   ========================================================= */
#allrecords .uc-herotext .t102__descr {
  width: fit-content !important;
  max-width: min(calc(100% - (var(--hero-side-padding) * 2)), var(--hero-decor-max-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: var(--hero-text-align) !important;
}

#allrecords .uc-herotext .t102__descr,
#allrecords .uc-herotext .t102__descr * {
  font-family: var(--hero-decor-font-family) !important;
  font-size: var(--hero-decor-font-size) !important;
  line-height: var(--hero-decor-line-height) !important;
  font-weight: var(--hero-decor-font-weight) !important;
  letter-spacing: var(--hero-decor-letter-spacing) !important;
  text-transform: var(--hero-decor-text-transform) !important;
  color: var(--hero-decor-color) !important;
  text-align: var(--hero-text-align) !important;
}


/* =========================================================
   [G] ANIMATION BASE
   ---------------------------------------------------------
   Подготовка текстовых слоев к анимации
   ========================================================= */
#allrecords .uc-herotext .t102__title,
#allrecords .uc-herotext .t102__descr {
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
  transform: translateZ(0);
  opacity: 0;
}


/* =========================================================
   [H] TITLE ANIMATION
   ---------------------------------------------------------
   Анимация TITLE.
   Обычно менять ничего не надо.
   Если надо сдвинуть старт TITLE — меняй [A21]
   ========================================================= */
#allrecords .uc-herotext .t102__title {
  animation: heroTitleLoop var(--hero-loop-duration) var(--hero-title-ease) infinite both !important;
  animation-delay: var(--hero-title-delay) !important;
  transform-origin: 50% 50%;
}


/* =========================================================
   [I] DECOR ANIMATION
   ---------------------------------------------------------
   Анимация DECOR.
   Если subtitle должен стартовать позже —
   меняй [A22]
   ========================================================= */
#allrecords .uc-herotext .t102__descr {
  animation: heroDecorLoop var(--hero-loop-duration) var(--hero-decor-ease) infinite both !important;
  animation-delay: var(--hero-decor-delay) !important;
}


/* =========================================================
   [J] KEYFRAMES FOR TITLE
   ---------------------------------------------------------
   ЭТО ГЛАВНОЕ МЕСТО, ГДЕ МЕНЯЕТСЯ
   ХАРАКТЕР ПОЯВЛЕНИЯ/ИСЧЕЗНОВЕНИЯ TITLE

   КАК ЧИТАТЬ:
   - 0%   : полностью скрыт
   - 18%  : еще почти скрыт
   - 34%  : уже полностью появился
   - 72%  : еще видим
   - 86%  : уже начал уходить
   - 100% : полностью исчез

   МЕДЛЕННЕЕ:
   - меняй 34% на 40% или 45%

   ДОЛЬШЕ ДЕРЖАЛСЯ:
   - меняй 72% на 76% или 78%

   РАНЬШЕ ИСЧЕЗАЛ:
   - меняй 72% на 66% или 68%
   ========================================================= */
@keyframes heroTitleLoop {
  0% {
    opacity: 0;
    transform: translateY(var(--hero-title-start-y)) scale(var(--hero-title-start-scale));
    filter: blur(var(--hero-title-start-blur));
  }

  18% {
    opacity: 0;
    transform: translateY(var(--hero-title-start-y)) scale(var(--hero-title-start-scale));
    filter: blur(var(--hero-title-start-blur));
  }

  34% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  86% {
    opacity: 0;
    transform: translateY(var(--hero-title-end-y)) scale(var(--hero-title-end-scale));
    filter: blur(var(--hero-title-end-blur));
  }

  100% {
    opacity: 0;
    transform: translateY(var(--hero-title-end-y)) scale(var(--hero-title-end-scale));
    filter: blur(var(--hero-title-end-blur));
  }
}


/* =========================================================
   [K] KEYFRAMES FOR DECOR
   ---------------------------------------------------------
   ЭТО ГЛАВНОЕ МЕСТО, ГДЕ МЕНЯЕТСЯ
   ХАРАКТЕР ПОЯВЛЕНИЯ/ИСЧЕЗНОВЕНИЯ DECOR

   ЕСЛИ ХОЧЕШЬ, ЧТОБЫ DECOR ПОЯВЛЯЛСЯ МЕДЛЕННЕЕ:
   - меняй 40% на 46% или 50%

   ЕСЛИ ХОЧЕШЬ, ЧТОБЫ DECOR ДОЛЬШЕ ДЕРЖАЛСЯ:
   - меняй 70% на 74% или 76%

   ЕСЛИ ХОЧЕШЬ, ЧТОБЫ DECOR ИСЧЕЗАЛ РАНЬШЕ:
   - меняй 70% на 64% или 66%
   ========================================================= */
@keyframes heroDecorLoop {
  0% {
    opacity: 0;
    transform: translateY(var(--hero-decor-start-y));
    filter: blur(var(--hero-decor-start-blur));
  }

  24% {
    opacity: 0;
    transform: translateY(var(--hero-decor-start-y));
    filter: blur(var(--hero-decor-start-blur));
  }

  40% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  70% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  84% {
    opacity: 0;
    transform: translateY(var(--hero-decor-end-y));
    filter: blur(var(--hero-decor-end-blur));
  }

  100% {
    opacity: 0;
    transform: translateY(var(--hero-decor-end-y));
    filter: blur(var(--hero-decor-end-blur));
  }
}

/* =========================================================
   HERO TEXT HARD CENTER FIX
   CR02 / custom class: uc-herotext
   ---------------------------------------------------------
   ВСТАВЛЕН КАК ОТДЕЛЬНЫЙ БЛОК, НЕ ВНУТРИ KEYFRAMES
   ========================================================= */

#allrecords .uc-herotext .t-container,
#allrecords .uc-herotext .t-col,
#allrecords .uc-herotext .t-cover__wrapper,
#allrecords .uc-herotext .t102 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#allrecords .uc-herotext .t-cover__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#allrecords .uc-herotext .t-col,
#allrecords .uc-herotext .t-col_12 {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
}

#allrecords .uc-herotext .t102,
#allrecords .uc-herotext .t102.t-align_center,
#allrecords .uc-herotext .t102.t-align_left,
#allrecords .uc-herotext .t102.t-align_right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: var(--hero-side-padding) !important;
  padding-right: var(--hero-side-padding) !important;
  text-align: center !important;
  gap: var(--hero-gap) !important;
}

#allrecords .uc-herotext .t102__title {
  display: block !important;
  width: 100% !important;
  max-width: var(--hero-title-max-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#allrecords .uc-herotext .t102__descr {
  display: block !important;
  width: 100% !important;
  max-width: var(--hero-decor-max-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#allrecords .uc-herotext .t102__title *,
#allrecords .uc-herotext .t102__descr *,
#allrecords .uc-herotext .t-title,
#allrecords .uc-herotext .t-descr,
#allrecords .uc-herotext p,
#allrecords .uc-herotext span,
#allrecords .uc-herotext div {
  text-align: center !important;
}

@media screen and (max-width: 640px) {
  #allrecords .uc-herotext .t102__title {
    max-width: calc(100% - (var(--hero-side-padding) * 2)) !important;
  }

  #allrecords .uc-herotext .t102__descr {
    max-width: calc(100% - (var(--hero-side-padding) * 2)) !important;
  }
} 
/* =========================================================
   HERO FINAL FONT + COLOR OVERRIDE
   ВСТАВИТЬ В САМЫЙ КОНЕЦ ВСЕГО CSS
   ========================================================= */

#allrecords .uc-herotext .t102__title,
#allrecords .uc-herotext .t102__title *,
#allrecords .uc-herotext .t-title,
#allrecords .uc-herotext .t-title * {
  font-family: var(--hero-title-font-family) !important;
  color: var(--hero-title-color) !important;
}

#allrecords .uc-herotext .t102__descr,
#allrecords .uc-herotext .t102__descr *,
#allrecords .uc-herotext .t-descr,
#allrecords .uc-herotext .t-descr *,
#allrecords .uc-herotext p,
#allrecords .uc-herotext p * {
  font-family: "Pinyon Script", cursive !important;
  color: var(--hero-decor-color) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  font-synthesis: none !important;
}