/* ============================================================
   VibeAgent · фирменный узел
   — заставка: узел входит с полным оборотом на 360°
   — логотип, шапка, цитата, «Миссия»: оборот 360° по клику (brand-knot.js)
   — баннер «гайд откроется после входа» на экране входа
   Подключён последним в <head> — перекрывает star-fx.css и inline-стили.
   ============================================================ */

/* ---------- знак в логотипах: хромированный узел ---------- */
.brandknot{display:block;flex:none;object-fit:contain;cursor:pointer;
  -webkit-user-drag:none;user-select:none;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(17,17,20,.16)) drop-shadow(0 4px 10px rgba(98,0,255,.14));
  transition:filter .35s ease}
.wordmark .brandknot{width:28px;height:28px;animation:bk-idle 9s ease-in-out infinite}
.auth .wordmark .brandknot{width:30px;height:30px}
.side .wordmark .brandknot{width:26px;height:26px}
.wordmark:hover .brandknot{filter:drop-shadow(0 2px 3px rgba(17,17,20,.2)) drop-shadow(0 6px 16px rgba(139,61,255,.4))}
/* лёгкое «дыхание» в объёме; старт и финиш в нуле — после оборота ничего не дёргается */
@keyframes bk-idle{
  0%,100%{transform:perspective(600px) rotateY(0deg) rotateX(0deg)}
  25%{transform:perspective(600px) rotateY(-13deg) rotateX(4deg)}
  75%{transform:perspective(600px) rotateY(13deg) rotateX(-4deg)}
}

/* мобильная шапка */
.mobtop__brand{display:flex;align-items:center;gap:9px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mobtop .brandknot{width:24px;height:24px}

/* метка на фото справа */
.auth__mark .brandknot{width:20px;height:20px;animation:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}

/* кликабельные знаки */
.phil__mark,.vs-logo img{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* цитата: вместо плоского «pop» — объёмный оборот из brand-knot.js */
.quote .qstar.go .obj--mark{animation:mark-breathe 7s ease-in-out infinite}

/* ---------- заставка: вход с полным оборотом ---------- */
.splash__obj--knot{
  animation:bk-splash 1.35s cubic-bezier(.2,.85,.25,1) both, knot-float 8s 1.35s ease-in-out infinite;
}
@keyframes bk-splash{
  0%  {opacity:0;transform:perspective(600px) rotateY(-360deg) rotateX(16deg) scale(.6);
       filter:blur(6px) brightness(1) drop-shadow(0 8px 22px rgba(98,0,255,0))}
  55% {opacity:1;transform:perspective(600px) rotateY(-70deg) rotateX(6deg) scale(1.02);
       filter:blur(0) brightness(1.25) drop-shadow(0 10px 30px rgba(139,61,255,.42))}
  82% {opacity:1;transform:perspective(600px) rotateY(10deg) rotateX(0deg) scale(1.03);
       filter:blur(0) brightness(1.08) drop-shadow(0 9px 26px rgba(98,0,255,.22))}
  100%{opacity:1;transform:perspective(600px) rotateY(0deg) rotateX(0deg) scale(1);
       filter:blur(0) brightness(1) drop-shadow(0 8px 22px rgba(98,0,255,.16))}
}

/* ---------- экран входа: гайд откроется после входа ---------- */
.auth-guide{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;flex:none;
  width:100%;max-width:440px;margin:0 0 20px;padding:10px 16px 10px 10px;border-radius:14px;
  background:linear-gradient(120deg,#FFFFFF 0%,#F8F4FF 55%,#F1EAFF 100%);
  border:1px solid rgba(98,0,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 24px rgba(98,0,255,.07);
  animation:ag-in .7s .2s cubic-bezier(.22,1,.36,1) both}
/* один мягкий проход света — дважды и стоп, не отвлекает */
.auth-guide::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
  transform:translateX(-130%) skewX(-18deg);
  animation:ag-sheen 2.4s 1.1s ease-in-out 2}
@keyframes ag-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ag-sheen{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(280%) skewX(-18deg)}}
.auth-guide__ic{position:relative;z-index:1;width:36px;height:36px;flex:none;border-radius:10px;
  display:grid;place-items:center;color:#6200FF;
  background:linear-gradient(150deg,#FFFFFF,#ECE3FF);
  box-shadow:0 0 0 1px rgba(98,0,255,.12),0 3px 8px rgba(98,0,255,.12)}
.auth-guide__tx{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.auth-guide__tx b{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink,#111114);letter-spacing:-.005em}
.auth-guide__tx span{font-size:13px;line-height:1.35;color:var(--muted,#71717A)}
/* ноутбуки: баннер плотнее, подзаголовок формы уходит — «бесплатно» уже сказано в баннере */
@media(max-height:900px){
  .auth-guide{padding:7px 14px 7px 8px;margin-bottom:12px}
  .auth-guide__ic{width:30px;height:30px;border-radius:9px}
  .auth-guide__tx b{font-size:13.5px}
  .auth-guide__tx span{font-size:12.5px}
  .auth-guide ~ #pane-join .af-s{display:none}
}
/* совсем низкие окна: одна строка */
@media(max-height:740px){.auth-guide__tx span{display:none}}
@media(max-width:900px){.auth-guide{max-width:none}}

/* ---------- без анимаций для тех, кто их отключил ---------- */
@media(prefers-reduced-motion:reduce){
  .splash__obj--knot,.wordmark .brandknot,.auth-guide,.auth-guide::after{animation:none!important}
}