/* Головна: темний фон, що повільно переливається, і назва по центру */
html, body { margin: 0; height: 100%; }
* { box-sizing: border-box; }

body {
  overflow: hidden;
  background: #070b13;
  color: #e6eef8;
}

.home {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  isolation: isolate;
}

/* Основний градієнт, що пливе */
.home::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  background: linear-gradient(120deg, #070b13 0%, #0d1b33 22%, #0a1424 40%, #12305a 58%, #0b1220 76%, #081019 100%);
  background-size: 300% 300%;
  animation: drift 22s ease-in-out infinite alternate;
}

/* М'які світлові плями */
.home::after {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(40% 35% at 25% 30%, rgba(63, 149, 224, .22), transparent 70%),
    radial-gradient(35% 30% at 75% 70%, rgba(26, 74, 122, .35), transparent 70%),
    radial-gradient(30% 28% at 60% 20%, rgba(90, 80, 200, .14), transparent 70%);
  filter: blur(30px);
  animation: float 30s ease-in-out infinite alternate;
}

h1 {
  margin: 0;
  font: 800 clamp(34px, 8.5vw, 112px)/1 "Unbounded", "Arial Black", system-ui, sans-serif;
  letter-spacing: -.02em;
  text-align: center;
  color: transparent;
  background: linear-gradient(100deg, #9fc8f0 0%, #ffffff 35%, #8ebde9 55%, #ffffff 75%, #9fc8f0 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(63, 149, 224, .35));
  animation: sheen 9s linear infinite;
}

/* Вхід / реєстрація — праворуч угорі */
.auth-nav {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.auth-nav a {
  padding: 10px 18px;
  border-radius: 10px;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e6eef8;
  text-decoration: none;
  border: 1px solid rgba(143, 189, 233, .35);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.auth-nav a.ghost { background: rgba(10, 20, 36, .35); }
.auth-nav a.ghost:hover { border-color: rgba(143, 189, 233, .7); }
.auth-nav a.solid {
  background: linear-gradient(180deg, #2f7fd0, #1d5fa6);
  border-color: #3f95e0;
  box-shadow: 0 0 20px rgba(63, 149, 224, .35);
}
.auth-nav a.solid:hover { box-shadow: 0 0 28px rgba(63, 149, 224, .55); }
.auth-nav a:focus-visible { outline: 2px solid #8ebde9; outline-offset: 2px; }

@media (max-width: 480px) {
  .auth-nav { top: 14px; right: 14px; gap: 8px; }
  .auth-nav a { padding: 9px 14px; font-size: 13px; }
}

@keyframes drift {
  0% { background-position: 0% 30%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 30% 100%; }
}
@keyframes float {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-3%, 4%) rotate(-6deg) scale(1); }
}
@keyframes sheen { to { background-position: -250% 0; } }

@media (prefers-reduced-motion: reduce) {
  .home::before, .home::after, h1 { animation: none; }
}