@import url("https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap");

:root {
  --text: #eef8ff;
  --muted: #b8cfdd;
  --accent: #63d6ff;
  --panel: rgba(5, 12, 22, 0.9);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  font-family: "Silkscreen", monospace;
  color: var(--text);
  background: #05070b;
}

button,
input,
select {
  font: inherit;
}

#chrisos-login {
  position: fixed;
  inset: 0;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      rgba(2, 7, 14, 0.34),
      rgba(2, 7, 14, 0.74)
    ),
    url("/assets/backgrounds/chrisos-fjord.png")
      center center / cover no-repeat;
}

.chrisos-login-scene {
  position: relative;

  width: min(96vw, 1180px);
  min-height: 760px;

  color: var(--text);
  text-align: center;
}

/* Schiff */

.chrisos-login-ship-layer {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;
}

.chrisos-viking-ship {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 5;

  width: min(900px, 92vw);

  opacity: 0;

  transform:
    translateX(-140vw)
    translateY(-50%)
    rotate(-1deg);

  transition:
    transform 2.4s steps(24, end),
    opacity 300ms ease;
}

body.chrisos-ship-arrived .chrisos-viking-ship {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(-50%)
    rotate(0deg);

  animation:
    chrisosShipIdle 3.2s steps(12) 2.4s infinite;
}

.chrisos-ship-sprite {
  display: block;
  width: 100%;
  height: auto;

  image-rendering: pixelated;

  filter:
    drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.45));
}

@keyframes chrisosShipIdle {
  0%,
  100% {
    transform:
      translateX(-50%)
      translateY(-50%)
      rotate(-0.4deg);
  }

  50% {
    transform:
      translateX(-50%)
      translateY(calc(-50% + 5px))
      rotate(0.6deg);
  }
}

/* Wasser */

.chrisos-scene-water {
  position: absolute;
  left: 50%;
  top: calc(47% + 20px);
  z-index: 6;

  width: min(1200px, 100vw);
  height: 260px;

  overflow: hidden;

  transform: translateX(-50%);

  pointer-events: none;
}

.chrisos-water-track {
  display: flex;

  width: max-content;
  height: 100%;

  animation: chrisosWaterScroll 4s linear infinite;
  will-change: transform;
}

.chrisos-water-sprite {
  display: block;
  flex: 0 0 1200px;

  width: 1200px;
  height: auto;

  transform: scaleY(1.7);
  transform-origin: top center;

  image-rendering: pixelated;
}

@keyframes chrisosWaterScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-1200px);
  }
}

/* Login-Oberfläche */

.chrisos-login-ui {
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 10;

  width: min(94vw, 520px);

  transform: translateX(-50%);
}

.chrisos-login-brand {
  margin-bottom: 18px;
}

.chrisos-login-brand h1 {
  margin: 0;

  font-size: clamp(2rem, 6vw, 4.5rem);
  letter-spacing: 0.08em;

  text-shadow:
    0 0 12px rgba(99, 214, 255, 0.7),
    4px 4px 0 rgba(0, 0, 0, 0.55);
}

.chrisos-login-brand p {
  margin: 10px 0 0;

  color: #f3fbff;
  font-size: 0.9rem;
}

#chrisos-login-form {
  padding: 18px;

  display: grid;
  gap: 12px;

  background: var(--panel);
  border: 2px solid rgba(99, 214, 255, 0.32);
  border-radius: 8px;

  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.48),
    0 0 24px rgba(99, 214, 255, 0.2);

  backdrop-filter: blur(10px);
}

#chrisos-login-form label {
  text-align: left;

  color: var(--muted);
  font-size: 0.64rem;
}

#username,
#password {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;

  color: var(--text);

  background: rgba(8, 16, 28, 0.96);
  border: 2px solid rgba(99, 214, 255, 0.26);
  border-radius: 6px;

  outline: none;
}

#username:focus,
#password:focus {
  border-color: rgba(99, 214, 255, 0.75);

  box-shadow:
    0 0 16px rgba(99, 214, 255, 0.2);
}

#login-submit {
  min-height: 46px;
  padding: 10px 14px;

  color: #07101b;
  cursor: pointer;

  background: var(--accent);
  border: 3px solid #dff8ff;
  border-radius: 4px;

  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.55);

  transition:
    transform 150ms ease,
    filter 150ms ease;
}

#login-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

#login-submit:disabled {
  cursor: wait;
  opacity: 0.55;
}

.login-error {
  margin: 0;

  color: #ff8d8d;
  font-size: 0.62rem;
  line-height: 1.6;
}

.chrisos-login-ui footer {
  margin-top: 14px;

  color: var(--muted);
  font-size: 0.58rem;
}

/* Erfolgreiche Anmeldung */

body.chrisos-login-success .chrisos-viking-ship {
  animation:
    chrisosShipDepart 900ms steps(18) forwards;
}

@keyframes chrisosShipDepart {
  to {
    transform:
      translateX(140vw)
      translateY(-50%)
      rotate(1deg);

    opacity: 0;
  }
}

@media (max-width: 760px) {
  .chrisos-login-scene {
    min-height: 680px;
  }

  .chrisos-viking-ship {
    top: 55%;
  }

  .chrisos-login-ui {
    top: 5%;
  }

  .chrisos-scene-water {
    top: calc(51% + 20px);
  }
}