/* Landing: first thing a new visitor sees. "Explore your fate", then a warp into the terminal. */
html[data-landing="skip"] #landing { display: none; }
html[data-landing="show"] body { overflow: hidden; }

#landing {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  display: grid; place-items: center;
  background: #03040a; color: var(--text);
  --warp-ease: cubic-bezier(0.55, 0, 0.85, 0.35);
}
.landing-bg, .landing-veil, .landing-stars, .landing-flash { position: absolute; inset: 0; }
.landing-bg {
  background: url("/assets/scene-banner.jpg") center 58% / cover no-repeat;
  transform: scale(1.04); transform-origin: 50% 42%;
  animation: landing-drift 28s ease-in-out infinite alternate;
}
.landing-veil { background:
  radial-gradient(70% 55% at 50% 44%, rgba(3, 4, 10, 0.12) 0%, rgba(3, 4, 10, 0.62) 100%),
  linear-gradient(180deg, rgba(3, 4, 10, 0.55) 0%, rgba(3, 4, 10, 0.1) 40%, rgba(3, 4, 10, 0.72) 100%); }
.landing-stars { width: 100%; height: 100%; display: block; }
.landing-flash { background: radial-gradient(circle at 50% 46%, #fff 0%, rgba(196, 176, 255, 0.95) 22%, rgba(122, 92, 255, 0.55) 48%, transparent 75%); opacity: 0; pointer-events: none; }

.landing-content {
  position: relative; z-index: 2; width: min(100% - 32px, 760px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
  padding: 24px 0; transform-origin: 50% 50%;
}
.landing-kicker { margin: 0 0 18px; font: 500 11px var(--font-ui); letter-spacing: 0.34em; text-transform: uppercase; color: var(--violet-hi); }
.landing-mark { display: block; width: min(82vw, 520px); height: auto; filter: drop-shadow(0 0 40px rgba(138, 104, 255, 0.45)); }
.landing-title {
  margin: 14px 0 0; font-family: var(--font-brand); font-weight: var(--weight-medium); text-transform: uppercase;
  font-size: clamp(22px, 4.6vw, 44px); letter-spacing: 0.22em; line-height: 1.15; color: #f4f1ff;
  text-shadow: 0 2px 28px rgba(3, 4, 10, 0.9);
}
.landing-sub { margin: 16px 0 0; max-width: 46ch; font-size: clamp(13.5px, 1.6vw, 16px); line-height: 1.6; color: #d3d8e6; text-shadow: 0 1px 18px rgba(3, 4, 10, 0.95); }

.landing-enter {
  position: relative; margin-top: 34px; height: 54px; padding: 0 34px; display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--violet-hi); border-radius: var(--r2);
  background: linear-gradient(135deg, rgba(138, 104, 255, 0.42), rgba(60, 40, 150, 0.35));
  color: #fff; font: 600 13px var(--font-ui); letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 34px rgba(138, 104, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.06);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.landing-enter svg { width: 16px; height: 16px; transition: transform .18s; }
.landing-enter::before { content: ""; position: absolute; inset: -7px; border-radius: 8px; border: 1px solid rgba(201, 188, 255, 0.5); animation: landing-ring 2.4s ease-out infinite; pointer-events: none; }
.landing-enter:hover { transform: translateY(-1px); box-shadow: 0 0 52px rgba(160, 130, 255, 0.6), inset 0 0 22px rgba(255, 255, 255, 0.1); }
.landing-enter:hover svg { transform: translateX(4px); }
.landing-enter:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.landing-hint { margin: 16px 0 0; font: 400 11px var(--font-data); letter-spacing: 0.12em; color: #aab2c6; }
.landing-link { color: #d8ceff; text-decoration: underline; text-underline-offset: 3px; }
.landing-link:hover { color: #fff; }
.landing-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 20px; text-align: center; font: 500 10.5px var(--font-ui); letter-spacing: 0.26em; text-transform: uppercase; color: #8f98ad; }

/* entrance */
.landing-content > * { animation: landing-in .9s cubic-bezier(.16, 1, .3, 1) backwards; }
.landing-content > :nth-child(1) { animation-delay: .15s; }
.landing-content > :nth-child(2) { animation-delay: .3s; }
.landing-content > :nth-child(3) { animation-delay: .5s; }
.landing-content > :nth-child(4) { animation-delay: .7s; }
.landing-content > :nth-child(5) { animation-delay: .9s; }
.landing-content > :nth-child(6) { animation-delay: 1.1s; }

/* the warp: stars streak (canvas), the world rushes toward you, light floods in, the terminal arrives */
#landing.is-warping .landing-bg { animation: none; transform: scale(3.4); filter: blur(2px) brightness(1.7) saturate(1.3); transition: transform 2.2s var(--warp-ease), filter 2.2s var(--warp-ease); }
#landing.is-warping .landing-veil { opacity: 0.35; transition: opacity 1.6s; }
#landing.is-warping .landing-content { animation: none; opacity: 0; transform: scale(1.6); filter: blur(8px); transition: opacity .6s ease-in, transform 1.2s var(--warp-ease), filter .6s; pointer-events: none; }
#landing.is-warping .landing-enter::before { animation: none; }
#landing.is-flash .landing-flash { opacity: 1; transition: opacity .42s ease-in; }
#landing.is-done { opacity: 0; visibility: hidden; transition: opacity .9s ease-out, visibility 0s .9s; pointer-events: none; }
#landing.is-done .landing-bg { transform: scale(4.2); transition: transform .9s ease-out; }

body.arriving #app { animation: landing-arrive 1.25s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes landing-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes landing-drift { from { transform: scale(1.04) translate3d(-0.6%, 0, 0); } to { transform: scale(1.12) translate3d(0.8%, -1%, 0); } }
@keyframes landing-ring { 0% { transform: scale(0.96); opacity: 0.9; } 100% { transform: scale(1.22, 1.5); opacity: 0; } }
@keyframes landing-arrive { 0% { opacity: 0; transform: scale(1.12); filter: brightness(2.2) blur(8px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }

@media (max-width: 560px) { .landing-enter { height: 52px; padding: 0 26px; } .landing-foot { font-size: 9.5px; letter-spacing: 0.18em; padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) {
  .landing-bg { animation: none; }
  .landing-content > * { animation: none; opacity: 1; transform: none; }
  .landing-enter::before { animation: none; display: none; }
  #landing.is-done { transition: opacity .3s; }
  #landing.is-done .landing-bg { transform: none; transition: none; }
  body.arriving #app { animation: none; }
}