/* Halloween Effects CSS */

/* Custom Cursor */
/* CSS variables will be set by JavaScript from data attributes */

body, html {
    cursor: var(--cursor-default, auto) !important;
}

/* Pointer cursor for interactive elements */
a, button, .elementor-button, [role="button"], input[type="submit"], input[type="button"], 
.clickable, .btn, .button, select, input[type="checkbox"], input[type="radio"] {
    cursor: var(--cursor-pointer, pointer) !important;
}

/* Text cursor for input fields */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="url"], textarea, .editable, [contenteditable] {
    cursor: var(--cursor-pointer, text) !important;
}

/* Hover states */
a:hover, button:hover, .elementor-button:hover, [role="button"]:hover,
input[type="submit"]:hover, input[type="button"]:hover {
    cursor: var(--cursor-pointer, pointer) !important;
}

/* Falling Pumpkins Animation */
.halloween-pumpkin {
    position: fixed;
    left: var(--pumpkin-x, 50vw);
    top: var(--pumpkin-y, -100px);
    z-index: 9999;
    pointer-events: auto;
    opacity: var(--pumpkin-opacity, 0.8);
    animation: fallAndSway var(--animation-duration, 8s) linear var(--animation-delay, 0s) forwards;
    cursor: var(--cursor-pointer, pointer);
    will-change: transform, opacity;
    transform: translateZ(0); /* Force GPU acceleration */
}

.halloween-pumpkin img {
    width: var(--pumpkin-width, 40px);
    height: auto;
    opacity: inherit;
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.6));
}

.halloween-pumpkin.exploding {
    transform: scale(0) translateZ(0);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    pointer-events: none; /* Prevent further clicks during animation */
}

@keyframes fallAndSway {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    25% {
        transform: translateY(25vh) translateX(-20px) rotate(90deg);
        opacity: 0.8;
    }
    50% {
        transform: translateY(50vh) translateX(30px) rotate(180deg);
        opacity: 0.8;
    }
    65% {
        transform: translateY(65vh) translateX(-15px) rotate(230deg);
        opacity: 0.8;
    }
    70% {
        transform: translateY(70vh) translateX(20px) rotate(250deg);
        opacity: 0.6;
    }
    85% {
        transform: translateY(85vh) translateX(-10px) rotate(300deg);
        opacity: 0.4;
    }
    95% {
        transform: translateY(100vh) translateX(30px) rotate(340deg);
        opacity: 0.2;
    }
    100% {
        transform: translateY(calc(100vh + 50px)) translateX(40px) rotate(360deg);
        opacity: 0;
    }
}

/* Click Flying Creatures */
.click-creature {
    position: fixed;
    left: var(--creature-x, 50vw);
    top: var(--creature-y, 50vh);
    pointer-events: none;
    z-index: 10000;
    opacity: var(--creature-opacity, 1);
    transform: translate(var(--creature-translate-x, 0), var(--creature-translate-y, 0)) scale(var(--creature-scale, 1)) translateZ(0);
    will-change: transform, opacity;
    transition: none;
    backface-visibility: hidden; /* Improve performance */
    -webkit-backface-visibility: hidden;
}

.click-creature img {
    display: block;
    width: var(--creature-size, 30px);
    height: auto;
    max-width: none;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 5px rgba(255, 200, 0, 0.6));
    transform: scale(1.1);
}

/* Fixed Halloween Decorations */
.fixed-pumpkin-tree {
    position: fixed;
    bottom: -10px;
    left: 20px;
    z-index: 9995;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.fixed-pumpkin-tree img {
    width: 150px;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.4));
}

.fixed-pumpkin-tree:hover {
    transform: scale(1.1);
}

.side-floating-ghost {
    position: fixed;
    right: 10px;
    top: var(--ghost-top, 30%);
    z-index: 9996;
    pointer-events: none;
    opacity: 0.7;
    will-change: top;
}

.side-floating-ghost img {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}

/* Hide ghost on mobile */
@media (max-width: 768px) {
    .side-floating-ghost {
        display: none;
    }
    .fixed-pumpkin-tree img {
        width: 100px;
    }
}

/* Bat Swarm on Page Load */
.swarm-bat {
    position: fixed;
    left: var(--bat-x, 50vw);
    top: var(--bat-y, 50vh);
    pointer-events: none;
    z-index: var(--bat-z-index, 9997);
    opacity: var(--bat-opacity, 1);
    will-change: transform, top, left;
}

.swarm-bat img {
    display: block;
    width: var(--bat-size, 30px);
    height: auto;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
    transition: none;
}

/* Halloween Background Effects */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: halloweenGlow 8s ease-in-out infinite alternate;
}

@keyframes halloweenGlow {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

/* Loading Animation */
@keyframes fadeInHalloween {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.halloween-loaded {
    animation: fadeInHalloween 0.8s ease-out;
}