/* ---------- DEVICE 01 SCANLINE ---------- */
.scan-pin{height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
.scan-frame{position:relative;width:min(1180px,88vw);height:min(66vh,660px)}
.scan-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0e1013}
.corner{position:absolute;width:18px;height:18px;border:1px solid var(--dim);z-index:3}
.corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.scan-readout{position:absolute;left:0;bottom:-2.6rem;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim)}
.scan-readout b{color:var(--amber);font-weight:500}
.scan-rule{position:absolute;left:0;right:0;bottom:-1rem;height:1px;background:var(--line)}
.scan-rule i{position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left}
.verify-tag{position:absolute;top:1.4rem;right:1.4rem;z-index:4;opacity:0;font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--amber);border:1px solid var(--amber);padding:.55em 1em;background:rgba(11,13,14,.55);backdrop-filter:blur(2px)}
.scan-hint{position:absolute;right:0;bottom:-2.6rem;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim)}

/* ---------- DEVICE 02 CHAR-SCAN ---------- */
.cs-stage{min-height:78vh;display:flex;flex-direction:column;justify-content:center;max-width:1280px;margin:0 auto;width:100%}
.cs-line{overflow:hidden}
.cs-mono{font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);letter-spacing:.24em;color:var(--amber);margin-bottom:2.6rem}
.cs-big{font-family:var(--jp);font-weight:900;font-size:clamp(30px,5.4vw,76px);line-height:1.25;letter-spacing:.02em}
.cs-big + .cs-big{margin-top:.4em}
.cs-en{font-family:var(--disp);font-weight:500;font-size:clamp(14px,1.6vw,20px);letter-spacing:.08em;color:var(--dim);margin-top:2.6rem}
.cs-char{display:inline-block;opacity:0;white-space:pre;transition:background-color .16s cubic-bezier(.16,1,.3,1),color .16s cubic-bezier(.16,1,.3,1)}
.cs-char.is-printing{transition:none;background:var(--amber);color:var(--bg)}
.cs-rule{width:min(560px,64vw);height:1px;background:var(--line);margin-top:3.4rem;position:relative}
.cs-rule i{position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left}
.replay{margin-top:3rem;display:inline-flex;align-items:center;gap:.9em;background:none;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.22em;padding:.9em 1.6em;cursor:pointer;transition:border-color .2s cubic-bezier(.16,1,.3,1),color .2s cubic-bezier(.16,1,.3,1)}
.replay:hover{border-color:var(--amber);color:var(--amber)}
.replay i{font-style:normal;color:var(--amber)}

/* ---------- DEVICE 03 STAMP ---------- */
.stamp-stage{max-width:1280px;margin:0 auto;padding-bottom:4vh}
.doc-row{display:flex;gap:2.2rem;flex-wrap:wrap;justify-content:center}
.doc{position:relative;width:min(320px,84vw);background:#e9e4d8;color:#191b1e;padding:1.9rem 1.7rem 2.3rem;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.doc h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#8d8879;border-bottom:1px solid #cfc9b8;padding-bottom:.8em;font-weight:500}
.doc .doc-title{font-family:var(--jp);font-weight:700;font-size:19px;margin:1rem 0 .4rem}
.doc p{font-size:11.5px;line-height:1.9;color:#5c5a51}
.doc .doc-meta{margin-top:1.2rem;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#8d8879}
/* stamp: wrap(動く層) > ink(かすれ静的層) */
.stamp-wrap{position:absolute;right:8%;bottom:9%;width:108px;height:108px;opacity:0;pointer-events:none;z-index:2}
.stamp-ink{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;
  border:3px solid var(--shu);border-radius:10px;color:var(--shu);
  font-family:var(--jp);font-weight:900;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='7'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='8.5' intercept='-2.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E"),radial-gradient(closest-side,#000 58%,rgba(0,0,0,.8) 76%,rgba(0,0,0,.32) 94%,transparent 100%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='7'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='8.5' intercept='-2.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E"),radial-gradient(closest-side,#000 58%,rgba(0,0,0,.8) 76%,rgba(0,0,0,.32) 94%,transparent 100%);
  mask-size:240px 240px,100% 100%;-webkit-mask-size:240px 240px,100% 100%;
  mask-composite:intersect;-webkit-mask-composite:source-in;
}
.stamp-ink .st-main{font-size:40px;line-height:1}
.stamp-ink .st-sub{font-family:var(--mono);font-size:8px;letter-spacing:.18em;font-weight:500;margin-top:.6em}
.stamp-ring{position:absolute;inset:-8px;border:2px solid var(--shu);border-radius:14px;opacity:0}
.stamp-speck{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--shu);opacity:0}
/* interactive pad */
.pad{position:relative;margin-top:6vh;height:38vh;min-height:300px;border:1px dashed var(--line);cursor:crosshair;overflow:hidden}
.pad-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.8em;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--dim);pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.pad.is-used .pad-label{opacity:.22}
.pad .stamp-wrap{position:absolute;right:auto;bottom:auto;width:92px;height:92px}
.pad .stamp-ink{border-radius:50%}
.pad .stamp-ring{border-radius:50%}
.pad .st-main{font-size:34px}

/* ---------- footer ---------- */
.footer{padding:14vh 6vw 12vh;border-top:1px solid var(--line);margin-top:10vh}
.footer-inner{max-width:1280px;margin:0 auto}
.footer h3{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--amber);margin-bottom:2rem;font-weight:500}
.api{font-family:var(--mono);font-size:12px;line-height:2.3;color:var(--dim);overflow-x:auto;white-space:pre}
.api b{color:var(--ink);font-weight:400}
.footer-note{margin-top:3rem;font-size:12px;color:var(--dim)}

@media (max-width:760px){
  .sec{padding:0 5vw}
  .scan-frame{height:56vh}
  .doc-row{gap:1.4rem}
  .hud--tr{display:none}
}
/* reduced-motion: 翻訳(削除ではない) — 各デバイスはJS側でフェード版に差し替え */
@media (prefers-reduced-motion:reduce){
  .scroll-cue::after{animation:none;transform:scaleY(1)}
}