/* Overlay */
.pumpkin-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  animation: overlayPulse 12s ease-in-out infinite;
}
.pumpkin-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 65%,
    rgba(255, 140, 0, 0.12),
    rgba(255, 140, 0, 0.06) 35%,
    rgba(255, 140, 0, 0.03) 55%,
    transparent 72%
  );
}

/* Motion wrappers */
.p-rise {
  position: absolute;
  left: var(--x, 10%);
  bottom: -24vh;
  width: 0;
  height: 0;
  animation: rise var(--speed, 18s) linear infinite var(--delay, 0s);
}
.p-sway {
  position: relative;
  left: -50%;
  animation: sway calc(var(--speed, 18s) * 0.5) ease-in-out infinite alternate
    var(--delay, 0s);
}

/* Pumpkin body */
.p {
  position: relative;
  width: var(--size, 100px);
  height: calc(var(--size, 100px) * 0.78);
  transform-origin: 50% 50%;
  background: radial-gradient(
    120% 120% at 50% 30%,
    #ffda66 0%,
    #ffa500 35%,
    #ff7a00 75%,
    #cc5600 100%
  );
  border-radius: 60% 60% 55% 55% / 68% 68% 48% 48%;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35),
              inset 0 10px 18px rgba(255, 255, 255, 0.25),
              inset 0 -8px 18px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}

/* Stem */
.p::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10%;
  width: calc(var(--size, 100px) * 0.14);
  height: calc(var(--size, 100px) * 0.22);
  transform: translateX(-50%) rotate(-8deg);
  background: linear-gradient(#3b8b3b, #1e5a1e);
  border-radius: 30% 30% 50% 50% / 25% 25% 75% 75%;
  box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.2),
              0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Vine */
.p::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--size, 100px) * 0.1);
  top: -6%;
  width: calc(var(--size, 100px) * 0.22);
  height: calc(var(--size, 100px) * 0.22);
  border: calc(var(--size, 100px) * 0.02) solid #3b8b3b;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(25deg);
  opacity: 0.8;
}

/* Face */
.face {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Red eyes */
.eye {
  position: absolute;
  top: 28%;
  width: 18%;
  height: 26%;
  background: radial-gradient(circle at 50% 45%, #ff4a2f 0%, #a10000 70%, #600000 100%);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.eye.l { left: 28%; transform: rotate(-6deg); }
.eye.r { right: 28%; transform: rotate(6deg); }

/* Mouth */
.mouth {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 42%;
  height: 24%;
  transform: translateX(-50%);
  background: #231a00;
  clip-path: polygon(
    0 55%, 12% 70%, 20% 45%, 28% 70%, 36% 45%, 44% 70%,
    52% 45%, 60% 70%, 68% 45%, 76% 70%, 84% 45%, 92% 70%, 100% 55%,
    100% 90%, 0 90%
  );
}

/* Sheen */
.sheen {
  position: absolute;
  left: 6%;
  top: 6%;
  width: 38%;
  height: 38%;
  background: radial-gradient(80% 80% at 50% 50%, rgba(255, 255, 255, 0.5), transparent 70%);
  border-radius: 50%;
  opacity: 0.7;
}

/* Animations */
@keyframes rise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-140vh); opacity: 0; }
}
@keyframes sway {
  0%,100% { transform: translateX(0) rotate(0deg); }
  50%     { transform: translateX(var(--sway, 8vw)) rotate(3deg); }
}
@keyframes overlayPulse {
  0%,100% { opacity: 0; }
  50%     { opacity: 0.25; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pumpkin-overlay { animation: none; }
  .p-rise, .p-sway { animation: none; }
}