:root {
  --helen: #7c3aed;
  --harald: #16a34a;
  --katy: #e85d4c;
  --arianna: #ff4fa3;
  --trips: #0e7490;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --celestial-size: clamp(9.5rem, 34vmin, 17.5rem);
}

body.theme-night {
  --sky-deep: #070b16;
  --sky-mid: #121933;
  --sky-edge: #1a2748;
  --text: #eef3ff;
  --muted: #9aa8c7;
  --host: rgba(154, 168, 199, 0.8);
  --brand: #2a1204;
  --brand-glow: rgba(210, 225, 255, 0.45);
}

body.theme-day {
  --sky-deep: #7eb7ef;
  --sky-mid: #a9d4f7;
  --sky-edge: #d7ecff;
  --text: #17324a;
  --muted: #3d5f78;
  --host: rgba(40, 80, 110, 0.75);
  --brand: #2a1204;
  --brand-glow: rgba(255, 230, 150, 0.65);
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  background: var(--sky-deep);
  overflow-x: hidden;
  transition: background-color 0.8s ease, color 0.8s ease;
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  transition: opacity 0.8s ease;
}

body.theme-night .sky {
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(180, 200, 255, 0.1), transparent 58%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(40, 60, 120, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(80, 100, 180, 0.18), transparent 50%),
    radial-gradient(ellipse 45% 35% at 85% 25%, rgba(90, 70, 160, 0.16), transparent 50%),
    linear-gradient(180deg, #040712 0%, var(--sky-mid) 45%, var(--sky-edge) 100%);
}

body.theme-day .sky {
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 210, 120, 0.45), transparent 58%),
    radial-gradient(ellipse 80% 50% at 80% 15%, rgba(255, 255, 255, 0.35), transparent 50%),
    radial-gradient(ellipse 60% 40% at 15% 80%, rgba(120, 180, 255, 0.25), transparent 55%),
    linear-gradient(180deg, #5ea8e8 0%, #9fd0f8 48%, #e7f4ff 100%);
}

.milky-way {
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      118deg,
      transparent 28%,
      rgba(180, 200, 255, 0.05) 42%,
      rgba(255, 240, 220, 0.08) 50%,
      rgba(180, 200, 255, 0.05) 58%,
      transparent 72%
    );
  filter: blur(10px);
  animation: drift 28s ease-in-out infinite alternate;
  transition: opacity 0.8s ease;
}

body.theme-night .milky-way {
  opacity: 0.45;
}

.shooting-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.theme-day .shooting-sky {
  display: none;
}

.shooting-star {
  position: absolute;
  width: var(--length, 90px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 35%,
    rgba(255, 245, 220, 0.95) 100%
  );
  box-shadow: 0 0 6px 1px rgba(255, 240, 200, 0.45);
  opacity: 0;
  transform: rotate(var(--angle, 35deg));
  animation: shoot var(--duration, 1.1s) linear forwards;
  will-change: transform, opacity;
}

.shooting-star::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 4px;
  height: 4px;
  translate: 0 -50%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 245, 220, 0.85);
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 18% 28%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 27% 8%, rgba(255, 245, 220, 0.8), transparent),
    radial-gradient(1px 1px at 36% 40%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(2px 2px at 48% 16%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 62% 24%, rgba(220, 235, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 74% 10%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 86% 30%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 92% 18%, rgba(255, 240, 210, 0.7), transparent),
    radial-gradient(1px 1px at 12% 58%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 22% 72%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 33% 86%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(2px 2px at 55% 78%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 68% 66%, rgba(220, 235, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 81% 82%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 94% 70%, rgba(255, 255, 255, 0.45), transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
  transition: opacity 0.8s ease;
}

body.theme-night .starfield {
  opacity: 1;
}

body.theme-day .starfield {
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.55) 0 1.6%, transparent 2%),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.45) 0 1.2%, transparent 2%),
    radial-gradient(circle at 84% 36%, rgba(255, 255, 255, 0.4) 0 1.4%, transparent 2%);
  animation: none;
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(1rem, 3vw, 2.25rem);
}

.eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  animation: rise 0.8s ease both 0.05s;
}

.sky-switch {
  position: fixed;
  top: clamp(0.85rem, 2.5vw, 1.25rem);
  right: clamp(0.85rem, 2.5vw, 1.25rem);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: rise 0.8s ease both 0.08s;
  z-index: 20;
}

body.theme-day .sky-switch {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(40, 80, 120, 0.18);
}

.sky-option {
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sky-option:hover,
.sky-option:focus-visible {
  color: var(--text);
  outline: none;
}

.sky-option[aria-pressed="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

body.theme-day .sky-option[aria-pressed="true"] {
  color: #17324a;
  background: rgba(255, 255, 255, 0.85);
}

.constellation {
  --pad: clamp(0.5rem, 2vw, 1rem);
  position: relative;
  width: min(100%, 52rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "harald celestial katy"
    "helen celestial arianna"
    ". trips .";
  align-items: center;
  justify-items: center;
  column-gap: clamp(0.75rem, 3vw, 2.5rem);
  row-gap: clamp(1rem, 3vw, 1.75rem);
  padding: var(--pad);
  animation: rise 1s ease both 0.15s;
}

.celestial {
  grid-area: celestial;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 2;
  width: var(--celestial-size);
  height: var(--celestial-size);
  display: grid;
  place-items: center;
  container-type: size;
  animation: celestial-pulse 7s ease-in-out infinite;
}

.celestial-glow {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  pointer-events: none;
  animation: corona-breathe 8s ease-in-out infinite;
}

.celestial[data-mode="sun"] .celestial-glow {
  background:
    radial-gradient(
      circle,
      rgba(255, 200, 80, 0.5) 0%,
      rgba(255, 140, 40, 0.22) 35%,
      rgba(255, 90, 20, 0.08) 62%,
      transparent 74%
    );
}

.celestial[data-mode="moon"] .celestial-glow {
  background:
    radial-gradient(
      circle,
      rgba(220, 230, 255, 0.42) 0%,
      rgba(170, 190, 255, 0.16) 40%,
      rgba(120, 150, 220, 0.06) 65%,
      transparent 76%
    );
}

.celestial-disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.celestial[data-mode="sun"] .celestial-disk {
  background:
    radial-gradient(
      circle at 38% 32%,
      #fff8d6 0%,
      #ffe566 26%,
      #ff9a1f 56%,
      #f05812 80%,
      #c43b0a 100%
    );
  box-shadow:
    0 0 0 1px rgba(255, 220, 140, 0.35),
    0 0 40px 8px rgba(255, 150, 40, 0.35),
    0 0 90px 24px rgba(255, 100, 20, 0.18);
}

.celestial[data-mode="moon"] .celestial-disk {
  background:
    radial-gradient(circle at 34% 30%, #f7f9ff 0%, #dfe7f8 38%, #b8c6e2 72%, #8fa0c4 100%),
    radial-gradient(circle at 62% 58%, rgba(120, 135, 170, 0.22) 0 8%, transparent 9%),
    radial-gradient(circle at 40% 68%, rgba(110, 125, 160, 0.18) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 36%, rgba(100, 115, 150, 0.16) 0 6%, transparent 7%);
  background-blend-mode: normal, multiply, multiply, multiply;
  box-shadow:
    0 0 0 1px rgba(230, 240, 255, 0.35),
    0 0 36px 8px rgba(180, 200, 255, 0.28),
    0 0 80px 22px rgba(120, 150, 220, 0.14),
    inset -14px -10px 28px rgba(70, 90, 130, 0.22);
}

.brand {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 86%;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 28cqw, 3.6rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--brand);
  text-shadow:
    0 0 14px var(--brand-glow),
    0 1px 0 rgba(255, 245, 200, 0.35);
}

.celestial[data-mode="moon"] .brand {
  color: #1a2438;
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.35);
}

.star {
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(6.5rem, 18vw, 8rem);
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--star) 78%, white), var(--star));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 24px color-mix(in srgb, var(--star) 35%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.star:hover,
.star:focus-visible {
  transform: translateY(-3px) scale(1.04);
  outline: none;
  filter: brightness(1.08);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.35),
    0 0 32px color-mix(in srgb, var(--star) 50%, transparent);
}

.star-harald {
  --star: var(--harald);
  grid-area: harald;
  justify-self: end;
  animation: float-a 7s ease-in-out infinite;
}

.star-katy {
  --star: var(--katy);
  grid-area: katy;
  justify-self: start;
  animation: float-b 7.6s ease-in-out infinite;
}

.star-helen {
  --star: var(--helen);
  grid-area: helen;
  justify-self: end;
  animation: float-b 8.2s ease-in-out infinite;
}

.star-arianna {
  --star: var(--arianna);
  grid-area: arianna;
  justify-self: start;
  animation: float-a 7.8s ease-in-out infinite;
}

.star-trips {
  --star: var(--trips);
  grid-area: trips;
  animation: float-c 6.8s ease-in-out infinite;
}

.lead {
  margin: 1.1rem 0 0;
  max-width: 26rem;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.45;
  color: var(--muted);
  animation: rise 0.9s ease both 0.35s;
}

.host {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--host);
  animation: rise 0.9s ease both 0.5s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes drift {
  from {
    transform: translate3d(-1%, 0, 0) rotate(-1deg);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) rotate(1deg);
  }
}

@keyframes twinkle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@keyframes shoot {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--angle, 35deg));
  }
  8% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--travel-x), var(--travel-y), 0)
      rotate(var(--angle, 35deg));
  }
}

@keyframes celestial-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes corona-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes float-a {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes float-b {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@keyframes float-c {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@media (max-width: 700px) {
  :root {
    --celestial-size: clamp(8.5rem, 48vw, 12.5rem);
  }

  .constellation {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "celestial celestial"
      "harald katy"
      "helen arianna"
      "trips trips";
    column-gap: 0.75rem;
    row-gap: 0.85rem;
    width: min(100%, 22rem);
  }

  .celestial {
    grid-row: auto;
    margin-bottom: 0.35rem;
  }

  .star-harald,
  .star-katy,
  .star-helen,
  .star-arianna,
  .star-trips {
    justify-self: stretch;
    width: 100%;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .milky-way,
  .starfield,
  .eyebrow,
  .constellation,
  .lead,
  .host,
  .celestial,
  .celestial-glow,
  .star,
  .shooting-star {
    animation: none !important;
  }

  body.theme-night .shooting-sky {
    display: none;
  }

  .star:hover,
  .star:focus-visible {
    transform: none;
  }
}