/* Экран загрузки до запуска приложения: точка → лист → распил на 4 детали → снова точка. */
@property --r { syntax: '<length>'; inherits: true; initial-value: 22px; }
@property --gap { syntax: '<length>'; inherits: true; initial-value: 0px; }

.boot {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: #fafafa; font: 500 12px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #a1a1aa;
}
.boot-mark { position: relative; width: 44px; height: 44px; animation: boot-box 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.boot-mark i {
  position: absolute; width: 22px; height: 22px; background: #09090b;
  translate: calc(var(--dx) * var(--gap)) calc(var(--dy) * var(--gap));
}
.boot-mark i:nth-child(1) { left: 0; top: 0; --dx: -1; --dy: -1; border-top-left-radius: var(--r); }
.boot-mark i:nth-child(2) { right: 0; top: 0; --dx: 1; --dy: -1; border-top-right-radius: var(--r); }
.boot-mark i:nth-child(3) { right: 0; bottom: 0; --dx: 1; --dy: 1; border-bottom-right-radius: var(--r); }
.boot-mark i:nth-child(4) { left: 0; bottom: 0; --dx: -1; --dy: 1; border-bottom-left-radius: var(--r); }
.boot-text { letter-spacing: .02em; animation: boot-fade 2.4s ease-in-out infinite; }

@keyframes boot-box {
  0%, 10% { --r: 22px; --gap: 0px; transform: scale(.4) rotate(0deg); }
  32% { --r: 3px; --gap: 0px; transform: scale(1) rotate(0deg); }
  48%, 60% { --r: 3px; --gap: 4px; transform: scale(1) rotate(0deg); }
  76% { --r: 3px; --gap: 0px; transform: scale(1) rotate(90deg); }
  92%, 100% { --r: 22px; --gap: 0px; transform: scale(.4) rotate(90deg); }
}
@keyframes boot-fade { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot-mark, .boot-text { animation: none; } }