#wpmmh_wrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 999999999999999999;
}

.wpmmh_spider_web_left {
	position: absolute;
	width: 50%;
	max-width: 500px;
	top: 0;
	left: 0;
}

.wpmmh_spider_web_left img,
.wpmmh_spider_web_left svg {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}

.wpmmh_spider_web_right {
	position: absolute;
	width: 50%;
	max-width: 430px;
	top: 0;
	right: 0;
}

.wpmmh_spider_web_right img,
.wpmmh_spider_web_right svg {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}


.wpmmh_spider_web_left svg,
.wpmmh_spider_web_right svg {
	stroke: black;
}

#wpmmh_wrapper.white-spider .wpmmh_spider_web_left svg,
#wpmmh_wrapper.white-spider .wpmmh_spider_web_right svg {
	stroke: white;
}

/* COMMENT */
.wpmmh_spider_wrapper {
	position: absolute;
	width: 50%;
	max-width: 430px;
	top: 0;
	right: 0;
}

#wpmhh_spider-web-line {
	position: absolute;
	width: 2px;
	height: 0px;
	top: 0;
	right: 35%;
	background: #000;
	transform: translateX(50%) translateY(0px);
}

#wpmmh_wrapper.white-spider #wpmhh_spider-web-line {
	background: white;
}

#wpmmh_spider {
	position: absolute;
	width: 260px;
	height: 200px;
	top: 0;
	right: 35%;
  transform-origin: 130px 80px;
	transform: translateX(50%) translateY(-200px) rotate(0deg);
}

#wpmmh_spider #hands_right {
  transform-origin: 155px 85px;
  transform: rotate(90deg);
}

#wpmmh_spider #hands_left {
  transform-origin: 105px 85px;
  transform: rotate(-90deg);
}

.wpmmh_footer {
	position: absolute;
	width: 100%;
	height: 150px;
	left: 0;
	bottom: 0;
	overflow: hidden;
}


/* GHOSTS */

.wpmmh_ghost {
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: 0;
	left: -100px;
	animation: wpmmh_ghost 20s infinite linear reverse, wpmmh_ghost_flying 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
	z-index: 2;
}

.wpmmh_ghost[data-id="1"] {
	animation-direction: normal;
}

@keyframes wpmmh_ghost {
	0% {
		left: -100px;
	}
	100% {
		left: 100vw;
	}
}

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

.wpmmh_ghost svg{
	width: 100px;
	height: 100px;
}


/* GRAVESTONE */

.wpmmh_gravestone {
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: 0;
	transform-origin: 50% 100%;
	animation: wpmmh_gravestone 4s infinite cubic-bezier(0.68, -0.6, 0.32, 1.6);
	transform: translateX(-50%) translateY(5px) rotate(0deg);
}

.wpmmh_gravestone svg {
	position: relative;
	height: 100%;
	width: 100%;
}

.wpmmh_gravestone[data-id="1"] {
	left: 5%;
	animation-delay: 1s;
	z-index: 1;
}

.wpmmh_gravestone[data-id="2"] {
	left: 25%;
	animation-delay: 3s;
	z-index: 3;
}

.wpmmh_gravestone[data-id="3"] {
	left: 75%;
	animation-delay: 6s;
	z-index: 1;
}

.wpmmh_gravestone[data-id="4"] {
	left: 95%;
	animation-delay: 9s;
	z-index: 3;
}

@keyframes wpmmh_gravestone {
  0%, 10%, 20%, 30%, 40% { 
    transform: translateX(-50%) translateY(5px) rotate(-5deg);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: translateX(-50%) translateY(5px) rotate(5deg);
  }
  50%, 100% {
    transform: translateX(-50%) translateY(5px) rotate(0deg);
  }
}


/* HANDS */

.wpmmh_hand {
	position: absolute;
	height: 100px;
	bottom: -100px;
	z-index: 4;
}

.wpmmh_hand[data-id="1"] {
	left: 10%;
}

.wpmmh_hand[data-id="2"] {
	left: 30%;
}

.wpmmh_hand[data-id="3"] {
	left: 50%;
	z-index: 1;
}

.wpmmh_hand[data-id="4"] {
	left: 70%;
}

.wpmmh_hand[data-id="5"] {
	left: 90%;
}


/* PUMPKIN - Jack-o'-lantern */

/* Define the base container */
.wpmmh_pumpkin_container {
	position: absolute;
	width: 100px; /* Base size */
	height: 100px;
	bottom: -15px; /* Slightly off the bottom edge */
	z-index: 10; 
	transition: all 0.5s ease-in-out;
}

/* Base size for the wrapper (img/svg) */
.wpmmh_pumpkin_container img,
.wpmmh_pumpkin_container svg {
	width: 100%;
	height: 100%;
}

/* IMPORTANT FIX: Apply flicker and lighting ONLY to the carved face group */
.wpmmh_pumpkin_container svg #wpmmh-pumpkin-face {
    animation: flicker 4s infinite step-end; 
}


/* Positioning for LTR (Default) - 12% as requested */
.wpmmh_pumpkin_left {
	left: 13%; 
}

.wpmmh_pumpkin_right {
	right: 12%; 
}

/* Flickering Animation definition (FINAL REVISION: Black to Yellow, NO GLOW/SHADOW) */
@keyframes flicker {
    0%, 20%, 40%, 60%, 80%, 100% { 
        filter: none; 
    }

    10%, 30%, 50%, 70%, 90% { 
        filter: 
            brightness(1.5) 
            invert(1) 
            sepia(1) 
            saturate(10) 
            hue-rotate(30deg);
    }
}


/* Hiding logic for pumpkin */
.wpmmh-hide-fx .wpmmh_pumpkin_left {
    transform: translateY(100px); 
    opacity: 0;
}

.wpmmh-hide-fx .wpmmh_pumpkin_right {
    transform: translateY(100px); 
    opacity: 0;
}

/* RTL ADJUSTMENTS */
body.rtl .wpmmh_pumpkin_left {
	left: auto;
	right: 12%; 
}

body.rtl .wpmmh_pumpkin_right {
	left: 13%; 
	right: auto;
}


/* TOGGLE BUTTON STYLES */
#mmh-toggle-btn {
  position: fixed;
  bottom: 100px;
  left: 25px; /* LTR Default */
  z-index: 9999999999999999999;
  min-width: 130px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(30, 30, 30, 0.65);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: all 0.25s ease;
}

body.rtl #mmh-toggle-btn {
    left: auto;
    right: 25px;
}

#mmh-toggle-btn:hover {
  background: rgba(255, 102, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}


/* ===== Responsive Halloween Elements ===== */

@media (max-width: 767px) {
  .wpmmh_ghost,
  .wpmmh_gravestone,
  .wpmmh_hand,
  .wpmmh_pumpkin_container {
    width: 14vw;
    height: 14vw;
  }

  #wpmmh_spider {
    width: 40vw;
    height: auto;
  }

  .wpmmh_pumpkin_container {
    bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .wpmmh_ghost,
  .wpmmh_gravestone,
  .wpmmh_hand,
  .wpmmh_pumpkin_container {
    width: 10vw;
    height: 10vw;
  }

  #wpmmh_spider {
    width: 30vw;
    height: auto;
  }
}