/* Public landing page: a night city, a searchlight with an infinity signal, a passing rocket.
   Always dark, whatever the system theme. */
.night {
  --night: #070a1c;
  --indigo: #151a3f;
  --violet: #3a2168;
  --signal: #ffd23f;
  --lime: #a4e35f;
  --ink: #f4f1ff;
  --brick-back: #1c1943;
  --brick-front: #0b0a1d;

  position: fixed;
  inset: 0;
  max-width: none;   /* override the app's centred <main> */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 100%, #4a2378 0%, rgba(58, 33, 104, .55) 35%, transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--indigo) 55%, var(--violet) 100%);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
body.bare:has(.night) { background: #070a1c; }

/* ---- sky ---- */
.stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; }
.tw { animation: twinkle 4s ease-in-out infinite; }
.tw1 { animation-delay: -1.3s; opacity: .8; }
.tw2 { animation-delay: -2.6s; opacity: .6; }
@keyframes twinkle { 50% { opacity: .25; } }

.planet {
  position: absolute; left: 7%; top: 11%;
  width: clamp(70px, 11vmin, 120px);
  animation: float 9s ease-in-out infinite;
}
.planet-body { fill: #6a3fb0; }
.planet-ring, .planet-front { fill: none; stroke: var(--lime); stroke-width: 3; opacity: .85; }
.planet-ring { stroke-dasharray: 150 400; stroke-dashoffset: -95; } /* back half hidden behind the planet */
@keyframes float { 50% { transform: translateY(-8px) rotate(-3deg); } }

.rocket {
  position: absolute; top: 18%; left: -12%;
  width: clamp(60px, 8vmin, 90px);
  opacity: 0;
  animation: fly 16s linear infinite 3s;
}
.rocket svg { display: block; transform: rotate(-12deg); }
.rocket-trail { fill: var(--lime); opacity: .5; }
.rocket-body { fill: var(--ink); }
.rocket-wing { fill: var(--lime); }
.rocket-window { fill: #6a3fb0; }
@keyframes fly {
  0%   { transform: translate(0, 0); opacity: 0; }
  2%   { opacity: 1; }
  18%  { transform: translate(125vw, -12vh); opacity: 1; }
  19%, 100% { transform: translate(125vw, -12vh); opacity: 0; }
}

.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140, 125, 190, .28), transparent);
  filter: blur(6px);
  animation: drift 40s ease-in-out infinite alternate;
}
.c1 { width: 46vmin; height: 14vmin; left: 22%; top: 9%; }
.c2 { width: 38vmin; height: 12vmin; right: 18%; top: 19%; animation-duration: 55s; }
@keyframes drift { to { transform: translateX(6vw); } }

/* ---- searchlight: rises from behind the skyline, sways slowly ---- */
.searchlight {
  --size: clamp(150px, 27vmin, 270px);
  position: absolute;
  left: 50%;
  top: clamp(36px, 9vh, 100px);
  bottom: 8vh;
  width: var(--size);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: sway 11s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50%      { transform: translateX(-50%) rotate(4deg); }
}
.beam {
  position: absolute; inset: calc(var(--size) * .3) 0 0 0;
  background: linear-gradient(0deg, rgba(255, 210, 63, .42), rgba(255, 210, 63, .07) 85%);
  clip-path: polygon(46% 100%, 54% 100%, 90% 0, 10% 0);
  filter: blur(2px);
}
.signal {
  position: absolute; top: 0; left: 0; width: 100%;
  display: block; border-radius: 50%;
  filter: drop-shadow(0 0 22px rgba(255, 210, 63, .55));
  transition: filter .3s;
}
.signal svg { display: block; width: 100%; height: auto; }
.signal .symbol { fill: none; stroke: #16122e; stroke-width: 15; stroke-linejoin: round; }
.signal:hover, .signal:focus-visible { filter: drop-shadow(0 0 34px rgba(255, 220, 90, .9)); }
.signal:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }

/* ---- name ---- */
.hero {
  position: absolute; left: 0; right: 0;
  top: calc(clamp(36px, 9vh, 100px) + clamp(150px, 27vmin, 270px) * .72 + 4vh);
  text-align: center; padding: 0 16px;
  pointer-events: none;
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.3rem, 9vw, 5.6rem);
  font-weight: 900; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  font-family: inherit;
  text-shadow: 0 2px 0 #0b0a1d, 0 0 28px rgba(106, 63, 176, .9);
}
.hero p {
  margin: .7em 0 0;
  font-size: clamp(.95rem, 2.6vw, 1.3rem);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lime);
  text-shadow: 0 1px 12px rgba(7, 10, 28, .9);
}
.hero p.more { margin-top: 1.2em; font-size: clamp(.72rem, 2vw, .92rem); letter-spacing: .16em; opacity: .85; }
.hero a { color: inherit; pointer-events: auto; text-decoration: none; }
.hero a:hover, .hero a:focus-visible { color: var(--signal); }

/* ---- skyline ---- */
.skyline {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: clamp(140px, 30vh, 300px);
}
.b-back { fill: var(--brick-back); }
.b-front { fill: var(--brick-front); }
.win { fill: var(--signal); opacity: .85; }
.win.dim { opacity: .35; }
.layer-back .win { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .tw, .planet, .rocket, .cloud, .searchlight { animation: none; }
  .rocket { display: none; }
}