/* ==========================================================================
   STELLASPACE — plain HTML + CSS, no JavaScript
   ========================================================================== */

:root {
  --space: #05060d;
  --ink: #eef0ff;
  --muted: rgba(200, 206, 240, .62);
  --glow: 130, 140, 255;
  --track: .32em;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  background: var(--space);
  color: var(--ink);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: "Jost", "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(150, 140, 255, .35); color: #fff; }

/* --- Sky: nebula + stars ------------------------------------------------ */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 16% 10%, rgba(92, 80, 210, .20), transparent 70%),
    radial-gradient(45% 40% at 90% 26%, rgba(36, 120, 190, .12), transparent 70%),
    radial-gradient(38% 28% at 50% 44%, rgba(120, 110, 255, .10), transparent 70%),
    var(--space);
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  animation: twinkle 8s ease-in-out infinite;
}

.stars--s {
  box-shadow:
    32.9vw 13.0vh rgba(255,255,255,.35),
    51.0vw 43.2vh rgba(255,255,255,.35),
    94.6vw 79.7vh rgba(255,255,255,.35),
    61.3vw 56.7vh rgba(210,220,255,.45),
    39.3vw 95.7vh rgba(210,220,255,.45),
    26.5vw 0.8vh rgba(210,220,255,.45),
    83.9vw 34.3vh rgba(255,255,255,.55),
    61.3vw 67.6vh rgba(210,220,255,.45),
    22.4vw 58.3vh rgba(255,255,255,.55),
    0.5vw 87.3vh rgba(255,255,255,.55),
    50.2vw 75.7vh rgba(255,255,255,.55),
    41.8vw 20.3vh rgba(255,255,255,.35),
    23.2vw 97.0vh rgba(255,255,255,.55),
    69.2vw 42.6vh rgba(255,255,255,.35),
    49.7vw 97.5vh rgba(210,220,255,.45),
    3.0vw 91.3vh rgba(255,255,255,.35),
    78.5vw 46.0vh rgba(255,255,255,.55),
    28.2vw 66.6vh rgba(255,255,255,.35),
    46.0vw 36.2vh rgba(210,220,255,.45),
    86.3vw 43.4vh rgba(255,255,255,.55),
    81.7vw 40.1vh rgba(255,255,255,.55),
    36.3vw 48.8vh rgba(210,220,255,.45),
    53.2vw 5.0vh rgba(255,255,255,.35),
    3.8vw 60.0vh rgba(255,255,255,.35),
    51.6vw 86.3vh rgba(210,220,255,.45),
    56.4vw 4.1vh rgba(210,220,255,.45),
    11.9vw 35.4vh rgba(255,255,255,.35),
    31.1vw 70.8vh rgba(255,255,255,.55),
    68.5vw 50.6vh rgba(255,255,255,.55),
    29.1vw 44.0vh rgba(255,255,255,.55),
    94.4vw 91.8vh rgba(255,255,255,.35),
    21.9vw 63.0vh rgba(255,255,255,.35),
    93.8vw 37.8vh rgba(210,220,255,.45),
    31.6vw 56.0vh rgba(255,255,255,.55),
    67.1vw 52.3vh rgba(210,220,255,.45),
    91.5vw 74.4vh rgba(255,255,255,.35),
    92.3vw 5.0vh rgba(255,255,255,.55),
    36.6vw 71.1vh rgba(255,255,255,.35),
    43.4vw 73.5vh rgba(255,255,255,.35),
    23.2vw 71.7vh rgba(255,255,255,.35),
    69.7vw 20.9vh rgba(255,255,255,.55),
    52.2vw 91.0vh rgba(210,220,255,.45),
    61.1vw 52.9vh rgba(255,255,255,.35),
    89.7vw 69.4vh rgba(255,255,255,.55),
    12.2vw 76.7vh rgba(210,220,255,.45),
    5.0vw 42.9vh rgba(255,255,255,.55),
    65.4vw 33.0vh rgba(255,255,255,.55),
    64.9vw 19.7vh rgba(210,220,255,.45),
    65.3vw 66.9vh rgba(210,220,255,.45),
    41.7vw 86.4vh rgba(255,255,255,.55),
    22.3vw 91.6vh rgba(255,255,255,.55),
    16.1vw 49.5vh rgba(210,220,255,.45),
    8.6vw 92.0vh rgba(255,255,255,.55),
    3.1vw 59.5vh rgba(210,220,255,.45),
    42.3vw 36.6vh rgba(255,255,255,.35),
    14.3vw 77.2vh rgba(255,255,255,.35),
    17.9vw 9.5vh rgba(255,255,255,.55),
    81.2vw 91.8vh rgba(255,255,255,.55),
    40.3vw 8.3vh rgba(210,220,255,.45),
    73.4vw 42.0vh rgba(255,255,255,.35),
    67.1vw 54.4vh rgba(255,255,255,.35),
    8.9vw 58.3vh rgba(255,255,255,.35),
    47.1vw 26.3vh rgba(210,220,255,.45),
    29.3vw 2.7vh rgba(210,220,255,.45),
    26.6vw 60.5vh rgba(255,255,255,.55),
    85.5vw 89.8vh rgba(255,255,255,.55),
    38.2vw 40.7vh rgba(210,220,255,.45),
    90.1vw 45.7vh rgba(255,255,255,.55),
    54.2vw 20.9vh rgba(255,255,255,.55),
    70.3vw 93.2vh rgba(210,220,255,.45),
    80.4vw 87.1vh rgba(255,255,255,.35),
    39.5vw 7.1vh rgba(255,255,255,.35),
    40.9vw 84.1vh rgba(255,255,255,.55),
    48.7vw 70.3vh rgba(255,255,255,.55),
    7.7vw 68.9vh rgba(210,220,255,.45),
    71.5vw 12.9vh rgba(210,220,255,.45),
    94.0vw 69.0vh rgba(255,255,255,.35),
    9.9vw 31.3vh rgba(255,255,255,.55),
    51.9vw 3.6vh rgba(255,255,255,.55),
    49.4vw 24.6vh rgba(255,255,255,.35),
    26.4vw 82.6vh rgba(255,255,255,.35),
    93.0vw 31.7vh rgba(255,255,255,.35),
    15.9vw 49.2vh rgba(210,220,255,.45),
    33.1vw 55.0vh rgba(255,255,255,.55),
    10.3vw 77.1vh rgba(255,255,255,.55),
    7.5vw 41.4vh rgba(255,255,255,.55),
    79.3vw 61.1vh rgba(210,220,255,.45),
    86.5vw 20.0vh rgba(255,255,255,.35),
    14.9vw 27.9vh rgba(210,220,255,.45),
    56.0vw 16.8vh rgba(255,255,255,.55),
    45.1vw 95.0vh rgba(210,220,255,.45),
    10.9vw 31.2vh rgba(255,255,255,.55),
    32.0vw 3.9vh rgba(255,255,255,.35),
    16.3vw 42.4vh rgba(210,220,255,.45),
    28.5vw 77.3vh rgba(210,220,255,.45),
    60.2vw 8.7vh rgba(210,220,255,.45),
    13.9vw 0.1vh rgba(255,255,255,.35),
    79.1vw 38.0vh rgba(255,255,255,.35),
    69.1vw 90.8vh rgba(210,220,255,.45),
    33.5vw 7.0vh rgba(255,255,255,.35),
    9.1vw 45.9vh rgba(255,255,255,.55),
    37.9vw 92.2vh rgba(255,255,255,.55),
    84.2vw 9.0vh rgba(255,255,255,.35),
    58.3vw 30.4vh rgba(255,255,255,.55),
    49.1vw 88.9vh rgba(210,220,255,.45),
    75.7vw 31.3vh rgba(255,255,255,.55),
    58.1vw 87.8vh rgba(210,220,255,.45),
    4.4vw 91.3vh rgba(255,255,255,.35),
    87.4vw 82.3vh rgba(255,255,255,.35),
    3.3vw 42.0vh rgba(255,255,255,.35),
    76.0vw 10.9vh rgba(255,255,255,.35),
    94.1vw 18.2vh rgba(210,220,255,.45),
    87.6vw 4.3vh rgba(255,255,255,.55),
    88.2vw 46.6vh rgba(255,255,255,.55),
    43.8vw 39.2vh rgba(255,255,255,.35),
    4.3vw 93.3vh rgba(255,255,255,.55),
    80.2vw 95.7vh rgba(255,255,255,.35),
    64.5vw 5.0vh rgba(255,255,255,.55),
    5.7vw 6.8vh rgba(255,255,255,.55),
    56.1vw 42.5vh rgba(210,220,255,.45);
}

.stars--m {
  width: 1.5px;
  height: 1.5px;
  animation-duration: 5.5s;
  animation-delay: -2s;
  box-shadow:
    40.0vw 85.7vh rgba(255,255,255,.8),
    13.8vw 42.9vh rgba(200,210,255,.7),
    41.5vw 14.1vh rgba(255,255,255,.8),
    7.8vw 14.3vh rgba(255,240,225,.7),
    96.4vw 95.3vh rgba(200,210,255,.7),
    95.4vw 1.2vh rgba(200,210,255,.7),
    83.5vw 87.7vh rgba(200,210,255,.7),
    84.4vw 0.9vh rgba(255,255,255,.8),
    22.0vw 95.2vh rgba(255,255,255,.8),
    24.4vw 36.5vh rgba(255,255,255,.8),
    88.0vw 34.6vh rgba(255,240,225,.7),
    82.8vw 76.0vh rgba(200,210,255,.7),
    95.7vw 51.6vh rgba(200,210,255,.7),
    30.0vw 48.7vh rgba(255,240,225,.7),
    19.7vw 47.8vh rgba(200,210,255,.7),
    23.2vw 15.5vh rgba(255,240,225,.7),
    83.1vw 23.8vh rgba(200,210,255,.7),
    65.0vw 1.8vh rgba(200,210,255,.7),
    55.5vw 47.8vh rgba(255,240,225,.7),
    46.7vw 29.5vh rgba(255,255,255,.8),
    94.7vw 23.5vh rgba(200,210,255,.7),
    87.4vw 30.0vh rgba(255,240,225,.7),
    36.6vw 30.7vh rgba(200,210,255,.7),
    42.5vw 46.8vh rgba(255,255,255,.8),
    3.3vw 82.8vh rgba(255,240,225,.7),
    84.8vw 66.8vh rgba(255,255,255,.8),
    82.6vw 70.0vh rgba(255,240,225,.7),
    39.5vw 70.7vh rgba(255,255,255,.8),
    96.6vw 20.6vh rgba(200,210,255,.7),
    28.1vw 2.3vh rgba(200,210,255,.7),
    12.5vw 13.2vh rgba(255,240,225,.7),
    82.8vw 20.5vh rgba(200,210,255,.7),
    21.1vw 83.3vh rgba(255,255,255,.8),
    30.4vw 73.2vh rgba(200,210,255,.7),
    13.6vw 11.8vh rgba(255,240,225,.7),
    38.3vw 37.5vh rgba(255,240,225,.7),
    45.3vw 37.6vh rgba(255,240,225,.7),
    83.8vw 43.4vh rgba(200,210,255,.7),
    43.0vw 31.4vh rgba(200,210,255,.7),
    57.2vw 16.6vh rgba(255,240,225,.7),
    0.7vw 55.1vh rgba(200,210,255,.7),
    70.7vw 18.8vh rgba(255,240,225,.7);
}

.stars--l {
  width: 2px;
  height: 2px;
  animation-duration: 3.8s;
  animation-delay: -1s;
  box-shadow:
    8.4vw 14.9vh #fff,
    8.4vw 14.9vh 4px 1px rgba(170,180,255,.45),
    21.2vw 6.1vh #dfe4ff,
    21.2vw 6.1vh 4px 1px rgba(170,180,255,.45),
    33.5vw 27.8vh #fff4e8,
    33.5vw 27.8vh 4px 1px rgba(170,180,255,.45),
    64.2vw 18.6vh #fff,
    64.2vw 18.6vh 4px 1px rgba(170,180,255,.45),
    78.7vw 7.8vh #dfe4ff,
    78.7vw 7.8vh 4px 1px rgba(170,180,255,.45),
    92.4vw 31.5vh #fff4e8,
    92.4vw 31.5vh 4px 1px rgba(170,180,255,.45),
    12.6vw 58.2vh #fff,
    12.6vw 58.2vh 4px 1px rgba(170,180,255,.45),
    88.3vw 62.4vh #dfe4ff,
    88.3vw 62.4vh 4px 1px rgba(170,180,255,.45),
    46.1vw 9.2vh #fff4e8,
    46.1vw 9.2vh 4px 1px rgba(170,180,255,.45);
}

.meteor {
  position: absolute;
  top: 14vh;
  left: 76vw;
  width: 140px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(190, 200, 255, .35) 30%, transparent);
  transform-origin: left center;
  opacity: 0;
  animation: meteor 13s ease-out 4s infinite;
}

/* --- Planet horizon ----------------------------------------------------- */

.planet {
  position: fixed;
  z-index: 1;
  top: 78vh;
  top: 78svh;
  left: 50%;
  width: 260vmax;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(90% 50% at 50% 0%, #121634 0%, #0a0c1d 14%, var(--space) 40%);
  box-shadow:
    inset 0 1px 0 rgba(225, 228, 255, .55),
    inset 0 24px 60px -30px rgba(var(--glow), .35),
    0 0 0 1px rgba(180, 190, 255, .18),
    0 -2px 18px rgba(var(--glow), .35),
    0 -24px 90px rgba(110, 100, 255, .20),
    0 -70px 220px rgba(80, 70, 220, .16);
  animation: rise 2.4s cubic-bezier(.16, .8, .24, 1) both;
}

/* --- Hero text ---------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12vh 16px 22vh;
  padding: 12svh 16px 22svh;
}

.brand {
  margin: 0;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 8vw, 6.25rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track);
  padding-left: var(--track); /* balance the trailing letter-space */
  white-space: nowrap;
  background:
    linear-gradient(100deg,
      #b3bbff 0%, #e9ecff 28%, #ffffff 44%, #d6c9ff 50%,
      #ffffff 56%, #e9ecff 72%, #b3bbff 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(var(--glow), .35));
  animation:
    reveal 2.2s cubic-bezier(.16, .8, .24, 1) both,
    shimmer 14s linear 2.2s infinite;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(1.4rem, 3.2vw, 2.25rem) 0 clamp(1rem, 2.4vw, 1.5rem);
  animation: fade-up 1.6s cubic-bezier(.16, .8, .24, 1) .9s both;
}

.divider__line {
  width: clamp(48px, 10vw, 128px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 198, 255, .65));
}

.divider__line:last-child { transform: scaleX(-1); }

.divider__star {
  width: 11px;
  height: 11px;
  fill: #eceeff;
  filter: drop-shadow(0 0 6px rgba(var(--glow), .95));
  animation: pulse 4.5s ease-in-out infinite;
}

.brand-th {
  margin: 0;
  font-family: "Anuphan", "Jost", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.375rem);
  letter-spacing: .14em;
  padding-left: .14em;
  color: rgba(214, 219, 255, .74);
  animation: fade-up 1.6s cubic-bezier(.16, .8, .24, 1) 1.2s both;
}

/* --- Footer ------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 22px clamp(16px, 4vw, 48px) calc(22px + env(safe-area-inset-bottom));
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--muted);
  animation: fade-up 1.6s ease 1.6s both;
}

.footer p { margin: 0; }

.footer__powered {
  display: flex;
  align-items: center;
  gap: .7em;
}

.footer__maker {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(180, 172, 255, .3);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 20, 46, .6);
  box-shadow:
    0 0 18px rgba(var(--glow), .14),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  font-weight: 500;
  line-height: 1;
}

.footer__code {
  display: flex;
  align-items: center;
  padding: 5px 8px 5px 10px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  letter-spacing: 0;
  color: #c6b8ff;
  background: rgba(150, 130, 255, .14);
  border-right: 1px solid rgba(180, 172, 255, .22);
}

.footer__name {
  padding: 5px 12px 5px 10px;
  letter-spacing: .04em;
  background: linear-gradient(90deg, #e2e5ff, #bca9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- 404 ---------------------------------------------------------------- */

.link {
  color: rgba(214, 219, 255, .85);
  text-decoration: none;
  border-bottom: 1px solid rgba(190, 198, 255, .35);
  transition: color .2s, border-color .2s;
}

.link:hover,
.link:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, .8);
  outline: none;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 640px) {
  .footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  :root { --track: .22em; }
}

/* --- Motion ------------------------------------------------------------- */

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@keyframes meteor {
  0% { opacity: 0; transform: translate(0, 0) rotate(-32deg); }
  1.5% { opacity: 1; }
  7% { opacity: 0; transform: translate(-360px, 225px) rotate(-32deg); }
  100% { opacity: 0; transform: translate(-360px, 225px) rotate(-32deg); }
}

@keyframes rise {
  from { transform: translateY(8vh); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes reveal {
  from {
    opacity: 0;
    letter-spacing: calc(var(--track) * 2);
    padding-left: calc(var(--track) * 2);
    filter: blur(14px) drop-shadow(0 0 28px rgba(var(--glow), 0));
  }
  to {
    opacity: 1;
    letter-spacing: var(--track);
    padding-left: var(--track);
    filter: blur(0) drop-shadow(0 0 28px rgba(var(--glow), .35));
  }
}

@keyframes shimmer {
  to { background-position: 200% 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
  50% { transform: scale(1.25) rotate(45deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; }
  .meteor { display: none; }
}