/* Varmint UI — общие компоненты и анимации для лендинга и кабинета.
   Используются токены страницы: --ink, --muted, --line, --sky, --lime, --grad, --sans, --mono. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.9);
  --glass-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 48px -24px rgba(16,60,110,.42),0 2px 6px -2px rgba(16,60,110,.12);
}

/* ---------- касания на телефоне: без системного синего прямоугольника ---------- */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,input,textarea,[role=button],[role=option],[data-buy],[data-burger]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* рамка фокуса — только при работе с клавиатуры, не после тапа */
:focus:not(:focus-visible){outline:none}

/* ---------- типографика: без переносов по слогам, предложения — блоками (см. ui.js) ---------- */
html{-webkit-hyphens:manual;hyphens:manual}
.ty-s{display:block}

/* ---------- переходы между страницами (Chrome, Edge, Safari 18+) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s var(--ease-out) both}
::view-transition-new(root){animation:vt-in .38s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;filter:blur(6px);transform:scale(.992)}}
@keyframes vt-in{from{opacity:0;filter:blur(8px);transform:translateY(8px)}}

/* ---------- стекло: шапка «оживает» при прокрутке ---------- */
.ui-glassbar{transition:background-color .4s var(--ease-out),box-shadow .4s var(--ease-out),backdrop-filter .4s var(--ease-out),-webkit-backdrop-filter .4s var(--ease-out),transform .4s var(--ease-out)}
.ui-scrolled .ui-glassbar{background-color:rgba(255,255,255,.66)!important;-webkit-backdrop-filter:blur(28px) saturate(1.9);backdrop-filter:blur(28px) saturate(1.9);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 18px 40px -22px rgba(16,60,110,.45)!important}

/* ---------- появление при прокрутке ---------- */
.ui-anim .ui-reveal{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px);
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),filter .7s var(--ease-out);transition-delay:var(--ui-d,0ms)}
.ui-anim .ui-reveal.ui-in{opacity:1;transform:none;filter:none}

/* ---------- кнопки: нажатие, подъём, блик за курсором ---------- */
.btn,.ck-btns button,.cp-btn,.chips-row button,.tier,.mic,.burger,.m-close{
  transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-out),background-color .3s,color .3s,border-color .3s,filter .3s}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%)}
@media (hover:hover){
  .btn:hover::after{opacity:1}
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(16,60,110,.55)}
}
.btn:active,.ck-btns button:active,.cp-btn:active,.chips-row button:active,.mic:active,.burger:active{transform:scale(.96);transition-duration:.12s}
.btn-main::after,.ck-all::after{background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(182,242,58,.35),transparent 60%)}

/* ---------- поля ввода ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,.ui-select-btn{
  transition:border-color .25s,box-shadow .35s var(--ease-out),background-color .25s}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,textarea:focus{
  box-shadow:0 0 0 4px rgba(56,189,248,.18),0 10px 24px -18px rgba(31,123,234,.6)}
::placeholder{transition:opacity .25s,transform .25s}
:focus::placeholder{opacity:.45;transform:translateX(4px)}

/* чекбокс и радио */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-height:0;margin:0;padding:0;box-sizing:border-box;flex:none;cursor:pointer;display:inline-grid;place-items:center;
  border:1.5px solid rgba(10,26,43,.25);background:#fff;transition:border-color .2s,background .25s,box-shadow .3s}
input[type=checkbox]{border-radius:6px}
input[type=radio]{border-radius:50%}
input[type=checkbox]::before{content:"";width:10px;height:6px;border:2.5px solid #0A1A2B;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .3s var(--ease-spring)}
input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:#0A1A2B;transform:scale(0);transition:transform .3s var(--ease-spring)}
input[type=checkbox]:checked,input[type=radio]:checked{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:2px solid transparent}
input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}
input[type=radio]:checked::before{transform:scale(1)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{box-shadow:0 0 0 4px rgba(56,189,248,.25)}

/* ползунок */
input[type=range]{-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer;width:100%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,#9BE626,#3DD6C4 50%,#2E9BF0) 0/var(--ui-fill,50%) 100% no-repeat,rgba(10,26,43,.1)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:rgba(10,26,43,.1)}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--grad)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:2px solid #fff;
  box-shadow:0 0 0 2px #3DD6C4,0 6px 14px -4px rgba(16,60,110,.5);transition:transform .3s var(--ease-spring)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #3DD6C4;box-shadow:0 6px 14px -4px rgba(16,60,110,.5)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}

/* ---------- собственный выпадающий список ---------- */
.ui-select{position:relative;display:inline-block;min-width:0;vertical-align:middle}
.ui-select.ui-block{display:block;width:100%}
.ui-select select{position:absolute!important;inset:0;opacity:0!important;pointer-events:none;width:100%;height:100%}
.ui-select-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;cursor:pointer;text-align:left;
  font:inherit;font-size:15px;color:var(--ink);padding:10px 12px 10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.95)}
.ui-select-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ui-select-btn:hover{border-color:rgba(56,189,248,.55)}
.ui-select-btn:focus-visible,.ui-select.ui-open .ui-select-btn{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(56,189,248,.18)}
.ui-select-btn i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(10,26,43,.06);transition:transform .45s var(--ease-spring),background .3s}
.ui-select-btn i::before{content:"";width:6px;height:6px;border:2px solid currentColor;border-top:0;border-left:0;transform:translateY(-1px) rotate(45deg)}
.ui-select.ui-open .ui-select-btn i{transform:rotate(180deg);background:rgba(182,242,58,.5)}
.ui-select.ui-pill .ui-select-btn{border-radius:999px;font-weight:600;padding:10px 12px 10px 16px}
.ui-pop{position:fixed;z-index:60;min-width:200px;max-height:min(320px,60vh);overflow:auto;overscroll-behavior:contain;padding:6px;border-radius:16px;
  background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  transform-origin:var(--ui-origin,top center);opacity:0;transform:translateY(-6px) scale(.96);filter:blur(4px);pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .32s var(--ease-spring),filter .25s var(--ease-out)}
.ui-pop.ui-show{opacity:1;transform:none;filter:none;pointer-events:auto}
.ui-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:11px;cursor:pointer;font-size:15px;color:var(--ink);
  transition:background-color .2s,transform .25s var(--ease-out);opacity:0;transform:translateY(-4px)}
.ui-pop.ui-show .ui-opt{opacity:1;transform:none;transition:background-color .2s,opacity .3s var(--ease-out),transform .35s var(--ease-out);transition-delay:calc(var(--i,0) * 18ms)}
.ui-opt:hover,.ui-opt.ui-active{background:rgba(255,255,255,.9)}
.ui-opt[aria-selected=true]{font-weight:600}
.ui-opt[aria-selected=true]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px rgba(182,242,58,.35);flex:none}
.ui-opt[aria-disabled=true]{opacity:.4;pointer-events:none}

/* ---------- раскрывающиеся блоки (FAQ, описания) ---------- */
details>summary{transition:color .2s}
details>summary::after{transition:transform .45s var(--ease-spring)}
details[open]>summary::after{transform:rotate(180deg)}
.ui-details-body{overflow:hidden}

/* ---------- модалки и меню ---------- */
.modal:not([hidden]){animation:ui-fade .3s var(--ease-out) both}
.modal:not([hidden]) .modal-card{animation:ui-pop-in .5s var(--ease-spring) both}
@keyframes ui-fade{from{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes ui-pop-in{from{opacity:0;transform:translateY(16px) scale(.94);filter:blur(6px)}}
.mnav{transform-origin:top right;transition:opacity .28s var(--ease-out),transform .45s var(--ease-spring),filter .28s}
.mnav.ui-closing{opacity:0;transform:translateY(-8px) scale(.96);filter:blur(4px)}
.mnav:not([hidden]){animation:ui-menu .45s var(--ease-spring) both}
.mnav:not([hidden]) a{animation:ui-item .45s var(--ease-out) both}
.mnav:not([hidden]) a:nth-child(2){animation-delay:30ms}.mnav:not([hidden]) a:nth-child(3){animation-delay:60ms}
.mnav:not([hidden]) a:nth-child(4){animation-delay:90ms}.mnav:not([hidden]) a:nth-child(5){animation-delay:120ms}
@keyframes ui-menu{from{opacity:0;transform:translateY(-10px) scale(.95);filter:blur(6px)}}
@keyframes ui-item{from{opacity:0;transform:translateX(10px)}}
.burger svg path{transition:d .4s var(--ease-out)}
.burger[aria-expanded=true]{background:rgba(255,255,255,.95);box-shadow:0 0 0 4px rgba(182,242,58,.35)}

/* ---------- тосты (сообщения сервера в кабинете) ---------- */
.ui-toast{position:fixed;z-index:70;right:max(16px,env(safe-area-inset-right,0px));top:calc(16px + env(safe-area-inset-top,0px));max-width:min(380px,calc(100vw - 32px));
  padding:14px 16px 14px 18px;border-radius:16px;font-weight:500;color:var(--ink);display:flex;gap:12px;align-items:flex-start;
  background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  animation:ui-toast-in .55s var(--ease-spring) both}
.ui-toast::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(182,242,58,.3)}
.ui-toast.ui-out{animation:ui-toast-out .35s var(--ease-out) both}
@keyframes ui-toast-in{from{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(6px)}}
@keyframes ui-toast-out{to{opacity:0;transform:translateY(-10px) scale(.97);filter:blur(4px)}}

/* ---------- мелочи ---------- */
.msg{animation:ui-msg .45s var(--ease-spring) both}
@keyframes ui-msg{from{opacity:0;transform:translateY(8px) scale(.97)}}
.bar i{position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-100%);animation:ui-sheen 2.4s ease-in-out infinite}
@keyframes ui-sheen{to{transform:translateX(100%)}}
.card,.glass,.price,.tier,.ex article,.pitem{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s}
@media (hover:hover){.pitem:hover,.price:hover,.ex article:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(16,60,110,.5)}}
.side nav a,.tabs a,.pub-links a,.nav nav a,.toc a{transition:background-color .25s,color .25s,transform .35s var(--ease-spring)}
.side nav a:hover,.toc a:hover{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .ui-anim .ui-reveal{opacity:1;transform:none;filter:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}