/* ===================================================================
 * craft.css · 皮影七工序（demo 戏台 / 进度点 / 调色盘 / 印章工具 / 响应式）
 * 影戏千秋 · 景阳冈重演（小 Demo）
 * =================================================================== */

/* ========== INTERACTIVE DEMO ========== */
.demo{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(217,177,90,.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(140,28,24,.2), transparent 65%),
    linear-gradient(180deg,#0c0606,#140807 50%,#0c0606);
}

/* the theatre — a real lightbox */
.demo-stage{
  position:relative;
  flex:1;min-width:0;
  border:1px solid var(--gold);
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255,224,150,.32), rgba(236,180,90,.08) 55%, transparent 75%),
    linear-gradient(160deg,#1a0c0a,#0a0504);
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 0 120px rgba(0,0,0,.55);
  overflow:hidden;
}
.demo-layout{
  display:flex;gap:0;align-items:stretch;
  margin-top:10px;
}
.demo-stage::before,.demo-stage::after{
  content:"";position:absolute;width:30px;height:30px;border:2px solid var(--gold);z-index:6;
}
.demo-stage::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.demo-stage::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* paper screen inner panel where puppet lives */
.screen{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  max-height:75vh;
  display:flex;align-items:center;justify-content:center;
  cursor:default;
}
.screen.armed{cursor:default}
.screen.armed:active,.screen.dragging{cursor:default}

/* faint weave texture on the screen */
.screen::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,220,140,.04) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 6px);
  pointer-events:none;
}
/* lantern flicker */
.screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,235,170,.18),transparent 60%);
  animation:flicker 7s ease-in-out infinite;
}

/* puppet canvas */
.puppet-svg{
  position:relative;z-index:2;
  width:min(360px,46%);height:auto;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.7));
  transition:filter .8s ease;
  touch-action:none;user-select:none;
}

/* 影人完成时的短促闪光 */
.screen.flash::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.85),rgba(255,235,170,.4) 40%,transparent 70%);
  animation:screenFlash .6s ease-out;
}
@keyframes screenFlash{
  0%{opacity:0}
  20%{opacity:1}
  100%{opacity:0}
}

/* stage caption（移到右上角，不压主体） */
.stage-caption{
  position:absolute;top:16px;right:16px;
  z-index:5;text-align:right;pointer-events:none;
  background:rgba(10,5,4,.72);
  border:1px solid rgba(217,177,90,.4);
  padding:8px 12px;
  backdrop-filter:blur(4px);
  max-width:50%;
}
.stage-caption .cap-row{
  display:flex;align-items:baseline;justify-content:flex-end;gap:10px;
}
.stage-caption .cn{
  font-family:var(--font-kai);font-size:20px;letter-spacing:.18em;
  color:var(--gold-bright);text-shadow:0 0 12px rgba(243,210,122,.4);
}
.stage-caption .en{
  font-family:var(--font-en-cap);font-size:9px;letter-spacing:.3em;
  color:var(--gold);opacity:.85;
}

/* empty hint */
.stage-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:4;text-align:center;pointer-events:none;
  transition:opacity .6s ease;
}
.stage-hint .big{
  font-family:var(--font-kai);font-size:clamp(36px,5vw,64px);
  color:rgba(243,210,122,.35);letter-spacing:.3em;line-height:1.2;
}
.stage-hint .sm{
  font-family:var(--font-en-serif);font-style:italic;
  color:var(--paper-dim);font-size:15px;letter-spacing:.2em;margin-top:10px;
}
.screen[data-step]:not([data-step="0"]) .stage-hint{opacity:0}

/* draggable banner — 底部，不遮挡头部 */
.drag-banner{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:5;
  font-family:var(--font-en-cap);font-size:10px;letter-spacing:.4em;
  color:var(--vermillion);
  padding:5px 14px;border:1px solid var(--vermillion);
  background:rgba(10,5,4,.6);
  opacity:0;transition:opacity .6s ease .3s;
}
/* DRAG ME 仅在关节全部点完（screen.joints-done）后出现，避免一进第 7 步就提示拖拽 */
.screen.joints-done .drag-banner{opacity:1}
.drag-banner::before,.drag-banner::after{content:"✦";margin:0 8px;color:var(--gold)}

/* progress dots */
.demo-progress{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:18px 6px 18px 18px;
  min-width:72px;
}
.demo-progress .dot{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;
}
/* 未解锁的工序按钮不可点击 */
.demo-progress .dot[aria-disabled="true"]{
  cursor:not-allowed;opacity:.45;pointer-events:none;
}
.demo-progress .dot .ball{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-kai);font-size:18px;
  background:radial-gradient(circle at 35% 30%,#1d0c0a,#0a0504 75%);
  border:1px solid var(--line);
  color:var(--paper-dim);
  transition:all .4s ease;
}
.demo-progress .dot .lbl{
  font-family:var(--font-kai);font-size:10px;letter-spacing:.15em;
  color:var(--paper-dim);opacity:.6;transition:all .4s ease;white-space:nowrap;
}
.demo-progress .dot:hover .ball{border-color:var(--gold);color:var(--gold)}
.demo-progress .dot:hover .lbl{opacity:1;color:var(--paper)}
.demo-progress .dot.done .ball{border-color:var(--gold);color:var(--gold-bright);box-shadow:0 0 14px rgba(243,210,122,.3)}
.demo-progress .dot.done .lbl{color:var(--gold);opacity:.85}
.demo-progress .dot.active .ball{
  border-color:var(--vermillion);color:var(--gold-bright);
  background:radial-gradient(circle at 35% 30%,#3a1410,#150907 75%);
  box-shadow:0 0 0 4px rgba(10,5,4,.8),0 0 18px rgba(200,51,42,.5);
  transform:scale(1.15);
}
.demo-progress .dot.active .lbl{color:var(--gold-bright);opacity:1}
.demo-progress .seg{
  width:1px;height:18px;background:var(--line);
  transition:background .4s ease;
}
.demo-progress .seg.on{background:var(--gold)}

/* control buttons */
.demo-ctrl{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:24px;
  padding:10px 8px 4px;
  background:linear-gradient(180deg,transparent,rgba(10,5,4,.55) 60%);
  position:relative;z-index:5;
}

/* 短视口（1280×720 等）：压低戏台高度，确保主视觉 + 按钮同屏可见 */
@media(max-height:800px) and (min-width:561px){
  .demo-stage .screen{max-height:58vh}
  .demo-narr{margin-top:18px;min-height:52px}
  .demo-narr .t{font-size:22px}
  .demo-narr .d{font-size:15px;line-height:1.7}
  .demo-ctrl{margin-top:14px}
}
@media(max-height:620px) and (min-width:561px){
  .demo-stage .screen{max-height:52vh}
  .demo-narr{margin-top:10px;min-height:40px}
  .demo-narr .t{font-size:18px;margin-bottom:2px}
  .demo-narr .d{font-size:13px}
  .demo-ctrl{margin-top:8px}
  .demo .btn{padding:10px 20px;font-size:14px}
}

/* side caption / step narrative */
.demo-narr{
  margin:30px auto 0;max-width:860px;text-align:center;
  min-height:68px;
}
.demo-narr .t{
  font-family:var(--font-kai);font-size:27px;letter-spacing:.12em;
  color:var(--gold-bright);margin-bottom:8px;
  transition:opacity .4s ease;
}
.demo-narr .d{
  font-family:var(--font-kai);
  font-size:17px;color:var(--paper);line-height:1.9;
  transition:opacity .4s ease;
}

/* ===== 七工序总结框（"从一张牛皮到一出千古好戏……"） ===== */
.craft-summary{
  margin-top:38px;max-width:880px;margin-left:auto;margin-right:auto;
  text-align:center;position:relative;
  padding:26px 28px 22px;
  border:1px solid var(--line-strong);
  background:linear-gradient(160deg,rgba(28,13,11,.6),rgba(10,5,4,.4));
}
.craft-summary::before,.craft-summary::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--gold);
}
.craft-summary::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.craft-summary::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.craft-summary .sum-lead{
  font-family:var(--font-kai);
  font-size:clamp(20px,2.6vw,30px);
  color:var(--gold-bright);
  letter-spacing:.14em;line-height:1.6;
  margin-bottom:14px;
}
.craft-summary .sum-lead .div{
  display:inline-block;width:24px;height:1px;
  background:var(--line-strong);vertical-align:middle;margin:0 10px;
}
.craft-summary .sum-lead .red{color:var(--vermillion)}
.craft-summary p{
  font-family:var(--font-kai);
  font-size:14.5px;color:var(--paper-dim);line-height:1.95;
  letter-spacing:.04em;
}
.craft-summary p .accent{color:var(--gold-bright)}
.craft-summary p .pulse{color:var(--vermillion)}
.craft-summary .stamp{
  display:inline-block;margin-top:16px;
  font-family:var(--font-en-cap);font-size:11px;letter-spacing:.4em;
  color:var(--gold);
  padding:5px 14px;border:1px solid var(--line-strong);
}

/* ===== hands-on canvas crafting ===== */
/* canvas 交互层定义见下方（z-index:6 / pointer-events:auto） */
.screen{cursor:default}
.screen.alive{cursor:default}
.screen.alive:active,.screen.dragging{cursor:default}

/* ===== 完成反馈 toast（canvas 重写版仅用此 toast） ===== */
.craft-toast{
  position:absolute;left:50%;top:18%;
  transform:translate(-50%,-50%) translateY(10px);
  z-index:30;
  padding:12px 26px;
  background:linear-gradient(180deg,rgba(10,5,4,.92),rgba(10,5,4,.96));
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-family:var(--font-kai);
  font-size:18px;
  letter-spacing:.18em;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 18px rgba(243,210,122,.25);
  transition:opacity .35s ease,transform .35s ease;
}
.craft-toast.show{
  opacity:1;
  transform:translate(-50%,-50%) translateY(0);
}
/* canvas 交互层：覆盖在主图之上，接收指针事件 */
#craft{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:6;
  pointer-events:auto;
  cursor:crosshair;
  touch-action:none;
}
.screen[data-step="0"] #craft{pointer-events:none}
/* 移动端 toast 缩小 */
@media(max-width:560px){
  .craft-toast{font-size:15px;padding:9px 18px;letter-spacing:.12em}
}

/* ===== 制作过程图片层（主视觉） ===== */
.craft-img-layer{
  position:absolute;inset:0;
  z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(255,224,150,.18),rgba(236,180,90,.04) 55%,transparent 75%),linear-gradient(160deg,#1a0c0a,#0a0504);
  overflow:hidden;
}
.craft-main-img{
  max-width:88%;max-height:88%;
  object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.6));
  opacity:0;transition:opacity .4s ease;
  /* 试操拖动时由 JS 设置 transform:translate(...)，留出 transform 通道，
     不与 opacity transition 冲突；拖动即时跟随，不加 transform 过渡 */
  will-change:transform;
}
.craft-main-img.loaded{opacity:1}
/* 参考图：左下角小浮窗，不与顶部 tool-hint 重叠，不影响主图坐标 */
.craft-ref-img{
  position:absolute;bottom:14px;left:14px;top:auto;
  z-index:5;
  width:auto;max-width:140px;max-height:180px;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
  border:1px solid rgba(217,177,90,.5);
  background:rgba(10,5,4,.55);
  padding:4px;
  border-radius:3px;
  opacity:0;transition:opacity .4s ease;
  pointer-events:none;
}
.craft-ref-img.loaded{opacity:.95}
/* 参考图小标题 */
.craft-ref-img.loaded::before{
  content:"参考 · 成品";
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-family:var(--font-kai);font-size:11px;letter-spacing:.2em;
  color:var(--gold);white-space:nowrap;opacity:.85;
}
/* step 0 also uses the prepared craft image; canvas is only a quiet light overlay. */
.screen[data-step="0"] .craft-img-layer{display:flex}

/* tool hint — 左侧竖排笺条，利用人物左侧留白承载每道工序的操作提示 */
.tool-hint{
  position:absolute;top:82px;left:18px;right:auto;
  z-index:7;display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:14px 10px 16px;
  background:linear-gradient(180deg,rgba(10,5,4,.9),rgba(19,8,6,.84));
  border:1px solid var(--gold);
  border-radius:2px;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 0 18px rgba(217,177,90,.05);
  max-width:112px;max-height:calc(100% - 132px);
}
.tool-hint::after{
  content:"";width:1px;height:18px;margin-bottom:-32px;
  background:linear-gradient(180deg,var(--gold),transparent);
  opacity:.65;
}
.tool-hint .th-icon{color:var(--vermillion);font-size:18px;line-height:1;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}}
.tool-hint .th-cn{
  display:block;
  writing-mode:vertical-rl;text-orientation:upright;
  max-height:calc(75vh - 132px);
  overflow-wrap:anywhere;white-space:normal;
  font-family:var(--font-kai);font-size:16px;line-height:1.72;letter-spacing:.11em;
  color:var(--gold-bright);text-align:start;
}

/* progress bar（右上角 caption 内，更窄） */
.prog-bar{
  width:140px;height:4px;margin:8px 0 4px auto;
  background:rgba(217,177,90,.18);border:1px solid var(--line);
  overflow:hidden;border-radius:3px;
}
.prog-bar span{
  display:block;height:100%;width:0%;
  background:linear-gradient(to right,var(--vermillion),var(--gold-bright));
  box-shadow:0 0 10px rgba(243,210,122,.6);
  transition:width .25s ease;
}
.prog-txt{
  font-family:var(--font-en-cap);font-size:12px;letter-spacing:.2em;
  color:var(--gold);opacity:.9;text-align:right;
}

/* palette (敷彩) — 右侧垂直排列，不压人物双腿 */
.palette{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  z-index:8;display:none;flex-direction:column;gap:10px;
  align-items:center;min-width:92px;padding:12px 10px;
  background:rgba(10,5,4,.85);border:1px solid var(--gold);
  border-radius:4px;
  box-shadow:0 8px 28px rgba(0,0,0,.6);
}
.palette.show{display:flex}
.palette::before{
  content:"选 色";position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-family:var(--font-kai);font-size:13px;color:var(--gold);letter-spacing:.2em;white-space:nowrap;
}
.paint-guide{
  width:92px;padding:0 2px 9px;border-bottom:1px solid rgba(217,177,90,.32);
  text-align:center;font-family:var(--font-kai);color:var(--paper);
}
.paint-guide b{display:block;color:var(--gold-bright);font-size:12px;line-height:1.35;font-weight:600}
.paint-guide span{display:block;margin-top:4px;color:#d8c8a5;font-size:10px;line-height:1.45}
.palette .dish{
  width:50px;height:50px;border-radius:50%;
  border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
  transition:all .25s ease;
}
.palette .dish .sw{width:22px;height:22px;border-radius:50%;margin-bottom:2px;box-shadow:inset 0 0 6px rgba(0,0,0,.45)}
.palette .dish .lb{font-family:var(--font-kai);font-size:13px;line-height:1;color:var(--paper)}
.palette .dish:hover{border-color:var(--gold);transform:translateY(-3px)}
.palette .dish.sel{border-color:var(--gold-bright);box-shadow:0 0 16px rgba(243,210,122,.55);transform:translateY(-3px) scale(1.06)}
.palette .dish.sel::after{content:"";position:absolute;inset:-5px;border:1px dashed var(--gold);border-radius:50%;animation:spin 8s linear infinite}

/* button bigger（仅制影区内按钮加大，不污染其它 section） */
.demo .btn{font-size:17px;padding:13px 30px}

/* progress dots label bigger（桌面端） */
.demo-progress .dot .lbl{font-size:14px}
.demo-progress .dot .ball{width:46px;height:46px;font-size:20px}

/* ===== 响应式（制影专属） ===== */
@media(max-width:900px){
  /* demo → compact */
  .demo-stage .screen{aspect-ratio:4/3;max-height:70vh}
  .tool-hint{top:76px;left:12px;right:auto;max-width:94px;max-height:calc(100% - 118px)}
  .tool-hint .th-cn{font-size:14px;line-height:1.62;max-height:calc(70vh - 112px)}
  .stage-caption{padding:6px 10px;max-width:60%}
  .stage-caption .cn{font-size:17px}
  .prog-bar{width:110px}
  .demo-progress{min-width:58px;padding:12px 4px 12px 12px}
  .demo-progress .seg{height:12px}
  .demo-progress .dot .ball{width:36px;height:36px;font-size:15px}
  .demo-progress .dot .lbl{font-size:9px}
  .demo .btn{padding:11px 20px;font-size:15px}
}
@media(max-width:560px){
  /* demo → phone */
  .demo-stage .screen{aspect-ratio:3/4;max-height:65vh}
  .tool-hint{
    top:72px;left:8px;right:auto;
    padding:9px 7px 11px;gap:7px;
    max-width:76px;max-height:calc(100% - 164px);
  }
  .tool-hint::after{height:10px;margin-bottom:-20px}
  .tool-hint .th-cn{font-size:13px;line-height:1.5;letter-spacing:.07em;max-height:calc(100% - 28px)}
  /* 移动端：状态框作为独立横向状态栏，移出 screen 覆盖层，不遮挡武松/哨棒/操纵杆/工具提示 */
  .stage-caption{
    position:static;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:8px 0 0;padding:8px 12px;
    max-width:100%;text-align:left;
    border:1px solid rgba(217,177,90,.4);
    background:rgba(10,5,4,.78);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    pointer-events:none;
  }
  .stage-caption .cap-row{justify-content:flex-start;gap:8px;flex:0 0 auto}
  .stage-caption .cn{font-size:13px;letter-spacing:.1em}
  .stage-caption .en{font-size:8px}
  .prog-bar{flex:1 1 auto;width:auto;height:4px;margin:0}
  .prog-txt{font-size:10px;text-align:right;min-width:34px}
  .palette{
    right:auto;left:50%;top:auto;bottom:12px;
    transform:translateX(-50%);
    flex-direction:row;flex-wrap:wrap;gap:8px;padding:9px 12px 8px;min-width:190px;
  }
  .paint-guide{flex:0 0 100%;width:auto;padding:0 0 6px}
  .paint-guide b,.paint-guide span{display:inline;font-size:10px}
  .paint-guide span{margin-left:7px}
  .palette .dish{width:40px;height:40px}
  .palette .dish .sw{width:18px;height:18px}
  .palette .dish .lb{font-size:11px}
  /* 移动端参考图移至右上角 caption 下方，避免与底部调色板重叠 */
  .craft-ref-img{
    bottom:auto;top:56px;right:10px;left:auto;
    max-width:80px;max-height:100px;
  }
  .demo-progress{min-width:44px;padding:8px 2px 8px 8px}
  .demo-progress .seg{height:8px}
  .demo-progress .dot .ball{width:30px;height:30px;font-size:12px}
  .demo-progress .dot .lbl{display:none}
  .demo-ctrl{gap:8px}
  .demo .btn{padding:9px 14px;font-size:13px}
  .demo-narr .t{font-size:20px}
  .demo-narr .d{font-size:14px}
}

/* ===== "下一工序"按钮 disabled 样式 ===== */
.demo-ctrl .btn[disabled]{
  opacity:.4;cursor:not-allowed;
  background:linear-gradient(180deg,rgba(40,20,12,.6),rgba(20,10,6,.8));
  border-color:var(--line);
}
.demo-ctrl .btn[aria-disabled="true"]{
  opacity:.4;cursor:not-allowed;
}

/* ===== prefers-reduced-motion：关闭装饰动画 ===== */
@media(prefers-reduced-motion:reduce){
  .screen::after{animation:none !important}
  .tool-hint .th-icon{animation:none !important}
  .palette .dish.sel::after{animation:none !important}
  .drag-banner{transition:none !important}
  .craft-toast{transition:none !important}
  .demo-progress .dot .ball{transition:none !important}
  .prog-bar span{transition:none !important}
}