/* 「看秉衡怎么立案」动画:16:9 舞台,内部尺寸用容器单位(cqw)随宽度缩放;5 个场景由 film.js 轮播。 */
.film-sec { padding: 100px 0 90px; background: radial-gradient(900px 420px at 50% 0%, #3a2618, transparent 70%), var(--ink); color: #f3e6da; }
.film-sec h2 { margin-bottom: 14px; }
.film-sec .sub { color: #bfa998; margin: 0 0 40px; font-size: 17px; }
.stage { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, #2b1f18, #1a120d); box-shadow: 0 50px 100px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.scene.on { opacity: 1; }
.badge { position: absolute; top: 3cqw; right: 3cqw; padding: .7cqw 1.5cqw; border-radius: 99cqw; font-size: 1.25cqw; font-weight: 700;
  background: rgba(21, 128, 61, .16); color: #7ee2a1; border: 1px solid rgba(126, 226, 161, .35); display: flex; gap: .6cqw; align-items: center; }
.badge::before { content: ""; width: .8cqw; height: .8cqw; border-radius: 50%; background: #34d399; box-shadow: 0 0 1cqw #34d399; }

/* 通用:电脑屏幕 / 浏览器窗口 */
.pc { position: absolute; left: 6cqw; top: 9cqw; width: 58cqw; height: 38cqw; border-radius: 1.2cqw; background: #fbf8f5; overflow: hidden;
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .45); color: #2b211b; }
.pc .tb { height: 3cqw; display: flex; align-items: center; gap: .6cqw; padding: 0 1.2cqw; background: #efe8e1; font-size: 1.1cqw; color: #8b7a6c; }
.pc .tb i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #e0d4c7; }
.pc .tb i:nth-child(1) { background: #e7856b; } .pc .tb i:nth-child(2) { background: #e9bf61; } .pc .tb i:nth-child(3) { background: #8cc583; }
.pc .tb b { font-weight: 400; margin-left: .8cqw; }
.pc .body { position: absolute; inset: 3cqw 0 0; padding: 1.8cqw 2cqw; }
.pc.wide { width: 70cqw; left: 15cqw; }

/* 场景 1:扫码上传 */
.s1 .drop { position: absolute; inset: 1.8cqw 22cqw 1.8cqw 2cqw; border: .25cqw dashed #d0a27c; border-radius: 1.2cqw; background: #fffaf5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw; font-size: 1.5cqw; color: #a45620; font-weight: 700; }
.s1 .drop small { font-size: 1.05cqw; color: #8b7a6c; font-weight: 400; }
.s1 .qr { position: absolute; right: 2cqw; top: 1.8cqw; width: 18cqw; padding: 1.2cqw; border-radius: 1.2cqw; background: #fff; border: 1px solid #eadfd4; text-align: center; font-size: 1.05cqw; color: #6b5a4e; }
.s1 .qr .code { width: 12cqw; height: 12cqw; margin: 0 auto .8cqw; border-radius: .6cqw; background: #fff url(img/qr-site.svg) center / contain no-repeat; }
.phone { position: absolute; right: 8cqw; top: 6cqw; width: 17cqw; height: 34cqw; border-radius: 2.6cqw; background: #111; padding: 1cqw;
  box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .55), inset 0 0 0 .3cqw #333; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: 1.8cqw; overflow: hidden; background: #1f2937; }
.phone .scan { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.2cqw; }
.phone .frame { position: absolute; inset: 5cqw 2cqw 9cqw; border: .3cqw solid rgba(255, 255, 255, .85); border-radius: 1cqw; }
.phone .laser { position: absolute; left: 2.3cqw; right: 2.3cqw; height: .25cqw; background: #34d399; box-shadow: 0 0 1cqw #34d399; top: 5cqw; }
.phone .cap { position: absolute; bottom: 2.4cqw; left: 50%; width: 5cqw; height: 5cqw; margin-left: -2.5cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .3); }
.phone .shot { position: absolute; inset: 5.5cqw 2.5cqw 9.5cqw; border-radius: .6cqw; background: #f5efe7; display: grid; place-items: center;
  font-size: 1.2cqw; line-height: 1.7; text-align: center; font-weight: 700; color: #7c4a22; opacity: 0; }
.phone .up { position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: 1.2cqw; font-size: 1cqw; color: #a7f3d0; text-align: center; opacity: 0; }
.doc { position: absolute; width: 7cqw; height: 9cqw; border-radius: .5cqw; background: #fff; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .35);
  font-size: .95cqw; font-weight: 700; color: #7c4a22; display: grid; place-items: center; text-align: center; padding: .5cqw; opacity: 0; }
.doc::before { content: ""; position: absolute; left: 1cqw; right: 1cqw; top: 1.2cqw; height: .5cqw; border-radius: .3cqw; background: #eadfd4;
  box-shadow: 0 1.2cqw 0 #f1e9e1, 0 2.4cqw 0 #f1e9e1; }
.s1.on .laser { animation: laser 1.1s ease-in-out 2 alternate; }
.s1.on .shot { animation: shotflash 3.6s steps(1) .9s forwards; }
.s1.on .up { animation: fadein .3s ease 3.4s forwards; }
.s1.on .doc { animation: fly 1.4s cubic-bezier(.5, 0, .3, 1) forwards; }
.s1.on .d1 { animation-delay: 1.6s; } .s1.on .d2 { animation-delay: 2.1s; } .s1.on .d3 { animation-delay: 2.6s; } .s1.on .d4 { animation-delay: 3.1s; } .s1.on .d5 { animation-delay: 3.6s; }
@keyframes laser { from { top: 5cqw; } to { top: 23cqw; } }
@keyframes shotflash { 0% { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 1; } 100% { opacity: 1; } }
@keyframes fly { 0% { opacity: 1; right: 13cqw; top: 14cqw; transform: scale(.6) rotate(0); }
  100% { opacity: 1; right: var(--tx); top: var(--ty); transform: scale(1) rotate(var(--rot)); } }
@keyframes fadein { to { opacity: 1; } }

/* 场景 2:自动识别 */
.rows { display: flex; flex-direction: column; gap: .9cqw; }
.row { display: grid; grid-template-columns: 19cqw 11cqw 1fr; align-items: center; gap: 1.2cqw; padding: 1cqw 1.4cqw; border-radius: .8cqw;
  background: #fff; border: 1px solid #eee4da; font-size: 1.2cqw; opacity: 0; transform: translateX(-2cqw); }
.row .k { justify-self: start; padding: .3cqw 1cqw; border-radius: 99cqw; background: #e3edff; color: #1d4ed8; font-weight: 700; font-size: 1.05cqw; }
.row .v { color: #6b5a4e; }
.s2 .beam { position: absolute; left: 0; right: 0; height: 5cqw; top: 0; background: linear-gradient(180deg, transparent, rgba(59, 130, 246, .18), transparent); opacity: 0; }
.s2.on .row { animation: rowin .5s ease forwards; }
.s2.on .row:nth-child(1) { animation-delay: .5s; } .s2.on .row:nth-child(2) { animation-delay: 1.1s; } .s2.on .row:nth-child(3) { animation-delay: 1.7s; }
.s2.on .row:nth-child(4) { animation-delay: 2.3s; } .s2.on .row:nth-child(5) { animation-delay: 2.9s; } .s2.on .row:nth-child(6) { animation-delay: 3.5s; }
.s2.on .beam { animation: beam 2s linear .3s 2; }
@keyframes rowin { to { opacity: 1; transform: none; } }
@keyframes beam { 0% { opacity: 1; top: 0; } 100% { opacity: 1; top: 100%; } }

/* 场景 3:自动补全 */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw 1.6cqw; }
.fld { font-size: 1.05cqw; color: #8b7a6c; }
.fld .in { position: relative; margin-top: .4cqw; height: 3cqw; border-radius: .6cqw; border: 1px solid #e3d8cc; background: #fff; display: flex; align-items: center;
  padding: 0 1cqw; font-size: 1.25cqw; color: #2b211b; overflow: hidden; }
.fld .in span { display: inline-block; white-space: nowrap; overflow: hidden; width: 0; }
.fld .in em { position: absolute; right: .6cqw; font-style: normal; font-size: .9cqw; padding: .15cqw .7cqw; border-radius: 99cqw; opacity: 0; }
.fld .in em.ocr { background: #e3edff; color: #1d4ed8; } .fld .in em.inf { background: #dff4f0; color: #0f766e; }
.claim { grid-column: 1 / -1; margin-top: .4cqw; padding: 1cqw 1.2cqw; border-radius: .8cqw; background: #fbe6d4; color: #7c3f14; font-size: 1.1cqw; line-height: 1.6; min-height: 5.6cqw; }
.claim span { display: inline-block; white-space: nowrap; overflow: hidden; width: 0; }
.need { position: absolute; left: 2cqw; right: 2cqw; bottom: 1.6cqw; padding: 1cqw 1.4cqw; border-radius: .8cqw; font-size: 1.2cqw; font-weight: 700;
  background: #fff7ed; border: 1px solid #f5c8a0; color: #b42318; display: flex; align-items: center; justify-content: space-between; opacity: 0; }
.need .btnx { padding: .4cqw 1.4cqw; border-radius: 99cqw; background: #fff; border: 1px solid #d9c3ad; color: #5b4a3e; font-weight: 600; }
.need.done { background: #ecfdf3; border-color: #abefc6; color: #15803d; }
.count { position: absolute; left: 67cqw; top: 13cqw; width: 26cqw; text-align: center; color: #f3e6da; }
.count b { display: block; font: 700 8cqw/1 var(--serif); color: var(--glow); }
.count span { font-size: 1.4cqw; color: #cdb9a8; }
.count s { color: #8f7b6c; font-size: 3.4cqw; margin-right: 1cqw; }
.s3.on .fld .in span { animation: type .7s steps(12) forwards; }
.s3.on .fld .in em { animation: fadein .3s ease forwards; }
.s3.on .f1 span { animation-delay: .3s; } .s3.on .f1 em { animation-delay: 1s; }
.s3.on .f2 span { animation-delay: .7s; } .s3.on .f2 em { animation-delay: 1.4s; }
.s3.on .f3 span { animation-delay: 1.1s; } .s3.on .f3 em { animation-delay: 1.8s; }
.s3.on .f4 span { animation-delay: 1.5s; } .s3.on .f4 em { animation-delay: 2.2s; }
.s3.on .f5 span { animation-delay: 1.9s; } .s3.on .f5 em { animation-delay: 2.6s; }
.s3.on .f6 span { animation-delay: 2.3s; } .s3.on .f6 em { animation-delay: 3s; }
.s3.on .claim span { animation: type 1.6s steps(40) 2.6s forwards; }
.s3.on .need { animation: fadein .3s ease 3.3s forwards; }
.s3.on .count b { animation: fadein .4s ease .2s both; }
@keyframes type { to { width: 100%; } }

/* 场景 4:法院平台自动填写(示意) */
.court .tb { background: #e6ebf2; color: #54657d; }
.court .nav4 { display: flex; gap: .6cqw; margin-bottom: 1.4cqw; }
.court .nav4 span { flex: 1; text-align: center; padding: .6cqw 0; border-radius: .5cqw; background: #eef2f7; color: #7a8aa0; font-size: 1.05cqw; position: relative; }
.court .nav4 span::after { content: "✓"; position: absolute; right: .6cqw; color: #15803d; opacity: 0; font-weight: 700; }
.court .grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1cqw; }
.court .cell { height: 3cqw; border-radius: .5cqw; border: 1px solid #d8e0ea; background: #fff; position: relative; overflow: hidden; font-size: 1.1cqw; display: flex; align-items: center; padding: 0 .8cqw; color: #334155; }
.court .cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #eaf2ff; }
.court .cell span { position: relative; opacity: 0; }
.court .ups { margin-top: 1.8cqw; display: grid; gap: .9cqw; }
.court .bar { height: 2.4cqw; border-radius: .5cqw; background: #eef2f7; position: relative; overflow: hidden; font-size: .95cqw; color: #475569; display: flex; align-items: center; padding: 0 .8cqw; }
.court .bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #d7f5e3; }
.court .bar span { position: relative; }
.robot { position: absolute; right: 3cqw; bottom: 3cqw; padding: .8cqw 1.4cqw; border-radius: 99cqw; background: #2b211b; color: #ffd3a6; font-size: 1.15cqw; font-weight: 700; opacity: 0; }
.s4.on .nav4 span::after { animation: fadein .2s ease forwards; }
.s4.on .nav4 span:nth-child(1)::after { animation-delay: 1s; } .s4.on .nav4 span:nth-child(2)::after { animation-delay: 1.8s; }
.s4.on .nav4 span:nth-child(3)::after { animation-delay: 2.6s; } .s4.on .nav4 span:nth-child(4)::after { animation-delay: 3.4s; } .s4.on .nav4 span:nth-child(5)::after { animation-delay: 4.1s; }
.s4.on .cell::before { animation: fillbar .35s ease forwards; }
.s4.on .cell span { animation: fadein .2s ease forwards; }
.s4.on .cell:nth-child(1)::before, .s4.on .cell:nth-child(1) span { animation-delay: .3s; }
.s4.on .cell:nth-child(2)::before, .s4.on .cell:nth-child(2) span { animation-delay: .55s; }
.s4.on .cell:nth-child(3)::before, .s4.on .cell:nth-child(3) span { animation-delay: .8s; }
.s4.on .cell:nth-child(4)::before, .s4.on .cell:nth-child(4) span { animation-delay: 1.05s; }
.s4.on .cell:nth-child(5)::before, .s4.on .cell:nth-child(5) span { animation-delay: 1.3s; }
.s4.on .cell:nth-child(6)::before, .s4.on .cell:nth-child(6) span { animation-delay: 1.55s; }
.s4.on .bar::before { animation: fillbar 1s ease forwards; }
.s4.on .bar:nth-child(1)::before { animation-delay: 2.2s; } .s4.on .bar:nth-child(2)::before { animation-delay: 2.7s; } .s4.on .bar:nth-child(3)::before { animation-delay: 3.2s; } .s4.on .bar:nth-child(4)::before { animation-delay: 3.7s; }
.s4.on .robot { animation: fadein .3s ease .2s forwards; }
@keyframes fillbar { to { width: 100%; } }

/* 场景 5:停在提交前 */
.review { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; font-size: 1.15cqw; color: #475569; }
.review div { padding: 1cqw 1.2cqw; border-radius: .6cqw; background: #f5f8fb; border: 1px solid #e2e8f0; }
.review b { color: #1e293b; }
.submit { position: absolute; right: 3cqw; bottom: 2.6cqw; padding: 1.2cqw 3.6cqw; border-radius: .8cqw; background: #2563eb; color: #fff; font-size: 1.6cqw; font-weight: 700; }
.submit::after { content: ""; position: absolute; inset: -.6cqw; border-radius: 1.2cqw; border: .3cqw solid rgba(37, 99, 235, .55); animation: pulse 1.4s ease-out infinite; }
.stopnote { position: absolute; left: 2cqw; bottom: 2.8cqw; font-size: 1.15cqw; color: #a45620; font-weight: 700; }
.toast { position: absolute; right: 3cqw; top: 3cqw; width: 30cqw; padding: 1.2cqw 1.4cqw; border-radius: 1cqw; background: #fff; color: #2b211b;
  box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .45); font-size: 1.15cqw; display: flex; gap: 1cqw; opacity: 0; transform: translateY(-2cqw); }
.toast i { flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: .8cqw; background: #07c160; }
.toast b { display: block; font-size: 1.2cqw; }
.cursor { position: absolute; width: 2.4cqw; height: 2.4cqw; left: 40cqw; top: 30cqw; opacity: 0;
  background: #fff; clip-path: polygon(0 0, 0 100%, 30% 72%, 52% 100%, 64% 94%, 44% 66%, 80% 66%); filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .5)); }
.done5 { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21, 15, 11, .72); opacity: 0; }
.done5 div { text-align: center; }
.done5 b { display: block; font: 700 4.4cqw/1.2 var(--serif); color: #ffe3bd; }
.done5 span { font-size: 1.5cqw; color: #cdb9a8; }
.s5.on .toast { animation: toastin .5s ease .6s forwards; }
.s5.on .cursor { animation: moveclick 1.6s ease 2s forwards; }
.s5.on .done5 { animation: fadein .5s ease 3.8s forwards; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes toastin { to { opacity: 1; transform: none; } }
@keyframes moveclick { 0% { opacity: 1; left: 40cqw; top: 30cqw; } 80% { opacity: 1; left: 77cqw; top: 40.5cqw; transform: scale(1); } 90% { transform: scale(.85); } 100% { opacity: 1; left: 77cqw; top: 40.5cqw; transform: scale(1); } }

/* 字幕 + 步骤条 */
.caption { margin: 26px 0 18px; min-height: 58px; text-align: center; font-size: 20px; color: #f7ede4; font-weight: 600; }
.caption small { display: block; font-size: 14px; color: #bfa998; font-weight: 400; margin-top: 4px; }
.film-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.film-steps button { position: relative; overflow: hidden; padding: 14px 10px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  color: #bfa998; font: inherit; font-size: 14px; cursor: pointer; text-align: center; }
.film-steps button b { display: block; font: 700 13px/1 var(--sans); color: #8f7b6c; margin-bottom: 6px; letter-spacing: 2px; }
.film-steps button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--gold), var(--accent-2)); }
.film-steps button.on { color: #fff; border-color: rgba(240, 163, 94, .45); background: rgba(196, 107, 45, .12); }
.film-steps button.on b { color: var(--glow); }
.film-steps button.done i { width: 100%; }
.film-ctl { display: flex; justify-content: center; margin-top: 18px; }
.film-ctl button { padding: 6px 16px; border-radius: 99px; border: 1px solid rgba(240, 163, 94, .35); background: transparent; color: #e8c9a8; cursor: pointer; font: inherit; font-size: 13px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.three div { padding: 22px 24px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.three b { display: block; font: 700 22px/1.3 var(--serif); color: #ffe3bd; margin-bottom: 6px; }
.three span { color: #bfa998; font-size: 14px; }
.film-note { margin-top: 18px; text-align: center; font-size: 12px; color: #8f7b6c; }
@media (max-width: 760px) {
  .film-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .film-steps button { font-size: 12px; padding: 10px 4px 12px; }
  .caption { font-size: 16px; }
  .three { grid-template-columns: 1fr; }
}
/* 系统关了动画效果(Windows「动画效果」关闭很常见):不播放场景内动画,每个场景直接显示完成后的画面,仍按步骤轮换 */
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; }
  .s1 .doc { opacity: 1; right: var(--tx); top: var(--ty); transform: rotate(var(--rot)); }
  .s1 .shot, .s1 .up, .s2 .row, .fld .in em, .need, .court .cell span, .robot, .toast { opacity: 1; transform: none; }
  .s2 .beam { display: none; }
  .fld .in span, .claim span, .court .cell::before, .court .bar::before { width: 100%; }
  .court .nav4 span::after { opacity: 1; }
  .cursor { opacity: 1; left: 77cqw; top: 40.5cqw; }
}