:root {
  --fg: #eef1ff;
  --accent: #8ea2ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: radial-gradient(120% 90% at 50% 6%, #0a1024 0%, #04060d 52%, #02030a 100%);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#space { position: fixed; inset: 0; display: block; z-index: 1; }

/* ── Light source behind the planet (eclipse halo) ── */
.glow {
  position: fixed; left: 50%; top: 46vh;
  width: 72vmin; height: 72vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(circle,
    rgba(228, 234, 255, 0.95) 0%,
    rgba(150, 175, 255, 0.7) 16%,
    rgba(86, 116, 255, 0.34) 34%,
    rgba(40, 64, 170, 0.12) 52%,
    transparent 66%);
  filter: blur(6px);
  /* Восход: свет встаёт из-за горизонта планеты и поднимается, потом мягко «дышит». */
  animation:
    sunrise 5.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    breathe 8s ease-in-out 5.5s infinite;
}

/* ── Восходящий свет: непрерывно поднимается из-за планеты и тает в небе ── */
.rise {
  position: fixed; left: 50%; top: 48vh;
  width: 60vmin; height: 60vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(205, 218, 255, 0.6) 0%,
    rgba(125, 155, 255, 0.34) 26%,
    rgba(64, 96, 220, 0.12) 48%,
    transparent 64%);
  filter: blur(12px);
  animation: rise-loop 9s ease-in-out 0.6s infinite;
}

/* ── Planet body (dark) eclipsing the glow ── */
.planet {
  position: fixed; left: 50%; top: 48vh;
  width: 120vmin; height: 120vmin;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 3;
  background: radial-gradient(120% 80% at 50% 5%, #2b3766 0%, #121733 22%, #070a18 46%, #04060d 70%);
  box-shadow:
    inset 0 10px 70px rgba(150, 175, 255, 0.16),
    0 -1px 0 rgba(196, 210, 255, 0.3);
}

/* ── Text block ── */
.center {
  position: fixed; left: 0; right: 0;
  bottom: clamp(64px, 16vh, 150px);
  z-index: 5; text-align: center;
  padding-inline: 20px;
}
.title {
  font-weight: 300; text-transform: uppercase; color: #fff;
  font-size: clamp(1.6rem, 5.6vw, 3.4rem);
  letter-spacing: clamp(0.4em, 2.2vw, 1.1em);
  text-indent: clamp(0.4em, 2.2vw, 1.1em);
  text-shadow: 0 0 30px rgba(150, 175, 255, 0.35);
  opacity: 0; transform: translateY(18px);
  animation: rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
.word {
  margin-top: clamp(12px, 1.8vw, 20px);
  font-weight: 600; color: var(--accent);
  font-size: clamp(0.66rem, 1.5vw, 0.95rem);
  letter-spacing: clamp(0.4em, 2.4vw, 0.9em);
  text-indent: clamp(0.4em, 2.4vw, 0.9em);
  opacity: 0; transform: translateY(14px);
  animation: rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes sunrise {
  0%   { opacity: 0; transform: translate(-50%, 34%) scale(0.72); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.96; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes rise-loop {
  0%   { opacity: 0;    transform: translate(-50%, 26%) scale(0.7); }
  22%  { opacity: 0.95; }
  60%  { opacity: 0.6;  transform: translate(-50%, -64%) scale(1.18); }
  100% { opacity: 0;    transform: translate(-50%, -88%) scale(1.34); }
}

/* ── Mobile ── */
@media (max-width: 760px) {
  .glow { width: 96vmin; height: 96vmin; top: 44vh; }
  .planet { width: 168vmin; height: 168vmin; top: 46vh; }
  .center { bottom: clamp(52px, 13vh, 100px); }
}

@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .rise { animation: none; opacity: 0; }
  .title, .word { animation: none; opacity: 1; transform: none; }
}