/**
 * Atmospheric Effects Styles
 */

.atmospheric-effects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  --effect-multiplier: 1;
}

/* Candle Effects */
.candle {
  position: absolute;
  width: 60px;
  height: 120px;
  top: 50%;
  transform: translateY(-50%);
}

.candle-left {
  left: 20px;
}

.candle-right {
  right: 20px;
}

.candle-flame {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 40px;
  background: linear-gradient(
    to top,
    var(--color-orange-candle) 0%,
    #FFB366 50%,
    #FFD699 100%
  );
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 20px var(--color-orange-candle),
              0 0 40px rgba(255, 140, 66, 0.5);
  animation: flame-dance 2s ease-in-out infinite;
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.candle-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle,
    rgba(255, 140, 66, 0.3) 0%,
    rgba(255, 140, 66, 0.1) 50%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(20px);
  transition: opacity 0.1s ease, filter 0.1s ease;
}

@keyframes flame-dance {
  0%, 100% {
    transform: translateX(-50%) scaleY(1) scaleX(1);
  }
  25% {
    transform: translateX(-50%) scaleY(1.1) scaleX(0.95);
  }
  50% {
    transform: translateX(-50%) scaleY(0.95) scaleX(1.05);
  }
  75% {
    transform: translateX(-50%) scaleY(1.05) scaleX(0.98);
  }
}

/* Intensity adjustments */
.atmospheric-effects.minimal-intensity .candle-flame {
  animation-duration: 3s;
  opacity: 0.5;
}

.atmospheric-effects.minimal-intensity .candle-glow {
  opacity: 0.3;
}

.atmospheric-effects.maximum-intensity .candle-flame {
  animation-duration: 1s;
  box-shadow: 0 0 30px var(--color-orange-candle),
              0 0 60px rgba(255, 140, 66, 0.7);
}

.atmospheric-effects.maximum-intensity .candle-glow {
  opacity: 1;
  filter: blur(30px);
}

/* Fog Effects */
.fog-particle {
  position: absolute;
  left: -20%;
  width: 40%;
  height: 150px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 200, 220, 0.15) 25%,
    rgba(200, 200, 220, 0.2) 50%,
    rgba(200, 200, 220, 0.15) 75%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(40px);
  animation: fog-drift linear infinite;
  will-change: transform;
}

@keyframes fog-drift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(140vw);
  }
}

.atmospheric-effects.minimal-intensity .fog-particle {
  opacity: 0.3 !important;
  animation-duration: 40s !important;
}

.atmospheric-effects.maximum-intensity .fog-particle {
  opacity: 0.4 !important;
  filter: blur(50px);
}

/* Ghost Silhouettes */
.ghost-silhouette {
  position: absolute;
  width: 200px;
  height: 240px;
  color: rgba(200, 200, 220, 1);
  animation: ghost-float ease-in-out infinite;
  will-change: transform, opacity;
  opacity: 0;
}

.ghost-silhouette svg {
  width: 100%;
  height: 100%;
  filter: blur(2px);
}

@keyframes ghost-float {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) translateX(40px) rotate(10deg);
    opacity: 0;
  }
}

.atmospheric-effects.minimal-intensity .ghost-silhouette {
  display: none;
}

.atmospheric-effects.maximum-intensity .ghost-silhouette {
  opacity: 0;
  animation-duration: 12s !important;
}

.atmospheric-effects.maximum-intensity .ghost-silhouette svg {
  filter: blur(1px);
}

/* Sparkle Particles */
.sparkle-particle {
  position: absolute;
  background: var(--color-orange-candle);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--color-orange-candle),
              0 0 8px rgba(255, 140, 66, 0.5);
  animation: sparkle-drift ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes sparkle-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(20px, -30px) scale(1.5);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(40px, -60px) scale(0.5);
    opacity: 0;
  }
}

.atmospheric-effects.minimal-intensity .sparkle-particle {
  opacity: 0.3 !important;
  animation-duration: 6s !important;
}

.atmospheric-effects.maximum-intensity .sparkle-particle {
  box-shadow: 0 0 6px var(--color-orange-candle),
              0 0 12px rgba(255, 140, 66, 0.7);
}

/* Spider Web Decorations */
.spider-web {
  position: absolute;
  width: 150px;
  height: 150px;
  opacity: 0.6;
  animation: web-sway 4s ease-in-out infinite;
}

.spider-web-top-left {
  top: 0;
  left: 0;
  transform-origin: top left;
}

.spider-web-top-right {
  top: 0;
  right: 0;
  transform-origin: top right;
  transform: scaleX(-1);
}

.spider-web-bottom-left {
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
  transform: scaleY(-1);
}

.spider-web-bottom-right {
  bottom: 0;
  right: 0;
  transform-origin: bottom right;
  transform: scale(-1, -1);
}

@keyframes web-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

.spider-web-top-right {
  animation: web-sway-right 4s ease-in-out infinite;
}

.spider-web-bottom-left {
  animation: web-sway-bottom-left 4s ease-in-out infinite;
}

.spider-web-bottom-right {
  animation: web-sway-bottom-right 4s ease-in-out infinite;
}

@keyframes web-sway-right {
  0%, 100% {
    transform: scaleX(-1) rotate(0deg);
  }
  50% {
    transform: scaleX(-1) rotate(2deg);
  }
}

@keyframes web-sway-bottom-left {
  0%, 100% {
    transform: scaleY(-1) rotate(0deg);
  }
  50% {
    transform: scaleY(-1) rotate(2deg);
  }
}

@keyframes web-sway-bottom-right {
  0%, 100% {
    transform: scale(-1, -1) rotate(0deg);
  }
  50% {
    transform: scale(-1, -1) rotate(2deg);
  }
}

.atmospheric-effects.minimal-intensity .spider-web {
  opacity: 0.3;
}

.atmospheric-effects.maximum-intensity .spider-web {
  opacity: 0.8;
}

/* Hover Whisper Text */
.hover-whisper {
  position: fixed;
  display: none;
  padding: 8px 12px;
  background: rgba(26, 15, 15, 0.95);
  color: var(--color-orange-candle);
  font-family: var(--font-handwritten);
  font-size: 14px;
  border: 1px solid rgba(255, 140, 66, 0.3);
  border-radius: 4px;
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(255, 140, 66, 0.3),
              0 4px 8px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
  opacity: 0;
}

.hover-whisper::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(
    circle at center,
    rgba(255, 140, 66, 0.1) 0%,
    transparent 70%
  );
  border-radius: 6px;
  z-index: -1;
}

/* Corner Decorations */
.corner-decoration {
  position: fixed;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 4px rgba(255, 140, 66, 0.3));
}

.corner-decoration-top-left {
  top: 0;
  left: 0;
}

.corner-decoration-top-right {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.corner-decoration-bottom-left {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

.corner-decoration-bottom-right {
  bottom: 0;
  right: 0;
  transform: scale(-1, -1);
}

.corner-decoration svg {
  width: 100%;
  height: 100%;
}

.atmospheric-effects.minimal-intensity .corner-decoration {
  opacity: 0.5;
}

.atmospheric-effects.maximum-intensity .corner-decoration {
  filter: drop-shadow(0 0 8px rgba(255, 140, 66, 0.5));
}

/* Mobile adjustments for corner decorations */
@media (max-width: 768px) {
  .corner-decoration {
    width: 80px;
    height: 80px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .candle {
    width: 40px;
    height: 80px;
  }
  
  .candle-left {
    left: 10px;
  }
  
  .candle-right {
    right: 10px;
  }
  
  .candle-flame {
    width: 15px;
    height: 30px;
  }
  
  .candle-glow {
    width: 60px;
    height: 60px;
  }
  
  .fog-particle {
    height: 100px;
    filter: blur(30px);
  }
  
  /* Reduce ghost silhouette size */
  .ghost-silhouette {
    width: 150px;
    height: 180px;
  }
  
  /* Reduce sparkle size */
  .sparkle-particle {
    width: 2px;
    height: 2px;
  }
  
  /* Reduce spider web size */
  .spider-web {
    width: 100px;
    height: 100px;
  }
}

/* Mobile-optimized class for reduced particle count */
.atmospheric-effects.mobile-optimized {
  /* Reduce overall effect intensity */
  opacity: 0.8;
}

.atmospheric-effects.mobile-optimized .fog-particle {
  /* Slower, more subtle fog on mobile */
  animation-duration: 45s !important;
  opacity: 0.15 !important;
}

.atmospheric-effects.mobile-optimized .sparkle-particle {
  /* Slower sparkles on mobile */
  animation-duration: 8s !important;
}

.atmospheric-effects.mobile-optimized .ghost-silhouette {
  /* Less frequent ghost appearances */
  animation-duration: 25s !important;
}

/* Disable cursor trail on touch devices */
@media (hover: none) and (pointer: coarse) {
  .cursor-trail-canvas {
    display: none !important;
  }
  
  .hover-whisper {
    display: none !important;
  }
}