/* gem.css — общий для кабинетов Shepel (рефкоманда, партнёры, менеджеры проектов):
   тема Gemini по умолчанию + прелоадер v2. Источник правды — project-managers-app/public/pm.css. */
/* ══════════════════════════════════════════════════════════════════════
   ТЕМА GEMINI (по умолчанию): тёмная база + живой приглушённый градиент.
   Палитра — утверждённая палитра Gemini с визитки. Двигаются только transform
   (поворот и дрейф), без перерисовки — телефону легко. Вуаль сверху глушит
   цвет под текстом, внизу свечение ярче, как у приложения Gemini.
   ══════════════════════════════════════════════════════════════════════ */
.gembg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; background: #0b0b0c; }
html.gem .gembg { display: block; }
html.gem .amb { display: none; }
.gembg::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background: conic-gradient(from 0deg, #4285f4, #7b6ad0, #9b72cb, #c76a9e, #d96570, #e28a45, #f9ab00, #d96570, #9b72cb, #1a73e8, #4285f4);
  filter: blur(70px); opacity: 0.30; will-change: transform;
  animation: gemTurn 60s linear infinite;
}
.gembg i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); will-change: transform; }
.gembg .g1 { width: 70vmax; height: 70vmax; left: -25vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(66, 133, 244, 0.55), rgba(66, 133, 244, 0) 65%); animation: gemDrift1 26s ease-in-out infinite; }
.gembg .g2 { width: 60vmax; height: 60vmax; right: -25vmax; bottom: -20vmax; background: radial-gradient(circle, rgba(217, 101, 112, 0.5), rgba(217, 101, 112, 0) 65%); animation: gemDrift2 32s ease-in-out infinite; }
.gembg .g3 { width: 55vmax; height: 55vmax; left: 10vmax; bottom: -35vmax; background: radial-gradient(circle, rgba(155, 114, 203, 0.55), rgba(155, 114, 203, 0) 65%); animation: gemDrift3 38s ease-in-out infinite; }
.gembg .g4 { width: 40vmax; height: 40vmax; right: -10vmax; top: -18vmax; background: radial-gradient(circle, rgba(249, 171, 0, 0.28), rgba(249, 171, 0, 0) 65%); animation: gemDrift1 44s ease-in-out infinite reverse; }
.gembg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.72) 0%, rgba(11, 11, 12, 0.55) 40%, rgba(11, 11, 12, 0.2) 100%);
}
@keyframes gemTurn { to { transform: rotate(360deg); } }
@keyframes gemDrift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(18vw, -10vh, 0) scale(1.15); } }
@keyframes gemDrift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-20vw, -14vh, 0) scale(0.9); } }
@keyframes gemDrift3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); } 50% { transform: translate3d(12vw, -18vh, 0) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .gembg::before, .gembg i { animation: none; } }
/* Карточки на цветном фоне — плотнее, чтобы текст читался. */
html.gem .lead, html.gem .stalert, html.gem .stat, html.gem .profile, html.gem .empty, html.gem .cc, html.gem .prod, html.gem .ptabs, html.gem .linkcard, html.gem .mrow, html.gem .todo { background-color: rgba(14, 14, 16, 0.58); }
html.gem .chips.tabs .chip:not(.on) { background-color: rgba(14, 14, 16, 0.5); }

/* Кнопка темы: показывает следующую тему. */
.themebtn svg { display: none; }
html.gem .themebtn .i-moon { display: block; }
html.dark .themebtn .i-sun { display: block; }
html.light .themebtn .i-sun, html.light .themebtn .i-moon { display: none; }
html.light .themebtn .i-gem { display: block; }
html.gem .themebtn { background: rgba(14, 14, 16, 0.5); }

/* ══════════════ прелоадер v2 ══════════════
   Свечение только под квадратом логотипа: форма постоянная (скруглённый квадрат),
   внутри медленно вращаются цвета. Размытие — на внешнем слое, обрезка — на внутреннем,
   иначе края получаются резкими. Линия в «S» в два раза тоньше и рисуется только вперёд:
   слева направо, держится и уходит вправо. Текст тонкий, мелкий, серый, дышит яркостью. */
.ld-fog { display: none; }
.ld-glow { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; filter: blur(20px); opacity: 0.6; pointer-events: none; }
.ld-glow i { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); }
.ld-glow i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; background: conic-gradient(from 0deg, #d1e05a, #4fe3c1, #6aa8ff, #a78bfa, #f472b6, #fbbf24, #d1e05a); animation: ldSpin 18s linear infinite; }
.ld-frame svg { overflow: visible; }
.ld-draw { fill: none; stroke: #d1e05a; stroke-width: 19.2; stroke-linecap: round; stroke-dasharray: 156 156; animation: ldDraw 3s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes ldDraw {
  0% { stroke-dashoffset: 156; opacity: 0; }
  6% { opacity: 1; }
  45%, 58% { stroke-dashoffset: 0; }
  94% { opacity: 1; }
  100% { stroke-dashoffset: -156; opacity: 0; }
}
.ld-txt { font-size: 9px; font-weight: 400; letter-spacing: 0.26em; color: var(--mist); background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: ldBreathe 3s ease-in-out infinite; }
@keyframes ldBreathe { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
html.light .ld-glow { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .ld-glow i::before, .ld-draw, .ld-txt { animation: none; } .ld-draw { stroke-dashoffset: 0; } }
/* Свечение под квадратом медленно дышит: чуть прозрачнее и чуть меньше, потом обратно.
   Цикл 6 с — ровно два вдоха текста, поэтому всё движется в одном ритме. */
.ld-glow { --glo: 0.6; animation: ldGlowBreathe 6s ease-in-out infinite; }
html.light .ld-glow { --glo: 0.45; }
@keyframes ldGlowBreathe {
  0%, 100% { opacity: var(--glo); transform: scale(1); }
  50% { opacity: calc(var(--glo) * 0.55); transform: scale(0.86); }
}
@media (prefers-reduced-motion: reduce) { .ld-glow { animation: none; opacity: var(--glo); } }
/* Логотип стоит неподвижно, одного размера — дышит только свечение под ним. */
.ld-mark { animation: none; }

/* Первый экран: фон стоит на месте, пока грузится и рисуется кабинет (класс calm ставит
   index.html, снимает скрипт через ~1,8 с после показа). Пауза держит первый кадр
   анимации, поэтому при запуске движения ничего не дёргается. */
html.calm .gembg::before, html.calm .gembg i, html.calm .amb i { animation-play-state: paused; }
/* Слово под логотипом прелоадера показываем уже в нашем шрифте (класс fonts ставит скрипт). */
html:not(.fonts) .ld-txt { visibility: hidden; }