/* Homepage demos (11-06): the screenshot before/after (.ssd-*) and the self-running "Frame it" window (.frd-*).
   Built on site.css tokens; adds only a few of its own, switched for dark the same way site.css does. */
:root{
  --dm-tint:rgba(10,108,255,.09);
  --dm-glow:rgba(10,108,255,.5);
  --dm-tail:#8dbaff;
  --dm-core:#ffffff;
  --dm-move:cubic-bezier(.55,0,.25,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--dm-tint:rgba(59,140,255,.16);--dm-glow:rgba(59,140,255,.75);--dm-tail:#9cc4ff;--dm-core:#ffffff}
}
:root[data-theme="dark"]{--dm-tint:rgba(59,140,255,.16);--dm-glow:rgba(59,140,255,.75);--dm-tail:#9cc4ff;--dm-core:#ffffff}

/* ---------- Screenshot translation: one picture, the translation laid over it, a line to compare ---------- */
.ssd-grid{align-items:center}
.ssd{margin:0;min-width:0}
.ssd-stage{position:relative;padding:56px 40px 48px;border-radius:20px;background:var(--stage);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;--ssd-x:50%}
.ssd-stage.is-ready{cursor:ew-resize}
.ssd-layer{display:flex;justify-content:center;align-items:flex-start}
.ssd-tr{position:absolute;inset:0;padding:inherit;clip-path:inset(0 calc(100% - var(--ssd-x)) 0 0)}
.ssd-tag{position:absolute;top:18px;font-size:12px;line-height:20px;color:var(--mute);opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.ssd-tag.l{left:20px}.ssd-tag.r{right:20px}
.ssd-stage.is-ready .ssd-tag{opacity:1}
.ssd-stage.is-ready .ssd-tag.is-off{opacity:0}
.ssd-line{position:absolute;top:0;bottom:0;left:0;transform:translateX(var(--ssd-px,0px));width:2px;margin-left:-1px;background:var(--accent);visibility:hidden;transition:box-shadow .4s var(--ease)}
.ssd-stage.is-ready .ssd-line{visibility:visible}
.ssd-stage.is-sweeping .ssd-line{box-shadow:0 0 16px 2px var(--dm-glow)}
.ssd-knob{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2),0 2px 10px rgba(0,0,0,.14);cursor:ew-resize;transition:transform .16s var(--ease)}
.ssd-knob svg{width:18px;height:18px}
.ssd-knob:hover{transform:scale(1.06)}
.ssd-knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:50%}
.ssd-cap{margin:16px 0 0;font-size:13px;line-height:20px;color:var(--mute)}

/* the made-up screenshot: an order page; every text block holds both languages in one cell, so both layers keep the same layout */
.ssd-card{width:100%;max-width:520px;border-radius:12px;background:var(--win);box-shadow:var(--win-shadow);overflow:hidden;font-size:14px;line-height:21px;color:var(--ink);text-align:left}
.ssd [lang="ja"]{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;line-break:strict}
.ssd-t{display:grid}
.ssd-t > *{grid-area:1/1}
.ssd-orig .ssd-t > .st,.ssd-tr .ssd-t > .so{visibility:hidden}
/* 没有 JS（没有 .is-ready、没有对比线）时整张显示译文，图注里"拖线对比"那句也不出（审查 11-06 第二轮 1） */
.ssd-stage:not(.is-ready) .ssd-orig .ssd-t > .st{visibility:visible}
.ssd-stage:not(.is-ready) .ssd-orig .ssd-t > .so{visibility:hidden}
.ssd-stage:not(.is-ready) + .ssd-cap .ssd-drag{display:none}
.ssd-card p{margin:0}
.ssd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 16px;box-shadow:0 1px 0 var(--line)}
.ssd-title{font:600 18px/26px var(--display);letter-spacing:-.01em}
.ssd-title [lang="ja"]{font-weight:600}
.ssd-card .ssd-sub{margin-top:2px;font-size:13px;line-height:20px;color:var(--mute)}
.ssd-badge{flex:none;margin-top:3px;padding:2px 10px;border-radius:999px;background:var(--dm-tint);color:var(--accent-text);font-size:12px;line-height:20px;font-weight:600;text-align:center}
.ssd-body{padding:16px 24px 24px}
.ssd-rows{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;margin:16px 0 0;padding-top:16px;box-shadow:inset 0 1px 0 var(--line)}
.ssd-rows dt{color:var(--mute)}
.ssd-rows dd{margin:0}
.ssd-num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ssd-card .ssd-notice{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:12px 14px;border-radius:10px;background:var(--field);color:var(--ink-2)}
.ssd-notice svg{flex:none;width:16px;height:16px;margin-top:2.5px;color:var(--mute)}
.ssd-btn{display:inline-block;margin-top:20px;padding:8px 16px;border-radius:8px;background:var(--accent);color:#fff;font-weight:500;text-align:center}

/* ---------- Frame it: a pointer frames the chat, a light runs round the frame, the messages turn into English ---------- */
.frd{position:relative;padding:24px;min-width:0}
.frd-win{position:relative;border-radius:12px;background:var(--win);box-shadow:var(--win-shadow);overflow:hidden;font-size:15px}
.frd-msgs{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:20px;transition:opacity .35s var(--ease)}
.frd .msg{position:relative;max-width:78%;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.frd-txt{display:grid}
.frd-o,.frd-t{grid-area:1/1;transition:opacity .32s var(--ease),filter .32s var(--ease)}
.frd-o{opacity:0}
.frd-ov.is-orig .frd-o,.frd.is-peeking .frd-o{opacity:1}
.frd-ov.is-orig .frd-t,.frd.is-peeking .frd-t{opacity:0}
.frd-ov.is-orig .frd-t{filter:blur(4px)}
/* "translating" dot to the left of a message while its translation is on the way (as in the app) */
.frd-ov::before{content:"";position:absolute;left:-13px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.4);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.frd-ov.is-busy::before{opacity:.7;transform:none;animation:frd-pulse .8s ease-in-out infinite alternate}
@keyframes frd-pulse{from{opacity:.35}to{opacity:.85}}
/* a new message comes in: the others slide up to make room */
.frd.is-waiting .frd-m:not(.frd-new){transform:translateY(var(--frd-push,0px))}
.frd.is-waiting .frd-new{opacity:0;transform:translateY(16px)}

.frd-outline{position:absolute;inset:8px;border-radius:20px;box-shadow:0 0 0 2px var(--accent);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.frd.is-framed .frd-outline{opacity:1}
.frd.is-lit .frd-outline{animation:frd-lit 1.1s var(--ease)}
@keyframes frd-lit{0%{box-shadow:0 0 0 2px var(--accent),0 0 0 0 var(--dm-glow)}25%{box-shadow:0 0 0 2px var(--accent),0 0 22px 2px var(--dm-glow)}100%{box-shadow:0 0 0 2px var(--accent),0 0 0 0 transparent}}
.frd-comet{position:absolute;left:7px;top:7px;width:calc(100% - 14px);height:calc(100% - 14px);overflow:visible;pointer-events:none;visibility:hidden}
.frd-comet.is-run{visibility:visible}
.frd-comet path{fill:none;stroke-linecap:round;stroke:var(--dm-tail)}
.frd-comet .g{stroke:var(--dm-glow);stroke-width:12}
.frd-glow{filter:blur(4px)}
.frd-comet .t1{stroke-width:2;opacity:.35}
.frd-comet .t2{stroke-width:2.5;opacity:.6}
.frd-comet .t3{stroke-width:3;opacity:.9}
.frd-comet .h{stroke:var(--dm-core);stroke-width:3.5}

.frd-pill{position:absolute;right:8px;top:-8px;transform:translateY(calc(-100% + 6px));font-size:13px;font-weight:500;color:var(--bar-ink);background:var(--bar);box-shadow:var(--bar-shadow);padding:4px 12px 4px 8px;border-radius:12px;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .3s var(--ease),transform .4s var(--ease);pointer-events:none}
.frd-pill i{width:8px;height:8px;border-radius:50%;background:var(--live)}
.frd.is-badge .frd-pill{opacity:1;transform:translateY(-100%)}

/* the pointer and the box it drags; positions are % of the demo, so they stay in step at any width */
.frd-marq{position:absolute;left:8px;top:8px;right:calc(100% - 8px);bottom:calc(100% - 8px);border:1px solid var(--accent);border-radius:4px;background:var(--dm-tint);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),right 1s var(--dm-move),bottom 1s var(--dm-move)}
.frd.is-down .frd-marq{opacity:1}
.frd.is-drag .frd-marq{right:8px;bottom:8px}
.frd-cur{position:absolute;left:64%;top:64%;width:17px;height:24px;margin:-1.5px 0 0 -1.5px;opacity:0;pointer-events:none;z-index:2;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3));
  transition:opacity .25s var(--ease),left .75s var(--dm-move),top .75s var(--dm-move),transform .12s var(--ease);transform-origin:1.5px 1.5px}
.frd.is-cur .frd-cur{opacity:1}
.frd.is-at .frd-cur{left:8px;top:8px}
.frd.is-drag .frd-cur{left:calc(100% - 8px);top:calc(100% - 8px);transition-duration:.25s,1s,1s,.12s}
.frd.is-down .frd-cur{transform:scale(.88)}

/* fade out and back in between loops */
.frd.is-out .frd-msgs,.frd.is-out .frd-outline,.frd.is-out .frd-pill{opacity:0}
.frd.is-instant,.frd.is-instant *,.frd.is-instant *::before{transition:none !important;animation:none !important}

/* pause / play: the demo loops, so it can be stopped */

@media (max-width:900px){
  .ssd-stage{padding:52px 24px 40px}
  .frd{margin-top:24px}
}
@media (max-width:480px){
  .ssd-stage{padding:44px 12px 28px;border-radius:16px}
  .ssd-tag{top:12px}.ssd-tag.l{left:14px}.ssd-tag.r{right:14px}
  .ssd-card{font-size:13px;line-height:19px}
  .ssd-head{padding:16px 16px 12px;gap:12px}
  .ssd-title{font-size:16px;line-height:22px}
  .ssd-body{padding:12px 16px 18px}
  .ssd-rows{grid-template-columns:minmax(0,1fr);gap:0;padding-top:12px}
  .ssd-rows dt{font-size:12px;line-height:18px}
  .ssd-rows dd + dt{margin-top:8px}
  .ssd-card .ssd-notice{padding:10px 12px;margin-top:16px}
  .ssd-btn{margin-top:16px}
  .ssd-knob{width:32px;height:32px;margin:-16px 0 0 -16px}
  .frd{padding:20px}
  .frd-msgs{padding:16px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
    .frd-ov.is-busy::before{animation:none}
}