/* Вариант 12 «Параллакс: геометрические горы» на общем каркасе (frame.css).
   Единственная светлая сцена: дневное небо, жёлтое солнце, три хребта из треугольников,
   главная вершина с флажком и тропой 1–4, зелёные холмы с домиками, шар, самолётики.
   Здесь только краска (--hf-*) и сама сцена; раскладку и форму элементов задаёт каркас. */
.hero-des-12{
  --hf-hero-bg:
    radial-gradient(56% 54% at 24% 47%, #ffffffb8 0, #ffffff00 72%),
    linear-gradient(180deg, #2f8fff 0, #58abff 13%, #86c8ff 34%, #bfe2ff 60%, #dff2ff 82%, #eaf6ff 100%);
  --hf-logo-filter: none;
  --hf-brand-note: #0a2240; --hf-brand-rule: #0a224047;
  --hf-nav-login-bg: #fffffff2; --hf-nav-login-bg-hover: #fff; --hf-nav-login-border: #fff; --hf-nav-login-ink: #1257c2;
  --hf-nav-register-bg: #1763d6; --hf-nav-register-bg-hover: #0f4fb5; --hf-nav-register-border: #1763d6; --hf-nav-register-ink: #fff;

  --hf-h1: #0e2a4a; --hf-h1-accent: #1763d6;
  --hf-copy: #16365a;
  --hf-pill1-bg: #fff; --hf-pill1-ink: #0e2a4a;
  --hf-pill2-bg: #ffd34d; --hf-pill2-ink: #3b2900;
  --hf-pill3-bg: #62d69d; --hf-pill3-ink: #06321f;
  --hf-dates-bg: #fff; --hf-dates-border: #fff; --hf-dates-bar: #1763d6; --hf-dates-ink: #27456b; --hf-dates-strong: #0e2a4a;
  --hf-dates-shadow: 0 18px 36px -18px #0e3a7a80, 0 2px 6px #0e3a7a14;

  --hf-card-bg: #fff; --hf-card-ink: #0e2a4a;
  --hf-card-shadow: 0 2px 6px #0e2a4a14, 0 30px 56px -18px #0b3f8a99;
  --hf-label: #40536d; --hf-muted: #55677f; --hf-rule: #e3ebf5;
  --hf-field-bg: #f4f8fd; --hf-field-border: #cddbee; --hf-field-ink: #0e2a4a; --hf-placeholder: #5a6b84;
  --hf-link: #1257c2;
  --hf-action: #1763d6; --hf-action-hover: #0f4fb5; --hf-action-ink: #fff;
  --hf-action-shadow: inset 0 1px 0 #ffffff40, 0 12px 22px -10px #1763d6cc;
  --hf-alt-bg: #edf5ff; --hf-alt-bg-hover: #dcebff; --hf-alt-border: #a9cbf6; --hf-alt-border-hover: #1763d6; --hf-alt-ink: #0e3f8f;
  --hf-focus: #1763d6; --hf-focus-ring: #1763d640;
  --hf-fact-icon: #1763d6;
}

/* ---------- Краска элементов страницы (геометрию не трогаем) ---------- */
.hero-des-12 .hero-labels .pill{ box-shadow: 0 8px 16px -10px #0e3a7a80; }
.hero-des-12 .login-card .password-toggle{ color: #1257c2; }
.hero-des-12:not(.is-scrolled) .public-navigation-header .header-register{ box-shadow: 0 10px 20px -12px #0b3f8ae6; }
.hero-des-12:not(.is-scrolled) .public-navigation-header :is(a, button):focus-visible{ outline-color: #0e2a4a; }

/* ---------- Сцена ----------
   Единица сцены на компьютере = 1px; нулевая линия (--d12-base) — 740px от верха при высоте экрана 740px
   и опускается лишь на половину прибавки высоты: сцена держится за текст и форму, а не за нижний край.
   --d12-w — ширина рисунка в 3600 единиц (масштаб), --d12-dx — сдвиг, --d12-o — запас по бокам. */
.hero-des-12 .des-stage{
  --d12-w: max(3600px, 100vw + 150px);
  --d12-dx: 0px;
  --d12-o: 72px; --d12-base: calc(370px + 50%); --d12-sun: 188px; --d12-dr: 24px;
}
.d12-defs{ position: absolute; width: 0; height: 0; }

/* Параллакс. Каждый элемент, получающий переменные курсора и прокрутки, — это полный пересчёт его стиля
   на каждом кадре. Поэтому таких элементов всего пять (три хребта и два холма; шар едет вместе с горой,
   солнце садится по прокрутке без переменных), и на них нет ничего, кроме сдвига: размеры и положение слоя
   с их calc() заданы на внешнем .d12-layer, а переменные получает вложенный .d12-art.
   Формула короче общей: три готовых коэффициента слоя — сдвиг от курсора по x и y и сдвиг при прокрутке
   (дальние слои отстают сильнее, ближний холм уезжает вперёд). */
.hero-des-12 .des-stage .plx{
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--px, 0) * var(--d12-mx)), calc(var(--py, 0) * var(--d12-my) + var(--sy, 0) * var(--d12-ms)), 0);
}
.des-stage .d12-far{     --d12-mx: -13px; --d12-my: -6px;  --d12-ms: 150px; --d12-vh: 460; --d12-from: 30px; }
.des-stage .d12-mid{     --d12-mx: -23px; --d12-my: -12px; --d12-ms: 104px; --d12-vh: 396; --d12-from: 52px; --d12-delay: .04s; }
.des-stage .d12-near{    --d12-mx: -28px; --d12-my: -14px; --d12-ms: 60px;  --d12-vh: 484; --d12-from: 80px; --d12-delay: .07s; }
.des-stage .d12-hill-a{  --d12-mx: -44px; --d12-my: -22px; --d12-ms: 24px;  --d12-vh: 190; --d12-from: 90px; --d12-delay: .1s; }
.des-stage .d12-hill-b{  --d12-mx: -55px; --d12-my: -27px; --d12-ms: -25px; --d12-vh: 300; --d12-oh: 150; --d12-from: 100px; --d12-delay: .14s; }

/* Слои пейзажа: один SVG на слой, обрезан по содержимому. Все анимации сцены — только transform и opacity,
   идут без участия главного потока. */
.d12-layer{
  position: absolute; left: calc(var(--d12-dx) - var(--d12-o)); width: calc(100% + 2 * var(--d12-o));
  bottom: calc(100% - var(--d12-base) - var(--d12-w) * var(--d12-oh, 40) / 3600);
  height: calc(var(--d12-w) * var(--d12-vh) / 3600);
  animation: d12-rise .8s cubic-bezier(.2, .75, .25, 1) var(--d12-delay, 0s) backwards;
}
.d12-art > svg:first-child{ position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes d12-rise{ from{ transform: translate3d(0, var(--d12-from, 60px), 0); } }
@keyframes d12-fade{ from{ opacity: 0; } }

.d12-marks circle{ fill: #ffd34d; }
.d12-marks text{ font-size: 13.5px; font-weight: 800; fill: #0e2a4a; text-anchor: middle; }
.d12-pennant{
  position: absolute; left: calc(50% + var(--d12-w) * 90 / 3600); bottom: calc(var(--d12-w) * 453 / 3600);
  width: calc(var(--d12-w) * 32 / 3600); height: auto; transform-origin: 100% 50%;
  animation: d12-wave 2.8s ease-in-out infinite;
}
@keyframes d12-wave{ 0%, 100%{ transform: skewY(0deg) scaleX(1); } 50%{ transform: skewY(-6deg) scaleX(.88); } }

/* Солнце: лучи — SVG, диск и ореол — градиенты; облако перед солнцем едет вместе с ним.
   При прокрутке солнце садится за горы — анимацией, привязанной к прокрутке (там, где она есть). */
.d12-sun{
  position: absolute; left: calc(50% + 44px); top: 176px; width: var(--d12-sun); height: var(--d12-sun);
  margin: calc(var(--d12-sun) / -2) 0 0 calc(var(--d12-sun) / -2);
}
@supports (animation-timeline: scroll()){
  .d12-sun{ animation: d12-sunset linear both; animation-timeline: scroll(root); animation-range: 0px var(--d12-set-at, 780px); }
  @keyframes d12-sunset{ to{ transform: translate3d(0, var(--d12-set, 300px), 0); } }
}
.d12-glow{ position: absolute; inset: -42%; border-radius: 50%; background: radial-gradient(closest-side, #fff7cfd6 0, #fff0b380 36%, #ffeeb000 100%); }
.d12-disc{ position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #ffe98a 0, #ffd34d 45%, #ffb52e 82%); }
.d12-rays{ position: absolute; inset: 0; width: 100%; height: 100%; animation: d12-spin 90s linear infinite; }
@keyframes d12-spin{ to{ transform: rotate(360deg); } }

/* Облака: одно перед солнцем, остальные по краям неба (вне колонки текста и шапки); только плывут */
.d12-cloud{ position: absolute; height: auto; animation: d12-fade .7s ease-out .1s backwards, d12-drift var(--d12-t, 38s) ease-in-out infinite alternate; }
@keyframes d12-drift{ from{ transform: translate3d(calc(var(--d12-dr) * -1), 0, 0); } to{ transform: translate3d(var(--d12-dr), 0, 0); } }
.d12-c5{ left: 3%; top: 60%; width: 55%; --d12-t: 30s; }
.d12-c1{ left: calc(50% - 756px); top: 98px; width: 150px; }
.d12-c6{ left: calc(50% - 746px); top: 416px; width: 128px; --d12-t: 34s; }
.d12-c3{ left: calc(50% + 624px); top: 196px; width: 112px; --d12-t: 52s; }
.d12-c7{ left: calc(50% + 628px); top: 416px; width: 100px; --d12-t: 27s; }
.d12-c4{ left: calc(50% + 810px); top: 326px; width: 150px; --d12-t: 44s; }
/* боковые облака и самолётики показываются, только когда на полях хватает места */
.d12-c1, .d12-c6, .d12-c3, .d12-c7, .d12-c4{ display: none; }
@media (min-width: 1340px){ .d12-c1, .d12-c6, .d12-c3, .d12-c7{ display: block; } }

/* Шар с цифрой 5 — в просвете между плашкой дат и склоном, лежит в слое главной горы и едет с ней
   (позиция задана от края колонки текста); на телефоне — отдельная копия в небе. Самолётики — по краям. */
.d12-balloon{ position: absolute; height: auto; animation: d12-bob 6.5s ease-in-out infinite; }
.d12-ba{ left: calc(50vw - min(560px, 50vw - 32px) + 440px - var(--d12-dx) + var(--d12-o)); bottom: 168px; width: 60px; }
.d12-bm{ display: none; }
.d12-bt{ font-size: 27px; font-weight: 800; fill: #fff; text-anchor: middle; }
@keyframes d12-bob{ 0%, 100%{ transform: translate3d(0, 0, 0) rotate(-2deg); } 50%{ transform: translate3d(0, -9px, 0) rotate(2.5deg); } }
.d12-plane{ position: absolute; width: 124px; height: auto; display: none; animation: d12-fade .6s ease-out .25s backwards, d12-glide 9s ease-in-out infinite; }
@keyframes d12-glide{ 0%, 100%{ transform: translate3d(-6px, 5px, 0) rotate(1.5deg); } 50%{ transform: translate3d(8px, -7px, 0) rotate(-2deg); } }
.d12-pa{ left: calc(50% + 580px); top: 296px; }
.d12-pb{ left: calc(50% - 916px); top: 330px; }
@media (min-width: 1400px){ .d12-pa{ display: block; } }
@media (min-width: 1700px){ .d12-pb, .d12-c4{ display: block; } }

/* Узкий компьютер: колонка уже 1120px — вершина отступает от формы, слой гор ходит за курсором слабее,
   чтобы склон не подходил к описанию */
@media (min-width: 1101px) and (max-width: 1183px){
  .hero-des-12 .des-stage{ --d12-dx: min(0px, 50vw - 564px); }
  .des-stage .d12-near{ --d12-mx: -12px; --d12-my: -6px; }
  .d12-ba{ width: 52px; }
}
/* ---------- Планшет в альбомной ориентации: сцена 0.8, привязана к низу ---------- */
@media (min-width: 1024px) and (max-width: 1100px){
  .hero-des-12 .des-stage{ --d12-w: 2880px; --d12-dx: calc(50vw - 530px); --d12-o: 110px; --d12-base: 100%; --d12-sun: 150px; }
  .d12-sun{ left: calc(50% + 52px); top: 168px; }
  .d12-c5{ left: 14%; }
  .d12-ba{ left: calc(430px - var(--d12-dx) + var(--d12-o)); bottom: 167px; width: 44px; }
  .des-stage .d12-near{ --d12-mx: -14px; --d12-my: -7px; }
}
/* ---------- Узкие две колонки: маленький пейзаж вдоль нижнего края, вершина — между плашкой дат и формой ---------- */
@media (min-width: 761px) and (max-width: 1023px){
  .hero-des-12 .des-stage{ --d12-w: 1800px; --d12-dx: calc(50vw - 481px); --d12-o: 110px; --d12-base: 100%; --d12-sun: 110px; --d12-dr: 12px; }
  .des-stage .d12-far{    --d12-mx: -6px;  --d12-my: -3px;  --d12-ms: 75px; }
  .des-stage .d12-mid{    --d12-mx: -11px; --d12-my: -5px;  --d12-ms: 52px; }
  .des-stage .d12-near{   --d12-mx: -15px; --d12-my: -7px;  --d12-ms: 30px; }
  .des-stage .d12-hill-a{ --d12-mx: -20px; --d12-my: -9px;  --d12-ms: 12px; }
  .des-stage .d12-hill-b{ --d12-mx: -25px; --d12-my: -11px; --d12-ms: -12px; }
  .d12-sun{ left: calc(50% + 8px); top: 134px; }
  .d12-c5{ left: 38%; top: 62%; width: 64%; }
  .d12-ba{ left: calc(300px - var(--d12-dx) + var(--d12-o)); bottom: 80px; width: 36px; }
  .d12-marks{ display: none; }
}
@media (min-width: 761px) and (max-width: 900px){
  .hero-des-12 .des-stage{ --d12-dx: calc(50vw - 441px); }
  .d12-sun{ left: calc(50% - 10px); top: 138px; }
}
/* описание в три строки — под плашкой дат шару не хватает неба */
@media (min-width: 761px) and (max-width: 789px){
  .d12-ba{ display: none; }
}
/* ---------- Телефон: небо за текстом, под формой — полоса холмов с маленькими горами ---------- */
@media (max-width: 760px){
  .hero-des-12{
    --hf-hero-bg:
      radial-gradient(90% 34% at 30% 24%, #ffffff99 0, #ffffff00 72%),
      linear-gradient(180deg, #2f8fff 0, #64b3ff 7%, #a3d5ff 19%, #cbe8ff 40%, #e2f3ff 100%);
  }
  .hero-des-12 .des-stage{ --d12-w: 2025px; --d12-dx: 0px; --d12-o: 170px; --d12-base: 100%; --d12-sun: 110px; --d12-dr: 8px; }
  .d12-near{ display: none; }
  .d12-layer{ animation: none; }
  .d12-sun{ --d12-set: 130px; --d12-set-at: 1100px; }
  .des-stage .d12-far{ --d12-w: 936px; --d12-dx: -40px; --d12-mx: -3px; --d12-ms: 15px; }
  .des-stage .d12-mid{ --d12-w: 936px; --d12-dx: 95px; --d12-mx: -6px; --d12-ms: 12px; }
  .des-stage .d12-hill-a{ --d12-mx: -10px; --d12-ms: 8px; }
  .hero-des-12 .des-stage .d12-hill-b .plx{ transform: none; }
  .hero-des-12 .des-stage :is(.d12-hill-b, .d12-near) .plx{ will-change: auto; }
  .d12-sun{ left: calc(100% - 58px); top: 126px; }
  .d12-c5{ left: -12%; top: 62%; width: 69%; }
  .d12-bm{ display: block; right: 24px; top: 214px; width: 44px; }
}