/* 青绿金墨开境：分层关节动作，笔尖墨迹共用一个时间轴。 */
.challenge-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  isolation: isolate;
  background: #f5efdf;
  color: #174a48;
  touch-action: none;
  contain: layout paint style;
  --intro-duration: 4600ms;
}
.challenge-intro *, .challenge-intro *::before, .challenge-intro *::after { box-sizing: border-box; }
.ci-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ci-paper { position: absolute; inset: 0; background: radial-gradient(ellipse at 32% 34%, #fffcf0, #f6f0de 59%, #e8e2c9); }
.ci-paper::after { content: ""; position: absolute; inset: 0; opacity: .24; background-image: repeating-linear-gradient(25deg, transparent 0 2px, #a48b4d08 3px 4px), repeating-linear-gradient(105deg, transparent 0 3px, #fff8 4px 5px); }
.ci-world { position: absolute; inset: -3%; opacity: 0; clip-path: circle(0% at 79% 64%); transform: scale(1.09) translate3d(1.5%, 1%, 0); will-change: clip-path, transform, opacity; }
.ci-world-image { display: block; height: 100%; width: 100%; max-width: none; object-fit: cover; object-position: center; }
.ci-world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fcf6e954, transparent 64%), linear-gradient(0deg, #f6edcf30, transparent 30%); }
.ci-clouds { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 30% 36%, #fffaebd9, #fff9e9a6 25%, transparent 53%), radial-gradient(ellipse at 67% 100%, #f8f5e1b3, transparent 47%); }
.ci-ink-halo { position: absolute; width: 45vw; height: 45vw; left: 54%; top: 28%; opacity: 0; border-radius: 50%; background: radial-gradient(ellipse, #e1c77878, #38a6a140 40%, transparent 70%); transform: translate(-50%, -50%) scale(.2); mix-blend-mode: multiply; }
.ci-ink-ribbon { position: absolute; inset: 0; height: 100%; width: 100%; opacity: 0; overflow: visible; }
.ci-ink-maskline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ci-ink-painted-edge { stroke: none; opacity: .8; }
.ci-ink-gold-fragments { fill: #c7a14b; stroke: none; opacity: .86; }
.ci-ink-hairline { fill: none; stroke: #e3c56c; stroke-width: 1.5; stroke-dasharray: 23 13 5 17; stroke-linecap: butt; opacity: .6; }
.ci-ink-fleck { fill: #257d7d; opacity: .45; }
.ci-master { position: absolute; right: 2.5%; bottom: 1.5%; height: min(70vh, 680px); width: min(48vw, 680px); display: grid; align-items: end; justify-items: center; opacity: 0; transform-origin: 50% 100%; filter: drop-shadow(0 14px 18px #17525020); }
.ci-master-sprite { position: relative; z-index: 1; height: 100%; width: auto; aspect-ratio: 1; flex-shrink: 0; }
.ci-master-fallback, .ci-master-sprite > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.ci-master-sprite > svg { opacity: 0; overflow: visible; }
.ci-puppet-ready .ci-master-sprite > svg { opacity: 1; }
.ci-puppet-ready .ci-master-fallback { visibility: hidden; }
.ci-master-ground { position: absolute; left: 17%; right: 8%; bottom: 4%; height: 6%; border-radius: 50%; opacity: .4; background: radial-gradient(ellipse, #1e5d514d, #67978c1a 45%, transparent 72%); filter: blur(8px); }
.ci-particles { position: absolute; inset: 0; }
.ci-particle { position: absolute; left: var(--ink-origin-x, 77%); top: var(--ink-origin-y, 61%); height: var(--particle-size); width: calc(var(--particle-size) * .65); border-radius: 60% 40% 55% 45%; background: #d8af48; opacity: 0; box-shadow: 0 0 8px #e4c96e6b; }
.ci-particle-teal { background: #2b9a93; box-shadow: 0 0 8px #359f9740; }
.ci-title-group { position: absolute; z-index: 3; left: 10%; top: 31%; width: 58%; text-align: left; pointer-events: none; }
.ci-eyebrow { margin: 0 0 18px 7px; color: #598279; letter-spacing: 5px; font-size: clamp(12px, 1.05vw, 17px); opacity: 0; }
.ci-main-title { font-family: "STXingkai", "Xingkai SC", "FZShuTi", "KaiTi", "STKaiti", "Kaiti SC", "SimSun", serif; font-size: clamp(61px, 7.4vw, 124px); font-weight: 400; color: #16575a; letter-spacing: .035em; margin: 0; padding: 0; white-space: nowrap; line-height: 1.25; text-shadow: 0 2px 0 #fff6, 0 5px 22px #f7f0dbcc; opacity: 0; transform: translate3d(28px, 8px, 0) scale(.94); transform-origin: 15% 50%; }
.ci-title-line { display: inline; }
.ci-title-underline { height: 3px; width: 61%; margin-top: 12px; margin-left: 3px; opacity: 0; background: linear-gradient(90deg, #b48736, #d5ba6a 58%, transparent); transform: scaleX(0); transform-origin: 0 50%; border-radius: 100%; }
.ci-subtitle { margin: 22px 0 0 7px; font-size: clamp(13px, 1.2vw, 19px); color: #52796d; letter-spacing: 3px; opacity: 0; }
.challenge-intro .ci-skip { position: absolute; z-index: 10; top: max(24px, env(safe-area-inset-top)); right: max(28px, env(safe-area-inset-right)); min-height: 44px; padding: 10px 17px; border: 1px solid #afbba37a; border-radius: 999px; background: #fffcf0d9; color: #4d7264; box-shadow: inset 0 1px 0 #fff, 0 3px 14px #4b614408; font-size: 13px; line-height: 1.5; cursor: pointer; backdrop-filter: blur(8px); }
.challenge-intro .ci-skip:hover { color: #2e6656; border-color: #86a88c; background: #fffdf6; }
.challenge-intro .ci-skip:focus-visible { outline: 2px solid #668d73; outline-offset: 4px; }
.ci-corner-note { position: absolute; z-index: 5; bottom: max(25px, env(safe-area-inset-bottom)); left: 35px; font-size: 11px; color: #8b9479; letter-spacing: 2px; opacity: .8; }
.ci-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.ci-playing { animation: ci-curtain var(--intro-duration) linear both; }
.ci-playing.ci-world-ready .ci-world { animation: ci-open-world var(--intro-duration) cubic-bezier(.19,.76,.23,1) both; }
.ci-playing .ci-clouds { animation: ci-cloud-light var(--intro-duration) ease both; }
.ci-playing .ci-ink-halo { animation: ci-bloom var(--intro-duration) ease both; }
.ci-playing .ci-ink-ribbon { animation: ci-ribbon-visibility var(--intro-duration) linear both; }
.ci-playing .ci-ink-maskline { animation: ci-ink-write var(--intro-duration) cubic-bezier(.25,.8,.3,1) both; }
.ci-playing.ci-master-ready .ci-master { animation: ci-master-gesture var(--intro-duration) ease both; }
.ci-playing .ci-particle { animation: ci-gold-drift 1950ms var(--particle-delay) cubic-bezier(.1,.65,.3,1) both; }
.ci-playing .ci-eyebrow { animation: ci-eyebrow-reveal var(--intro-duration) ease both; }
.ci-playing .ci-main-title { animation: ci-title-reveal var(--intro-duration) cubic-bezier(.15,.8,.2,1) both; }
.ci-playing .ci-title-underline { animation: ci-underline var(--intro-duration) ease both; }
.ci-playing .ci-subtitle { animation: ci-subtitle-reveal var(--intro-duration) ease both; }
.ci-world-missing .ci-paper { background: radial-gradient(ellipse at 45% 50%, #fffcf1, #e7ead5); }
.ci-master-missing .ci-master { display: none; }

@keyframes ci-curtain { 0%, 89% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ci-open-world {
  0%, 23% { opacity: 0; clip-path: circle(0% at 79% 64%); transform: scale(1.09) translate3d(1.5%, 1%, 0); }
  28% { opacity: .92; }
  51% { clip-path: circle(116% at 72% 57%); opacity: 1; }
  86%, 100% { clip-path: circle(145% at 68% 55%); opacity: 1; transform: scale(1.015) translate3d(0,0,0); }
}
@keyframes ci-cloud-light { 0%, 34% { opacity: 0; } 55%, 100% { opacity: .85; } }
@keyframes ci-bloom { 0%, 22% { opacity: 0; transform: translate(-50%,-50%) scale(.15); } 31% { opacity: .9; } 50% { transform: translate(-50%,-50%) scale(2.4); opacity: .2; } 70%, 100% { opacity: 0; } }
@keyframes ci-ribbon-visibility { 0%, 22% { opacity: 0; } 25%, 48% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes ci-ink-write { 0%, 24% { stroke-dashoffset: 1; } 47%, 100% { stroke-dashoffset: 0; } }
@keyframes ci-master-gesture {
  0% { opacity: 0; transform: translate3d(42px, 12px, 0) scale(.98); }
  10%, 100% { opacity: 1; transform: none; }
}
@keyframes ci-gold-drift { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.4); } 14% { opacity: .95; } 70% { opacity: .65; } 100% { opacity: 0; transform: translate3d(var(--particle-x),var(--particle-y),0) rotate(var(--particle-turn)) scale(.6); } }
@keyframes ci-eyebrow-reveal { 0%, 40% { opacity: 0; transform: translate3d(0,8px,0); } 54%, 100% { opacity: .9; transform: translate3d(0,0,0); } }
@keyframes ci-title-reveal { 0%, 39% { opacity: 0; transform: translate3d(28px,8px,0) scale(.94); filter: blur(5px); } 56%, 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); } }
@keyframes ci-underline { 0%, 48% { opacity: 0; transform: scaleX(0); } 62%, 100% { opacity: .8; transform: scaleX(1); } }
@keyframes ci-subtitle-reveal { 0%, 53% { opacity: 0; transform: translate3d(0,8px,0); } 67%, 100% { opacity: 1; transform: translate3d(0,0,0); } }

/* 减少动态时直接给出静态画面，JS 在 560 毫秒内返回。 */
.challenge-intro.ci-reduced, .ci-reduced * { animation: none !important; transition: none !important; }
.ci-reduced .ci-world { opacity: 1; clip-path: none; transform: none; }
.ci-reduced .ci-ink-ribbon, .ci-reduced .ci-ink-halo, .ci-reduced .ci-particles { display: none; }
.ci-reduced .ci-master-ready, .ci-reduced.ci-master-ready .ci-master { opacity: 1; transform: none; }
.ci-reduced .ci-main-title, .ci-reduced .ci-eyebrow, .ci-reduced .ci-subtitle { opacity: 1; transform: none; filter: none; }
.ci-reduced .ci-title-underline { opacity: .8; transform: none; }

/* 欢迎页面只使用书院底景，训练正文和输入区不受此规则影响。 */
.master-edition #welcome { position: relative; isolation: isolate; }
.master-edition #welcome::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/intro/academy-world.png') 65% 55% / cover no-repeat; opacity: .16; border-radius: 16px; mask-image: linear-gradient(0deg,#000,transparent 90%); }
.master-edition.in-training #welcome::before { opacity: 0; }
.master-edition .intro-replay-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 10px; border-radius: 999px; color: #5a7968; font-size: 12px; white-space: nowrap; }
.master-edition .intro-replay-button svg { height: 17px; width: 17px; }
.master-edition .intro-replay-button:not(:disabled):hover { color: #37644e; background: #f5faee; border-color: #c1d4ba; }

@media (max-width: 700px) {
  .master-edition .intro-replay-button { width: 31px; min-height: 38px; padding: 6px; flex-shrink: 0; }
  .master-edition .intro-replay-button > span { display: none; }
  .ci-world { inset: 0 -35%; }
  .ci-world-image { object-position: 64% center; }
  .ci-title-group { left: 7%; top: 22%; width: 86%; }
  .ci-main-title { font-size: clamp(48px, 15.8vw, 89px); letter-spacing: .035em; line-height: 1.16; white-space: normal; }
  .ci-title-line { display: block; }
  .ci-eyebrow { font-size: 12px; letter-spacing: 3px; margin-left: 3px; margin-bottom: 15px; }
  .ci-subtitle { font-size: 13px; letter-spacing: 1.8px; margin-left: 3px; margin-top: 17px; }
  .ci-title-underline { margin-top: 7px; width: 73%; }
  .ci-master { right: -7%; bottom: 2%; height: 43vh; width: 90vw; max-height: 420px; }
  .ci-clouds { background: radial-gradient(ellipse at 20% 27%,#fffaeeed,#fff8e4c9 20%,transparent 57%), linear-gradient(0deg,#f8efd21f,transparent 55%); }
  .ci-ink-halo { width: 90vw; height: 90vw; left: 70%; top: 60%; }
  .ci-particle { left: var(--ink-origin-x, 75%); top: var(--ink-origin-y, 67%); }
  .ci-ink-ribbon { left: 0; width: 100%; }
  .challenge-intro .ci-skip { top: max(20px,env(safe-area-inset-top)); right: 17px; min-height: 44px; font-size: 12px; padding: 10px 14px; }
  .ci-corner-note { left: 20px; bottom: max(19px,env(safe-area-inset-bottom)); font-size: 10px; letter-spacing: 1px; }
}
@media (max-height: 550px) and (min-width: 701px) {
  .ci-title-group { top: 26%; left: 9%; }
  .ci-main-title { font-size: min(7.4vw, 95px); }
  .ci-master { height: 86vh; }
  .ci-eyebrow { margin-bottom: 8px; }
  .ci-subtitle { margin-top: 12px; }
}
@supports not (clip-path: circle(30% at 50% 50%)) {
  .ci-world { clip-path: none; }
  .ci-playing.ci-world-ready .ci-world { animation-name: ci-world-fade; }
  @keyframes ci-world-fade { 0%,25% { opacity: 0; transform: scale(1.06); } 57%,100% { opacity: 1; transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .challenge-intro, .challenge-intro * { animation: none !important; transition: none !important; }
}