/* Вариант 11 «Параллакс: космос фигур» — обложка на общем каркасе (frame.css).
   Здесь только цвета (--hf-*) и сцена. Фирменная фиолетовая палитра: #1b0d52 → #6744d4,
   акценты #f7cd5e #88eaff #ffa5ed #d0ff71.
   Лёгкость: туманности и звёзды неподвижны (фон); движутся пять слоёв — свечение и планы глубины, а не
   отдельные предметы (переменные курсора получают только они); куб и пирамида нарисованы
   SVG-градиентами; анимаций три — парение двух групп планов и мерцание пары искр. */
.hero-des-11{
  --hf-hero-bg:
    radial-gradient(36% 42% at 88% 24%, #ffa5ed42 0, #ffa5ed00 72%),
    radial-gradient(40% 48% at 6% 82%, #88eaff38 0, #88eaff00 72%),
    radial-gradient(30% 38% at 56% 34%, #8a68e740 0, #8a68e700 72%),
    radial-gradient(120% 60% at 50% 112%, #8a68e7 0, #6c49d8 26%, #6744d400 60%),
    radial-gradient(95% 130% at 46% 44%, #1b0d5200 38%, #1b0d52b3 100%),
    linear-gradient(180deg, #1b0d52 0%, #24117a 28%, #3a1f9e 60%, #5433c4 100%);
  --hf-brand-note: #e4dbff; --hf-brand-rule: #ffffff3d;
  --hf-nav-login-bg: #ffffff1c; --hf-nav-login-bg-hover: #ffffff33; --hf-nav-login-border: #ffffff52;
  --hf-nav-register-bg-hover: #efe8ff; --hf-nav-register-ink: #3a1f9e;

  --hf-h1-accent: #f7cd5e; --hf-h1-accent-bg: linear-gradient(180deg, #fff3b8 6%, #f7cd5e 52%, #f4b548 96%); --hf-h1-accent-fill: transparent;
  --hf-h1-shadow: 0 4px 34px #12063f80;
  --hf-copy: #efe9ff;
  --hf-pill1-bg: #ffffff1c; --hf-pill1-ink: #fff; --hf-pill1-border: #ffffff4d;
  --hf-pill2-bg: linear-gradient(180deg, #ffe085, #f7cd5e); --hf-pill2-ink: #24153f; --hf-pill2-border: #ffeaa8;
  --hf-pill3-bg: #ffffff1c; --hf-pill3-ink: #fff; --hf-pill3-border: #ffffff4d;
  --hf-dates-bg: #ffffff14; --hf-dates-border: #ffffff3d; --hf-dates-bar: linear-gradient(180deg, #ffe085, #f7cd5e);
  --hf-dates-ink: #f4efff; --hf-dates-shadow: inset 0 1px 0 #ffffff24;

  --hf-card-ink: #24153f; --hf-card-shadow: 0 2px 6px #0d04382e, 0 28px 56px -22px #0e0440e6, 0 0 76px -8px #b9a4ff8c;
  --hf-label: #544a6e; --hf-muted: #6a6285; --hf-rule: #ebe6f6;
  --hf-field-border: #dcd5ee; --hf-field-ink: #24153f; --hf-placeholder: #6f6890;
  --hf-link: #5b3bbf;
  --hf-action: #6744d4; --hf-action-hover: #5535c4;
  --hf-action-bg: linear-gradient(180deg, #7f5bee 0%, #6744d4 48%, #5433c4 100%);
  --hf-action-bg-hover: linear-gradient(180deg, #7350e4 0%, #5b39c9 48%, #4829b3 100%);
  --hf-action-shadow: inset 0 1px 0 #ffffff52, 0 14px 26px -12px #5433c4e6;
  --hf-alt-bg: #f4f0fd; --hf-alt-bg-hover: #eae1fb; --hf-alt-border: #e0d6f6; --hf-alt-border-hover: #b9a4ff; --hf-alt-ink: #3d2a66;
  --hf-focus: #6744d4; --hf-focus-ring: #6744d440;
  --hf-fact-icon: #6744d4;
}
/* Краска поверх каркаса: тень заголовка не должна ложиться на градиентную строку; блик стекла у плашек. */
.hero-des-11 .hero h1 span{ text-shadow: none; }
.hero-des-11 .hero-labels .pill{ box-shadow: inset 0 1px 0 #ffffff38; }
.hero-des-11 .hero-labels .pill:nth-child(2){ box-shadow: 0 8px 22px -8px #f7cd5ebf, inset 0 1px 0 #ffffff80; }

/* ───────── Неподвижный фон сцены ───────── */
.d11-sky, .d11-halo, .d11-horizon{ position: absolute; }
/* Звёзды. Тусклая «пыль» — везде; яркие — только на полях и правее текста, чтобы точки не спорили с буквами.
   Плитки привязаны к центру: относительно колонки текста звёзды стоят одинаково при любой ширине окна. */
.d11-sky{ inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='540' fill='none' stroke-linecap='round'%3E%3Cpath stroke='%23fff' stroke-width='1.4' opacity='.4' d='M467 480h0M605 198h0M528 491h0M194 100h0M149 96h0M68 64h0M535 243h0M515 8h0M472 288h0M326 239h0M34 75h0M114 414h0M301 399h0M21 4h0M57 485h0M410 433h0M207 280h0M322 344h0M423 124h0M107 15h0M502 185h0M196 462h0M138 433h0M123 408h0M221 4h0M24 219h0M594 106h0M153 222h0M399 79h0M217 252h0M381 384h0M142 399h0M259 198h0M571 205h0M401 498h0M435 52h0'/%3E%3Cpath stroke='%23fff' stroke-width='1.8' opacity='.5' d='M46 409h0M165 19h0M251 34h0M609 455h0M568 89h0M610 315h0M13 340h0M134 499h0M161 322h0M43 528h0'/%3E%3C/svg%3E") 50% 0; }
.d11-sky::before, .d11-sky::after{ content: ""; position: absolute; inset: 0 0 0 calc(50% + 130px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='470' fill='none' stroke-linecap='round'%3E%3Cpath stroke='%2388eaff' stroke-width='2.8' opacity='.72' d='M322 134h0'/%3E%3Cpath stroke='%23b9a4ff' stroke-width='2.8' opacity='.8' d='M130 198h0M164 105h0'/%3E%3Cpath stroke='%23fff' stroke-width='2.2' opacity='.62' d='M18 434h0M131 336h0M84 61h0M297 131h0M114 212h0M396 203h0M412 40h0M320 231h0M4 450h0M88 450h0M351 324h0'/%3E%3Cpath stroke='%23fff' stroke-width='3.2' opacity='.85' d='M411 357h0M382 337h0M400 114h0'/%3E%3C/svg%3E"); }
.d11-sky::before{ inset: 0 calc(50% + 580px) 0 0; background-position: 100% 0; }
/* Мягкое сиреневое свечение за формой входа (центр — центр формы). */
.d11-halo{
  left: min(calc(50% + 90px), calc(100% - 502px)); top: 9px; width: 560px; height: 760px;
  background: radial-gradient(closest-side, #b9a4ff73 0, #8a68e742 56%, #8a68e700 100%);
}
/* «Горизонт планеты» — белая дуга, переход к полосе фактов. */
.d11-horizon{
  left: -50%; width: 200%; height: 560px; top: calc(100% - 40px); border-radius: 50%; background: #fff;
  box-shadow: 0 -2px 7px #ffffffa6, 0 -7px 22px #d9ccff66, 0 -18px 54px #b9a4ff40;
}

/* ───────── Слои параллакса ─────────
   Движутся пять слоёв .plx: свечение под формой и четыре плана глубины — дальний, средний, объёмные тела, ближний.
   Глубина --d и ход при прокрутке --plx-s заданы у каждого плана; три ближних ещё и приближаются при прокрутке:
   план растёт от центра сцены, предметы разлетаются к краям. */
.d11-l{ position: absolute; inset: 0; --plx-x: 60px; --plx-y: 40px; }
.d11-l > *{ position: absolute; }
/* Обёртка планов: появление и собственное парение. Появление — предметы слетаются на места снаружи, от краёв:
   только transform, без прозрачности, и ни один не проходит над текстом. Парение — средний план в одном ритме,
   тела и ближний план в другом; лёгкий поворот вокруг центра сцены даёт предметам разный ход. */
.d11-fl{
  position: absolute; inset: 0;
  animation: d11-in .9s cubic-bezier(.16, 1, .3, 1) backwards, d11-float 11s ease-in-out infinite;
}
.d11-fl-b{ animation-delay: .08s, -3s; animation-duration: .9s, 8.5s; --d11-ax: -4px; --d11-ay: 12px; --d11-ar: -.7deg; }
@keyframes d11-in{ from{ scale: 1.16; } }
@keyframes d11-float{ 50%{ transform: translate3d(var(--d11-ax, 5px), var(--d11-ay, -10px), 0) rotate(var(--d11-ar, .7deg)); } }

/* 1. Дальний план: огромные контурные фигуры, знаки и искры (вне текста) */
.d11-back{ --d: .32; --plx-s: 190px; }
.d11-big-c{ width: 740px; height: 740px; left: -325px; top: 116px; }
.d11-big-t{ width: 620px; height: 620px; left: 36%; bottom: -240px; transform: rotate(17deg); }
/* Квадрат привязан к колонке: его угол прячется под белой кнопкой «Регистрация» и не задевает «Вход». */
.d11-big-s{ position: absolute; width: 520px; height: 520px; left: calc(100% - 64px); top: -78px; transform: rotate(-17deg); }
.d11-sg{ position: absolute; font-weight: 700; font-size: 18px; line-height: 1; color: #b9a4ff; opacity: .55; }
.d11-sg-1{ left: 476px; top: 120px; }
.d11-sg-2{ left: 690px; top: 290px; font-size: 16px; color: #88eaff; opacity: .5; }
.d11-sg-3{ left: 716px; top: 344px; }
.d11-sg-4{ left: -62px; top: 376px; font-size: 20px; }
.d11-sg-5{ left: -138px; top: 632px; font-size: 16px; color: #ffa5ed; opacity: .5; }
.d11-sg-6{ left: calc(100% + 44px); top: 312px; }
.d11-sg-7{ left: calc(100% + 98px); top: 500px; font-size: 16px; color: #88eaff; opacity: .5; }
.d11-sg-8{ left: 304px; bottom: 82px; }
.d11-sg-9{ left: 150px; bottom: 100px; font-size: 14px; color: #f7cd5e; opacity: .5; }
.d11-tw{
  position: absolute; width: 14px; height: 14px; background: #fff;
  -webkit-clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.d11-twk{ position: absolute; inset: 0; animation: d11-twinkle 3.8s ease-in-out infinite; }
.d11-tw-1{ left: 510px; top: 164px; }
.d11-tw-2{ left: -42px; top: 290px; width: 11px; height: 11px; opacity: .7; }
.d11-tw-3{ left: 714px; top: 254px; width: 10px; height: 10px; background: #88eaff; opacity: .8; }
.d11-tw-4{ left: calc(100% + 112px); top: 368px; background: #f7cd5e; opacity: .8; }
.d11-tw-5{ left: 606px; top: 496px; width: 12px; height: 12px; }
@keyframes d11-twinkle{ 50%{ opacity: .2; } }

/* Голубое свечение под формой: свой слой, тянется к курсору (отрицательные амплитуды — движение «к» нему).
   Именно отдельный элемент, а не псевдоэлемент плана: псевдоэлемент, наследующий --px, заставил бы браузер
   пересчитывать на каждый кадр стили всех предметов этого плана. */
.d11-aura{
  position: absolute; right: -25px; top: 174px; width: 430px; height: 430px;
  background: radial-gradient(closest-side, #d6f9ffd9 0, #88eaff8c 42%, #88eaff00 100%);
  --d: 1; --plx-x: -150px; --plx-y: -200px; --plx-s: -24px;
}

/* 2. Средний план: планета, плитки с цифрами, лаймовый шар; справа — неоновое кольцо и (на широких экранах)
      плитка «3»; на левом поле — розовый шар, неоновые треугольник и квадрат */
.d11-mid{ --d: .68; --plx-s: -130px; scale: calc(1 + var(--sy, 0) * .12); }
.d11-planet{ right: 404px; top: 98px; width: 156px; height: 117px; }
.d11-t7{ right: 440px; top: 400px; width: 58px; height: 58px; transform: rotate(9deg); }
/* Лаймовый шар привязан к низу, как пирамида под ним: зазор между ними одинаков при любой высоте экрана. */
.d11-ball-l{ right: 420px; bottom: 226px; width: 34px; height: 34px; }
.d11-tplus{ left: 468px; bottom: 62px; width: 50px; height: 50px; transform: rotate(-10deg); }
.d11-neon-c{ left: calc(100% + 30px); top: 410px; width: 46px; height: 46px; }
.d11-t3{ left: calc(100% + 150px); top: 316px; width: 54px; height: 54px; transform: rotate(-8deg); visibility: hidden; }
.d11-ball-p{ left: -152px; top: 102px; width: 60px; height: 60px; }
.d11-neon-t{ left: -132px; top: 222px; width: 58px; height: 58px; transform: rotate(13deg); }
.d11-neon-s{ left: -134px; top: 506px; width: 52px; height: 52px; transform: rotate(-14deg); }

.d11-tile{
  display: grid; place-items: center; border-radius: 16px; box-sizing: border-box;
  font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(145deg, #ffffff3d, #ffffff12); border: 1px solid #ffffff66;
  box-shadow: 0 0 26px var(--d11-g1), inset 0 0 16px var(--d11-g2), inset 0 1px 0 #ffffff66;
  text-shadow: 0 0 16px var(--d11-g1);
}
.d11-tile-c{ --d11-g1: #88eaffb3; --d11-g2: #88eaff4d; border-color: #88eaffb3; }
.d11-tile-p{ --d11-g1: #ffa5edb3; --d11-g2: #ffa5ed4d; border-color: #ffa5edb3; font-size: 28px; }
.d11-tile-y{
  border-radius: 14px; font-size: 32px; color: #24153f; text-shadow: none;
  background: linear-gradient(160deg, #ffe58c, #f7cd5e 55%, #efb846); border-color: #ffefb5;
  box-shadow: 0 12px 30px -8px #f7cd5eb3, 0 0 30px #f7cd5e4d, inset 0 1px 0 #ffffffa6;
}
.d11-neon{ box-sizing: border-box; border: 5px solid; }
.d11-neon-c{ border-radius: 50%; border-color: #88eaff; box-shadow: 0 0 18px #88eaffb3, inset 0 0 12px #88eaff99; }
.d11-neon-s{ border-radius: 9px; border-color: #ffa5ed; box-shadow: 0 0 18px #ffa5edb3, inset 0 0 12px #ffa5ed99; }

/* 3. Объёмные тела (SVG-градиенты вместо CSS-3D) */
.d11-solids{ --d: 1.02; --plx-s: 0px; scale: calc(1 + var(--sy, 0) * .3); }
.d11-pyr{ right: 362px; bottom: 62px; width: 132px; height: 128px; transform: rotate(-6deg); }
.d11-cube{ left: calc(100% - 14px); top: 126px; width: 130px; height: 134px; transform: rotate(6deg); }

/* 4. Ближний план: большие шары, чуть размытые (не в фокусе) */
.d11-near{ --d: 1.18; --plx-y: 30px; --plx-s: 140px; scale: calc(1 + var(--sy, 0) * .22); }
.d11-ball-m{ left: calc(100% - 28px); bottom: 44px; width: 186px; height: 186px; }
.d11-ball-s{ left: -196px; bottom: -150px; width: 244px; height: 244px; }
.d11-ball{
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, #ffffffd9 0, #ffffff00 21%),
    radial-gradient(circle at 76% 80%, #ffffff00 40%, var(--d11-rim, #ffffff26) 100%),
    radial-gradient(circle at 34% 29%, var(--d11-c1) 0, var(--d11-c2) 46%, var(--d11-c3) 96%);
  box-shadow: 0 0 46px -6px var(--d11-gl);
}
.d11-ball-p{ --d11-c1: #ffd9f6; --d11-c2: #ff9fe9; --d11-c3: #a4319a; --d11-gl: #ffa5ed99; }
.d11-ball-l{ --d11-c1: #f2ffcb; --d11-c2: #d0ff71; --d11-c3: #5c9a1c; --d11-gl: #d0ff7199; }
.d11-ball-s{ --d11-c1: #d2f8ff; --d11-c2: #57bdf2; --d11-c3: #2a2aa6; --d11-gl: #88eaff8c; --d11-rim: #88eaff38; filter: blur(2.5px); }
.d11-ball-m{ --d11-c1: #f1eaff; --d11-c2: #a98bf5; --d11-c3: #34198f; --d11-gl: #b9a4ff80; --d11-rim: #ffa5ed33; filter: blur(2px); }

/* ───────── Адаптив ───────── */
@media (min-width: 1560px){ .d11-t3{ visibility: visible; } }
@media (max-width: 1340px){
  .d11-ball-p, .d11-neon-t, .d11-neon-s{ display: none; }
  .d11-neon-c{ left: calc(100% + 16px); }
}
/* Колонка текста сужается — между текстом и формой места нет. */
@media (max-width: 1199px){ .d11-t7, .d11-ball-l, .d11-neon-c, .d11-sg-2, .d11-sg-3, .d11-tw-3, .d11-tw-5{ display: none; } }

@media (max-width: 1100px){
  .d11-tplus, .d11-ball-m, .d11-sg-1, .d11-sg-4, .d11-sg-5, .d11-sg-6, .d11-sg-7, .d11-tw-2, .d11-tw-4{ display: none; }
  .d11-halo{ left: calc(100% - 492px); top: -2px; }
  .d11-aura{ right: -35px; top: 163px; --plx-x: -110px; }
  .d11-planet{ right: 401px; top: 90px; width: 118px; height: 89px; }
  .d11-pyr{ right: 340px; bottom: 44px; width: 100px; height: 97px; }
  .d11-cube{ left: calc(100% - 70px); top: auto; bottom: 0; width: 110px; height: 114px; }
  .d11-ball-s{ left: -150px; bottom: -150px; width: 220px; height: 220px; }
  .d11-tw-1{ left: auto; right: 380px; top: 196px; }
  .d11-horizon{ top: calc(100% - 34px); }
}
@media (max-width: 900px){
  .d11-sg-8, .d11-sg-9{ display: none; }
  .d11-halo{ left: calc(100% - 437px); width: 500px; }
  .d11-aura{ right: -15px; top: 197px; width: 360px; height: 360px; --plx-x: -70px; --plx-y: -150px; }
  .d11-planet{ right: 361px; top: 82px; width: 104px; height: 78px; }
  .d11-pyr{ right: 318px; }
  .d11-tw-1{ right: 346px; top: 172px; }
}

/* Телефон: остаются контуры, планета и три тела у горизонта (они «всходят» из-за него при прокрутке);
   свечения и фильтров нет, приближения при прокрутке нет. */
@media (max-width: 760px){
  .d11-sky::before, .d11-sky::after, .d11-halo, .d11-aura, .d11-sg, .d11-tw, .d11-twk, .d11-tplus{ display: none; will-change: auto; }
  .d11-l{ --plx-x: 30px; --plx-y: 20px; scale: none; }
  .d11-horizon{ height: 300px; top: calc(100% - 24px); box-shadow: 0 -2px 6px #ffffff99, 0 -6px 18px #d9ccff59; }
  .d11-big-c{ width: 660px; height: 660px; left: -360px; top: 174px; }
  .d11-big-t{ left: -80px; bottom: -230px; }
  .d11-big-s{ width: 310px; height: 310px; left: calc(100% - 46px); top: -39px; }
  .d11-planet{ right: -12px; top: 86px; width: 104px; height: 78px; }
  .d11-solids{ --plx-s: -125px; }
  .d11-pyr{ right: auto; left: 42%; bottom: -34px; width: 82px; height: 79px; }
  .d11-cube{ left: auto; right: -4px; bottom: -32px; width: 78px; height: 81px; }
  .d11-near{ --plx-s: -70px; }
  .d11-ball-s{ left: -70px; bottom: -140px; width: 160px; height: 160px; filter: none; }
  .d11-ball-m{ filter: none; }
}