/* Анимации-презентации для страницы входа (варианты: cube / layers / ring / particles). Панель .fxpanel — ночная синяя, как на входе. */
.fxpanel{--or:#ffa24a;--blue:#5fd4ff;--vio:#c3a6ff;--green:#4ad295;--card:#131b28;--card-2:#1a2435;--bub:#223049;--tx:#e9eef6;--tx-2:#c9d2e2;--tx-3:#8f9bb0;--line:rgba(190,215,255,.14);
  position:relative;overflow:hidden;color:#fff;font-family:'Onest',sans-serif;display:grid;grid-template-rows:1fr auto;
  background:radial-gradient(60% 50% at 50% 42%,rgba(95,212,255,.13) 0%,transparent 70%),radial-gradient(40% 30% at 70% 80%,rgba(255,162,74,.08) 0%,transparent 70%),linear-gradient(180deg,#1a2644 0%,#0b111b 100%);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fxpanel::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(190,215,255,.15) 1px,transparent 1.4px);background-size:22px 22px;
  mask-image:radial-gradient(70% 60% at 50% 48%,#000 0%,transparent 85%);-webkit-mask-image:radial-gradient(70% 60% at 50% 48%,#000 0%,transparent 85%)}
.fxpanel>*{transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1)}
.fxpanel.fxout>*{opacity:0;transform:scale(.96)}
.fxscene{position:relative;display:grid;place-items:center;perspective:1100px;min-height:0;cursor:grab}
.fxscene:active{cursor:grabbing}
.fxcap{position:relative;display:grid;justify-items:center;gap:6px;padding:0 24px 30px;text-align:center;min-height:104px}
.fxcap b{font-size:22px;font-weight:800;letter-spacing:-.025em;transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.fxcap span{max-width:340px;font-size:14.5px;line-height:1.45;color:#b9c4d6;transition:opacity .4s .05s}
.fxcap.swap b,.fxcap.swap span{opacity:0;transform:translateY(6px)}
.fxdots{display:flex;gap:6px;margin-top:4px}
.fxdots i{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.2);transition:background .3s,width .3s}
.fxdots i.on{width:20px;border-radius:2px;background:var(--or)}

/* мини-экраны программы (общие для куба, слоёв, кольца) */
.mini{position:absolute;inset:0;padding:16px;border-radius:16px;background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);color:var(--tx);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mini h6{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:700;color:var(--tx-3);letter-spacing:.01em}
.mini h6 i{width:8px;height:8px;border-radius:50%;background:var(--or)}
.mini .t{font-size:17px;font-weight:700;margin-bottom:10px}
.mini .l{display:flex;align-items:center;gap:8px;height:24px;font-size:12px;color:var(--tx-2)}
.mini .l::before{content:'';width:11px;height:11px;border-radius:3px;border:1.4px solid #5b6a82;flex:none}
.mini .l.d{color:#8d99ae;text-decoration:line-through}.mini .l.d::before{background:var(--or);border-color:var(--or)}
.mini .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mini .cols>div{display:grid;gap:5px;align-content:start;padding:6px;border-radius:8px;background:rgba(255,255,255,.04);min-height:120px}
.mini .cols small{font-size:9.5px;font-weight:700;color:var(--tx-3)}
.mini .cols p{margin:0;padding:6px;border-radius:6px;background:var(--bub);font-size:10px;line-height:1.25}
.mini .row{display:flex;align-items:center;justify-content:space-between;height:30px;border-bottom:1px solid rgba(190,215,255,.07);font-size:11.5px}
.mini .tag{padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600}
.tg-w{color:var(--green);background:rgba(74,210,149,.14)}.tg-t{color:#ffc46b;background:rgba(255,196,107,.13)}.tg-n{color:#aab4c4;background:rgba(170,180,196,.13)}
.mini .sum{margin-top:10px;display:flex;justify-content:space-between;font-size:11px;color:var(--tx-3)}.mini .sum b{color:var(--green);font-size:14px}
.mini .bub{max-width:80%;margin-bottom:7px;padding:7px 9px;border-radius:8px 8px 8px 3px;background:var(--bub);font-size:11px;line-height:1.3}
.mini .bub em{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:var(--blue)}
.mini .bub.me{margin-left:auto;border-radius:8px 8px 3px 8px;background:rgba(255,162,74,.2)}
.mini .wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:4px 0 10px}
.mini .wk i{height:20px;border-radius:5px;background:rgba(255,255,255,.06)}.mini .wk i.on{background:var(--or)}
.mini .lock{display:inline-flex;padding:3px 8px;border-radius:6px;background:rgba(95,212,255,.12);color:var(--blue);font-size:10px;font-weight:600;margin-bottom:8px}
.mini .url{display:flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;background:#0f1622;font-size:10px;color:var(--tx-2);margin-bottom:10px}
.mini .url::before{content:'';width:7px;height:7px;border:1.4px solid var(--green);border-radius:2px}
.mini .site{border-radius:8px;background:#fbfaf6;color:#16203a;padding:10px}
.mini .site b{display:block;font-size:13px;margin-bottom:4px}.mini .site i{display:block;height:6px;margin-top:5px;border-radius:3px;background:#e2ded3}
.mini .site span{display:inline-block;margin-top:8px;padding:4px 8px;border-radius:6px;background:#16203a;color:#fff;font-size:9.5px}
.mini .ico{position:absolute;right:14px;top:12px;width:30px;height:30px;color:var(--or);opacity:.9}

/* A. куб */
.cube{position:relative;width:250px;height:250px;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.65,0,.25,1)}
.cube .mini{backface-visibility:hidden}
.cube .f0{transform:translateZ(125px)}.cube .f1{transform:rotateY(90deg) translateZ(125px)}.cube .f2{transform:rotateY(180deg) translateZ(125px)}
.cube .f3{transform:rotateY(-90deg) translateZ(125px)}.cube .f4{transform:rotateX(90deg) translateZ(125px)}.cube .f5{transform:rotateX(-90deg) translateZ(125px)}
.cubeshadow{position:absolute;left:50%;top:calc(50% + 175px);width:240px;height:36px;margin-left:-120px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(4px)}

/* B. слои */
.stack{position:relative;width:250px;height:190px;margin-top:150px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);transition:transform .25s ease-out}
.stack .mini{transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.65,0,.25,1),box-shadow 1.4s;box-shadow:0 0 0 1px rgba(190,215,255,.08),0 30px 40px -20px rgba(0,0,0,.7)}
.stack .lbl{position:absolute;left:-14px;top:-14px;padding:4px 10px;border-radius:8px;background:var(--or);color:#1c1206;font-size:12px;font-weight:700;opacity:0;transform:translateZ(1px);transition:opacity .5s}
.stack.open .lbl{opacity:1;transition-delay:.9s}
.stack .ly0{background:linear-gradient(120deg,rgba(95,212,255,.35),rgba(255,162,74,.3)),var(--card)}
.stack .ly3 .lbl{background:var(--blue);color:#06212c}

/* C. кольцо */
.ring{position:relative;width:170px;height:220px;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.ring .card{position:absolute;inset:0;transform-style:preserve-3d;transition:filter .6s}
.ring .card .mini{backface-visibility:hidden;padding:12px;transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .8s}
.ring .card .mini .t{font-size:14px}
.ring .card:not(.front) .mini{filter:saturate(.6) brightness(.7)}
.ring .card.front .mini{transform:scale(1.18);box-shadow:0 0 0 2px var(--or),0 30px 50px -20px rgba(0,0,0,.9)}
.ring .card .mini .ico{width:26px;height:26px}

/* D. частицы */
.fxcanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

@media (prefers-reduced-motion:reduce){.cube,.stack .mini,.ring{transition:none}}