/* ---------- Reset & base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --night-top: #0a0713;
  --night-mid: #150f28;
  --night-bottom: #241536;
  --pumpkin: #ff7518;
  --pumpkin-glow: #ffb347;
  --ghost-white: #f4f1ea;
  --muted: #b9b2c9;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--night-top);
  color: var(--ghost-white);
  overflow-x: hidden;
}

/* ---------- Sky scene ---------- */
.sky {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 70% 15%, var(--night-mid) 0%, var(--night-top) 55%, #050308 100%);
}

/* Twinkling stars */
.stars,
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 90px 120px, #fff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 230px 180px, #fff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 300px 40px, #fff 100%, transparent 100%),
    radial-gradient(1px 1px at 40px 200px, #fff 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 340px 220px, #fff 100%, transparent 100%);
  background-size: 380px 260px;
  opacity: 0.8;
}
.stars::before {
  background-position: 40px 40px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars::after {
  background-position: -60px 90px;
  animation: twinkle 6s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* Moon */
.moon {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffdf5 0%, #fdf3c8 45%, #f4d998 100%);
  box-shadow:
    0 0 60px 20px rgba(255, 244, 190, 0.35),
    0 0 120px 60px rgba(255, 200, 120, 0.15);
  z-index: 1;
}
.moon::before,
.moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(220, 195, 140, 0.35);
}
.moon::before { width: 22px; height: 22px; top: 25px; left: 30px; }
.moon::after { width: 14px; height: 14px; top: 70px; left: 70px; }

/* Drifting clouds across the moon */
.clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 220px 40px at 10% 20%, rgba(10,7,19,0.55), transparent 70%),
    radial-gradient(ellipse 260px 50px at 90% 30%, rgba(10,7,19,0.5), transparent 70%);
  animation: driftClouds 40s linear infinite;
}
@keyframes driftClouds {
  0%   { transform: translateX(-15%); }
  50%  { transform: translateX(15%); }
  100% { transform: translateX(-15%); }
}

/* ---------- Bats ---------- */
.bats {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.bat {
  position: absolute;
  width: 34px;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
  animation-name: flyAcross, flap;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes flyAcross {
  from { transform: translate(-10vw, 0) rotate(-4deg); }
  to   { transform: translate(110vw, -6vh) rotate(4deg); }
}
@keyframes flap {
  0%, 100% { margin-top: 0px; }
  50%      { margin-top: 10px; }
}

/* ---------- Hill silhouette ---------- */
.hill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22vh;
  min-height: 140px;
  z-index: 4;
}

/* ---------- Fog ---------- */
.fog {
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  height: 18vh;
  min-height: 110px;
  background: linear-gradient(to top, rgba(180, 170, 210, 0.18), transparent);
  z-index: 5;
  pointer-events: none;
  filter: blur(6px);
}
.fog1 { animation: driftFog 22s ease-in-out infinite; }
.fog2 { animation: driftFog 30s ease-in-out infinite reverse; opacity: 0.6; bottom: 2vh; }
@keyframes driftFog {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(6%); }
  100% { transform: translateX(0); }
}

/* ---------- Pumpkin patch ---------- */
.pumpkin-patch {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.pumpkin {
  position: absolute;
  bottom: 0;
  animation: pumpkinGlow 3.2s ease-in-out infinite;
}

/* Front row — bigger, sharper, in front of the fog */
.p2, .p4, .p6 {
  z-index: 7;
}
/* Back row — smaller, hazier, sitting behind the fog for depth */
.p1, .p3, .p5, .p7 {
  z-index: 4;
  filter: brightness(0.85) saturate(0.9);
}

.p1 { left: 1%;  bottom: 1.5vh; width: 62px;  transform: rotate(-7deg); animation-delay: 0.2s; }
.p2 { left: 12%; bottom: 0;     width: 105px; transform: rotate(-3deg); animation-delay: 1.4s; }
.p3 { left: 26%; bottom: 3vh;   width: 54px;  transform: rotate(5deg);  animation-delay: 0.9s; }
.p4 { left: 41%; bottom: 0.5vh; width: 88px;  transform: rotate(-2deg); animation-delay: 2s; }
.p5 { left: 57%; bottom: 2.5vh; width: 58px;  transform: rotate(4deg);  animation-delay: 0.5s; }
.p6 { left: 72%; bottom: 0;     width: 120px; transform: rotate(3deg);  animation-delay: 1.8s; }
.p7 { left: 90%; bottom: 1.8vh; width: 68px;  transform: rotate(-5deg); animation-delay: 1.1s; }

@keyframes pumpkinGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 140, 40, 0.45)); }
  50%      { filter: drop-shadow(0 0 30px rgba(255, 170, 60, 0.85)); }
}
.p1, .p3, .p5, .p7 {
  animation-name: pumpkinGlowDim;
}
@keyframes pumpkinGlowDim {
  0%, 100% { filter: brightness(0.85) saturate(0.9) drop-shadow(0 0 10px rgba(255, 140, 40, 0.35)); }
  50%      { filter: brightness(0.85) saturate(0.9) drop-shadow(0 0 20px rgba(255, 170, 60, 0.6)); }
}

/* ---------- Content ---------- */
.content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 720px;
}

.eyebrow {
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.spooky-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ghost-white);
  text-shadow:
    0 0 12px rgba(255, 178, 90, 0.55),
    0 0 34px rgba(255, 140, 40, 0.35);
  animation: eerieGlow 3.5s ease-in-out infinite;
}
.spooky-title .dot {
  color: var(--pumpkin);
}
@keyframes eerieGlow {
  0%, 100% {
    text-shadow:
      0 0 12px rgba(255, 178, 90, 0.5),
      0 0 30px rgba(255, 140, 40, 0.3);
  }
  50% {
    text-shadow:
      0 0 22px rgba(255, 190, 110, 0.85),
      0 0 55px rgba(255, 140, 40, 0.55);
  }
}

.tagline {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 300;
}

.divider {
  margin-top: 1.8rem;
  letter-spacing: 0.6em;
  color: var(--pumpkin-glow);
  font-size: 0.9rem;
  opacity: 0.75;
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 1.2rem 1rem;
  background: #050308;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .moon { width: 80px; height: 80px; top: 6%; right: 8%; }
  .p1, .p3, .p5, .p7 { display: none; }
  .p2 { width: 80px; }
  .p4 { width: 66px; }
  .p6 { width: 90px; }
}