/* ============ SPLASH ============ */
.splash {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.splash.done {
  animation: splashOut 0.6s ease forwards;
}
@keyframes splashOut {
  to { opacity: 0; visibility: hidden; }
}

/* --- Logo Phase --- */
.splash-logo {
  width: min(60vw, 340px);
  height: auto;
  opacity: 0;
  transform: scale(0.85);
  animation:
    logoIn 1.0s cubic-bezier(.2,.9,.3,1) 0.3s forwards,
    logoOut 0.7s cubic-bezier(.6,0,.8,.2) 2.5s forwards;
}
@keyframes logoIn {
  0% { opacity: 0; transform: scale(0.85); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes logoOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* --- Wort-Phase --- */
.splash-words {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
}
.word {
  position: absolute;
  font-size: clamp(48px, 11vw, 96px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
}
/* Wort A: "Dein" */
.word-a {
  color: #fff;
  animation: wordA 4.5s cubic-bezier(.2,.9,.3,1) 3.2s forwards;
}
@keyframes wordA {
  /* 0-15%: fade in mittig */
  0%   { opacity: 0; transform: translate(0, 20px) scale(0.9); }
  15%  { opacity: 1; transform: translate(0, 0) scale(1); }
  /* 15-30%: kurz halten */
  30%  { opacity: 1; transform: translate(0, 0) scale(1); }
  /* 30-55%: nach rechts */
  55%  { opacity: 1; transform: translate(75px, 0) scale(1); }
  /* 55-75%: bleibt rechts während "Weg" links steht */
  75%  { opacity: 1; transform: translate(75px, 0) scale(1); }
  /* 75-100%: tauscht Platz nach links (finale Pos) */
  100% { opacity: 1; transform: translate(-95px, 0) scale(1); }
}

/* Wort B: "Weg" (kommt aus derselben Startposition) */
.word-b {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wordB 4.5s cubic-bezier(.2,.9,.3,1) 3.2s forwards;
}
@keyframes wordB {
  /* 0-30%: unsichtbar an gleicher Pos wie "Dein" */
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  30%  { opacity: 0; transform: translate(0, 0) scale(1); }
  /* 30-55%: sichtbar werden und nach links */
  55%  { opacity: 1; transform: translate(-95px, 0) scale(1); }
  /* 55-75%: bleibt links (state: "Weg Dein") */
  75%  { opacity: 1; transform: translate(-95px, 0) scale(1); }
  /* 75-100%: tauscht nach rechts (finale Pos) */
  100% { opacity: 1; transform: translate(75px, 0) scale(1); }
}

/* Ausblendung nach Abschluss */
.splash-words.fade-out {
  animation: wordsOut 0.6s ease 0.2s forwards;
}
@keyframes wordsOut {
  to { opacity: 0; transform: translateY(-30px); }
}

/* ============ LOGIN SCREEN ============ */
.login-screen {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  z-index: 10;
  opacity: 0;
  animation: loginIn 0.6s ease forwards;
}
@keyframes loginIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.login-bg { position: absolute; inset: 0; overflow: hidden; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: float 20s ease-in-out infinite;
}
.orb-1 {
  width: 500px; height: 500px;
  background: #4fb3ff;
  top: -150px; left: -150px;
  animation-delay: 0s;
}
.orb-2 {
  width: 450px; height: 450px;
  background: #7c3aff;
  bottom: -100px; right: -100px;
  animation-delay: 4s;
}
.orb-3 {
  width: 300px; height: 300px;
  background: #d9b0ff;
  top: 40%; right: 20%;
  opacity: 0.25;
  animation-delay: 8s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.1); }
  66% { transform: translate(-40px, 50px) scale(0.95); }
}

.login-content {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: max(24px, 6vh) 24px 32px;
  max-width: 480px;
  margin: 0 auto;
}

.login-brand {
  text-align: center;
  animation: fadeUp 0.6s ease 0.2s both;
}
.login-logo {
  width: 200px;
  height: auto;
  margin-bottom: 12px;
}
.login-tagline {
  color: var(--text-2);
  font-size: 15px;
  margin: 0;
  letter-spacing: 0.01em;
}

.login-card {
  background: rgba(20, 20, 30, 0.65);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: fadeUp 0.6s ease 0.4s both;
}
.login-card h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.login-sub {
  color: var(--text-2);
  font-size: 14px;
  margin: 0 0 22px;
}

.auth-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, background 0.15s, box-shadow 0.15s;
  margin-bottom: 10px;
}
.auth-btn:active { transform: scale(0.98); }
.auth-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.auth-btn.google {
  background: #fff;
  color: #111;
}
.auth-btn.google:hover { background: #f4f4f4; }
.auth-btn.apple {
  background: #000;
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}
.auth-btn.apple:hover { background: #0e0e12; }

.login-legal {
  color: var(--text-3);
  font-size: 11px;
  text-align: center;
  margin: 20px 0 0;
  line-height: 1.5;
}
.login-legal a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.15);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile Tweaks */
@media (max-height: 700px) {
  .login-logo { width: 160px; }
  .login-tagline { font-size: 14px; }
  .login-card { padding: 22px 20px; }
  .login-card h1 { font-size: 22px; }
}

/* Email Auth im Login-Card */
.auth-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 8px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.auth-input::placeholder { color: rgba(255,255,255,0.4); }
.auth-input:focus { border-color: rgba(124, 58, 255, 0.6); }
.auth-btn.primary {
  background: linear-gradient(135deg, #4fb3ff 0%, #7c3aff 100%);
  color: #fff;
  border: 0;
  padding: 13px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  font-size: 14px;
  font-family: inherit;
}
.auth-btn.primary:active { transform: scale(0.98); }
.auth-btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-link {
  background: transparent;
  border: 0;
  color: #a48bff;
  font-size: 13px;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: center;
  margin-top: 4px;
  font-family: inherit;
}