/* Shared animated moon (hero, 404, etc.) */
.moon-scene {
  position: relative;
  width: min(320px, 80vw);
  height: min(320px, 80vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

.moon-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(201, 162, 39, 0.2);
}

.moon-orbit--1 {
  width: 100%;
  height: 100%;
  animation: moon-orbit-spin 24s linear infinite;
}

.moon-orbit--2 {
  width: 75%;
  height: 75%;
  border-color: rgba(107, 92, 231, 0.25);
  animation: moon-orbit-spin 16s linear infinite reverse;
}

@keyframes moon-orbit-spin {
  to { transform: rotate(360deg); }
}

.moon-wrap {
  position: relative;
  z-index: 2;
  animation: moon-drift 8s ease-in-out infinite;
  filter: drop-shadow(0 0 35px rgba(244, 240, 230, 0.22))
    drop-shadow(0 0 70px var(--accent-glow));
}

@keyframes moon-drift {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50% { transform: translate(8px, -14px) rotate(3deg); }
}

.moon-body {
  position: relative;
  width: min(160px, 40vw);
  height: min(160px, 40vw);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffef8 0%, var(--moon) 45%, #a8a196 100%);
  box-shadow: inset -12px -12px 30px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  isolation: isolate;
}

/* Фазы: мягкий градиент (как раньше), сдвиг через background-position — без просвета */
.moon-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 32%,
    rgba(6, 8, 16, 0.72) 46%,
    rgba(6, 8, 16, 0.95) 56%,
    rgba(4, 6, 12, 0.98) 100%
  );
  background-size: 230% 230%;
  background-repeat: no-repeat;
  animation: moon-phase 6s ease-in-out infinite;
}

@keyframes moon-phase {
  0%,
  100% {
    background-position: 8% 44%;
    opacity: 0.98;
  }
  50% {
    background-position: 92% 56%;
    opacity: 0.72;
  }
}

.moon-face {
  position: absolute;
  inset: 0;
}

.moon-crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.moon-crater.c1 { width: 22%; height: 22%; top: 25%; left: 20%; }
.moon-crater.c2 { width: 14%; height: 14%; top: 55%; left: 45%; }
.moon-crater.c3 { width: 10%; height: 10%; top: 35%; right: 22%; }

/* Hero: larger moon */
.hero-moon-scene {
  width: min(380px, 48vw);
  height: min(380px, 48vw);
}

.hero-moon-scene .moon-wrap {
  filter: drop-shadow(0 0 45px rgba(244, 240, 230, 0.25))
    drop-shadow(0 0 90px var(--accent-glow));
}

.hero-moon-scene .moon-body {
  width: min(260px, 36vw);
  height: min(260px, 36vw);
  box-shadow: inset -16px -16px 36px rgba(0, 0, 0, 0.14);
}

/* 404: compact scene alias */
.lost-scene.moon-scene {
  width: min(320px, 80vw);
  height: min(320px, 80vw);
}