/* Fullscreen boot loader — Variant 3 «Deep Glass Parallax» */

.ds-boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  font-family: var(--ds-font-body);
  color: var(--ds-text);
  background-color: var(--ds-ink);
  background-image: url("/assets/bg/admin-atmosphere.png");
  background-size: cover;
  background-position: center;
}

/* Пылинки на оверлее — ::before, без JS (8 слоёв вместо 16 — меньше paint, визуально то же) */
.ds-boot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  contain: layout style paint;
  will-change: transform;
  background-image:
    radial-gradient(1px 1px at 8% 18%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 28%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, rgba(255, 255, 255, 0.42) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 34%, rgba(255, 255, 255, 0.32) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 72%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 82%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 58%, rgba(255, 255, 255, 0.38) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 22%, rgba(255, 255, 255, 0.4) 50%, transparent 51%);
  animation: ds-boot-dust 18s linear infinite;
  z-index: 0;
}

@keyframes ds-boot-dust {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-12px, -18px, 0);
  }
}

/* Мягкие световые пятна на фоне — между пылинками и стеклом */
.ds-boot__lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: layout style paint;
}

.ds-boot__light {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.9;
  filter: blur(70px);
  will-change: transform;
}

.ds-boot__light:nth-child(1) {
  width: 960px;
  height: 960px;
  left: 8%;
  top: 12%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.27) 0%, transparent 70%);
  animation: ds-boot-light-a 11s ease-in-out infinite;
}

.ds-boot__light:nth-child(2) {
  width: 720px;
  height: 720px;
  left: 72%;
  top: 6%;
  opacity: 0.85;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.21) 0%, transparent 68%);
  animation: ds-boot-light-b 8s ease-in-out 2s infinite;
}

.ds-boot__light:nth-child(3) {
  width: 1200px;
  height: 1200px;
  left: 55%;
  top: 62%;
  opacity: 0.85;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.16) 0%, transparent 72%);
  animation: ds-boot-light-c 14s ease-in-out 1s infinite;
}

.ds-boot__light:nth-child(4) {
  width: 480px;
  height: 480px;
  left: 22%;
  top: 68%;
  opacity: 0.88;
  filter: blur(45px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 65%);
  animation: ds-boot-light-d 7s ease-in-out 3.5s infinite;
}

.ds-boot__light:nth-child(5) {
  width: 880px;
  height: 880px;
  left: 38%;
  top: 2%;
  opacity: 0.85;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  animation: ds-boot-light-e 10s ease-in-out 0.8s infinite;
}

.ds-boot__light:nth-child(6) {
  width: 640px;
  height: 640px;
  left: 2%;
  top: 46%;
  opacity: 0.88;
  background: radial-gradient(circle, rgba(63, 184, 175, 0.16) 0%, transparent 68%);
  animation: ds-boot-light-f 9s ease-in-out 4s infinite;
}

.ds-boot__light:nth-child(7) {
  width: 1040px;
  height: 1040px;
  left: 80%;
  top: 42%;
  opacity: 0.85;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, transparent 72%);
  animation: ds-boot-light-g 12s ease-in-out 1.6s infinite;
}

.ds-boot__light:nth-child(8) {
  width: 560px;
  height: 560px;
  left: 48%;
  top: 76%;
  opacity: 0.9;
  filter: blur(55px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.21) 0%, transparent 66%);
  animation: ds-boot-light-h 6s ease-in-out 2.4s infinite;
}

@keyframes ds-boot-light-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(42px, -28px, 0); }
  50% { transform: translate3d(-18px, 36px, 0); }
  75% { transform: translate3d(28px, 14px, 0); }
}

@keyframes ds-boot-light-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(-36px, 22px, 0); }
  66% { transform: translate3d(24px, -40px, 0); }
}

@keyframes ds-boot-light-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-28px, -18px, 0); }
  45% { transform: translate3d(32px, 12px, 0); }
  70% { transform: translate3d(-14px, 38px, 0); }
}

@keyframes ds-boot-light-d {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(48px, -32px, 0); }
}

@keyframes ds-boot-light-e {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-22px, 30px, 0); }
  50% { transform: translate3d(18px, -24px, 0); }
  75% { transform: translate3d(-34px, -12px, 0); }
}

@keyframes ds-boot-light-f {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(30px, -26px, 0); }
  80% { transform: translate3d(-20px, 34px, 0); }
}

@keyframes ds-boot-light-g {
  0%, 100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-40px, 16px, 0); }
  60% { transform: translate3d(12px, -36px, 0); }
}

@keyframes ds-boot-light-h {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(26px, 20px, 0); }
  66% { transform: translate3d(-32px, -18px, 0); }
}

.ds-boot__stack {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: min(420px, calc(100vw - 48px));
  min-height: 240px;
  /* Компактный каркас карточки; амплитуда движения — только в translate keyframes */
  padding: 100px 96px;
  box-sizing: content-box;
  overflow: visible;
}

/* Центральное свечение за стеком панелей */
.ds-boot__stack::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 130%;
  height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 55% at 50% 50%,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.025) 42%,
    transparent 72%
  );
}

/* Общий каркас панели — плотная приборная поверхность (как .ds-glass), без frost/blur;
   глубина между панелями задаётся модификаторами (сдвиг, лёгкий sheen-градиент). */
.ds-boot__panel {
  position: absolute;
  inset: 0;
  border-radius: var(--ds-radius-panel);
  border: 1px solid var(--ds-line);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--ds-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.4);
}

.ds-boot__panel > * {
  position: relative;
  z-index: 1;
}

/* Общие стили задних панелей — умеренный glassmorphism */
.ds-boot__panel--back {
  z-index: 0;
}

/* Панель 1 (дальняя): консоль — самая медленная, плавная широкая орбита */
.ds-boot__panel--console {
  transform: translate3d(-258px, 189px, 0) rotate(-0.3deg) scale(0.99);
  background:
    radial-gradient(ellipse 90% 70% at 48% 42%, rgba(255, 255, 255, 0.05) 0%, transparent 68%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(255, 255, 255, 0.02) 11px,
      rgba(255, 255, 255, 0.02) 12px
    ),
    var(--ds-panel);
  border-color: var(--ds-line);
  animation: ds-boot-float-console 11s var(--ds-ease) 0s infinite;
}

/* Панель 2 (средняя): метрики — средний ритм, плавный easing */
.ds-boot__panel--metrics {
  transform: translate3d(216px, -189px, 0) rotate(0.3deg) scale(0.99);
  background:
    radial-gradient(ellipse 75% 60% at 38% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 65%),
    var(--ds-panel-raised);
  border-color: var(--ds-line);
  box-shadow: inset -10px 0 24px rgba(255, 255, 255, 0.03);
  animation: ds-boot-float-metrics 6.5s cubic-bezier(0.45, 0, 0.55, 1) 1.1s infinite;
}

/* Панель 3 (ближняя к фронту): парсинг — быстрее, но плавная траектория */
.ds-boot__panel--parse {
  transform: translate3d(-108px, -135px, 0) rotate(-0.25deg) scale(0.99);
  background:
    radial-gradient(ellipse 80% 65% at 55% 45%, rgba(255, 255, 255, 0.06) 0%, transparent 62%),
    var(--ds-panel);
  border-color: var(--ds-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: ds-boot-float-parse 4.4s cubic-bezier(0.45, 0, 0.55, 1) 0.35s infinite;
}

.ds-boot__panel--front {
  position: relative;
  transform: translate(0, 0);
  background: var(--ds-panel);
  border-color: var(--ds-line-strong);
  padding: 28px 32px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Тонкий свет по верхнему краю — передний слой «ближе» к зрителю */
  box-shadow:
    0 0 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Передняя панель статична — без float-анимации */
  z-index: 2;
}

/* Плавные замкнутые орбиты: translate ×3, лёгкий rotate ≤0.3deg, без рывков scale */
@keyframes ds-boot-float-console {
  0%,
  100% {
    transform: translate(-258px, 189px) rotate(-0.3deg) scale(0.99);
  }
  25% {
    transform: translate(-114px, 264px) rotate(0.2deg) scale(0.99);
  }
  50% {
    transform: translate(204px, 54px) rotate(0.25deg) scale(1);
  }
  75% {
    transform: translate(-156px, -36px) rotate(-0.15deg) scale(0.99);
  }
}

@keyframes ds-boot-float-metrics {
  0%,
  100% {
    transform: translate(216px, -189px) rotate(0.3deg) scale(0.99);
  }
  25% {
    transform: translate(-54px, -156px) rotate(-0.2deg) scale(0.99);
  }
  50% {
    transform: translate(-246px, -126px) rotate(0.25deg) scale(1);
  }
  75% {
    transform: translate(24px, 96px) rotate(-0.15deg) scale(0.99);
  }
}

@keyframes ds-boot-float-parse {
  0%,
  100% {
    transform: translate(-108px, -135px) rotate(-0.25deg) scale(0.99);
  }
  25% {
    transform: translate(84px, -54px) rotate(0.2deg) scale(0.99);
  }
  50% {
    transform: translate(54px, -246px) rotate(0.15deg) scale(1);
  }
  75% {
    transform: translate(-126px, -174px) rotate(-0.2deg) scale(0.99);
  }
}

.ds-boot__brand {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-brand-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ds-boot__phase {
  margin: 0;
  font-size: var(--ds-h3-size);
  font-weight: 500;
  color: var(--ds-text-muted);
}

/* Эквалайзер: тонкие дорожки прогресса по фазам */
.ds-boot__tracks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-boot__track {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.ds-boot__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--ds-accent);
  transition: width 480ms var(--ds-ease), opacity var(--ds-motion) var(--ds-ease);
}

/* Активная фаза: ползунок фиксированной ширины, как .ds-progress — без прыжков width */
.ds-boot__track.is-active .ds-boot__track-fill {
  width: 38%;
  opacity: 1;
  transition: opacity var(--ds-motion) var(--ds-ease);
  animation: ds-boot-track-indeterminate 1.4s ease-in-out infinite;
}

.ds-boot__track.is-done .ds-boot__track-fill {
  width: 100%;
  left: 0;
  opacity: 1;
  animation: none;
}

@keyframes ds-boot-track-indeterminate {
  0% {
    left: -8%;
  }
  50% {
    left: 72%;
  }
  100% {
    left: -8%;
  }
}

.ds-boot__hint {
  margin: 0;
  min-height: 1.2em;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
}

.ds-boot__hint.is-slow {
  color: var(--ds-text-muted);
}

/* Выход: задние панели поднимаются с параллаксом; фронт — только вертикально */
.ds-boot.is-exiting .ds-boot__panel--console {
  animation: ds-boot-exit-console 720ms var(--ds-ease) forwards;
}

.ds-boot.is-exiting .ds-boot__panel--metrics {
  animation: ds-boot-exit-metrics 660ms var(--ds-ease) forwards;
}

.ds-boot.is-exiting .ds-boot__panel--parse {
  animation: ds-boot-exit-parse 620ms var(--ds-ease) forwards;
}

.ds-boot.is-exiting .ds-boot__panel--front {
  animation: ds-boot-exit-front 600ms var(--ds-ease) forwards;
}

.ds-boot.is-exiting {
  animation: ds-boot-fade-out 760ms var(--ds-ease) forwards;
}

@keyframes ds-boot-exit-console {
  to {
    transform: translate3d(-258px, -504px, 0) scale(0.88) rotate(-0.3deg);
    opacity: 0;
  }
}

@keyframes ds-boot-exit-metrics {
  to {
    transform: translate3d(216px, -546px, 0) scale(0.91) rotate(0.3deg);
    opacity: 0;
  }
}

@keyframes ds-boot-exit-parse {
  to {
    transform: translate3d(-108px, -576px, 0) scale(0.92) rotate(0.2deg);
    opacity: 0;
  }
}

@keyframes ds-boot-exit-front {
  to {
    transform: translate3d(0, -164px, 0);
    opacity: 0;
  }
}

@keyframes ds-boot-fade-out {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-boot::before {
    animation: none;
    will-change: auto;
  }

  .ds-boot__light {
    animation: none;
    will-change: auto;
  }

  .ds-boot__panel--back {
    will-change: auto;
  }

  .ds-boot__panel--console,
  .ds-boot__panel--metrics,
  .ds-boot__panel--parse,
  .ds-boot__panel--front {
    animation: none;
  }

  .ds-boot__track.is-active .ds-boot__track-fill {
    animation: none;
    left: 40%;
    width: 38%;
  }

  .ds-boot.is-exiting .ds-boot__panel--console,
  .ds-boot.is-exiting .ds-boot__panel--metrics,
  .ds-boot.is-exiting .ds-boot__panel--parse,
  .ds-boot.is-exiting .ds-boot__panel--front,
  .ds-boot.is-exiting {
    animation-duration: 1ms;
  }
}