/* Слой визуальных эффектов.
   Лежит отдельно от site.css и world.css намеренно: базовое оформление
   остаётся рабочим, даже если этот файл не загрузился. Всё движение
   выключается при системном запрете анимаций и при паузе, которую
   включает кнопка в шапке героя. */

:root{
  --fx-cyan:#31d3ff;
  --fx-blue:#3b72ff;
  --fx-pink:#f4538e;
}

/* ---------- Полоса прочтения страницы ---------- */
.fx-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(var(--fx-read,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--fx-cyan),var(--fx-blue) 55%,var(--fx-pink));
  box-shadow:0 0 14px #31d3ff66;z-index:60;pointer-events:none;
}

/* ---------- Северное сияние за тёмными полосами ---------- */
/* Декоративные подложки нарочно шире колонки и шире окна: свечение уходит за края,
   иначе видно, где оно обрывается. Из-за этого внизу страницы появлялась полоса
   прокрутки вправо — особенно у блока с лицензией, которому overflow пришлось
   открыть ради фона во всю ширину, и вместе с фоном перестали обрезаться две
   светящиеся кляксы по 52vw, да ещё и с дрейфом от анимации.

   `clip` вместо `hidden` выбран нарочно: `hidden` сделал бы страницу прокручиваемым
   контейнером и сломал бы плавный переход по якорям и `scroll-padding-top`. Строка с
   `hidden` оставлена первой — для браузеров, которые `clip` ещё не знают; там она
   просто сработает вместо него. */
html{overflow-x:hidden;overflow-x:clip}

.fx-aurora{position:relative;isolation:isolate;overflow:hidden}
/* Блок «Ваша история продолжается» свёрстан внутри .shell шириной 1240 px,
   поэтому его фон обрывался по краям колонки, а не шёл во всю ширину экрана.
   Подложка выносится на всю ширину окна, содержимое остаётся в колонке. */
.license.fx-aurora{overflow:visible}
.license.fx-aurora>*{position:relative;z-index:1}
.license.fx-aurora::before,.license.fx-aurora::after{z-index:0}
.license.fx-aurora .fx-bleed{
  position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#0a1120,#0c1524 45%,#0a0f1b);
  border-block:1px solid #1b2b42;
}
.license.fx-aurora .fx-bleed::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(48vw 60% at 18% 12%,#2a63ff26,transparent 70%),
    radial-gradient(42vw 60% at 88% 88%,#f4538e1f,transparent 70%);
}
.fx-aurora::before,.fx-aurora::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;
  width:52vw;height:52vw;max-width:760px;max-height:760px;
  filter:blur(90px);opacity:.32;pointer-events:none;
}
.fx-aurora::before{background:radial-gradient(circle,var(--fx-blue),transparent 62%);top:-24%;left:-14%;animation:fx-drift-a 26s ease-in-out infinite}
.fx-aurora::after{background:radial-gradient(circle,var(--fx-pink),transparent 62%);bottom:-30%;right:-16%;opacity:.22;animation:fx-drift-b 32s ease-in-out infinite}
@keyframes fx-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,9%,0) scale(1.13)}}
@keyframes fx-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-9%,-7%,0) scale(1)}}

/* ---------- Карточки возможностей: подсветка под курсором ---------- */
.feature-grid article,.detail-grid>div,.facts>div{
  position:relative;border-radius:14px;padding:24px 22px;
  background:linear-gradient(180deg,#101a2b99,#0b111d99);
  border:1px solid #22344e;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s;
}
.feature-grid article{border-top:1px solid #22344e}
.feature-grid article::before,.detail-grid>div::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--fx-x,50%) var(--fx-y,0%),#31d3ff24,transparent 65%);
  opacity:0;transition:opacity .35s;
}
.feature-grid article:hover,.detail-grid>div:hover{
  transform:translateY(-6px);border-color:#2f6f9e;
  box-shadow:0 18px 46px #00101f80,0 0 0 1px #31d3ff33;
}
.feature-grid article:hover::before,.detail-grid>div:hover::before{opacity:1}
.feature-grid .number{
  display:inline-block;font-size:13px;letter-spacing:.14em;
  color:#0a1220;background:linear-gradient(120deg,var(--fx-cyan),var(--fx-blue));
  padding:3px 10px;border-radius:20px;font-weight:700;
}

/* ---------- Заголовок с бегущим отсветом ---------- */
.accent-text{
  background:linear-gradient(100deg,var(--fx-cyan) 0%,#8ce9ff 28%,var(--fx-blue) 52%,var(--fx-pink) 78%,var(--fx-cyan) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fx-sweep 9s linear infinite;
}
@keyframes fx-sweep{to{background-position:280% 0}}

/* ---------- Главная кнопка: живой ореол ---------- */
.hero .actions .button,.download .button,.price-block .button{position:relative;overflow:visible}
.hero .actions .button::after,.download .button::after,.price-block .button::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,var(--fx-cyan),var(--fx-blue),var(--fx-pink),var(--fx-cyan));
  background-size:300% 100%;filter:blur(10px);opacity:.55;
  animation:fx-sweep 7s linear infinite;
}
.hero .actions .button:hover::after,.download .button:hover::after,.price-block .button:hover::after{opacity:.9}

/* ---------- Появление блоков при прокрутке ---------- */
.fx-rise{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.fx-rise.fx-shown{opacity:1;transform:none}

/* ---------- Цена и скидка ---------- */
.price-block{
  border-left:0;border-radius:18px;padding:28px 30px;
  background:linear-gradient(165deg,#12203499,#0a101b99);
  border:1px solid #26405d;box-shadow:0 20px 60px #00060f66;
  position:relative;overflow:hidden;
}
.price-block::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,#31d3ff33,transparent 42%,#f4538e26);
}
.price-was{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:20px}
.price-was s{color:#8fa3c2;text-decoration-color:#f4538e;text-decoration-thickness:2px}
.price-was-inline{color:#8fa3c2;text-decoration-color:#f4538e;text-decoration-thickness:2px;font-size:.62em}
.price-badge{
  display:inline-block;padding:4px 12px;border-radius:20px;font-size:14px;font-weight:750;
  color:#0a1220;background:linear-gradient(120deg,#5ee7a0,#31d3ff);
  box-shadow:0 6px 18px #14b18a4d;animation:fx-badge 2.6s ease-in-out infinite;
}
@keyframes fx-badge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.price{text-shadow:0 0 26px #31d3ff40}

/* ---------- Подсказка в панели администратора ---------- */
.hint{font-size:13px;color:var(--muted);margin:-6px 0 0}
.hint s{text-decoration-color:#f4538e}
.form label small{font-weight:400;color:var(--muted)}

/* ---------- Уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-aurora::before,.fx-aurora::after,.accent-text,
  .hero .actions .button::after,.download .button::after,.price-block .button::after,
  .price-badge{animation:none}
  .fx-rise{opacity:1;transform:none;transition:none}
  .fx-progress{display:none}
}
/* Кнопка паузы в шапке героя гасит и этот слой. */
body.fx-paused .fx-aurora::before,body.fx-paused .fx-aurora::after,
body.fx-paused .accent-text,body.fx-paused .price-badge,
body.fx-paused .hero .actions .button::after,
body.fx-paused .download .button::after,
body.fx-paused .price-block .button::after{animation-play-state:paused}

@media (max-width:850px){
  .fx-aurora::before,.fx-aurora::after{filter:blur(64px);opacity:.24}
  .feature-grid article,.detail-grid>div,.facts>div{padding:20px 18px}
  .price-block{padding:22px 20px}
}