:root {
  --paper: #f1ede3;
  --paper-deep: #e9e2d5;
  --ink: #0c3a59;
  --ink-soft: rgba(12, 58, 89, 0.20);
  --line: rgba(88, 83, 69, 0.14);
  --line-faint: rgba(88, 83, 69, 0.085);
  --line-strong: rgba(88, 83, 69, 0.27);
  --gold: #c79a48;
  --gold-soft: rgba(199, 154, 72, 0.28);
  --olive: #77804a;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.landing {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,252,244,.52) 0 13rem, transparent 34rem),
    radial-gradient(circle at 18% 18%, rgba(205,188,148,.08), transparent 32rem),
    linear-gradient(180deg, #f3efe6 0%, var(--paper) 50%, var(--paper-deep) 100%);
}

/* -------------------------------------------------------------------------
   Ambient orbital field
   ------------------------------------------------------------------------- */

.cosmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;

  /* Keep the full celestial field clearly in the background. */
  opacity: .62;
}

/*
  CSS-only nebula fog.
  Kept deliberately faint: atmosphere rather than another visual object.
*/
.cosmos::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;

  /*
    Organic teal nebula: several narrow overlapping clouds form a wisp
    instead of one broad coloured stain.
  */
  background:
    radial-gradient(ellipse 17% 8% at 55% 75%,
      rgba(45,127,135,.28) 0%,
      rgba(45,127,135,.16) 34%,
      rgba(45,127,135,.055) 58%,
      transparent 76%),
    radial-gradient(ellipse 23% 9% at 66% 70%,
      rgba(45,127,135,.24) 0%,
      rgba(45,127,135,.12) 38%,
      rgba(45,127,135,.035) 62%,
      transparent 79%),
    radial-gradient(ellipse 18% 7% at 77% 66%,
      rgba(45,127,135,.20) 0%,
      rgba(45,127,135,.085) 42%,
      transparent 76%),
    radial-gradient(ellipse 12% 5% at 69% 73%,
      rgba(248,243,225,.72) 0%,
      rgba(248,243,225,.26) 38%,
      transparent 73%),
    radial-gradient(ellipse 14% 6% at 83% 61%,
      rgba(119,128,74,.12) 0%,
      rgba(119,128,74,.045) 46%,
      transparent 78%);

  filter: blur(19px);
  opacity: .96;
  transform: rotate(-8deg) scale(1.08);
  transform-origin: 70% 70%;
  animation: nebula-drift-a 34s ease-in-out infinite alternate;
}


.cosmos::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;

  /*
    Secondary warm wisp with a pale luminous core.
    This crosses the teal cloud rather than sitting as a circular patch.
  */
  background:
    radial-gradient(ellipse 19% 7% at 25% 31%,
      rgba(199,154,72,.25) 0%,
      rgba(199,154,72,.12) 38%,
      rgba(199,154,72,.034) 62%,
      transparent 78%),
    radial-gradient(ellipse 26% 9% at 35% 36%,
      rgba(199,154,72,.20) 0%,
      rgba(199,154,72,.085) 42%,
      transparent 77%),
    radial-gradient(ellipse 16% 6% at 43% 40%,
      rgba(119,128,74,.11) 0%,
      rgba(119,128,74,.035) 47%,
      transparent 76%),
    radial-gradient(ellipse 11% 4% at 34% 35%,
      rgba(255,250,236,.74) 0%,
      rgba(255,250,236,.25) 38%,
      transparent 72%);

  filter: blur(21px);
  opacity: .88;
  transform: rotate(11deg) scale(1.10);
  transform-origin: 32% 36%;
  animation: nebula-drift-b 42s ease-in-out infinite alternate;
}

@keyframes nebula-drift-a {
  from { transform: rotate(-8deg) translate3d(-1.2%, 0, 0) scale(1.08); }
  to   { transform: rotate(-6deg) translate3d(1.8%, -1.0%, 0) scale(1.11); }
}

@keyframes nebula-drift-b {
  from { transform: rotate(11deg) translate3d(0, 1.0%, 0) scale(1.10); }
  to   { transform: rotate(9deg) translate3d(-1.5%, -1.0%, 0) scale(1.13); }
}

.orbit-system {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.orbit-line {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform-origin: center;
  will-change: width, height, left, top;
}

.orbit-system-faint .orbit-line {
  border-color: var(--line-faint);
}

.orbit-body {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Real image assets derived from the locked ASTROTOAD palette. */
.orbit-body img,
.spark img,
.shooting-star img,
.static-body img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Moving bodies: varied silhouettes, with a small luminous edge rather than flat opacity. */
.body-gas {
  width: clamp(20px, 2vw, 32px);
  height: clamp(20px, 2vw, 32px);
  opacity: .72;
}
.body-gas img {
  filter:
    brightness(1.07)
    saturate(.82)
    drop-shadow(0 0 7px rgba(199,154,72,.34));
}

.body-moon {
  width: clamp(30px, 3.2vw, 48px);
  height: clamp(30px, 3.2vw, 48px);
  opacity: .54;
}
.body-moon img {
  filter:
    brightness(1.10)
    saturate(.66)
    drop-shadow(0 0 8px rgba(255,243,213,.38));
}

.body-asteroid {
  width: clamp(18px, 2.1vw, 30px);
  height: clamp(18px, 2.1vw, 30px);
  opacity: .42;
}
.body-asteroid img {
  filter:
    brightness(1.05)
    saturate(.60)
    drop-shadow(0 0 5px rgba(255,240,205,.22));
}

.body-teal {
  width: clamp(28px, 3vw, 44px);
  height: clamp(28px, 3vw, 44px);
  opacity: .52;
}
.body-teal img {
  filter:
    brightness(1.10)
    saturate(.90)
    drop-shadow(0 0 9px rgba(45,127,135,.42));
}

/* Reuse one star asset at several scales/placements. */
.spark {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  background: none;
  clip-path: none;
  opacity: .64;
}
.spark img {
  filter: drop-shadow(0 0 7px rgba(199,154,72,.42));
}
.spark-a { top: 22.5%; right: 25%; }
.spark-b { bottom: 8.5%; left: 48.5%; width: 15px; height: 15px; opacity: .48; }
.spark-c { top: 61%; left: 14%; width: 11px; height: 11px; opacity: .34; }

/* Static bodies. Different silhouettes are used; selected assets recur elsewhere at smaller scale. */
.static-body {
  --body-opacity: .20;
  --glow: rgba(255,244,216,.24);

  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.static-body::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0 18%, transparent 68%);
  filter: blur(18px);
  transform: scale(1.22);
  opacity: .90;
}

.static-body img {
  position: relative;
  opacity: var(--body-opacity);
}

/* Top-right is intentionally a moon, not another ringed planet. */
.moon-tr {
  top: -12vh;
  right: -8vw;
  width: clamp(320px, 34vw, 520px);
  aspect-ratio: 1;
  --body-opacity: .23;
  --glow: rgba(255,247,224,.34);
}
.moon-tr img {
  filter:
    brightness(1.09)
    saturate(.54)
    drop-shadow(0 0 22px rgba(255,247,224,.34));
}

/* Earth-like blue/teal world at bottom-left. */
.earth-bl {
  left: -5vw;
  bottom: -9vh;
  width: clamp(145px, 17vw, 255px);
  aspect-ratio: 1;
  --body-opacity: .17;
  --glow: rgba(45,127,135,.22);
  transform: rotate(-8deg);
}
.earth-bl img {
  filter:
    brightness(1.08)
    saturate(.82)
    drop-shadow(0 0 18px rgba(45,127,135,.26));
}

/* Exactly one ringed planet; keep it as a single, distinctive accent. */
.ringed-r {
  right: 7vw;
  top: 55vh;
  width: clamp(84px, 9vw, 136px);
  aspect-ratio: 1.25;
  --body-opacity: .30;
  --glow: rgba(199,154,72,.22);
  transform: rotate(8deg);
}
.ringed-r img {
  filter:
    brightness(1.08)
    saturate(.72)
    drop-shadow(0 0 14px rgba(199,154,72,.30));
}

/*
  Light-only shooting-star asset. The image points down-right, and the wrapper
  travels down-right too, so the visual direction and motion vector agree.
*/
.shooting-star {
  position: absolute;
  z-index: 1;
  display: block;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.shooting-star-a {
  top: 4vh;
  left: -31vw;
  width: clamp(250px, 31vw, 460px);
  animation: shooting-a 38s linear 9s infinite;
}

@keyframes shooting-a {
  0%, 78%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  79.5% { opacity: .10; }
  81.5% { opacity: .52; }
  84.5% {
    opacity: .34;
    transform: translate3d(82vw, 42vh, 0);
  }
  87% {
    opacity: 0;
    transform: translate3d(145vw, 74vh, 0);
  }
}



.ambient-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(74, 78, 66, .18);
}
.ambient-dot-a { top: 30%; left: 25%; }
.ambient-dot-b { bottom: 24%; right: 18.2%; }


/* -------------------------------------------------------------------------
   Header / hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 2;
  min-height: 82dvh;
  width: min(92vw, 860px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vh, 44px) 0 28px;

  animation: intro 760ms cubic-bezier(.22,.78,.24,1) both;
}

@keyframes intro {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-stage {
  width: min(82vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  filter: drop-shadow(0 18px 40px rgba(17, 54, 67, 0.05));
}

.logo-emblem,
.logo-wordmark {
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.logo-emblem {
  width: min(100%, 620px);
}

.logo-wordmark {
  width: min(94%, 560px);
}

.hero-meta {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enter {
  position: relative;
  margin-top: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  /* ~10% larger than the previous button */
  min-width: 216px;
  padding: 15px 27px 15px 31px;

  border: 1px solid rgba(12, 58, 89, 0.58);
  border-radius: 999px;

  /* almost transparent / white glass */
  background: rgba(255, 255, 255, 0.10);

  color: var(--ink);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .20em;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 22px rgba(12, 58, 89, 0.045);

  transition:
    transform 240ms ease,
    border-color 280ms ease,
    background 280ms ease,
    color 280ms ease,
    box-shadow 280ms ease;
}

/* Gold outer ring from the OG button, without needing extra HTML. */
.enter::before {
  content: "";
  position: absolute;
  inset: -10px;

  border: 1px solid var(--gold);
  border-radius: inherit;

  opacity: 0;
  transform: scale(.85);

  pointer-events: none;

  transition:
    opacity 380ms ease,
    transform 380ms ease;
}

.enter:hover {
  transform: translateY(-1px);

  border-color: var(--ink);
  background: var(--ink);
  color: #fffdf7;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 28px rgba(12, 58, 89, 0.10);
}

.enter:hover::before {
  opacity: .50;
  transform: scale(1);
}

.enter:active {
  transform: translateY(0);
}

.enter:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

.arrow {
  display: inline-block;

  color: var(--gold);
  font-size: 1.23rem;
  line-height: 1;
  letter-spacing: 0;

  transform: translateY(-1px);

  transition: transform 240ms ease;
}

.enter:hover .arrow {
  transform: translateX(3px);
}

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

.footer {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(18px, 3.3vh, 42px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  color: rgba(85, 80, 66, .62);
}

.footer-mark {
  width: 186px;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: center;
  gap: 10px;
}

.footer-mark span { height: 1px; background: var(--line-strong); }

.footer-mark i {
  width: 13px;
  height: 13px;
  background: var(--gold);
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
}

/* -------------------------------------------------------------------------
   Responsive tuning
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .landing {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .cosmos {
    position: fixed;
    inset: 0;
    opacity: .56;
  }

  .cosmos::before {
    inset: -24%;
    filter: blur(17px);
    opacity: .78;
    transform: rotate(-8deg) scale(1.13);
  }

  .cosmos::after {
    inset: -22%;
    filter: blur(19px);
    opacity: .70;
    transform: rotate(10deg) scale(1.15);
  }

  .hero {
    width: 100%;
    min-height: auto;
    padding: max(78px, 9dvh) 18px 58px;
    justify-content: flex-start;
  }

  .logo-stage {
    width: min(88vw, 430px);
    margin: 0 auto;
    gap: 12px;
  }

  .logo-emblem {
    width: min(100%, 430px);
  }

  .logo-wordmark {
    width: min(96%, 390px);
  }

  .hero-meta {
    margin-top: 2px;
    width: 100%;
  }

  .enter {
    /* Same lowered position as before, but now it occupies layout space,
       so the footer cannot crowd underneath it. */
    margin-top: 106px;
    min-width: 202px;
    padding: 13px 24px 13px 29px;
    font-size: .90rem;
  }
.moon-tr {
    top: -5vh;
    right: -27vw;
    width: min(62.9vw, 281px);
  }
.earth-bl {
    left: -23vw;
    bottom: -4vh;
    width: min(40.8vw, 179px);
  }

  .ringed-r {
    right: 4vw;
    top: 60vh;
    width: 75px;
  }

  .spark-a {
    top: 19%;
    right: 16%;
    width: 15px;
    height: 15px;
    opacity: .52;
  }

  .spark-b {
    bottom: 7%;
    left: 49%;
    width: 11px;
    height: 11px;
    opacity: .36;
  }

  .spark-c {
    display: none;
  }

  .shooting-star-a {
    top: 6vh;
    left: -58vw;
    width: min(61.2vw, 264px);
  }
.ambient-dot-a { top: 27%; left: 20%; }
  .ambient-dot-b { bottom: 20%; right: 15%; }

  /* Keep footer in document flow on phones so it never collides with the hero. */
  .footer {
    position: relative;
    top: 26px;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 28px auto calc(50px + env(safe-area-inset-bottom));
    width: 100%;
  }

  .footer-mark {
    width: 124px;
  }

  .body-gas {
    width: 17px;
    height: 17px;
  }

  .body-moon {
    width: 26px;
    height: 26px;
  }

  .body-asteroid {
    width: 15px;
    height: 15px;
  }

  .body-teal {
    width: 24px;
    height: 24px;
  }
}

@media (max-height: 720px) and (min-width: 701px) {
  .hero { min-height: 86dvh; padding-top: 12px; }
  .logo-stage { width: min(68vh, 520px); }
  .enter { margin-top: 14px; padding-block: 13px; }
  .footer { bottom: 12px; }
}

@media (max-width: 430px) {
  .hero {
    padding-top: max(70px, 8dvh);
    padding-inline: 14px;
  }

  .logo-stage {
    width: min(90vw, 390px);
    gap: 10px;
  }

  .logo-wordmark {
    width: min(96%, 360px);
  }

  .moon-tr {
    right: -34vw;
    width: 66.3vw;
  }
}

/* Keep the page calm for users who request reduced motion. */
/* Keep the page calm for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .orbit-line,
  .orbit-body,
  .spark,
  .shooting-star,
  .hero {
    animation: none !important;
  }

  .shooting-star {
    display: none;
  }

  .enter,
  .enter::before,
  .arrow {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .spark-a { animation: twinkle 5.5s ease-in-out infinite; }
  .spark-b { animation: twinkle 7s ease-in-out 1.2s infinite; }
  .spark-c { animation: twinkle 8.5s ease-in-out 2.4s infinite; }
}

@keyframes twinkle {
  0%, 100% { opacity: .52; transform: scale(.84); }
  50% { opacity: .90; transform: scale(1.06); }
}