/* 🎃 HALLOWEEN THEME 🎃 */

/* Halloween overlay disabled */
body.halloween-mode::before {
  display: none;
}

/* Background overlay disabled */
body.halloween-mode::after {
  display: none;
}

/* 3D Halloween Elements - HIDDEN BY DEFAULT */
.halloween-3d-shapes {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  overflow: hidden;
}

/* Show 3D shapes only in Halloween mode */
body.halloween-mode .halloween-3d-shapes {
  display: block;
}

body.halloween-mode .shape-3d {
  position: absolute;
  transform-style: preserve-3d;
  animation: spookyRotate 25s linear infinite;
}

/* 3D Pumpkin - only when body.halloween-mode */
body.halloween-mode .pumpkin-3d {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  background: radial-gradient(circle at 30% 30%, #FF8C00, #FF4500);
  border-radius: 50%;
  transform: rotateX(45deg) rotateY(45deg);
  box-shadow:
    0 0 30px rgba(255, 140, 0, 0.8),
    inset -15px -15px 30px rgba(139, 69, 19, 0.4);
}

body.halloween-mode .pumpkin-3d::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 15px;
  background: #228B22;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

body.halloween-mode .pumpkin-3d::after {
  content: "🎃";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  z-index: 1;
}

/* 3D Ghost - only when body.halloween-mode */
body.halloween-mode .ghost-3d {
  width: 70px;
  height: 90px;
  top: 40%;
  right: 10%;
  background: radial-gradient(circle at 30% 30%, #F8F8FF, #E6E6FA);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateZ(50px);
  box-shadow:
    0 0 40px rgba(248, 248, 255, 0.7),
    inset -10px -10px 20px rgba(230, 230, 250, 0.3);
  animation: ghostFloat 4s ease-in-out infinite;
}

body.halloween-mode .ghost-3d::before {
  content: "👻";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
}

@keyframes ghostFloat {
  0%, 100% { transform: translateZ(50px) translateY(0px); opacity: 0.8; }
  50% { transform: translateZ(50px) translateY(-10px); opacity: 1; }
}


@keyframes spookyRotate {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(-360deg) rotateZ(180deg); }
}

/* Halloween Buttons - only when body.halloween-mode */
body.halloween-mode .btn, 
body.halloween-mode button, 
body.halloween-mode input[type="submit"] {
  background: linear-gradient(135deg, #FF8C00, #FF4500) !important;
  border: 2px solid #8B4513 !important;
  color: #000 !important;
  padding: 12px 24px !important;
  border-radius: 15px !important;
  box-shadow: 
    0 8px 16px rgba(255, 140, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(0px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body.halloween-mode .btn:hover, 
body.halloween-mode button:hover, 
body.halloween-mode input[type="submit"]:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 
    0 15px 30px rgba(255, 140, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #DAA520, #CD853F) !important;
  border-color: #4B0082 !important;
}

/* Halloween Headers - only when body.halloween-mode */
body.halloween-mode h1, 
body.halloween-mode h2, 
body.halloween-mode h3, 
body.halloween-mode h4, 
body.halloween-mode h5, 
body.halloween-mode h6 {
  color: #FF8C00 !important;
}

/* Special styling for elements with both h1 and hsh classes */
body.halloween-mode .h1.hsh {
  text-shadow: -3px -3px 0 #fff !important;
}

/* Halloween Links - only when body.halloween-mode */
body.halloween-mode a {
  color: #DAA520 !important;
}

body.halloween-mode a:hover {
  color: #FF8C00 !important;
}


/* Halloween Footer - only when body.halloween-mode */
body.halloween-mode footer {
  background: linear-gradient(180deg, transparent, rgba(47, 47, 47, 0.8)) !important;
  border-top: 2px solid rgba(255, 140, 0, 0.3) !important;
}

/* Halloween cursor - only when body.halloween-mode */
body.halloween-mode {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text y="16" font-size="16">🎃</text></svg>'), auto !important;
}

/* Halloween section background - only when body.halloween-mode */
body.halloween-mode .section.bg1 {
  background: linear-gradient(142deg, rgba(0, 0, 0, 1) 0%, rgba(168, 112, 0, 1) 68%, rgba(0, 0, 0, 1) 100%) !important;
}