/* ============================================================
   上香儀軌（六步）· 自包含樣式
   含結構、@keyframes 與「減少動效」規則，便於整組搬移
   對應：js/components/offer-incense.js
   ============================================================ */

/* ---------------- 覆蓋層 ---------------- */
.rite-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--s-6);
  background: rgba(43, 43, 40, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--e-out);
}
.rite-overlay.is-in { opacity: 1; pointer-events: auto; }
.rite-overlay.is-leaving { opacity: 0; pointer-events: none; }

.rite-panel {
  width: 100%; max-width: 30rem;
  padding: var(--s-12) var(--s-8) var(--s-8);
  text-align: center;
  background: var(--c-paper-2);
  border: var(--border-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  transform: translateY(14px) scale(.985);
  transition: transform var(--t-base) var(--e-out);
}
.rite-overlay.is-in .rite-panel { transform: none; }

.rite-kicker {
  display: block; font-family: var(--f-mono);
  font-size: var(--fs-tiny); letter-spacing: var(--ls-wide);
  color: var(--c-gold);
}
.rite-title {
  margin-top: var(--s-2);
  font-family: var(--f-title); font-size: var(--fs-h3);
  letter-spacing: .1em; color: var(--c-fg);
}

/* ---------------- 步驟指示 ---------------- */
.rite-steps {
  display: flex; justify-content: center; gap: var(--s-4);
  margin: var(--s-8) 0 var(--s-6); padding: 0; list-style: none;
  flex-wrap: wrap;
}
.rite-dot { display: flex; align-items: center; gap: var(--s-1); }
.rite-dot i {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--c-line); background: transparent;
  transition: all var(--t-fast) var(--e-out);
}
.rite-dot span {
  font-size: var(--fs-tiny); letter-spacing: .06em; color: var(--c-mo-faint);
}
.rite-dot.is-on i { background: var(--c-gold); border-color: var(--c-gold); transform: scale(1.35); }
.rite-dot.is-on span { color: var(--c-gold); }
.rite-dot.is-done i { background: var(--c-gold-dark); border-color: var(--c-gold-dark); opacity: .55; }
.rite-dot.is-done span { color: var(--c-mo-soft); }

/* ---------------- 場景 ---------------- */
.rite-scene {
  position: relative; margin: 0 auto; width: 100%; max-width: 19rem;
  aspect-ratio: 4 / 3; color: var(--c-gold);
}
.rite-scene .rite-svg { position: relative; z-index: 1; width: 100%; height: 100%; }
.rite-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

.rite-text {
  margin-top: var(--s-6);
  font-family: var(--f-title); font-size: 1.375rem;
  letter-spacing: .22em; color: var(--c-fg);
}
.rite-note {
  margin-top: var(--s-3); font-size: var(--fs-small);
  line-height: 1.9; color: var(--c-fg-soft);
}

/* ---------------- 進度 ---------------- */
.rite-progress {
  margin: var(--s-8) auto var(--s-6); width: 100%; height: 2px;
  background: var(--c-line-soft); overflow: hidden;
}
.rite-progress i { display: block; height: 100%; width: 0; background: var(--c-gold); }

/* ---------------- 操作 ---------------- */
.rite-actions {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s-6); flex-wrap: wrap;
}
.rite-skip-btn {
  padding: var(--s-2) var(--s-3); background: none; border: 0;
  font-family: var(--f-body); font-size: var(--fs-tiny);
  letter-spacing: .1em; color: var(--c-mo-faint);
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--c-line);
}
.rite-skip-btn:hover { color: var(--c-gold-moon); }

.rite-check {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-6); cursor: pointer;
  font-size: var(--fs-tiny); color: var(--c-mo-faint);
}
.rite-check input { accent-color: var(--c-gold-dark); }
.rite-hint {
  margin-top: var(--s-4); font-size: var(--fs-tiny);
  color: var(--c-mo-wash); letter-spacing: .04em;
}

body.is-rite-open { overflow: hidden; }

/* ---------------- 各步動效 ---------------- */

/* 淨手：水滴下落、水面漣漪 */
@keyframes rite-drop {
  0%   { transform: translateY(-10px); opacity: 0; }
  30%  { opacity: .9; }
  100% { transform: translateY(26px); opacity: 0; }
}
.is-step-wash .rite-drop { animation: rite-drop 1.5s var(--e-out) infinite; }
.is-step-wash .rite-drop-2 { animation-delay: .35s; }
.is-step-wash .rite-drop-3 { animation-delay: .7s; }

@keyframes rite-ripple {
  0%   { opacity: .18; transform: scaleX(.9); }
  50%  { opacity: .6;  transform: scaleX(1.04); }
  100% { opacity: .18; transform: scaleX(.9); }
}
.is-step-wash .rite-ripple {
  animation: rite-ripple 2.2s var(--e-inout) infinite;
  transform-origin: 120px 118px;
}

/* 點燃／插爐：火焰舞動與光暈呼吸 */
@keyframes rite-flame {
  0%, 100% { transform: translateY(0) scaleY(1);      opacity: .92; }
  35%      { transform: translateY(-1.6px) scaleY(1.14); opacity: 1; }
  70%      { transform: translateY(.8px) scaleY(.94);  opacity: .82; }
}
.is-step-light .rite-flame,
.is-step-smoke .rite-flame {
  animation: rite-flame 1.5s var(--e-inout) infinite;
  transform-origin: 120px 46px;
}
.is-step-light .rite-glow,
.is-step-light .rite-glow2 { animation: breathe 2.4s var(--e-inout) infinite; }

/* 三拜：躬身 */
@keyframes rite-bow {
  0%, 100% { transform: rotate(0deg)   translateY(0); }
  45%      { transform: rotate(-13deg) translateY(6px); }
  70%      { transform: rotate(2deg)   translateY(0); }
}
.is-step-bow .rite-bow {
  animation: rite-bow 1.4s var(--e-inout) infinite;
  transform-origin: 176px 140px;
}

/* 插爐：香枝落下入爐 */
@keyframes rite-stick-in {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.is-step-put .rite-stick-in { animation: rite-stick-in .9s var(--e-out) both; }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 480px) {
  .rite-panel { padding: var(--s-8) var(--s-4) var(--s-6); }
  .rite-scene { max-width: 15rem; }
  .rite-text { font-size: 1.1875rem; letter-spacing: .16em; }
  .rite-steps { gap: var(--s-3); }
  .rite-dot span { display: none; }
  .rite-dot.is-on span { display: inline; }
}

/* ---------------- 減少動效：儀軌由 JS 靜默跳過，此處僅關閉殘留動畫 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .rite-overlay { display: none !important; }
  .is-step-wash .rite-drop,
  .is-step-wash .rite-ripple,
  .is-step-light .rite-flame,
  .is-step-light .rite-glow,
  .is-step-light .rite-glow2,
  .is-step-smoke .rite-flame,
  .is-step-bow .rite-bow,
  .is-step-put .rite-stick-in { animation: none !important; }
}