/* =========================================================
   ceremony.css —— 告别仪式全屏沉浸 UI
   ========================================================= */

#view-ceremony {
  background: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#ceremony-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 1;
}

/* 照片层（幕1~3 用 DOM 承载照片，便于 CSS 缩放与遮罩） */
#ceremony-photo-layer {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cer-photo {
  height: 22vh; border-radius: 8px;
  box-shadow: 0 0 0 rgba(255, 180, 90, 0);
  transition: height 1.5s var(--ease-soft), box-shadow 1.5s ease, filter 3s ease, opacity 3s ease;
  object-fit: cover;
  will-change: height, filter, opacity;
}
.cer-photo.zoomed {
  height: 60vh;
  box-shadow: 0 0 60px rgba(255, 170, 80, 0.35), 0 0 120px rgba(255, 120, 40, 0.15);
}
.cer-photo.burning { filter: sepia(0.5) brightness(0.85) saturate(1.1); }
.cer-photo.ashed { filter: grayscale(1) brightness(0.3) sepia(0.6); opacity: 0; }
@media (max-width: 768px) {
  .cer-photo.zoomed { height: 48vh; }
}

/* 暖色泛光暗角（幕2 火势增强时变橙） */
#ceremony-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.85);
  transition: box-shadow 1.5s ease, background 1.5s ease;
}
#ceremony-vignette.warm {
  box-shadow: inset 0 0 220px rgba(120, 40, 0, 0.7);
  background: radial-gradient(120% 90% at 50% 60%, rgba(255,120,30,0.12), transparent 60%);
}

/* 幕间文案 */
.ceremony-caption {
  position: absolute; z-index: 6; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: min(88vw, 640px); text-align: center;
  font-family: var(--font-stele); font-size: clamp(18px, 4.6vw, 28px);
  line-height: 1.9; color: var(--c-gold-soft); letter-spacing: 1px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
  opacity: 0; transition: opacity 2s ease; pointer-events: none;
}
.ceremony-caption[hidden] { display: none; }
.ceremony-caption.show { opacity: 1; }

/* 幕间推进按钮 */
.ceremony-btn {
  position: absolute; z-index: 7; left: 50%;
  bottom: calc(12vh + var(--safe-b));
  transform: translateX(-50%) translateY(12px);
  min-width: 220px; max-width: 84vw; padding: 15px 32px;
  border: 1px solid rgba(216,181,106,0.5); border-radius: 999px;
  background: rgba(24, 20, 12, 0.72); color: var(--c-gold-soft);
  font-family: var(--font-stele); font-size: 17px; letter-spacing: 2px;
  cursor: pointer; backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s var(--ease-soft), background 0.2s;
  min-height: 48px;
}
.ceremony-btn.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.ceremony-btn:hover { background: rgba(216,181,106,0.18); }
.ceremony-btn:active { transform: translateX(-50%) translateY(1px) scale(0.99); }

/* 返回上一步按钮（左上，与跳过镜像） */
.ceremony-back {
  position: absolute; z-index: 8; top: calc(14px + var(--safe-t)); left: 14px;
  padding: 6px 14px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--c-line); background: rgba(20,24,38,0.5);
  color: var(--c-text-mute); cursor: pointer; opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
}
.ceremony-back:hover { opacity: 1; color: var(--c-text); }

/* 跳过按钮 */
.ceremony-skip {
  position: absolute; z-index: 8; top: calc(14px + var(--safe-t)); right: 14px;
  padding: 6px 14px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--c-line); background: rgba(20,24,38,0.5);
  color: var(--c-text-mute); cursor: pointer; opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
}
.ceremony-skip:hover { opacity: 1; color: var(--c-text); }

/* 音频开关 */
.ceremony-audio {
  position: absolute; z-index: 8; bottom: calc(14px + var(--safe-b)); right: 14px;
  width: 40px; height: 40px; border-radius: 50%; font-size: 17px;
  border: 1px solid var(--c-line); background: rgba(20,24,38,0.6);
  color: var(--c-text-dim); cursor: pointer;
}
.ceremony-audio:hover { color: var(--c-text); }

@media (max-width: 768px) {
  .ceremony-btn { bottom: calc(9vh + var(--safe-b)); font-size: 16px; min-width: 200px; }
}