/* ==========================================================================
   Aurora Background Styles
   은은하고 몽환적인 오로라 앰비언트 배경
   ========================================================================== */

.aurora-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  background-color: var(--bg-color, #090e24);
  pointer-events: none;
  transition: background-color 0.4s ease;
}

#auroraCanvas {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  filter: blur(var(--aurora-blur, 60px));
  opacity: var(--aurora-opacity, 0.95);
  transform: translateZ(0);
  will-change: transform;
  transition: opacity 0.5s ease;
}

/* 이미지 배경 레이어 */
.bg-image-layer {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(var(--bg-image-blur, 0px));
  transition: opacity 0.5s ease, filter 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

/* 배경 모드별 가시성 제어 */
.aurora-container.bg-mode-solid #auroraCanvas {
  opacity: 0 !important;
  visibility: hidden;
}

.aurora-container.bg-mode-solid .aurora-overlay {
  opacity: 0 !important;
  visibility: hidden;
  display: none !important;
}

.aurora-container.bg-mode-image #auroraCanvas {
  opacity: 0 !important;
  visibility: hidden;
}

.aurora-container.bg-mode-image .bg-image-layer {
  opacity: var(--bg-image-opacity, 0.85);
}

.aurora-container.bg-mode-image .aurora-overlay {
  opacity: 0 !important;
  visibility: hidden;
  display: none !important;
}

#fxCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

#eventCanvas, .event-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1500;
}

/* 은은한 비네팅 및 오버레이 (밝기 향상을 위해 어두운 비네팅 대폭 완화) */
.aurora-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(9, 14, 36, 0) 0%,
    rgba(9, 14, 36, 0.28) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* 별빛 배경 레이어 */
.stars-layer {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, 0.7), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 40px 70px, rgba(255, 255, 255, 0.5), rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 90px 40px, rgba(255, 255, 255, 0.8), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.9), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 230px 190px, rgba(255, 255, 255, 0.4), rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 310px 240px, rgba(255, 255, 255, 0.6), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 350px 350px;
  opacity: 0.45;
  animation: starsTwinkle 8s ease-in-out infinite alternate;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

@keyframes starsTwinkle {
  0% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.55; }
  100% { opacity: 0.35; transform: scale(1.02); }
}