/* ════════════════════════════════════════════════════════════
   TRANSITIONS — улучшения анимаций для Multi Metrics.
   Подключать ПОСЛЕ styles.css и summer.css.
   Файл — добавка, существующие правила не ломает.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Кривые сильнее встроенных CSS easings — то, что framer-motion
     даёт «из коробки», но тут на чистом CSS. Названия совпадают
     с принятыми в индустрии. */
  --ease-out-strong:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:        cubic-bezier(0.32, 0.72, 0, 1);     /* iOS-стиль */
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);  /* лёгкий overshoot */
}

/* ════════════════════════════════════════════════════════════
   1. CROSS-FADE между экранами
   Класс .screen-overlay вешается на #deptPicker / #loginOverlay.
   transitions.js добавляет/снимает .is-leaving / .is-entering
   ════════════════════════════════════════════════════════════ */
.screen-overlay {
  transition:
    opacity 380ms var(--ease-out-strong),
    transform 380ms var(--ease-out-strong),
    filter 320ms var(--ease-out-strong);
  will-change: opacity, transform, filter;
}
.screen-overlay.is-leaving {
  opacity: 0;
  transform: scale(1.015);
  filter: blur(6px);
  pointer-events: none;
}
.screen-overlay.is-entering {
  opacity: 0;
  transform: scale(0.99);
  filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════
   2. STAGGER карточек отделов
   Чиним конфликт двух @keyframes из styles.css — единый источник
   правды. translateY вниз, stagger через nth-child.
   ════════════════════════════════════════════════════════════ */
.theme-summer .dept-cards .dept-card,
body:not(.theme-summer) .dept-cards .dept-card {
  opacity: 0;
  transform: translateY(20px);
  animation: mmCardIn 540ms var(--ease-out-strong) forwards;
  animation-delay: var(--card-delay, 0ms);
}
.dept-cards .dept-card:nth-child(1) { --card-delay:  60ms; }
.dept-cards .dept-card:nth-child(2) { --card-delay: 130ms; }
.dept-cards .dept-card:nth-child(3) { --card-delay: 200ms; }
.dept-cards .dept-card:nth-child(4) { --card-delay: 270ms; }
.dept-cards .dept-card:nth-child(5) { --card-delay: 340ms; }

@keyframes mmCardIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   3. HOVER только на устройствах с настоящим ховером
   На тачах hover триггерится при тапе и «залипает» — убираем.
   ════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .dept-card:hover { transform: none !important; }
  .dept-card-btn:hover { transform: none !important; filter: none !important; }
  .login-btn:hover { transform: none !important; filter: none !important; }
}

/* ════════════════════════════════════════════════════════════
   4. FOCUS-VISIBLE — для клавиатуры, не для мыши
   ════════════════════════════════════════════════════════════ */
.dept-card-btn:focus-visible,
.login-btn:focus-visible,
.login-back-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: inherit;
}
/* у inputs focus-ring уже свой, не мешаем */

/* ════════════════════════════════════════════════════════════
   5. STAGGER полей формы логина
   Поля появляются по очереди после показа карточки.
   ════════════════════════════════════════════════════════════ */
.login-card .login-form > * {
  opacity: 0;
  transform: translateY(6px);
  animation: mmFieldIn 420ms var(--ease-out-strong) forwards;
}
.login-card .login-form > *:nth-child(1) { animation-delay: 120ms; }
.login-card .login-form > *:nth-child(2) { animation-delay: 180ms; }
.login-card .login-form > *:nth-child(3) { animation-delay: 240ms; }
.login-card .login-form > *:nth-child(4) { animation-delay: 300ms; }
.login-card .login-form > *:nth-child(5) { animation-delay: 360ms; }

@keyframes mmFieldIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   6. SHAKE при ошибке логина
   .has-error добавляется JS-ом на одну анимацию и снимается.
   ════════════════════════════════════════════════════════════ */
.login-error.has-error {
  animation: mmShake 380ms var(--ease-out-strong);
}
@keyframes mmShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* Подсветка input при ошибке */
.login-field input.has-error {
  border-color: rgba(248, 113, 113, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12) !important;
  transition: border-color 220ms var(--ease-out-strong),
              box-shadow 220ms var(--ease-out-strong);
}

/* ════════════════════════════════════════════════════════════
   7. LOGIN BUTTON — состояние загрузки со спиннером
   Класс .is-loading добавляется на время запроса.
   ════════════════════════════════════════════════════════════ */
.login-btn { position: relative; }
.login-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}
.login-btn.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(7, 17, 26, 0.85);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mmSpin 720ms linear infinite;
}
@keyframes mmSpin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════
   8. PRESS feedback — короткое сжатие, доступное всем кнопкам
   Existing :active в styles.css есть только на dept-card-btn.
   ════════════════════════════════════════════════════════════ */
.login-btn:active:not(.is-loading) {
  transform: scale(0.97);
  transition: transform 120ms var(--ease-out-strong);
}
.login-back-btn:active {
  transform: scale(0.96);
  transition: transform 120ms var(--ease-out-strong);
}

/* ════════════════════════════════════════════════════════════
   9. INPUT focus — полировка
   ════════════════════════════════════════════════════════════ */
.login-field input {
  caret-color: var(--accent, #2dd4ff);
  transition:
    border-color 220ms var(--ease-out-strong),
    box-shadow   220ms var(--ease-out-strong),
    background   220ms var(--ease-out-strong);
}
.login-field input:focus {
  background: rgba(255, 240, 220, 0.10);
}

/* Каст. selection — мелочь, но добавляет личности */
::selection {
  background: rgba(255, 200, 140, 0.32);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════
   13. UNLOCK FIX — карточка, разблокированная enhanced-motion.js
   (юзер не залогинен, но карточка была is-active из-за бага auth.js).
   CSS-страховка поверх JS-фикса: гарантирует кликабельность кнопки.
   ════════════════════════════════════════════════════════════ */
.dept-card[data-mm-unlocked="1"] .dept-card-btn {
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ════════════════════════════════════════════════════════════
   12. CUSTOM CHECKBOX — «Запомнить меня»
   Скрываем нативный, рисуем свой через appearance:none + ::after.
   Селектор с .theme-summer — чтобы перебить специфичность summer.css.
   ════════════════════════════════════════════════════════════ */
.theme-summer .login-remember input[type="checkbox"],
body .login-remember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;

  border-radius: 5px;
  border: 1.5px solid rgba(255, 220, 180, 0.30);
  background: rgba(255, 230, 200, 0.05);
  backdrop-filter: blur(4px);

  position: relative;
  cursor: pointer;
  outline: none;

  transition:
    background     220ms var(--ease-out-strong),
    border-color   220ms var(--ease-out-strong),
    box-shadow     220ms var(--ease-out-strong),
    transform      140ms var(--ease-spring);
}

/* Hover — мягкая подсветка по обводке */
.theme-summer .login-remember input[type="checkbox"]:hover,
body .login-remember input[type="checkbox"]:hover {
  border-color: rgba(255, 200, 140, 0.55);
  background: rgba(255, 200, 140, 0.10);
  box-shadow: 0 0 0 4px rgba(255, 180, 120, 0.10);
}

/* Active — короткое сжатие для тактильной отдачи */
.theme-summer .login-remember input[type="checkbox"]:active,
body .login-remember input[type="checkbox"]:active {
  transform: scale(0.92);
}

/* Focus с клавиатуры — кольцо */
.theme-summer .login-remember input[type="checkbox"]:focus-visible,
body .login-remember input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(255, 200, 140, 0.7);
  outline-offset: 3px;
}

/* Checked — оранжевый градиент с глоу */
.theme-summer .login-remember input[type="checkbox"]:checked,
body .login-remember input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #ffb37a 0%, #ff7a4d 50%, #ff5530 100%);
  border-color: transparent;
  box-shadow:
    0 4px 14px -2px rgba(255, 130, 90, 0.55),
    0 0 0 0 rgba(255, 180, 120, 0),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 8px -4px rgba(120, 30, 60, 0.4);
}

/* Сама галочка — рисуется через ::after двумя border'ами под углом 45°.
   Анимация checkPop: появляется с лёгким overshoot. */
.theme-summer .login-remember input[type="checkbox"]:checked::after,
body .login-remember input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform-origin: 50% 60%;
  animation: mmCheckPop 320ms var(--ease-spring) forwards;
  filter: drop-shadow(0 1px 1px rgba(120, 30, 60, 0.4));
}

@keyframes mmCheckPop {
  0%   { transform: rotate(45deg) scale(0);   opacity: 0; }
  55%  { transform: rotate(45deg) scale(1.18); opacity: 1; }
  100% { transform: rotate(45deg) scale(1);   opacity: 1; }
}

/* Reduced motion — без overshoot, просто появление */
@media (prefers-reduced-motion: reduce) {
  .theme-summer .login-remember input[type="checkbox"]:checked::after,
  body .login-remember input[type="checkbox"]:checked::after {
    animation: none;
    transform: rotate(45deg);
  }
}

/* ════════════════════════════════════════════════════════════
   11. WOW: магнитный tilt + spotlight за курсором.
   Класс .has-tilt вешается из enhanced-motion.js.
   ════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .dept-card.has-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    /* Возврат к нейтральному положению на mouseleave — плавный.
       При движении мыши JS пишет transform каждый кадр (без transition). */
  }

  /* Spotlight — большое мягкое световое пятно, следующее за мышью.
     Управляется CSS-переменными --mx, --my (их пишет JS в %). */
  .dept-card.has-tilt::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      420px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 245, 220, 0.18),
      rgba(255, 200, 150, 0.05) 30%,
      transparent 55%
    );
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: overlay;
  }
  .dept-card.has-tilt:hover::before {
    opacity: 1;
  }

  /* Тень при наклоне — даёт ощущение «парения» */
  .dept-card.has-tilt:hover {
    box-shadow:
      0 30px 60px -20px rgba(0, 0, 0, 0.55),
      0 0 80px -15px var(--glow, rgba(255, 200, 140, 0.4)) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   10. REDUCED MOTION — мягко, не «всё выключить»
   Сохраняем opacity-fade для понимания смены экрана,
   убираем перемещения и blur (вестибулярный аппарат).
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .screen-overlay,
  .screen-overlay.is-leaving,
  .screen-overlay.is-entering {
    transform: none !important;
    filter: none !important;
    transition: opacity 220ms ease;
  }
  .dept-cards .dept-card,
  .login-card .login-form > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .login-error.has-error { animation: none; }
  .login-btn.is-loading::before { animation-duration: 1.4s; }
}