/* snow.css */
/* Snowflake styles */
.halloween-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Prevent interaction with snowflakes */
  }
  
  .halloween {
    position: absolute; /* Position each snowflake absolutely within the page */
    font-size: 20px;
    color: #ffffff;
    opacity: 0.8;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    animation: fall linear infinite; 
  }
      
  /* Pumpkin */
  .halloween-pumpkin {
    position: absolute;
    width: 50px; /* Adjust size */
    height: auto;
    pointer-events: none;
    animation: pumpkin-fall 10s linear infinite;
    opacity: 0.8;
}

/* Exclude featured images and icons */
img:not(.featured-image):not(.icon) {
    position: relative;
}

img:not(.featured-image):not(.icon)::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.pumpkin-wrapper {
    display: inline-block; /* Ensures the wrapper matches the size of the image */
    position: relative;
}

.pumpkin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
  body {
    overflow-x: hidden;
  }
  /* Dynamic CSS can be injected via JavaScript for custom font-size, color, etc. */
  
/* Pumpkin fall animation */
@keyframes pumpkin-fall {
  0% {
      top: -10%;
      opacity: 1;
  }
  100% {
      top: 100%;
      opacity: 0;
  }
}


@keyframes ghost-tilt {
  0% {
      transform: rotate(-15deg);
  }
  50% {
      transform: rotate(15deg);
  }
  100% {
      transform: rotate(-15deg);
  }
}

/* Ghost visibility animation */
@keyframes ghost-visibility {
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}

/* Ghost styles */
.halloween {
  animation: ghost-tilt 3s infinite alternate ease-in-out;
  transform-origin: center;
  transition: opacity 1s ease-in-out; /* Smooth fade in and out */
}