/* css/components/theme-overlay.css */
/* Theme overlay animations and positioning */

/* ========================================
   Overlay Container
   ======================================== */

.theme-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Click-through to dashboard */
  z-index: 100; /* Above dashboard, below modals */
  overflow: hidden;
  transition: z-index 0.3s ease;
}

/* When sidebar is expanded, lower overlay z-index so graphics appear behind sidebar */
/* The sidebar expanded class is on .dashboard-sidebar--expanded */
.dashboard-container:has(.dashboard-sidebar--expanded) .theme-overlay {
  z-index: 5; /* Below sidebar (10) but above grid cells (1) */
}

/* Disable animations if reduced motion preferred */
.theme-overlay.reduced-motion * {
  animation: none !important;
  transition: none !important;
}

/* ========================================
   Overlay Elements
   ======================================== */

.overlay-element {
  position: absolute;
  pointer-events: none;
  will-change: transform; /* GPU acceleration hint */
}

.overlay-element img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ========================================
   Halloween Animations
   ======================================== */

/* Spider Drop Animation */
@keyframes spider-drop {
  0% {
    transform: translateY(-150px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    transform: translateY(250px) rotate(360deg);
  }
  85% {
    transform: translateY(220px) rotate(360deg);
  }
  92% {
    transform: translateY(240px) rotate(360deg);
  }
  100% {
    transform: translateY(230px) rotate(360deg);
  }
}

.animate-spider-drop {
  animation: spider-drop 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  animation-delay: 0s;
}

/* Spider Walk Animation */
@keyframes spider-walk {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

.animate-spider-walk {
  animation: spider-walk 20s linear infinite;
}

/* Bat Fly Animation */
@keyframes bat-fly {
  0% {
    transform: translate(-100px, 0) scaleX(1);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  50% {
    transform: translate(calc(50vw - 40px), -50px) scaleX(1);
  }
  51% {
    transform: translate(calc(50vw - 40px), -50px) scaleX(-1);
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(100vw + 100px), 20px) scaleX(-1);
    opacity: 0;
  }
}

.animate-bat-fly {
  animation: bat-fly 12s linear infinite;
}

/* Ghost Float Animation */
@keyframes ghost-float {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  25% {
    transform: translateY(-20px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(-5deg);
  }
  75% {
    transform: translateY(-15px) rotate(3deg);
  }
}

.animate-ghost-float {
  animation: ghost-float 6s ease-in-out infinite;
}

/* Pumpkin Glow Animation */
@keyframes pumpkin-glow {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 107, 26, 0));
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 107, 26, 0.8));
  }
}

.animate-pumpkin-glow {
  animation: pumpkin-glow 4s ease-in-out infinite;
}

/* Floating Leaves Animation */
@keyframes leaves-fall {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

.animate-leaves-fall {
  animation: leaves-fall 15s linear infinite;
}

/* Web Wiggle Animation */
@keyframes web-wiggle {
  0%, 100% {
    transform: rotate(-2deg) scale(1);
  }
  50% {
    transform: rotate(2deg) scale(1.02);
  }
}

.animate-web-wiggle {
  animation: web-wiggle 3s ease-in-out infinite;
  transform-origin: top center;
}

/* ========================================
   Fade In/Out for Element Appearance
   ======================================== */

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.overlay-element {
  animation: overlay-fade-in 0.5s ease-in;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

/* Scale down on smaller screens */
@media (max-width: 1200px) {
  .overlay-element {
    transform: scale(0.8);
  }
}

@media (max-width: 768px) {
  .overlay-element {
    transform: scale(0.6);
  }
}

/* ========================================
   Performance Optimization
   ======================================== */

/* Force GPU acceleration for better performance */
.overlay-element {
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translate3d(0, 0, 0);
}