/* Заставка с проверкой Turnstile — перенесена с экрана загрузки guest.rozb.pw (~/.local/share/guest-gate/gate.html):
   кольцо, «дышащий» значок, бегущая полоска, смена статусов. Цвета — токены design.md из ../styles.css
   (второй цвет кольца — --glob вместо --desk гостя). prefers-reduced-motion выключает анимации общим правилом styles.css,
   уход заставки при этом — простая смена экрана. */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:hidden;z-index:5;background:var(--bg);
  transition:opacity var(--t-slow) ease}
.gate::before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(40% 35% at 30% 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
             radial-gradient(35% 30% at 72% 70%,color-mix(in srgb,var(--glob) 14%,transparent),transparent 70%);
  filter:blur(20px);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(3%,-2%) rotate(8deg)}}
.gate.leave{opacity:0;pointer-events:none}
.gate-box{position:relative;width:min(100%,360px);text-align:center;transition:opacity .45s ease,transform .45s ease}
.gate.leave .gate-box{opacity:0;transform:scale(.97)}
.mark{position:relative;width:96px;height:96px;margin:0 auto 28px;display:grid;place-items:center}
.ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--accent) 80%,var(--glob) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:spin 1.1s linear infinite;transition:opacity .3s}
@keyframes spin{to{transform:rotate(1turn)}}
.logo{width:60px;height:60px;border-radius:16px;background:var(--accent);display:grid;place-items:center;
  box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 45%,transparent);animation:breathe 2.4s ease-in-out infinite;transition:background .3s}
.logo svg{width:34px;height:34px}
@keyframes breathe{50%{transform:scale(1.05)}}
.gate h1{font-size:1.625rem;letter-spacing:-.01em}
.gate .sub{margin:2px 0 22px;color:var(--muted);font-size:var(--fs-md)}
.gbar{height:4px;border-radius:99px;background:var(--border);overflow:hidden;margin:0 auto;width:180px}
.gbar i{display:block;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--glob));
  animation:slide 1.3s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.gstatus{margin-top:14px;min-height:1.5em;color:var(--muted);font-size:var(--fs-sm)}
.gcard{display:none;margin-top:20px;padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.gcard.show{display:block;animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.gcard p{margin:0 0 12px;font-size:var(--fs-sm);color:var(--muted)}
#ts{display:flex;justify-content:center}
#ts:empty{display:none}
.gate.done .ring{opacity:0}
.gate.done .logo{background:var(--ok);animation:none}
.gate.done .gbar i{width:100%;animation:none;background:var(--ok)}
.gate.err .logo{background:var(--err);animation:none;box-shadow:none}
.gate.err .ring,.gate.err .gbar{opacity:.25}
.gate.err .gbar i{animation:none}