/* ==========================================================================
   codex-rite.css —— 法则 · 三条路的入门仪式（类名 rt-）
   舞台、讲解面板、按钮沿用 codex-aether.css 的 ae- 组件；这里只放仪式自己的东西：
   器物背景（仪式完成后才浮现）、跳过按钮、题名的英文。
   ========================================================================== */

/* 器物：仪式高潮时从黑暗里浮现，右侧为主，左侧压暗给文字 */
.rt-relic {
  position: absolute; inset: 72px 0 0; z-index: 0; pointer-events: none; /* 从顶栏下方开始，器物顶端不被遮住 */
  background-size: contain; background-position: right bottom; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.04); filter: brightness(.55) saturate(.9);
  transition: opacity 2.4s var(--out), transform 3.2s var(--out), filter 2.4s var(--out);
}
.rt-relic::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #05080b 0%, rgba(5, 8, 11, .92) 26%, rgba(5, 8, 11, .35) 52%, transparent 70%),
    linear-gradient(0deg, #05080b 0%, transparent 22%);
}
.rt-stage.is-revealed .rt-relic { opacity: 1; transform: none; filter: brightness(.9) saturate(1); }
.rt-stage .ae-canvas { z-index: 1; }
.rt-stage .ae-top, .rt-stage .ae-panel { z-index: 3; }

.rt-skip {
  margin-left: auto; pointer-events: auto;
  font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: var(--text-3);
  padding: 4px 2px 8px; border-bottom: 1px solid rgba(159, 194, 212, .18);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.rt-skip:hover { color: var(--text); border-color: var(--text-2); }

/* 题名：仪式完成后逐字凝出 */
.rt-stage.is-revealed .ae-title { font-size: clamp(44px, 5vw, 76px); letter-spacing: .3em; }
.rt-title-ch { display: inline-block; opacity: 0; filter: blur(12px); animation: rt-ch 1.6s var(--out) forwards; }
@keyframes rt-ch { to { opacity: 1; filter: none; } }
.rt-en {
  margin-top: 6px; font-family: var(--display-latin); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .06em; color: var(--frost);
  opacity: 0; animation: rt-fade 1.4s 1.2s var(--out) forwards;
}
.rt-stage.is-revealed .ae-body-text { opacity: 0; animation: rt-fade 1.4s 1.6s var(--out) forwards; }
.rt-stage.is-revealed .ae-acts { opacity: 0; animation: rt-fade 1.2s 2.2s var(--out) forwards; }
@keyframes rt-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rt-relic { transition: none; }
  .rt-title-ch, .rt-en, .rt-stage.is-revealed .ae-body-text, .rt-stage.is-revealed .ae-acts { animation: none; opacity: 1; filter: none; }
}