/* ── LANDING PAGE (V2.1) ──────────────────────────── */

.landing {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: #08080c;
  background-image:
    linear-gradient(180deg, rgba(8, 8, 14, 0.55) 0%, rgba(8, 8, 14, 0.7) 50%, rgba(8, 8, 14, 0.85) 100%),
    url('../assets/landing-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 100;
}

/* Subtle violet glow on top of image — adds magic vibe */
.landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 35%, rgba(155, 109, 255, 0.22) 0%, transparent 35%),
    radial-gradient(circle at 75% 65%, rgba(155, 109, 255, 0.12) 0%, transparent 40%);
  filter: blur(60px);
  animation: landingPulse 8s ease-in-out infinite;
  pointer-events: none;
}

/* Center vignette to keep text readable */
.landing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(8, 8, 14, 0.4) 70%, rgba(8, 8, 14, 0.8) 100%);
  pointer-events: none;
}

@keyframes landingPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.landing-inner {
  position: relative;
  text-align: center;
  z-index: 2;
  padding: 0 24px;
  animation: landingFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.landing-title {
  font-size: clamp(72px, 14vw, 160px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 0.95;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #f4e8ff 0%, #c9a8ff 35%, #9b6dff 65%, #6845c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 40px rgba(155, 109, 255, 0.4));
}

.landing-subtitle {
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 600;
  letter-spacing: 0.36em;
  color: #b89eff;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.landing-tagline {
  font-size: clamp(14px, 1.5vw, 18px);
  color: #aaa;
  margin: 0 0 44px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  background: #5865f2;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 4px 24px rgba(88, 101, 242, 0.4);
}

.landing-btn:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(88, 101, 242, 0.55);
}

.landing-btn:active { transform: translateY(0); }

.landing-btn svg { width: 22px; height: 22px; }

.landing-footer {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #444;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hide topbar/loading screen when landing is active */
.landing ~ * { display: none !important; }

@media (max-width: 480px) {
  .landing-title    { font-size: 64px; }
  .landing-tagline  { font-size: 13px; margin-bottom: 32px; }
  .landing-btn      { padding: 13px 24px; font-size: 14px; }
}