/* Вариант 15 «Параллакс: аврора» на общем каркасе (frame.css). Главный герой сцены — свет.
   Всё крупное и мягкое (градиент, три свечения, ленты сияния, дальняя сетка, контуры круга и квадрата,
   свечение у нижней кромки) нарисовано один раз в неподвижном слое .d15-bg. Двигаются: ближний план света
   (третья лента, редкая сетка, контур-треугольник), три плана с неоном, знаками и искрами, стекло
   и пятно света за курсором. Крупные слои сдвигаются на целые пиксели — так их дешевле сводить. */
.hero-des-15{
  --hf-hero-bg: #5a36cb;
  --hf-brand-note: #ebe3ff; --hf-brand-rule: #ffffff47;
  --hf-nav-login-bg: #2a127a59; --hf-nav-login-bg-hover: #2a127a8c; --hf-nav-login-border: #ffffff80;
  --hf-nav-register-bg-hover: #f1eaff; --hf-nav-register-ink: #4a2ab8;
  --hf-h1-accent-bg: linear-gradient(92deg, #ffe58a 0%, #ffc66e 55%, #ff9fc8 100%); --hf-h1-accent-fill: transparent;
  --hf-h1-shadow: 0 2px 30px #1c0a6040;
  --hf-pill1-bg: linear-gradient(180deg, #ffffff2b, #ffffff17), #2a148675; --hf-pill1-ink: #fff; --hf-pill1-border: #ffffff47;
  --hf-pill2-bg: linear-gradient(180deg, #ffe07a, #f7c84e); --hf-pill2-ink: #3a2760; --hf-pill2-border: #ffe9a3;
  --hf-pill3-bg: var(--hf-pill1-bg); --hf-pill3-ink: #fff; --hf-pill3-border: #ffffff47;
  --hf-dates-bg: linear-gradient(135deg, #ffffff2b, #ffffff12), #3219964d; --hf-dates-border: #ffffff38;
  --hf-dates-bar: linear-gradient(180deg, #ffe58a, #ffb3a8);
  --hf-dates-shadow: inset 0 1px 0 #ffffff33, 0 18px 40px -22px #14064d99;
  --hf-card-shadow: 0 2px 4px #1a0a5514, 0 42px 46px -34px #ff7bd5, 0 28px 60px -18px #17084fb8;
  --hf-field-border: #ddd6ee;
  --hf-action: #6744d4; --hf-action-hover: #5433c0;
  --hf-action-bg: linear-gradient(180deg, #7b56ea, #5a36cb); --hf-action-bg-hover: linear-gradient(180deg, #6f49e2, #4c2bb6);
  --hf-action-shadow: inset 0 1px 0 #ffffff47, 0 12px 24px -10px #5a36cbcc;
  --hf-alt-bg: #f5f1fd; --hf-alt-bg-hover: #ebe2fb; --hf-alt-border: #e2d8f5; --hf-alt-border-hover: #b9a3e6;
  --hf-fact-icon: #6f47dc;
}
.hero-des-15 .hero-labels .pill{ box-shadow: inset 0 1px 0 #ffffff33; }
.hero-des-15 .hero-labels .pill:nth-child(2){ box-shadow: 0 6px 18px -6px #f7cd5e99; }

/* ───────── Неподвижный фон ───────── */
/* Сверху вниз: светлая линия и свечение у нижней кромки (стык с полосой фактов), розовый ореол за формой,
   затемнение под шапкой, три свечения (розовое, голубое, фиолетовое), два больших пятна, основной градиент.
   Небольшие пятна ограничены своими прямоугольниками — так фон быстрее рисуется при первом показе. */
.d15-bg{
  position: absolute; inset: 0; overflow: hidden; will-change: transform;
  --d15-o1: right -330px top -174px / 860px 860px; --d15-o3: left -270px top 40px / 640px 640px;
  background:
    linear-gradient(90deg, #9fe9ff00, #9fe9ff99 22%, #e2d4ffb3 52%, #ffb8e8a6 80%, #ffb8e800) 0 100% / 100% 1px no-repeat,
    radial-gradient(50% 100% at 30% 100%, #7ad9ff3d, #7ad9ff00) 0 100% / 100% 70px no-repeat,
    radial-gradient(46% 100% at 78% 100%, #ff8fdc47, #ff8fdc00) 0 100% / 100% 90px no-repeat,
    radial-gradient(closest-side, #ff7bd5a6 0, #ff7bd573 38%, #b77bff38 68%, #b77bff00) min(50% + 370px, 100% + 58px) 390px / 560px 420px no-repeat,
    linear-gradient(180deg, #2a148694, #2a148600) 0 0 / 100% 170px no-repeat,
    radial-gradient(closest-side, #ff7bd570 0, #ff7bd566 26%, #ff7bd54c 45%, #ff7bd52d 60%, #ff7bd513 76%, #ff7bd500) var(--d15-o1) no-repeat,
    radial-gradient(closest-side, #5fd4ff4d 0, #5fd4ff47 26%, #5fd4ff33 45%, #5fd4ff1f 60%, #5fd4ff0d 76%, #5fd4ff00) left calc(28vw - 150px) bottom -450px / 760px 760px no-repeat,
    radial-gradient(closest-side, #7b5cff8c 0, #7b5cff82 26%, #7b5cff5e 45%, #7b5cff38 60%, #7b5cff18 76%, #7b5cff00) var(--d15-o3) no-repeat,
    radial-gradient(70% 84% at 90% 19%, #a35cf5cc 0, #a35cf500 62%),
    radial-gradient(60% 76% at 4% 100%, #2a4bd8b8 0, #2a4bd800 60%),
    linear-gradient(128deg, #3a1d9e 0%, #5a36cb 38%, #6f47dc 70%, #8250e6 100%);
}
/* Лента сияния: цвет вдоль дуги — конический градиент, сама дуга — кольцо в маске из того же центра.
   Рисуется один раз вместе со своим слоем; блок ленты обрезан по её дуге. --d15-x сдвигает ленты вбок на узких экранах. */
.d15-rib{
  position: absolute;
  background: conic-gradient(from var(--d15-f, 0deg) at var(--d15-c), var(--d15-g));
  -webkit-mask-image: radial-gradient(var(--d15-r) at var(--d15-c), var(--d15-m)); mask-image: radial-gradient(var(--d15-r) at var(--d15-c), var(--d15-m));
}
/* A — снизу слева под датами и вверх через просвет между текстом и формой; чёткая кромка смотрит на текст */
.d15-rib-a{
  left: calc(50% - 790px + var(--d15-x, 0px)); top: 150px; width: 1160px; bottom: 0; --d15-c: 400px -406px; --d15-r: 780px 1170px;
  --d15-g: #ff86d800 108deg, #ff86d8 127deg, #a184ff 152deg, #63e3ffc4 177deg, #63e3ff00 203deg;
  --d15-m: #0000 80.6%, #000 82.4%, #000b 85.5%, #0006 90.5%, #0002 96%, #0000;
}
/* C — дальняя бледная дуга за заголовком */
.d15-rib-c{
  left: 0; right: 0; top: 0; height: 600px; opacity: .58;
  --d15-f: 300deg; --d15-c: calc(50% + 180px + var(--d15-x, 0px)) 1500px; --d15-r: 1710px 1482px;
  --d15-g: #a184ff00 13deg, #a184ff 34deg, #ff86d8 68deg, #ff86d800 92deg;
  --d15-m: #0000 86.6%, #000 88%, #0007 92.5%, #0000;
}
/* Точечные сетки — без масок: три вложенные зоны, в каждой узор ложится точка в точку и становится ярче.
   Обе сетки отсчитаны от середины экрана: в покое крупные точки ближней совпадают с каждой третьей
   точкой дальней, при движении курсора слои расходятся. */
.d15-dots, .d15-dots::before, .d15-dots::after{ position: absolute; background: radial-gradient(#ffffff0e 1.1px, #fff0 1.3px) 0 0 / 26px 26px; }
.d15-dots{ left: calc(50% - 1000px); top: -40px; width: 2002px; height: 884px; }
.d15-dots::before{ content: ""; left: 208px; top: 104px; width: 1222px; height: 572px; }
.d15-dots::after{ content: ""; left: 468px; top: 208px; width: 676px; height: 364px; }
.d15-ring{ position: absolute; }
.d15-ring-c{ width: 680px; height: 680px; left: -290px; top: 86px; }
.d15-ring-s{ width: 500px; height: 500px; right: -170px; top: -94px; rotate: -17deg; }
/* Затемнение под колонкой текста — поверх лент и сетки */
.d15-bg::after{
  content: ""; position: absolute; left: calc(50% - 700px); top: 196px; width: 900px; height: 580px; opacity: .66;
  background: radial-gradient(closest-side, #2c148ab8 0, #2c148a85 48%, #2c148a00);
}

/* ───────── Подвижные слои ───────── */
/* Крупные слои: сдвиг параллакса, округлённый до целого пикселя (без round() остаётся формула .plx) */
.d15-grid, .d15-glass{
  position: absolute; --plx-x: 60px; --plx-y: 40px;
  transform: translate3d(round(var(--px, 0) * var(--d) * var(--plx-x) * -1, 1px), round(var(--py, 0) * var(--d) * var(--plx-y) * -1 + var(--sy, 0) * var(--d) * var(--plx-s), 1px), 0);
}
/* Ближний план света: лента B, редкая сетка и контур-треугольник (растворяется к нижней кромке — градиент обводки) */
.d15-grid{ left: calc(50% - 376px); width: 1170px; top: -40px; bottom: -40px; overflow: hidden; --d: .42; --plx-s: 150px; }
/* Лента B — из нижней части просвета вверх за форму к розовому углу; мягкая сторона уходит под форму.
   Едет вместе с ближним планом и расходится с лентами фона. */
.d15-rib-b{
  left: calc(250px + var(--d15-x, 0px)); top: 150px; width: 820px; height: 640px; --d15-c: 906px 790px; --d15-r: 900px 780px;
  --d15-g: #63e3ff00 281deg, #63e3ff 297deg, #a184ff 313deg, #ff86d8 332deg, #ff86d800 352deg;
  --d15-m: #0000 73%, #0002 80%, #0006 89%, #000b 95%, #000 97.6%, #0000;
}
.d15-near, .d15-near::before, .d15-near::after{ position: absolute; background: radial-gradient(#ffffff18 1.7px, #fff0 2px) 0 0 / 78px 78px; }
.d15-near{ left: 0; top: 0; width: 936px; height: 858px; }
.d15-near::before{ content: ""; left: 78px; top: 78px; width: 780px; height: 702px; }
.d15-near::after{ content: ""; left: 234px; top: 234px; width: 468px; height: 390px; }
.d15-ring-t{ position: absolute; left: 189px; bottom: -220px; width: 600px; height: 600px; rotate: 17deg; }

/* Свет за курсором: небольшое пятно, простой радиальный градиент. В покое стоит в центре сцены,
   сдвиг — на долю ширины окна и высоты первого экрана, то есть под курсор. Над текстом (слева) слабее. */
.d15-torch{
  position: absolute; left: calc(50% - 260px); top: calc(50% - 260px); width: 520px; height: 520px; border-radius: 50%;
  --d15-h: var(--hf-hero-h);
  background: radial-gradient(closest-side, #fff4fc70 0, #f6dcff40 28%, #cdb2ff1a 58%, #b497ff00);
  transform: translate3d(calc(var(--px, 0) * 50vw), calc(var(--py, 0) * var(--d15-h) / 2), 0);
  transform: translate3d(round(var(--px, 0) * 50vw, 1px), round(var(--py, 0) * var(--d15-h) / 2, 1px), 0);
  opacity: clamp(.2, .42 + var(--px, 0) * 1.3, 1); will-change: transform, opacity;
}

/* Три плана по глубине: на каждом неоновая фигура, знак и искры. Всё, что стоит в просвете, отсчитано
   от левого края формы (100% − ширина формы), нижний план — от нижней кромки (высота экрана 740–790px). */
.d15-set{ position: absolute; inset: 0; --plx-x: 46px; --plx-y: 34px; }
.d15-set-a{ --d: .6; --plx-s: -260px; }
.d15-set-b{ --d: .74; --plx-s: -120px; }
.d15-set-c{ --d: .9; --plx-s: 90px; }
.d15-neon{
  position: absolute; box-sizing: border-box; border: 5px solid var(--d15-n); rotate: var(--d15-a, 0deg);
  box-shadow: 0 0 14px var(--d15-n), inset 0 0 14px var(--d15-n), 0 0 44px 4px var(--d15-n2);
  animation: d15-float 7s ease-in-out var(--d15-dl, 0s) infinite;
}
@keyframes d15-float{ 50%{ translate: 0 -12px; rotate: calc(var(--d15-a, 0deg) + 4deg); } }
.d15-neon-t{ left: calc(100% - 510px); top: 162px; width: 64px; height: 64px; border: 0; box-shadow: none; --d15-a: 13deg; --d15-dl: -4.1s; }
.d15-neon-t svg{ width: 100%; height: 100%; overflow: visible; }
.d15-neon-c{ left: calc(100% - 498px); top: 540px; width: 54px; height: 54px; border-radius: 50%; --d15-n: #88eaff; --d15-n2: #88eaff38; }
.d15-neon-s{ left: 44%; top: calc(100% - 140px); width: 64px; height: 64px; border-radius: 7px; --d15-n: #ffa5ed; --d15-n2: #ffa5ed38; --d15-a: -14deg; --d15-dl: -2.2s; }
.d15-set span{ position: absolute; font-size: 44px; font-weight: 800; line-height: 1; color: #fff; opacity: .2; }
.d15-plus{ left: calc(100% - 543px); top: 289px; }
.d15-eq{ left: calc(100% - 448px); top: 446px; }
.d15-mul{ left: 38%; top: calc(100% - 86px); font-size: 38px; }
.d15-sp{ position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px #ffffff80; opacity: .7; }
.d15-sp1{ left: calc(100% - 538px); top: 261px; }
.d15-sp2{ left: 44%; top: 183px; width: 4px; height: 4px; }
.d15-sp3{ left: 49.5%; top: 506px; width: 4px; height: 4px; background: #dff9ff; box-shadow: 0 0 12px 3px #88eaff99; }
.d15-sp4{ left: calc(100% - 426px); top: 116px; width: 5px; height: 5px; background: #ffd9f6; box-shadow: 0 0 12px 3px #ffa5ed99; }
.d15-sp5{ left: calc(100% - 448px); top: calc(100% - 90px); }
.d15-sp6{ left: 30%; top: calc(100% - 46px); width: 4px; height: 4px; }
/* Три искры верхнего плана мерцают вместе — одной анимацией на общей обёртке */
.d15-tw{ position: absolute; inset: 0; animation: d15-twinkle 3.6s ease-in-out infinite; }
.d15-tw .d15-sp{ opacity: 1; }
@keyframes d15-twinkle{ 50%{ opacity: .3; } }

/* Стекло переднего плана у правого края: мягкие градиенты вместо размытия */
.d15-glass{ left: calc(100% + 30px); top: 236px; width: 320px; height: 480px; --d: 1.1; --plx-x: 44px; --plx-y: 30px; --plx-s: -260px; }
.d15-plate{
  position: absolute; left: 50px; top: 124px; width: 260px; height: 350px; border-radius: 56px; rotate: -11deg;
  background: linear-gradient(152deg, #ffffff42 0%, #ffffff17 30%, #ffffff08 58%, #ff9be638 100%);
  box-shadow: inset 0 0 6px 1px #ffffff70, inset 0 0 40px #ffffff1f, 0 0 8px #ffffff33;
}
.d15-disc{
  position: absolute; left: 0; top: 0; width: 132px; height: 132px; border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff0 78%, #ffffff57 93%, #fff0),
    radial-gradient(circle at 34% 26%, #ffffff52 0, #ffffff14 34%, #fff0 62%),
    radial-gradient(circle at 70% 78%, #ff9be647 0, #ff9be600 58%),
    radial-gradient(closest-side, #b9a4ff29 0, #b9a4ff24 92%, #b9a4ff00);
}

/* ───────── Адаптив ───────── */
@media (max-width: 1339px){
  .d15-glass{ display: none; will-change: auto; }
}
/* Две узкие колонки: просвета почти нет, фигуры теснее и ходят меньше */
@media (max-width: 1100px){
  .d15-torch{ --d15-h: 704px; opacity: clamp(.12, .24 + var(--px, 0) * 1.4, 1); }
  .d15-rib{ --d15-x: 90px; }
  .d15-set{ --plx-x: 28px; --plx-y: 22px; }
  .d15-neon-t{ left: calc(100% - 460px); top: 138px; width: 52px; height: 52px; }
  .d15-neon-c{ left: calc(100% - 449px); top: 512px; width: 48px; height: 48px; }
  .d15-neon-s{ left: 42.5%; top: 600px; width: 56px; height: 56px; }
  .d15-eq, .d15-mul, .d15-sp3, .d15-sp4{ display: none; }
  .d15-plus{ left: calc(100% - 452px); top: 272px; }
  .d15-sp1{ left: calc(100% - 432px); top: 236px; }
  .d15-sp2{ left: calc(100% - 510px); top: 150px; }
  .d15-sp5{ left: calc(100% - 400px); top: 640px; }
  .d15-sp6{ left: 22%; top: 652px; }
}
@media (max-width: 960px){
  .d15-set-b{ display: none; will-change: auto; }
}
@media (max-width: 900px){
  .d15-neon-t{ left: calc(100% - 420px); top: 118px; width: 46px; height: 46px; }
  .d15-neon-s{ left: 40%; top: 590px; }
  .d15-plus{ display: none; }
  .d15-sp1{ left: calc(100% - 365px); top: 150px; }
  .d15-sp2{ left: 40%; top: 176px; }
  .d15-sp5{ left: 30%; top: 640px; }
  .d15-sp6{ left: 12%; top: 610px; }
}
@media (max-width: 810px){
  .d15-neon-s{ top: 626px; width: 50px; height: 50px; }
}
/* Телефон: фон тот же (две ленты), из подвижного — три неоновые фигуры и искры */
@media (max-width: 760px){
  .d15-grid, .d15-torch{ display: none; will-change: auto; }
  .d15-bg{ --d15-o1: right -250px top -166px / 560px 560px; --d15-o3: 0 0 / 0 0; }
  .d15-rib-c{
    height: 420px; --d15-c: 500px 1170px; --d15-r: 1023px 1159px; opacity: .62;
    --d15-g: #a184ff00 12deg, #a184ff 30deg, #ff86d8 52deg, #ff86d800 74deg;
  }
  .d15-rib-a{
    left: 0; right: 0; top: auto; width: auto; height: 260px; --d15-c: 50% -620px; --d15-r: 635px 881px;
    --d15-g: #ff86d800 138deg, #ff86d8 160deg, #a184ff 180deg, #63e3ff 200deg, #63e3ff00 222deg;
    --d15-m: #0000 76%, #0002 82%, #0006 90%, #000b 95%, #000 97.6%, #0000;
  }
  .d15-ring-c{ width: 620px; height: 620px; left: -350px; top: 184px; }
  .d15-ring-s{ width: 300px; height: 300px; right: -150px; top: -36px; }
  .d15-bg::after{ left: -30%; top: 104px; width: 160%; height: 470px; }
  .d15-set-b{ display: block; will-change: transform; }
  .d15-neon{ border-width: 4px; }
  .d15-neon-t{ left: auto; right: 8px; top: 92px; width: 40px; height: 40px; }
  .d15-neon-c{ left: auto; right: 14%; top: auto; bottom: 24px; width: 34px; height: 34px; }
  .d15-neon-s{ left: 12%; top: auto; bottom: 20px; width: 38px; height: 38px; }
  .d15-sp1{ left: auto; right: 78px; top: 132px; }
  .d15-sp2, .d15-sp6{ display: none; }
  .d15-tw{ animation: none; }
  .d15-sp5{ left: 44%; top: auto; bottom: 46px; }
}