[data-page="landing"] { --star-density: 1.7; }
.land { overflow: hidden; }
.land-stage { position: relative; z-index: 3; min-height: 100svh; display: block; }
.stars { position: fixed; left: 0; right: 0; top: -100%; height: 300%; z-index: 1; pointer-events: none; }
.stars.s1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 130px 80px, #dff, transparent),
    radial-gradient(1px 1px at 70px 190px, #fff, transparent), radial-gradient(1px 1px at 250px 140px, #cfe, transparent),
    radial-gradient(1px 1px at 300px 260px, #fff, transparent), radial-gradient(1px 1px at 180px 300px, #fff, transparent),
    radial-gradient(1px 1px at 40px 250px, #eff, transparent), radial-gradient(1px 1px at 220px 40px, #fff, transparent),
    radial-gradient(1px 1px at 110px 140px, #fff, transparent), radial-gradient(1px 1px at 290px 30px, #dff, transparent);
  background-size: 320px 320px; opacity: .55;
  animation: twinkle-a 7s ease-in-out infinite, drift-a 240s linear infinite;
}
.stars.s2 {
  background-image:
    radial-gradient(1.5px 1.5px at 60px 90px, #fff, transparent), radial-gradient(1.5px 1.5px at 400px 60px, #cff, transparent),
    radial-gradient(1.5px 1.5px at 250px 330px, #fff, transparent), radial-gradient(1.5px 1.5px at 460px 420px, #dfe, transparent),
    radial-gradient(1.5px 1.5px at 120px 470px, #fff, transparent), radial-gradient(1.5px 1.5px at 330px 200px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 500px 260px, #eff, transparent);
  background-size: 540px 540px; opacity: .7;
  animation: twinkle-b 5s ease-in-out infinite, drift-b 160s linear infinite;
}
.stars.s3 {
  background-image:
    radial-gradient(2px 2px at 150px 120px, #fff, transparent), radial-gradient(6px 6px at 150px 120px, rgba(140,230,255,.25), transparent),
    radial-gradient(2px 2px at 620px 380px, #fff, transparent), radial-gradient(6px 6px at 620px 380px, rgba(160,180,255,.25), transparent),
    radial-gradient(2px 2px at 380px 640px, #fff, transparent), radial-gradient(6px 6px at 380px 640px, rgba(140,230,255,.22), transparent),
    radial-gradient(2px 2px at 760px 90px, #fff, transparent);
  background-size: 860px 860px; opacity: .85;
  animation: twinkle-a 3.6s ease-in-out infinite reverse, drift-c 110s linear infinite;
}
@keyframes twinkle-a { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes twinkle-b { 0%, 100% { opacity: .75; } 50% { opacity: .4; } }
@keyframes drift-a { to { background-position: 0 -320px; } }
@keyframes drift-b { to { background-position: 0 -540px; } }
@keyframes drift-c { to { background-position: 0 -860px; } }
.shoot { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.shoot i {
  position: absolute; top: 10%; left: 70%; width: 150px; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(140,230,255,.4) 40%, transparent);
  transform: rotate(-28deg); transform-origin: left center;
  animation: shoot 11s ease-in 3s infinite;
}
.shoot i:nth-child(2) { top: 26%; left: 92%; width: 110px; animation-duration: 15s; animation-delay: 8s; }
.shoot i:nth-child(3) { top: 4%; left: 40%; width: 130px; animation-duration: 19s; animation-delay: 13s; }
@keyframes shoot {
  0% { opacity: 0; transform: rotate(-28deg) translateX(0); }
  1% { opacity: 1; }
  7% { opacity: 0; transform: rotate(-28deg) translateX(-420px); }
  100% { opacity: 0; transform: rotate(-28deg) translateX(-420px); }
}
.halo {
  position: fixed; left: 50%; top: 50%; width: min(80vw, 640px); aspect-ratio: 1; transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(88, 101, 242, .16), rgba(94, 234, 212, .05) 55%, transparent);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.space-text {
  position: absolute; left: 50%; bottom: calc(50% + 48px); transform: translateX(-50%);
  width: min(88vw, 560px); margin: 0; text-align: center;
  font-family: var(--font); font-weight: 400; letter-spacing: .05em; line-height: 1.65;
  font-size: clamp(.9rem, 1.45vw, 1.08rem); color: rgba(214, 228, 250, .62);
  perspective: 700px;
}
.space-text span { display: inline-block; }
.js .space-text span { animation: from-space 2.2s cubic-bezier(.16, .84, .24, 1) both; }
.js .space-text span:nth-child(1)  { animation-delay: .9s; }   .js .space-text span:nth-child(2)  { animation-delay: .98s; }
.js .space-text span:nth-child(3)  { animation-delay: 1.06s; } .js .space-text span:nth-child(4)  { animation-delay: 1.14s; }
.js .space-text span:nth-child(5)  { animation-delay: 1.22s; } .js .space-text span:nth-child(6)  { animation-delay: 1.30s; }
.js .space-text span:nth-child(7)  { animation-delay: 1.38s; } .js .space-text span:nth-child(8)  { animation-delay: 1.46s; }
.js .space-text span:nth-child(9)  { animation-delay: 1.54s; } .js .space-text span:nth-child(10) { animation-delay: 1.62s; }
.js .space-text span:nth-child(11) { animation-delay: 1.70s; } .js .space-text span:nth-child(12) { animation-delay: 1.78s; }
.js .space-text span:nth-child(13) { animation-delay: 1.86s; } .js .space-text span:nth-child(14) { animation-delay: 1.94s; }
.js .space-text span:nth-child(15) { animation-delay: 2.02s; } .js .space-text span:nth-child(16) { animation-delay: 2.10s; }
.js .space-text span:nth-child(17) { animation-delay: 2.18s; } .js .space-text span:nth-child(18) { animation-delay: 2.26s; }
.js .space-text span:nth-child(19) { animation-delay: 2.34s; }
@keyframes from-space {
  0%   { opacity: 0; transform: translate3d(0, -14px, -900px) scale(.7); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.discord {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 11px;
  padding: 14px 26px; border-radius: 999px;
  color: #eef0ff; text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: .03em;
  background: rgba(88, 101, 242, .18); border: 1px solid rgba(150, 160, 255, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(88, 101, 242, .25), inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.discord::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(150, 160, 255, .35); animation: ring 3.2s ease-out infinite;
}
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.16); } }
.discord svg { width: 20px; height: 20px; fill: none; stroke: #eef0ff; stroke-width: 1.8; stroke-linejoin: round; }
.discord svg circle { fill: #eef0ff; stroke: none; }
.discord:hover { background: rgba(88, 101, 242, .42); box-shadow: 0 0 60px rgba(88, 101, 242, .45), inset 0 1px 0 rgba(255,255,255,.2); transform: translate(-50%, -52%); }
.js:not(.skip-intro) .discord { animation: fade-in-btn 1.1s ease 2.6s both; }
@keyframes fade-in-btn { from { opacity: 0; transform: translate(-50%, -38%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.land-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; flex-direction: column; gap: 4px; align-items: center; }
.land-foot .legal { margin: 0; }
.land-foot .tiny { font-size: .66rem; color: rgba(163, 155, 204, .4); }
.land-foot .tiny a { color: inherit; }
@media (max-width: 560px) {
  .space-text { bottom: calc(50% + 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .space-text span, .stars, .shoot i, .halo { animation: none !important; }
}
.land-logo {
  position: absolute; left: 50%; bottom: calc(50% + 46px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vw, 16px);
  pointer-events: none; user-select: none; z-index: 0;
}
.land-logo svg { width: clamp(34px, 4.6vw, 56px); height: auto; fill: rgba(220, 245, 255, .22);
  filter: drop-shadow(0 0 18px rgba(94, 234, 212, .25)); }
.land-logo span {
  font-family: var(--font-brand); font-weight: 600; white-space: nowrap;
  font-size: clamp(2.4rem, 9vw, 6.6rem); letter-spacing: .32em; padding-left: .32em; line-height: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(160, 200, 255, .07));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js:not(.skip-intro) .land-logo { animation: logo-depth 2.6s cubic-bezier(.16, .84, .24, 1) .6s both; }
@keyframes logo-depth { from { opacity: 0; transform: translateX(-50%) scale(.82); filter: blur(8px); } to { opacity: 1; transform: translateX(-50%); filter: blur(0); } }
.space-text { bottom: auto; top: calc(50% + 50px); }
@media (max-width: 560px) {
  .land-logo { bottom: calc(50% + 40px); }
  .land-logo span { font-size: clamp(1.9rem, 10.5vw, 3rem); letter-spacing: .22em; padding-left: .22em; }
  .space-text { top: calc(50% + 44px); }
}