@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@300;600&family=Playfair+Display:wght@600&display=swap");

:root {
  color-scheme: dark;
  --bg: #0b0d1a;
  --bg-deep: #05060c;
  --accent: #9bf6ff;
  --accent-warm: #ffd29d;
  --mist: rgba(155, 246, 255, 0.18);
  --text: #f2f2f6;
  --muted: rgba(242, 242, 246, 0.6);
  --shadow: rgba(8, 10, 20, 0.8);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", "Trebuchet MS", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% 20%, #1a1f3a 0%, var(--bg) 55%, var(--bg-deep) 100%);
  overflow: hidden;
  position: relative;
}

body::before,
body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    radial-gradient(2px 2px at 15% 20%, #ffffffaa 0, transparent 60%),
    radial-gradient(1px 1px at 70% 15%, #ffffff99 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 45%, #ffffff88 0, transparent 60%),
    radial-gradient(1px 1px at 85% 60%, #ffffff66 0, transparent 60%),
    radial-gradient(2px 2px at 55% 75%, #ffffff99 0, transparent 60%);
  opacity: 0.6;
}

body::after {
  background: radial-gradient(800px 380px at 80% 80%, rgba(155, 246, 255, 0.12), transparent 70%);
}

.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
  background: #ffffff;
  box-shadow:
    6vw 12vh rgba(255, 255, 255, 0.85),
    12vw 78vh rgba(255, 255, 255, 0.6),
    18vw 35vh rgba(255, 255, 255, 0.75),
    22vw 62vh rgba(255, 255, 255, 0.65),
    30vw 18vh rgba(255, 255, 255, 0.7),
    36vw 82vh rgba(255, 255, 255, 0.55),
    44vw 52vh rgba(255, 255, 255, 0.75),
    52vw 12vh rgba(255, 255, 255, 0.8),
    58vw 70vh rgba(255, 255, 255, 0.6),
    66vw 28vh rgba(255, 255, 255, 0.7),
    74vw 86vh rgba(255, 255, 255, 0.5),
    82vw 46vh rgba(255, 255, 255, 0.8),
    90vw 18vh rgba(255, 255, 255, 0.6),
    94vw 72vh rgba(255, 255, 255, 0.7);
  animation: drift-stars 30s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(155, 246, 255, 0.25));
}

.starfield::before,
.starfield::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow:
    4vw 40vh rgba(255, 255, 255, 0.55),
    14vw 16vh rgba(255, 255, 255, 0.65),
    26vw 70vh rgba(255, 255, 255, 0.6),
    34vw 26vh rgba(255, 255, 255, 0.75),
    42vw 90vh rgba(255, 255, 255, 0.5),
    50vw 34vh rgba(255, 255, 255, 0.7),
    60vw 14vh rgba(255, 255, 255, 0.6),
    68vw 58vh rgba(255, 255, 255, 0.65),
    76vw 22vh rgba(255, 255, 255, 0.55),
    84vw 82vh rgba(255, 255, 255, 0.6),
    96vw 50vh rgba(255, 255, 255, 0.7);
  opacity: 0.7;
  animation: drift-stars 46s ease-in-out infinite alternate-reverse;
}

.starfield::before {
  width: 2.5px;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    8vw 28vh rgba(255, 255, 255, 0.9),
    20vw 8vh rgba(255, 255, 255, 0.8),
    32vw 48vh rgba(255, 255, 255, 0.85),
    46vw 24vh rgba(255, 255, 255, 0.75),
    56vw 88vh rgba(255, 255, 255, 0.7),
    70vw 38vh rgba(255, 255, 255, 0.85),
    86vw 60vh rgba(255, 255, 255, 0.8);
  opacity: 0.85;
  animation: drift-stars 36s ease-in-out infinite alternate;
}

.hero {
  width: min(1100px, 92vw);
  padding: 48px 56px 56px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(20, 24, 50, 0.9), rgba(10, 12, 24, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 80px var(--shadow);
  position: relative;
  z-index: 2;
}

.content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.content__text h1 {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: clamp(32px, 3.5vw, 54px);
  line-height: 1.1;
  margin: 0 0 18px;
}

.lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 26px;
}

.note {
  font-size: 13px;
  color: rgba(242, 242, 246, 0.45);
  margin: 0;
}

.scene {
  position: relative;
  height: 360px;
  min-width: 260px;
}

.moon {
  position: absolute;
  top: 0;
  right: 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff3d0, #ffd29d 60%, #f0b374 100%);
  box-shadow: 0 0 40px rgba(255, 210, 157, 0.35);
  overflow: hidden;
}

.moon::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 13, 26, 0.95) 58%, rgba(11, 13, 26, 0.7) 70%, transparent 72%);
  transform: translateX(-70%);
  animation: moon-phase 20s linear infinite;
  mix-blend-mode: multiply;
}

.ghost {
  position: absolute;
  left: 40px;
  top: 70px;
  width: 120px;
  height: 150px;
  background: linear-gradient(180deg, #ffffff, #d7f0ff 70%, rgba(155, 246, 255, 0.4) 100%);
  border-radius: 60px 60px 32px 32px;
  box-shadow: 0 18px 40px rgba(155, 246, 255, 0.25);
  animation: float 6s ease-in-out infinite;
}

.ghost::before,
.ghost::after {
  content: "";
  position: absolute;
  bottom: -14px;
  width: 38px;
  height: 38px;
  background: inherit;
  border-radius: 50%;
}

.ghost::before {
  left: 8px;
}

.ghost::after {
  right: 8px;
}

.ghost__eye {
  position: absolute;
  top: 52px;
  width: 14px;
  height: 18px;
  border-radius: 50%;
  background: #0b0d1a;
}

.ghost__eye--left {
  left: 38px;
}

.ghost__eye--right {
  right: 38px;
}

.ghost__mouth {
  position: absolute;
  top: 82px;
  left: 50%;
  width: 26px;
  height: 12px;
  border-radius: 0 0 18px 18px;
  background: #0b0d1a;
  transform: translateX(-50%);
}

.house {
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 220px;
  height: 200px;
}

.house__roof {
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 90px;
  background: linear-gradient(135deg, #1f263b, #0f1222);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 14px 22px rgba(8, 10, 20, 0.6);
}

.house__chimney {
  position: absolute;
  top: -45px;
  left: 28px;
  width: 26px;
  height: 46px;
  background: linear-gradient(180deg, #1b2236, #0c101d);
  border-radius: 8px 8px 6px 6px;
  box-shadow: 0 6px 12px rgba(8, 10, 20, 0.6);
  z-index: 1;
}

.smoke {
  position: absolute;
  bottom: 36px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 242, 246, 0.8) 0%, rgba(242, 242, 246, 0.2) 60%, transparent 70%);
  opacity: 0;
  filter: blur(0.5px);
  animation: smoke 6s ease-in-out infinite;
}

.smoke--one {
  animation-delay: 0s;
}

.smoke--two {
  animation-delay: 2s;
}

.smoke--three {
  animation-delay: 4s;
}

.house__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(180deg, #101728, #0a0d18);
  border-radius: 18px;
  border: 1px solid rgba(155, 246, 255, 0.08);
}

.house__window {
  position: absolute;
  top: 36px;
  width: 38px;
  height: 48px;
  background: linear-gradient(180deg, #ffd29d, #f0b374);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(255, 210, 157, 0.35);
}

.house__window--one {
  left: 32px;
}

.house__window--two {
  right: 32px;
}

.house__door {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 40px;
  height: 64px;
  background: #0b0d1a;
  border-radius: 12px;
  transform: translateX(-50%);
  box-shadow: inset 0 0 12px rgba(155, 246, 255, 0.1);
}

.fog {
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -20px;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(155, 246, 255, 0.15), transparent 65%);
  filter: blur(6px);
  animation: drift 10s ease-in-out infinite;
}

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

@keyframes drift {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.7;
  }
  50% {
    transform: translateX(18px);
    opacity: 1;
  }
}

@keyframes smoke {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -60px) scale(1.4);
    opacity: 0;
  }
}

@keyframes drift-stars {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-24px, 32px, 0) rotate(6deg);
  }
}

@keyframes moon-phase {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 36px 24px 40px;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .scene {
    height: 300px;
  }

  .moon {
    width: 70px;
    height: 70px;
  }

  .ghost {
    width: 100px;
    height: 130px;
  }

  .ghost__eye--left {
    left: 32px;
  }

  .ghost__eye--right {
    right: 32px;
  }
}