* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "游明朝", "Times New Roman", serif;
}

/* スライドショー本体 */
#slideshow {
  position: fixed;
  inset: 0;
  background: #000;
  transition: filter 0.8s ease;
}

body:has(.nav-menu.is-open) #slideshow {
  filter: brightness(0.5);
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 初期のボケ */
  filter: blur(20px) brightness(0.8);
  transform: scale(1.05);
  will-change: opacity, filter, transform;
  /* JSのクリーンアップ（3.5s）より早く終わらせる */
  transition: 
    opacity 2.5s ease-in-out, 
    filter 2.5s ease-in-out, 
    transform 3.0s ease-out;
}

.slide.active {
  opacity: 1;
  filter: blur(0px) brightness(1);
  transform: scale(1);
  z-index: 2;
}

.slide.fade-out {
  opacity: 0;
  /* 明るさを下げすぎず、背景の黒へ自然に溶け込ませる */
  filter: blur(40px) brightness(0.8);
  transform: scale(1.1);
  z-index: 1;
}

/* 霧のレイヤー */
.fog-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.fog-layer {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 65%);
  filter: blur(80px);
  opacity: 0.1;
  mix-blend-mode: screen;
}

.fog-1 { animation: fog-float 40s linear infinite; }
.fog-2 { animation: fog-float 50s linear infinite reverse; opacity: 0.08; }

@keyframes fog-float {
  0% { transform: translate(-3%, -3%); }
  50% { transform: translate(3%, 3%); }
  100% { transform: translate(-3%, -3%); }
}

#slideshow.is-transition .fog-layer {
  opacity: 0.4; /* 切り替え時に霧を少し濃くする */
  transition: opacity 2.0s ease-in-out;
}