/* ══════════════════════════════════════════════════════════════
   FLUX · Онбординг «Кино» + политика использования (вариант В1)
   Полноэкранные фото-слайды: пейджер за пальцем, параллакс,
   финал — галочка согласия и круговое раскрытие в кабинет.
   Источник дизайна: promo/onboard-lab (вариант 1).
   Позиции слайдов ведёт JS (WAAPI): CSS-transition намеренно
   не используется для движения — см. движок в flux-onboard.js.
   ══════════════════════════════════════════════════════════════ */

.fo-ovl{
  position:fixed;inset:0;z-index:5200;
  background:#040A08;font-family:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility 0s .3s;
  --acc:#2FE0A0;--acc-lt:#7BFFCF;
  --fo-sat:env(safe-area-inset-top, 0px);
  --fo-sab:env(safe-area-inset-bottom, 0px);
  --eOut:cubic-bezier(.22,1,.36,1);
  --eSpr:cubic-bezier(.34,1.56,.64,1);
  --eIO:cubic-bezier(.65,0,.35,1);
}
.fo-ovl.open{opacity:1;visibility:visible;transition:opacity .3s ease}
.fo-ovl.supp{--acc:#4DA8FF;--acc-lt:#9AD2FF}

/* ── пейджер ── */
.fo-stage{position:absolute;inset:0;touch-action:pan-y;cursor:grab;overflow:hidden}
.fo-stage.grab{cursor:grabbing}
.fo-slide{position:absolute;inset:0;transform:translateX(100%);visibility:hidden;will-change:transform;overflow:hidden}
.fo-slide.vis{visibility:visible}
.fo-media{position:absolute;inset:-26px;overflow:hidden;will-change:transform}
.fo-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.16);filter:saturate(1.06) contrast(1.02);
}
@keyframes foKbA{0%{transform:scale(1.2) translate(1.6%,1.2%)}100%{transform:scale(1.09) translate(-.8%,-.8%)}}
@keyframes foKbB{0%{transform:scale(1.2) translate(-1.6%,.6%)}100%{transform:scale(1.09) translate(1%,-1%)}}
.fo-slide.on .fo-media img.ka{animation:foKbA 8.5s var(--eOut) forwards}
.fo-slide.on .fo-media img.kb{animation:foKbB 8.5s var(--eOut) forwards}
.fo-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(4,10,8,.42) 0%, rgba(4,10,8,0) 26%, rgba(4,10,8,0) 44%, rgba(4,10,8,.62) 72%, rgba(4,10,8,.92) 100%)}
.fo-vin{position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.38)}
.fo-dimm{position:absolute;inset:0;background:#020705;opacity:0;pointer-events:none}

.fo-txt{position:absolute;left:26px;right:26px;bottom:calc(112px + var(--fo-sab));will-change:transform}
.fo-eye{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--acc-lt);font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
}
.fo-eye::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.fo-h{color:#fff;font-size:37px;line-height:1.06;font-weight:800;letter-spacing:-.6px;margin:12px 0 12px;text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.45)}
.fo-p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.5;font-weight:600;max-width:320px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
@keyframes foUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.fo-slide.intro .fo-eye{animation:foUp .62s var(--eOut) .16s backwards}
.fo-slide.intro .fo-h{animation:foUp .62s var(--eOut) .28s backwards}
.fo-slide.intro .fo-p{animation:foUp .62s var(--eOut) .4s backwards}

/* ── прогресс, шапка ── */
.fo-prog{position:absolute;top:calc(14px + var(--fo-sat));left:16px;right:16px;display:flex;gap:6px;z-index:6}
.fo-seg{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.26);overflow:hidden}
.fo-seg i{display:block;height:100%;width:100%;border-radius:3px;background:#fff;transform:scaleX(0);transform-origin:left center}
.fo-brand{position:absolute;top:calc(30px + var(--fo-sat));left:26px;z-index:6;color:#fff;font:700 13px 'Space Grotesk',Manrope,sans-serif;letter-spacing:.34em;opacity:.92}
.fo-count{position:absolute;top:calc(27px + var(--fo-sat));right:26px;z-index:6;color:rgba(255,255,255,.75);font:700 12px 'Space Grotesk',Manrope,sans-serif;letter-spacing:.12em}
/* крестик закрытия (режим просмотра из профиля) */
.fo-x{
  position:absolute;top:calc(52px + var(--fo-sat));right:20px;z-index:8;width:38px;height:38px;border-radius:50%;
  border:none;cursor:pointer;display:none;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.fo-ovl.view .fo-x{display:grid}

/* ── кнопка «далее» ── */
.fo-next{
  position:absolute;right:24px;bottom:calc(30px + var(--fo-sab));z-index:7;width:60px;height:60px;border-radius:50%;
  border:none;cursor:pointer;display:grid;place-items:center;color:#04110C;
  background:linear-gradient(140deg, var(--acc-lt), var(--acc));
  box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .3s var(--eSpr);
}
.fo-next.hide{opacity:0;pointer-events:none}
.fo-next:active{transform:scale(.92)}

/* ── финальный слайд: политика ── */
.fo-pol .fo-media img{filter:blur(15px) brightness(.62) saturate(1.12);transform:scale(1.24)}
.fo-pol .fo-scrim{background:linear-gradient(180deg, rgba(4,10,8,.6), rgba(4,10,8,.86))}
.fo-polwrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 20px calc(22px + var(--fo-sab));z-index:5}
.fo-polcard{
  border-radius:26px;padding:22px 20px 20px;
  background:linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  /* низкие экраны: карточка не должна уезжать под сторис-прогресс */
  max-height:calc(100vh - 118px);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.fo-polttl{color:#fff;font-size:24px;font-weight:800;letter-spacing:-.3px}
.fo-polsub{color:rgba(255,255,255,.6);font-size:12.5px;font-weight:600;margin:4px 0 14px}
.fo-prow{display:flex;gap:12px;align-items:flex-start;padding:8px 0;opacity:0}
.fo-slide.on .fo-prow{animation:foUp .55s var(--eOut) both}
.fo-prow .ic{flex:0 0 34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:var(--acc-lt)}
.fo-prow p{color:rgba(255,255,255,.88);font-size:12.8px;line-height:1.42;font-weight:600;padding-top:2px;margin:0}
.fo-full{color:rgba(255,255,255,.45);font-size:11px;font-weight:600;margin-top:8px}
.fo-full b{color:rgba(255,255,255,.7)}

/* строка согласия */
.fo-agree{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:18px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  transition:background .3s ease, border-color .3s ease;position:relative}
.fo-agree.ok{background:rgba(255,255,255,.11);border-color:var(--acc)}
.fo-ck{position:relative;flex:0 0 30px;height:30px;border-radius:10px;border:2px solid rgba(255,255,255,.4);
  transition:border-color .25s ease, background .3s var(--eSpr)}
.fo-agree.ok .fo-ck{background:linear-gradient(140deg, var(--acc-lt), var(--acc));border-color:transparent;
  animation:foCkPop .5s var(--eSpr) both}
@keyframes foCkPop{0%{transform:scale(.86)}55%{transform:scale(1.14)}100%{transform:scale(1.06)}}
.fo-ck svg{position:absolute;inset:0;margin:auto;width:18px;height:18px;color:#04110C}
.fo-ck path{stroke-dasharray:24;stroke-dashoffset:24}
@keyframes foDrawCk{to{stroke-dashoffset:0}}
.fo-agree.ok .fo-ck path{animation:foDrawCk .4s var(--eOut) .1s forwards}
.fo-agree span{color:rgba(255,255,255,.85);font-size:12.6px;font-weight:700;line-height:1.35}
.fo-agree .sp{position:absolute;left:27px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--acc-lt);opacity:0;pointer-events:none}
@keyframes foSpFly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.3)}}
.fo-agree.ok .sp{animation:foSpFly .7s var(--eOut) .12s forwards}

/* CTA */
.fo-cta{
  margin-top:12px;width:100%;padding:17px;border-radius:19px;border:none;cursor:pointer;
  font:800 15.5px Manrope,sans-serif;color:#04110C;letter-spacing:.01em;
  background:linear-gradient(140deg, var(--acc-lt), var(--acc));
  opacity:.35;filter:saturate(.4);pointer-events:none;transform:translateZ(0);
  box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
@keyframes foCtaIn{from{opacity:.35;filter:saturate(.4)}to{opacity:1;filter:none}}
@keyframes foCtaPulse{0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 14px 44px rgba(0,0,0,.5), 0 0 34px var(--acc), inset 0 1px 0 rgba(255,255,255,.5)}}
.fo-cta.ready{pointer-events:auto;animation:foCtaIn .45s var(--eOut) both, foCtaPulse 2.2s ease 1.2s infinite}
.fo-cta:active{transform:scale(.97)}

/* ── круговое раскрытие кабинета ── */
.fo-reveal{position:absolute;inset:0;z-index:20;visibility:hidden;clip-path:circle(0px at 50% 80%)}
.fo-reveal.go{visibility:visible}
.fo-flash{position:absolute;z-index:19;width:14px;height:14px;border-radius:50%;left:0;top:0;pointer-events:none;opacity:0;
  border:2px solid var(--acc-lt)}
@keyframes foRingOut{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(9)}}
.fo-flash.go{animation:foRingOut .8s var(--eOut) forwards}

/* ── сцена «кабинет готов» ── */
.fo-cab{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% -10%, #0C241C 0%, #06130E 60%, #04100B 100%)}
.fo-ovl.supp .fo-cab{background:radial-gradient(120% 80% at 50% -10%, #0B1B2C 0%, #071018 60%, #050C12 100%)}
.fo-cab .aur{position:absolute;inset:0;overflow:hidden;filter:blur(80px);opacity:.5}
.fo-cab .aur i{position:absolute;border-radius:50%}
.fo-cab .aur .x1{width:300px;height:300px;left:-70px;top:-60px;background:var(--acc)}
.fo-cab .aur .x2{width:260px;height:260px;right:-70px;top:240px;background:#4DA8FF;opacity:.7}
.fo-cabin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 30px;text-align:center}
.fo-badge{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:linear-gradient(140deg, var(--acc-lt), var(--acc));
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.55);
  transform:scale(0);opacity:0}
.fo-cab.show .fo-badge{animation:foBadge .7s var(--eSpr) .15s forwards}
@keyframes foBadge{0%{transform:scale(0);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
.fo-badge svg{width:40px;height:40px;color:#04110C}
.fo-badge path{stroke-dasharray:34;stroke-dashoffset:34}
.fo-cab.show .fo-badge path{animation:foDraw .5s var(--eOut) .5s forwards}
@keyframes foDraw{to{stroke-dashoffset:0}}
.fo-halo{position:absolute;width:86px;height:86px;border-radius:50%;border:2px solid var(--acc-lt);opacity:0}
.fo-cab.show .fo-halo{animation:foHalo 1.1s var(--eOut) .45s forwards}
@keyframes foHalo{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.fo-cabh{color:#F2FBF6;font-size:26px;font-weight:800;letter-spacing:-.4px;margin-top:22px;opacity:0;transform:translateY(18px)}
.fo-cabs{color:rgba(242,251,246,.6);font-size:13.5px;font-weight:600;margin-top:6px;opacity:0;transform:translateY(18px)}
.fo-cab.show .fo-cabh{animation:foUp2 .6s var(--eOut) .65s forwards}
.fo-cab.show .fo-cabs{animation:foUp2 .6s var(--eOut) .78s forwards}
@keyframes foUp2{to{opacity:1;transform:none}}
.fo-cards{margin-top:26px;width:100%;display:flex;flex-direction:column;gap:10px}
.fo-card{display:flex;gap:13px;align-items:center;text-align:left;padding:15px 16px;border-radius:20px;
  background:linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0;transform:translateY(26px) scale(.97)}
.fo-cab.show .fo-card{animation:foCardUp .65s var(--eOut) forwards}
.fo-cab.show .fo-card:nth-child(1){animation-delay:.95s}
.fo-cab.show .fo-card:nth-child(2){animation-delay:1.09s}
.fo-cab.show .fo-card:nth-child(3){animation-delay:1.23s}
@keyframes foCardUp{to{opacity:1;transform:none}}
.fo-card .ic{flex:0 0 42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:var(--acc-lt)}
.fo-card b{display:block;color:#F2FBF6;font-size:14.5px;font-weight:800}
.fo-card span{color:rgba(242,251,246,.55);font-size:12px;font-weight:600}
.fo-cabfoot{position:absolute;left:0;right:0;bottom:calc(34px + var(--fo-sab));text-align:center;
  color:rgba(242,251,246,.4);font:700 11.5px Manrope,sans-serif;letter-spacing:.08em;opacity:0}
.fo-cab.show .fo-cabfoot{animation:foUp2 .6s var(--eOut) 1.5s forwards}

@media (prefers-reduced-motion:reduce){
  .fo-slide.on .fo-media img.ka,.fo-slide.on .fo-media img.kb{animation:none}
}