/* ---------------------------------------------------------------
   Окно входа — вордмарк "MAY" (буквы округлые, будто воздушные
   шарики-фигурки, по буквам — мазки разных цветов) + мазки кисти во
   весь экран фоном. Карточка входа видна сразу, без ожидания
   анимации — анимируется только декор вокруг неё (см. правки "Новые
   задачи_2109.docx", п.1, и правки по ним от 2026-09-21).
--------------------------------------------------------------- */
body {
  /* Тот же холодный серый, что и в остальном тонкере (tasker.css) —
     не тёплый крем, как было в первой версии. */
  background: #eef0f5;
}

.brush-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.stroke {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: stroke-in 1.8s cubic-bezier(0.16, 0.8, 0.2, 1) forwards;
}

.stroke { opacity: 0; }
.s1 { animation-delay: 0s; }
.s2 { animation-delay: 0.12s; }
.s3 { animation-delay: 0.24s; }
.s4 { animation-delay: 0.36s; }
.s5 { animation-delay: 0.48s; }
.s6 { animation-delay: 0.6s; }
.s7 { animation-delay: 0.72s; }
.s8 { animation-delay: 0.84s; }
.s9 { animation-delay: 0.96s; }
.s10 { animation-delay: 1.08s; }

@keyframes stroke-in {
  0% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 0.5; }
  100% { opacity: 0.42; transform: scale(1); }
}

/* Сцена — вордмарк + карточка, поверх фоновых мазков. */
.auth-scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.may-logo {
  position: relative;
  width: 340px;
  max-width: 78vw;
  margin-bottom: 8px;
}

.may-svg {
  width: 100%;
  display: block;
  overflow: visible;
}

.may-svg text {
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 92px;
  letter-spacing: 2px;
}

.may-outline {
  fill: none;
  stroke: #2b2b33;
  stroke-width: 2.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: may-outline-in 0.7s ease 0.5s forwards;
}

@keyframes may-outline-in {
  0% { opacity: 0; transform: scale(0.82) rotate(-7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.may-fill {
  clip-path: inset(0 100% 0 0);
  animation: may-fill-sweep 0.85s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}

.may-fill-2 {
  opacity: 0.5;
  mix-blend-mode: multiply;
  clip-path: inset(0 0 0 100%);
  animation: may-fill-sweep-2 0.85s cubic-bezier(0.4, 0, 0.2, 1) 1.35s forwards;
}

@keyframes may-fill-sweep {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes may-fill-sweep-2 {
  to { clip-path: inset(0 0 0 0); }
}

/* Хаотичные цветные капли слетаются к вордмарку и растворяются —
   "творческий хаос приходит в ясный порядок" перед тем как проступает
   контур названия. */
.may-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blob {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.5px);
  animation: blob-settle 1.1s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

.b1 { background: #ff7eb3; top: -26px; left: 6%; --tx: 46px; --ty: 64px; --r: 50deg; animation-delay: 0s; }
.b2 { background: #8ec5fc; top: -18px; right: 10%; --tx: -34px; --ty: 58px; --r: -36deg; animation-delay: 0.1s; }
.b3 { background: #ffd166; bottom: -22px; left: 18%; --tx: 22px; --ty: -44px; --r: 24deg; animation-delay: 0.2s; }
.b4 { background: #74e0c0; bottom: -24px; right: 22%; --tx: -24px; --ty: -50px; --r: -28deg; animation-delay: 0.3s; }
.b5 { background: #cfa9fc; top: 30%; left: -14px; --tx: 50px; --ty: 10px; --r: 40deg; animation-delay: 0.15s; }

@keyframes blob-settle {
  0% { opacity: 0.9; transform: translate(0, 0) rotate(0deg) scale(1); }
  60% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.25); }
}

/* Карточка — видна сразу (см. правки: "не ждать конца анимации").
   Никакой задержки/затухания на самой форме входа. */
.auth-card {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .may-outline, .may-fill, .may-fill-2 {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  .stroke {
    animation: none !important;
    opacity: 0.42 !important;
    transform: none !important;
  }
  .blob { display: none; }
}