/* ===========================================
   АНИМИРОВАННЫЕ ПЕРЕХОДЫ CYBERPUNK
   =========================================== */

/* ---------- ОВЕРЛЕЙ ПЕРЕХОДА ---------- */
/* Полноэкранный слой, закрывающий страницу при переходе */
.transition-overlay {
    /* Фиксированный на весь экран */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Поверх всего, включая сканлайн */
    z-index: 99999;
    /* Клики не проходят когда активен */
    pointer-events: none;
    /* Скрываем содержимое за краями */
    overflow: hidden;
}

/* ---------- ГЛИТЧ-ПОЛОСЫ ПРИ ПЕРЕХОДЕ ---------- */
/* Горизонтальные полосы, имитирующие помехи на экране */
.transition-overlay .glitch-bar {
    /* На всю ширину экрана */
    width: 100%;
    /* Абсолютное позиционирование внутри оверлея */
    position: absolute;
    /* Зелёный цвет по умолчанию */
    background: var(--neon-green);
    /* Начально невидима */
    opacity: 0;
}

/* ---------- ВСПЫШКА ЭКРАНА ---------- */
/* Белая вспышка на весь экран в момент перехода */
.flash-overlay {
    /* Фиксированный */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Поверх глитч-полос */
    z-index: 999999;
    /* Белый полупрозрачный */
    background: rgba(0, 255, 136, 0.15);
    /* Начально невидим */
    opacity: 0;
    /* Клики сквозь */
    pointer-events: none;
}

/* ---------- ЗАТЕМНЕНИЕ ЭКРАНА ---------- */
/* Чёрное затемнение для плавного ухода со страницы */
.fade-overlay {
    /* Фиксированный */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Поверх всего */
    z-index: 999999;
    /* Чёрный */
    background: var(--bg-dark);
    /* Начально невидим */
    opacity: 0;
    /* Клики сквозь */
    pointer-events: none;
    /* Плавное появление */
    transition: opacity 0.5s ease;
}

/* ---------- ТЕРМИНАЛЬНАЯ ЗАГРУЗКА ---------- */
/* Экран загрузки с бегущим текстом терминала */
.boot-screen {
    /* Фиксированный на весь экран */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Тёмный фон */
    background: var(--bg-dark);
    /* Поверх всего */
    z-index: 999999;
    /* Flexbox для центрирования */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Плавное исчезновение */
    transition: opacity 0.8s ease;
}

/* Контейнер текста в загрузочном экране */
.boot-screen .boot-text {
    /* Моноширинный шрифт */
    font-family: 'Share Tech Mono', monospace;
    /* Размер текста */
    font-size: 14px;
    /* Зелёный цвет терминала */
    color: var(--neon-green);
    /* Максимальная ширина блока */
    max-width: 500px;
    /* Выравнивание по левому краю */
    text-align: left;
    /* Внутренние отступы */
    padding: 20px;
}

/* Каждая строка загрузочного текста */
.boot-screen .boot-line {
    /* Скрыта по умолчанию */
    opacity: 0;
    /* Сдвинута вниз */
    transform: translateY(5px);
    /* Плавное появление */
    transition: all 0.3s ease;
    /* Отступ между строками */
    margin-bottom: 4px;
}

/* Видимая строка */
.boot-screen .boot-line.visible {
    /* Полностью видима */
    opacity: 1;
    /* На своём месте */
    transform: translateY(0);
}

/* Строка с ошибкой — красная */
.boot-screen .boot-line.error {
    color: var(--neon-red);
}

/* Строка с предупреждением — приглушённая */
.boot-screen .boot-line.dim {
    color: var(--text-dim);
}

/* Мигающий курсор в последней строке */
.boot-screen .cursor {
    /* Строчно-блочный */
    display: inline-block;
    /* Размер */
    width: 8px;
    height: 14px;
    /* Зелёный */
    background: var(--neon-green);
    /* Мигание */
    animation: blink 1s step-end infinite;
    /* Вертикальное выравнивание */
    vertical-align: middle;
    /* Отступ слева */
    margin-left: 2px;
}

/* ---------- ГОРИЗОНТАЛЬНОЕ СКАНИРОВАНИЕ ---------- */
/* Линия, проходящая сверху вниз перед появлением контента */
.scan-reveal {
    /* Фиксированный */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Поверх контента */
    z-index: 99998;
    /* Тёмный фон */
    background: var(--bg-dark);
    /* Клики сквозь после завершения */
    pointer-events: none;
}

/* Линия сканирования внутри scan-reveal */
.scan-reveal .scan-line-thick {
    /* На всю ширину */
    width: 100%;
    /* Высота линии */
    height: 4px;
    /* Зелёный цвет */
    background: var(--neon-green);
    /* Абсолютное позиционирование */
    position: absolute;
    top: 0;
    left: 0;
    /* Свечение */
    box-shadow:
        0 0 20px var(--neon-green),
        0 0 60px var(--neon-green);
}

/*===========================================
КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ
Расположена в правом верхнем углу карточки
===========================================*/
.theme-toggle-login {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
}

.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0, 255, 136, 0.4);
  background: rgba(0, 255, 136, 0.05);
  backdrop-filter: blur(8px);
  color: var(--neon-green);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
  border-color: var(--neon-green);
  background: rgba(0, 255, 136, 0.15);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
  color: var(--neon-green);
}

.theme-toggle-btn:active {
  transform: scale(1.05);
  background: rgba(0, 255, 136, 0.25);
}

/* ===========================================
   УМЕНЬШЕННОЕ ДВИЖЕНИЕ (системная настройка)
   =========================================== */

/* Пользователь включил в ОС «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {

    /* Все элементы и псевдоэлементы */
    *,
    *::before,
    *::after {
        /* Анимации фактически отключены (длительность близка к нулю) */
        animation-duration: 0.001ms !important;
        /* Однократный проигрыш вместо бесконечных циклов */
        animation-iteration-count: 1 !important;
        /* Переходы отключены */
        transition-duration: 0.001ms !important;
        /* Плавная прокрутка отключена */
        scroll-behavior: auto !important;
    }
}

/*===========================================
СВЕТЛАЯ ТЕМА
Основана на палитре изображений:
- Тёплый серо-бежевый фон (#e8e4df)
- Графитово-синие акценты (#2d3748, #1a202c)
- Высокий контраст текста
===========================================*/

[data-theme="light"] {
  --bg-dark: #e8e4df;
  --bg-card: rgba(255, 252, 248, 0.97);
  --text-main: #1a202c;
  --text-dim: #4a5568;
  --neon-green: #2b6cb0;
  --neon-cyan: #3182ce;
  --neon-red: #c53030;
  --primary: #cbd5e0;
  --primary-light: #a0aec0;
  --border: rgba(45, 55, 72, 0.2);
  --grid-color: rgba(45, 55, 72, 0.06);
  --danger: #c53030;
  --white: #1a202c;
  --gray: #718096;
}

[data-theme="light"] body {
  background-color: var(--bg-dark);
  color: var(--text-main);
}

[data-theme="light"] body::before {
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  animation: none;
}

[data-theme="light"] body::after {
  background: linear-gradient(90deg, transparent, #2b6cb0, #3182ce, transparent);
  opacity: 0.4;
  box-shadow: none;
  animation: none;
}

[data-theme="light"] .login-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  box-shadow: 0 4px 30px rgba(45, 55, 72, 0.15), 0 1px 3px rgba(45, 55, 72, 0.1);
  animation: none;
}

[data-theme="light"] .login-card::before,
[data-theme="light"] .login-card::after,
[data-theme="light"] .corner-tr,
[data-theme="light"] .corner-bl {
  border-color: var(--neon-green);
  opacity: 0.8;
  animation: none;
}

[data-theme="light"] .login-header h1 {
  color: var(--neon-green);
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(26, 32, 44, 0.15));
  animation: none;
}

[data-theme="light"] .glitch::before,
[data-theme="light"] .glitch::after {
  opacity: 0.15;
}

[data-theme="light"] .login-subtitle {
  color: var(--text-dim);
}

[data-theme="light"] .status-bar {
  color: var(--text-dim);
  border-bottom-color: var(--border);
}

[data-theme="light"] .status-indicator {
  background: var(--neon-green);
  box-shadow: none;
  animation: none;
}

[data-theme="light"] .form-group label {
  color: var(--neon-green);
  font-weight: 700;
}

[data-theme="light"] .form-group input {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--border);
  color: var(--text-main);
  font-weight: 500;
}

[data-theme="light"] .form-group input:focus {
  border-color: var(--neon-green);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
}

[data-theme="light"] .form-group input::placeholder {
  color: var(--text-dim);
  opacity: 0.7;
}

[data-theme="light"] .input-line {
  background: var(--neon-green);
  box-shadow: none;
}

[data-theme="light"] .form-group input.input-error {
  border-color: var(--neon-red);
  background: rgba(197, 48, 48, 0.08);
  animation: none;
}

[data-theme="light"] .btn-login {
  background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
  color: #ffffff;
  border: 2px solid var(--neon-green);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .btn-login:hover {
  background: linear-gradient(135deg, #2c5282, #2b6cb0);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.25);
  transform: translateY(-2px);
}

[data-theme="light"] .btn-login::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

[data-theme="light"] .btn-login:disabled {
  opacity: 0.5;
}

[data-theme="light"] .login-alert.error {
  background: rgba(197, 48, 48, 0.1);
  border: 2px solid rgba(197, 48, 48, 0.5);
  color: var(--neon-red);
  font-weight: 600;
}

[data-theme="light"] .login-alert.success {
  background: rgba(43, 108, 176, 0.1);
  border: 2px solid rgba(43, 108, 176, 0.5);
  color: var(--neon-green);
  font-weight: 600;
}

[data-theme="light"] .login-alert::after {
  height: 3px;
  box-shadow: none;
}

[data-theme="light"] .login-alert.error::after {
  background: linear-gradient(90deg, transparent, var(--neon-red), transparent);
}

[data-theme="light"] .login-alert.success::after {
  background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
}

[data-theme="light"] .login-loader {
  color: var(--text-dim);
}

[data-theme="light"] .cyber-spinner {
  border: 3px solid rgba(43, 108, 176, 0.15);
  border-top: 3px solid var(--neon-green);
  box-shadow: none;
}

[data-theme="light"] .hex-decoration {
  color: rgba(45, 55, 72, 0.2);
}

[data-theme="light"] .login-footer {
  color: var(--text-dim);
  border-top-color: var(--border);
}

[data-theme="light"] .login-footer.version {
  color: var(--neon-green);
  opacity: 0.8;
  font-weight: 600;
}

[data-theme="light"] .particle {
  background: var(--neon-green);
  opacity: 0.4;
}

/* Светлая тема — без зелёного свечения */
[data-theme="light"] .theme-toggle-login {
  top: 15px;
  right: 15px;
}

[data-theme="light"] .theme-toggle-btn {
  border: 2px solid rgba(45, 55, 72, 0.4);
  background: rgba(255, 252, 248, 0.95);
  color: #1a202c;
  box-shadow: 0 2px 8px rgba(45, 55, 72, 0.15);
}

[data-theme="light"] .theme-toggle-btn:hover {
  border-color: rgba(43, 108, 176, 0.6);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.2);
  transform: scale(1.1);
}

[data-theme="light"] .theme-toggle-btn:active {
  transform: scale(1.05);
}

[data-theme="light"] .transition-overlay .glitch-bar {
  background: #2b6cb0;
}

[data-theme="light"] .flash-overlay {
  background: rgba(43, 108, 176, 0.15);
}

[data-theme="light"] .fade-overlay {
  background: var(--bg-dark);
}

[data-theme="light"] .boot-screen {
  background: var(--bg-dark);
}

[data-theme="light"] .boot-screen .boot-text {
  color: var(--neon-green);
  font-weight: 600;
}

[data-theme="light"] .boot-screen .boot-line.dim {
  color: var(--text-dim);
}

[data-theme="light"] .boot-screen .cursor {
  background: var(--neon-green);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(45, 55, 72, 0.3);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 55, 72, 0.5);
}

[data-theme="light"] .theme-toggle-login {
  top: 20px;
  right: 20px;
}

[data-theme="light"] .theme-toggle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: rgba(255, 252, 248, 0.95);
  color: var(--text-main);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(45, 55, 72, 0.1);
}

[data-theme="light"] .theme-toggle-btn:hover {
  border-color: var(--neon-green);
  color: var(--neon-green);
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(43, 108, 176, 0.25);
  background: #ffffff;
}

[data-theme="light"] .theme-toggle-btn:active {
  transform: scale(1.05);
}