html.login::before {
  background-color: #de2750;
  background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 86px);
  background-size: auto;
}

.stage {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 58%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28pt;
  pointer-events: none;
}

.stage-logo {
  position: relative;
  width: min(420px, 70%);
  aspect-ratio: 386 / 251;
}

/* logo składane z fragmentów, jak na ekranie startowym konsoli */
.stage .lg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.lg-hull {
  transform-origin: 15% 85%;
  animation: lg-hull 1400ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
}

.lg-word {
  animation: lg-wipe 1000ms cubic-bezier(0.65, 0, 0.35, 1) 700ms both;
}

.lg-sell {
  animation: lg-up 700ms cubic-bezier(0.23, 1, 0.32, 1) 1000ms both;
}

.lg-www {
  animation: lg-up 700ms cubic-bezier(0.23, 1, 0.32, 1) 1450ms both;
}

.lg-pharm {
  animation: lg-left 750ms cubic-bezier(0.23, 1, 0.32, 1) 1450ms both;
}

.lg-tm {
  transform-origin: 96% 72%;
  animation: lg-pop 520ms cubic-bezier(0.3, 1.6, 0.5, 1) 1750ms both;
}

@keyframes lg-hull {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.3;
    transform: translate(-4%, 3%) rotate(-3deg);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
  }
}

@keyframes lg-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes lg-up {
  from {
    opacity: 0;
    transform: translateY(3%);
  }
}

@keyframes lg-left {
  from {
    opacity: 0;
    transform: translateX(4%);
  }
}

@keyframes lg-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes lg-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage .lg {
    animation: lg-fade 400ms ease both;
  }
}

main {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 700px) {
  .stage {
    display: none;
  }
}

form .error {
  color: #ffe08a;
  display: block;
  margin-top: 8pt;
}

form .brand {
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 12pt;
}