/* ==========================================================
   УСЛУГИ ПЕЧАТИ — Сцена со студенткой
   ReutPrint Home v2.9
   ----------------------------------------------------------
   Здесь находятся только индивидуальные настройки
   первого раздела.

   Универсальные классы персонажей находятся
   в reutprint-components.css.
--------------------------------------------------------------
 HERO:

 ✔ Собственный JS-слайдер без сторонних библиотек
 ✔ Нижняя панель навигации со стрелками и индикаторами
 ✔ Автоматическое переключение слайдов
 ✔ Анимация последовательного появления контента
 ✔ Эффект Ken Burns для фонового изображения
 ✔ Анимированный световой слой
 ✔ Адаптивный градиент для читаемости текста
 ✔ Цветовые темы направлений через data-theme
 ✔ Ролевые классы элементов Hero
 ✔ Поддержка готовых составных фоновых изображений
 ✔ Подготовлен отдельный слой для прозрачных персонажей
 ✔ Разделены фон, градиент, персонажи и контент
 ✔ Адаптация композиции для мобильных экранов
 ✔ Улучшены кнопка, стрелки и активный индикатор

 АРХИТЕКТУРА СЛОЁВ:

 0 — .rp-hero-bg          фоновое изображение
 1 — ::before / ::after   световой эффект и градиент
 2 — .rp-hero-foreground  прозрачные персонажи
 3 — .rp-hero-content     текст, бейдж и кнопка

 СЛЕДУЮЩИЙ ЭТАП:

 - Подключение персонажей с настоящим альфа-каналом
 - Адаптация персонажей под разные размеры экрана
 - Использование персонажей в карточках и преимуществах

==============================================================
*/

.rp-home {
  padding-bottom: 40px;
}

/* ==========================================================
   HERO — Темы направлений
   ----------------------------------------------------------
   Задаёт акцентный цвет слайда через data-theme.
   Один атрибут в HTML меняет цвет бейджа, кнопки
   и будущих декоративных элементов.
   ========================================================== */

.rp-hero-slide[data-theme="print"] {
  --hero-accent: var(--rp-purple);
}

.rp-hero-slide[data-theme="photo"] {
  --hero-accent: var(--rp-pink);
}

.rp-hero-slide[data-theme="design"] {
  --hero-accent: var(--rp-yellow);
}

/* ==========================================================
   HERO — Начальное состояние контента
   ----------------------------------------------------------
   Элементы скрыты до момента активации соответствующего
   слайда. Используются только ролевые классы Hero, поэтому
   правило не затрагивает другие заголовки, абзацы и кнопки.
   ========================================================== */

.rp-hero-badge,
.rp-hero-title,
.rp-hero-desc,
.rp-hero-button {
  opacity: 0;
  transform: translateY(16px);
}

/* ==========================================================
   HERO — Кнопка
   ----------------------------------------------------------
   Лёгкая тень и подъём при наведении.
   Делает CTA заметнее, но без лишней анимации.
   ========================================================== */
.rp-hero-button {
  background: var(--hero-accent, var(--rp-purple));
  box-shadow: 0 12px 28px rgba(57, 49, 133, .22);
  transition: translate .18s ease, box-shadow .18s ease;
}

.rp-hero-button:hover {
  translate: 0 -2px;
  box-shadow: 0 18px 36px rgba(57, 49, 133, .30);
}

.rp-hero {
  position: relative;
  width: min(calc(100% - 40px), var(--rp-container-wide));
  margin: 0 auto;
  padding: 0;
}

.rp-hero-slider {
  position: relative;
  height: clamp(340px, 25vw, 460px);
  overflow: hidden;
  border-radius: clamp(24px, 1.4vw, 32px);
  background: #111111;
  box-shadow: 0 28px 70px rgba(20, 18, 40, 0.16);
}

.rp-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.rp-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   HERO — Фоновое изображение
   ----------------------------------------------------------
   Основной слой слайда: интерьер, оборудование или готовая
   составная композиция с персонажами.

   z-index: 0 — изображение находится под градиентом,
   текстом и будущим прозрачным передним слоем.
   ========================================================== */

.rp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center right;

  transform: scale(1);
  transform-origin: center center;

  filter:
    contrast(1.03)
    saturate(1.08);
}

/* ==========================================================
   HERO — Ken Burns фонового изображения
   ----------------------------------------------------------
   Медленно увеличивается только фон слайда.
   Будущие персонажи переднего слоя останутся неподвижными.
   ========================================================== */

.rp-hero-slide.is-active .rp-hero-bg {
  animation: rpHeroKenBurns 6.2s ease-out forwards;
}


@keyframes rpHeroKenBurns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.055);
  }
}

.rp-hero-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(circle at 82% 22%,
        rgba(255,255,255,.22),
        transparent 34%);
	animation:rpHeroLight 8s ease-in-out infinite alternate;	
}

@keyframes rpHeroLight{

from{

transform:translateX(-20px);

}

to{

transform:translateX(20px);

}

}

/* ==========================================================
   HERO — Градиент поверх фонового изображения
   ----------------------------------------------------------
   Делает левую часть пригодной для текста, но не перекрывает
   будущих персонажей переднего плана.

   Слои:
   0 — фон;
   1 — градиент;
   2 — персонажи;
   3 — текст.
   ========================================================== */

.rp-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255, 248, 236, .96) 0%,
      rgba(255, 248, 236, .72) 30%,
      rgba(255, 248, 236, .25) 56%,
      rgba(255, 248, 236, .08) 70%,
      transparent 84%
    );
}

.rp-hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  align-items: stretch;
  padding: clamp(30px, 3.2vw, 58px);

  background: none;
}

/* ==========================================================
   HERO — Передний слой с персонажами
   ----------------------------------------------------------
   Подготовлен для отдельного PNG/WebP с альфа-каналом.
   Сейчас может оставаться пустым.

   pointer-events: none не позволяет изображению персонажей
   перекрывать кнопку и другие элементы Hero.
   ========================================================== */

.rp-hero-foreground {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.rp-hero-person {
  position: absolute;
  right: clamp(12px, 4vw, 70px);
  bottom: 0;

  width: auto;
  height: 108%;
  max-width: 58%;
  max-height: 520px;

  object-fit: contain;
  object-position: right bottom;

  filter: drop-shadow(0 20px 28px rgba(20, 18, 40, .14));
}

.rp-hero-text {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  max-width: clamp(360px, 35vw, 590px);
  min-height: clamp(250px, 18vw, 330px);
}

.rp-hero-text .rp-btn {
  align-self: end;
  justify-self: start;
  margin-top: 0;
}

.rp-hero-badge {
  display: inline-flex;
  justify-self: start;
  align-self: start;
  width: fit-content;
  margin-bottom: clamp(12px, 1vw, 18px);
  padding: 7px 14px;
  border-radius: var(--rp-radius-pill);
  background: var(--hero-accent, var(--rp-pink));
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(229, 0, 126, 0.22);
}

/* ==========================================================
   HERO — Заголовок
   ========================================================== */

.rp-hero-title {
  margin: 0 0 clamp(12px, 1vw, 18px);
  color: #111122;
  font-size: clamp(34px, 3.25vw, 58px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.035em;
}


/* ==========================================================
   HERO — Описание
   ========================================================== */

.rp-hero-desc {
  margin: 0 0 clamp(22px, 1.8vw, 32px);
  max-width: 470px;
  color: rgba(17, 17, 34, 0.78);
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.5;
}

.rp-hero-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

/* ==========================================================
   HERO — Hover навигации
   ----------------------------------------------------------
   Небольшое увеличение стрелок при наведении.
   Добавляет интерактивности без перегруза.
   ========================================================== */
   
.rp-hero-arrow {
  position: static;
  width: 38px;
  height: 38px;
  transform: none;
  margin: 0;
  border: 1px solid rgba(57,49,133,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: var(--rp-purple);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(20,18,40,.10);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.rp-hero-arrow:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--rp-purple);
  color: #fff;
}

/* ==========================================================
   HERO — Активный индикатор
   ----------------------------------------------------------
   Активная точка превращается в короткую линию.
   Так пользователь лучше видит текущий слайд.
   ========================================================== */

.rp-hero-dots {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-hero-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: rgba(57,49,133,.24);
  cursor: pointer;
  transition: width .22s ease, background .22s ease;
}

.rp-hero-dot.is-active {
  width: 36px;
  background: var(--rp-purple);
  box-shadow: 0 4px 12px rgba(57, 49, 133, .22);
}

/* ==========================================================
   HERO — Анимация активного слайда
   ----------------------------------------------------------
   Анимация привязана к ролевым классам, а не к тегам h1,
   h2, p или общему классу кнопок.
   ========================================================== */

.rp-hero-slide.is-active .rp-hero-badge,
.rp-hero-slide.is-active .rp-hero-title,
.rp-hero-slide.is-active .rp-hero-desc,
.rp-hero-slide.is-active .rp-hero-button {
  animation: rpHeroTextIn .55s ease both;
}

.rp-hero-slide.is-active .rp-hero-title {
  animation-delay: .05s;
}

.rp-hero-slide.is-active .rp-hero-desc {
  animation-delay: .1s;
}

.rp-hero-slide.is-active .rp-hero-button {
  animation-delay: .15s;
}

@keyframes rpHeroTextIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rp-section--print {
  position: relative;
  overflow: visible;
}


/* ==========================================================
   УСЛУГИ ПЕЧАТИ — Настройки студентки
   ----------------------------------------------------------
   Эти переменные действуют только внутри первой сцены.

   Меняя их, мы не затрагиваем персонажей в других разделах.
   ========================================================== */

.rp-section-scene--print {

  /*
    Размер студентки относительно высоты сетки карточек.

    Больше:
    --rp-character-height: 92%;

    Меньше:
    --rp-character-height: 82%;
  */
  --rp-character-height: 88%;

  /*
    Вертикальное положение.

    Больше положительное значение — студентка выше:
    --rp-character-bottom: 20px;

    Отрицательное значение — ниже:
    --rp-character-bottom: -10px;
  */
  --rp-character-bottom: 2px;

  /*
    Горизонтальное положение.

    -130px — максимальный выход за контейнер
    -55px  — минимальный выход за контейнер

    Число +24px регулирует расстояние от края окна:

    +12px — ближе к краю окна;
    +40px — ближе к карточкам.
  */
  --rp-character-inline-offset:
    clamp(
      -130px,
      calc(50% - 50vw + 24px),
      -55px
    );
}


/* ==========================================================
   УСЛУГИ ПЕЧАТИ — Средние настольные экраны
   ----------------------------------------------------------
   На экранах до 1399px студентка становится немного меньше.

   Горизонтальная позиция продолжает рассчитываться
   автоматически через calc().
   ========================================================== */

/* ==========================================================
   HERO — Широкие настольные экраны
   ----------------------------------------------------------
   Не позволяет крупному тексту переполнять Hero после того,
   как ширина текстового блока достигла прежнего лимита.
   ========================================================== */

@media (min-width: 1600px) {

  .rp-hero-slider {
    height: 460px;
  }

  .rp-hero-content {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .rp-hero-text {
    width: 100%;
    max-width: 700px;
    min-height: 0;
    height: 100%;
  }

  .rp-hero-title {
    font-size: 56px;
  }

  .rp-hero-desc {
    margin-bottom: 22px;
  }

}   
   
   
@media (max-width: 1399px) {

  .rp-section-scene--print {

    /*
      Уменьшенная высота для средних экранов.
    */
    --rp-character-height: 84%;

    /*
      Немного поднимаем фигуру относительно низа сетки.
    */
    --rp-character-bottom: 3px;

    /*
      На среднем экране диапазон выхода уменьшается:

      -100px — максимально наружу;
      -45px  — максимально близко к карточкам.
    */
    --rp-character-inline-offset:
      clamp(
        -100px,
        calc(50% - 50vw + 18px),
        -45px
      );
  }

}

/* ==========================================================
   МОБИЛЬНЫЙ HERO
   Единая внешняя граница: 820px
   ========================================================== */

@media (max-width: 820px) {

  /*
    Hero выходит за пределы контейнера Joomla.
    Внешних полос и нижнего margin нет.
  */
	.rp-hero-content {
	 padding: 30px 20px;
  }
  .rp-hero {
    width: 100vw;
    max-width: none;

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: calc(50% - 50vw);

    padding: 0;
  }

  @supports (width: 100dvw) {

    .rp-hero {
      width: 100dvw;
      margin-left: calc(50% - 50dvw);
    }

  }


  /* Внешняя оболочка Hero */

  .rp-hero-slider {
    height: 340px;
    min-height: 340px;

    border-radius: 0 !important;

    box-shadow: none !important;
  }


  /* Мобильная композиция изображения */

  .rp-hero-bg {
    width: 100%;
    height: 100%;
    min-height: 0;

    object-position: 64% center;
  }

  .rp-hero-foreground {
    display: none;
  }

  .rp-hero-slide::after {
    background:
      linear-gradient(
        90deg,
        rgba(255, 247, 232, 0.97) 0%,
        rgba(255, 247, 232, 0.87) 55%,
        rgba(255, 247, 232, 0.62) 100%
      );
  }

}


/* ==========================================================
   УЗКИЙ ЭКРАН
   Только внутренняя компоновка
   ========================================================== */

@media (max-width: 680px) {

  .rp-hero-content {
    padding: 26px 20px;

    background: none;
  }

  .rp-hero-text {
    min-height: 270px;
    max-width: 310px;
  }

  .rp-hero-text .rp-btn {
    align-self: start;
  }

  .rp-hero-title {
    font-size: clamp(30px, 8vw, 36px);
    line-height: 1.05;
  }

  .rp-hero-desc {
    font-size: 16px;
    line-height: 1.45;
  }

}