/* 平面抽卡演出（旧版）：卡片翻面 + 轨道 + 粒子。
   只在 .stage--flat 下生效，和影视版共用 #stage 与 #stage-skip。
   0–1.38s 蓄能 → 1.38–2.7s 翻牌揭晓 → 2.7–6.2s 稳定展示，时间统一乘 --speed。 */
.stage--flat {
  --accent: var(--pool-a);
  --speed: 1;
  --duration: 6200ms;
  --card-w: min(360px, 70vw, calc((100svh - 166px) * .72));
  --stage-line: #343431;
  --card-line: #dfdfd8;
  background: var(--ink);
  color: var(--paper);
}
.stage--flat.stage--b { --accent: var(--pool-b); }
/* 影视版的画布与文本层在平面版里不参与演出 */
.stage--flat .stage__media, .stage--flat .stage__grain, .stage--flat .stage__result { display: none; }
.stage--flat .stage__skip { border: 1px solid var(--stage-line); border-radius: 0; background: var(--ink); font-size: 12px; letter-spacing: .06em; }
.stage--flat .stage__skip:hover { border-color: var(--accent); color: var(--accent); }
.stage--flat .stage__skip:focus-visible { outline-color: var(--accent); }

.fs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 平面版的卡片只在 .stage--flat 下出现，影视版里整棵子树不参与渲染 */
.stage:not(.stage--flat) .fs { display: none; }
.fs__particles, .fs__texture, .fs__scene, .fs__flare { position: absolute; inset: 0; }
.fs__particles { width: 100%; height: 100%; }
.fs__texture { inset: 18px; border: 1px solid var(--stage-line); opacity: .45; }
.fs__texture::before, .fs__texture::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent); }
.fs__texture::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.fs__texture::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.fs__scene { display: grid; place-items: center; perspective: 1500px; }
.fs__orbit { position: absolute; width: calc(var(--card-w) * 1.75); aspect-ratio: 1; border: 1px solid var(--stage-line); border-radius: 50%; opacity: 0; animation: orbit-arrive calc(2300ms * var(--speed)) var(--ease-out) both; }
.fs__orbit::before, .fs__orbit::after { content: ''; position: absolute; width: 5px; height: 5px; background: var(--accent); top: 50%; left: -3px; }
.fs__orbit::after { left: auto; right: -3px; }
.fs__orbit--inner { width: calc(var(--card-w) * 1.57); border-style: dashed; opacity: .4; animation-name: orbit-inner; }
.fs__floor { position: absolute; top: calc(50% + var(--card-w) / 1.44 + 16px); width: calc(var(--card-w) * .86); height: 5px; background: var(--accent); border-radius: 50%; filter: blur(14px); opacity: 0; animation: floor-in calc(1400ms * var(--speed)) var(--ease-out) calc(1500ms * var(--speed)) both; }
.fs__shockwave { position: absolute; width: 250px; aspect-ratio: 1; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; animation: shockwave calc(1100ms * var(--speed)) var(--ease-out) calc(1580ms * var(--speed)) both; }
.fs__slit { position: absolute; width: 130vmax; height: 2px; background: var(--accent); box-shadow: 0 0 22px var(--accent); opacity: 0; transform: rotate(-26deg); }
.fs__flare { z-index: 7; background: var(--accent); opacity: 0; animation: reveal-flare calc(650ms * var(--speed)) ease-out calc(1540ms * var(--speed)) both; }

/* 同一个 3D 空间中的卡背、卡面，翻牌时不提前泄露姓名。 */
.draw-card, .card-stack { position: absolute; width: var(--card-w); aspect-ratio: .72; }
.draw-card { z-index: 4; transform-style: preserve-3d; animation: gravity-flight calc(2700ms * var(--speed)) both; }
.draw-card__turn { position: absolute; inset: 0; transform-style: preserve-3d; animation: card-turn calc(1150ms * var(--speed)) var(--ease-out) calc(1380ms * var(--speed)) both; }
.card-front, .card-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border: 1px solid var(--accent); }
.card-back { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px; background: var(--ink); color: var(--accent); transform: rotateY(0deg); }
.card-back::before { content: ''; position: absolute; inset: 9px; border: 1px solid var(--stage-line); pointer-events: none; }
.card-back::after { content: ''; position: absolute; inset: 17px; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); pointer-events: none; opacity: .55; }
.card-sigil { position: absolute; top: 50%; left: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--accent); }
.card-sigil::before, .card-sigil::after { content: ''; position: absolute; background: var(--accent); }
.card-sigil::before { height: 1px; left: -25%; right: -25%; top: 50%; }
.card-sigil::after { width: 1px; top: -25%; bottom: -25%; left: 50%; }
.card-sigil span { position: absolute; inset: 13%; border: 1px solid var(--accent); }
.card-sigil span:nth-child(2) { inset: 30%; background: var(--accent); }
.card-sigil span:nth-child(3) { inset: -16%; border-color: var(--stage-line); }
.card-front { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); transform: rotateY(180deg); }
.card-front::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--card-line); pointer-events: none; }
.card-front::after { content: ''; position: absolute; width: 38px; height: 5px; bottom: -1px; left: 50%; transform: translateX(-50%); background: var(--ink); }
.card-front__band { position: absolute; top: 10px; left: 10px; right: 10px; height: 8px; background: var(--accent); }
.card-front__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 18px; }
.fs__name { --glyphs: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .015em; width: 100%; margin: 0; font: 900 clamp(16px, calc((var(--card-w) - 52px) / var(--glyphs) * .9), 78px) / 1.2 var(--font-text); text-align: center; text-wrap: pretty; }
.fs__name .glyph__in { display: inline-block; animation: name-reveal calc(620ms * var(--speed)) var(--ease-out) calc((1840ms + var(--i) * 45ms) * var(--speed)) both; }
.fs__name-title { display: block; margin-top: 25px; max-width: 100%; padding: 8px 17px; background: var(--accent); font-size: clamp(11px, 1.4vw, 16px); font-weight: 900; letter-spacing: .2em; text-indent: .2em; text-align: center; overflow-wrap: anywhere; animation: title-reveal calc(650ms * var(--speed)) var(--ease-out) calc(2120ms * var(--speed)) both; }
.fs__name-title:empty { display: none; }
.stage--flat.stage--b .fs__name-title { color: var(--paper); }
.card-front__shine { position: absolute; inset: -30% -60%; background: var(--paper); opacity: 0; transform: skewX(-24deg) translateX(-120%); animation: card-shine calc(800ms * var(--speed)) ease-out calc(1710ms * var(--speed)) both; pointer-events: none; }

/* 陪衬卡背在揭晓前归位，结果阶段只保留主卡。 */
.card-stack { z-index: 2; perspective: 1000px; }
.card-ghost { position: absolute; inset: 0; border: 1px solid var(--accent); background: var(--ink); opacity: 0; animation: ghost-left calc(1630ms * var(--speed)) var(--ease-out) both; }
.card-ghost::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--stage-line); }
.card-ghost::after { content: ''; position: absolute; inset: 32% 24%; border: 1px solid var(--accent); transform: rotate(45deg); }
.card-ghost--right { animation-name: ghost-right; }
.card-ghost--far { animation-name: ghost-far; }
.fs__progress { position: absolute; left: 48px; right: 48px; bottom: 36px; height: 1px; background: var(--stage-line); }
.fs__progress > span { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; animation: stage-progress var(--duration) linear both; }

@keyframes gravity-flight {
  0% { opacity: 0; transform: translate3d(0, 80px, -600px) rotateX(22deg) rotateZ(-16deg); }
  20% { opacity: 1; transform: translate3d(0, -12px, -80px) rotateX(8deg) rotateZ(-7deg); animation-timing-function: var(--ease-out); }
  49% { transform: translate3d(0, 0, -120px) rotateX(0) rotateZ(-4deg); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  69% { transform: translate3d(0, -14px, 95px) rotateZ(3deg); animation-timing-function: var(--ease-out); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes card-turn { from { transform: rotateY(0); } 68% { transform: rotateY(190deg); } to { transform: rotateY(180deg); } }
@keyframes ghost-left {
  0% { opacity: 0; transform: translate3d(-100%, 22%, -200px) rotate(-36deg); }
  25%, 58% { opacity: .52; transform: translate3d(-43%, 3%, -100px) rotate(-17deg); }
  90%, 100% { opacity: 0; transform: translate3d(0, 0, -160px) rotate(0); }
}
@keyframes ghost-right {
  0% { opacity: 0; transform: translate3d(100%, 22%, -200px) rotate(36deg); }
  25%, 58% { opacity: .52; transform: translate3d(43%, 3%, -100px) rotate(17deg); }
  90%, 100% { opacity: 0; transform: translate3d(0, 0, -160px) rotate(0); }
}
@keyframes ghost-far {
  0% { opacity: 0; transform: translate3d(0, -32%, -300px); }
  25%, 58% { opacity: .24; transform: translate3d(0, -9%, -100px); }
  90%, 100% { opacity: 0; transform: translate3d(0, 0, -160px); }
}
@keyframes orbit-arrive { 0% { opacity: 0; transform: scale(.55) rotate(-75deg); } 60% { opacity: .8; } to { opacity: .55; transform: scale(1) rotate(15deg); } }
@keyframes orbit-inner { 0% { opacity: 0; transform: scale(1.6) rotate(70deg); } 60% { opacity: .6; } to { opacity: .28; transform: scale(1) rotate(-20deg); } }
@keyframes floor-in { from { opacity: 0; transform: scaleX(.2); } to { opacity: .5; transform: scaleX(1); } }
@keyframes shockwave { 0% { transform: scale(.3); opacity: 0; } 12% { opacity: .7; } to { transform: scale(6); opacity: 0; } }
@keyframes reveal-flare { 0% { opacity: 0; } 12% { opacity: .14; } 100% { opacity: 0; } }
@keyframes name-reveal { from { opacity: 0; transform: translateY(30px) scale(.84); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes title-reveal { from { opacity: 0; transform: translateY(12px); clip-path: inset(0 50%); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes card-shine { 0% { opacity: 0; transform: skewX(-24deg) translateX(-120%); } 25% { opacity: .65; } 100% { opacity: 0; transform: skewX(-24deg) translateX(120%); } }
@keyframes stage-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 01 / 引力聚合：扇形卡组收拢，主卡从纵深中翻出（上面已定义，这里是默认套）。 */

/* 02 / 裂隙突破：能量沿斜向裂隙积聚，卡片切入并翻转落位。 */
.fs--m2 .draw-card { animation-name: fracture-flight; }
.fs--m2 .fs__slit { animation: fracture-slit calc(2200ms * var(--speed)) both; }
.fs--m2 .fs__orbit--outer { border-radius: 0; width: calc(var(--card-w) * 1.4); transform: rotate(45deg); animation-name: fracture-frame; }
.fs--m2 .fs__orbit--inner { display: none; }
.fs--m2 .card-ghost--left { animation-name: shard-left; }
.fs--m2 .card-ghost--right { animation-name: shard-right; }
.fs--m2 .card-ghost--far { display: none; }
@keyframes fracture-flight {
  0% { opacity: 0; transform: translate3d(90vw, -28vh, -300px) rotateZ(38deg) rotateY(-30deg); }
  23% { opacity: 1; transform: translate3d(-20px, 10px, -160px) rotateZ(-12deg) rotateY(-12deg); animation-timing-function: var(--ease-out); }
  49% { transform: translate3d(0, 0, -100px) rotateZ(-9deg); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  65% { transform: translate3d(12px, -12px, 110px) rotateZ(5deg); animation-timing-function: var(--ease-out); }
  100% { opacity: 1; transform: none; }
}
@keyframes fracture-slit {
  0% { transform: rotate(-26deg) scaleX(0); opacity: 0; }
  20% { transform: rotate(-26deg) scaleX(.7); opacity: .6; }
  64% { transform: rotate(-26deg) scaleX(1); opacity: 1; height: 2px; }
  76% { transform: rotate(-26deg) scaleX(1); opacity: .5; height: 22px; }
  100% { transform: rotate(-26deg) scaleX(1.2); opacity: 0; height: 1px; }
}
@keyframes fracture-frame { from { opacity: 0; transform: rotate(65deg) scale(.5); } to { opacity: .55; transform: rotate(45deg) scale(1); } }
@keyframes shard-left { 0% { opacity: 0; transform: translate(-90%, 60%) rotate(-26deg); } 30%, 66% { opacity: .45; transform: translate(-18%, 12%) rotate(-12deg); } 100% { opacity: 0; transform: translate(-130%, 80%) rotate(-32deg); } }
@keyframes shard-right { 0% { opacity: 0; transform: translate(90%, -60%) rotate(-26deg); } 30%, 66% { opacity: .45; transform: translate(18%, -12%) rotate(12deg); } 100% { opacity: 0; transform: translate(130%, -80%) rotate(-32deg); } }

/* 03 / 轨道跃迁：纵向速度线、透视轨道和由远及近的主卡。 */
.fs--m3 .draw-card { animation-name: warp-flight; }
.fs--m3 .fs__orbit--outer { animation-name: warp-orbit; }
.fs--m3 .fs__orbit--inner { animation-name: warp-orbit-inner; }
.fs--m3 .card-ghost--left { animation-name: trail-near; }
.fs--m3 .card-ghost--right { animation-name: trail-far; }
.fs--m3 .card-ghost--far { display: none; }
@keyframes warp-flight {
  0% { opacity: 0; transform: translate3d(0, 55vh, -1100px) rotateX(65deg) rotateZ(12deg); }
  26% { opacity: 1; transform: translate3d(0, -25px, -200px) rotateX(16deg) rotateZ(6deg); animation-timing-function: var(--ease-out); }
  49% { transform: translate3d(0, -12px, -190px) rotateX(9deg); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  67% { transform: translate3d(0, 12px, 120px) rotateX(-5deg); animation-timing-function: var(--ease-out); }
  100% { opacity: 1; transform: none; }
}
@keyframes warp-orbit { from { opacity: 0; transform: rotateX(72deg) rotateZ(-35deg) scale(.1); } to { opacity: .7; transform: rotateX(45deg) rotateZ(20deg) scale(1.3); } }
@keyframes warp-orbit-inner { from { opacity: 0; transform: rotateY(70deg) rotateZ(35deg) scale(.1); } to { opacity: .45; transform: rotateY(42deg) rotateZ(-20deg) scale(1.25); } }
@keyframes trail-near { 0% { opacity: 0; transform: translate3d(0, 90%, -300px) scale(.6); } 30%, 58% { opacity: .4; transform: translate3d(0, 19%, -140px) scale(.9); } 100% { opacity: 0; transform: translate3d(0, -20%, -200px) scale(.6); } }
@keyframes trail-far { 0% { opacity: 0; transform: translate3d(0, 140%, -400px) scale(.4); } 30%, 58% { opacity: .2; transform: translate3d(0, 36%, -220px) scale(.8); } 100% { opacity: 0; transform: translate3d(0, -40%, -300px) scale(.4); } }

/* 跳过演出：直接落到终态；不是取消整个文档中的其他动画。 */
.stage--flat.is-skipped .fs *, .stage--flat.no-motion .fs * { animation: none !important; }
.stage--flat.is-skipped .draw-card, .stage--flat.no-motion .draw-card { transform: none; opacity: 1; }
.stage--flat.is-skipped .draw-card__turn, .stage--flat.no-motion .draw-card__turn { transform: rotateY(180deg); }
.stage--flat.is-skipped .card-stack, .stage--flat.is-skipped .fs__flare, .stage--flat.is-skipped .fs__slit, .stage--flat.is-skipped .fs__shockwave, .stage--flat.is-skipped .fs__particles,
.stage--flat.no-motion .card-stack, .stage--flat.no-motion .fs__flare, .stage--flat.no-motion .fs__slit, .stage--flat.no-motion .fs__shockwave, .stage--flat.no-motion .fs__particles { display: none; }
.stage--flat.is-skipped .fs__orbit, .stage--flat.no-motion .fs__orbit { opacity: .35; }
.stage--flat.is-skipped .fs__orbit--inner, .stage--flat.no-motion .fs__orbit--inner { opacity: .2; }
.stage--flat.is-skipped .fs__floor, .stage--flat.no-motion .fs__floor { opacity: .3; }
.stage--flat.is-skipped .fs__progress > span, .stage--flat.no-motion .fs__progress > span { transform: scaleX(1); }

@media (max-width: 760px) {
  .fs__texture { inset: 10px; }
  .fs__progress { left: 28px; right: 28px; bottom: 29px; }
}
@media (max-height: 600px) {
  .stage--flat { --card-w: min(320px, 66vw, calc((100svh - 116px) * .72)); }
  .card-front__body { padding: 8px 12px; }
  .fs__name { font-size: clamp(14px, calc((var(--card-w) - 42px) / var(--glyphs) * .86), 54px); }
  .fs__name-title { margin-top: 12px; padding: 5px 9px; font-size: 10px; }
  .card-back { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage--flat .fs *, .stage--flat .fs *::before, .stage--flat .fs *::after { animation: none !important; }
  .stage--flat .draw-card { opacity: 1; transform: none; }
  .stage--flat .draw-card__turn { transform: rotateY(180deg); }
  .stage--flat .fs__particles, .stage--flat .card-stack, .stage--flat .fs__flare, .stage--flat .fs__slit, .stage--flat .fs__shockwave { display: none; }
  .stage--flat .fs__orbit { opacity: .3; }
}