/* ============================================================
   mockui — PastePaw 的界面用 HTML/CSS 重画一遍，给功能条当插图用。

   为什么不用真截图：真截图会把真实剪贴板内容带上网（已经踩过一次），
   而且每改一版文案就得重拍。这里画的是产品真实存在的界面和真实的行为，
   只是把「镜头」换成了 CSS 动画。

   所有尺寸都按 960x600 的设计稿写死，再由容器查询整体缩放，所以在
   672px 的槽位里和在更宽的屏幕上都是同一套比例。

   ── 改风格看这里 ────────────────────────────────────────────
   六个场景共用下面这组变量和 .mk-* 组件。改一处，六个一起变。
   ============================================================ */

.media.is-anim {
  background: var(--mk-page);
  overflow: hidden;
  aspect-ratio: var(--mk-ar, 1.6);
}
/* 场景按 960x600 的设计稿写死像素，再整体缩放到槽位宽度。
   缩放比由 app.js 写进 --mk-scale：纯 CSS 走不通，calc(100cqw / 960) 是
   「长度 ÷ 数字」，算出来还是长度，而 scale() 只接受纯数字，整条会被丢掉。
   JS 没跑时退化成 1，容器 overflow:hidden 会裁掉多出来的部分。 */
.mk {
  position: absolute; left: 0; top: 0;
  width: 960px; height: 600px;
  /* translate runs first (right to left), so the focus origin lands at 0,0 and
     the scale then sizes that rect to the slot. */
  transform: scale(var(--mk-scale, 1))
             translate(calc(var(--mk-ox, 0) * -1px), calc(var(--mk-oy, 0) * -1px));
  transform-origin: top left;
  font: 13px/1.45 var(--font);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* 面板本体：默认主题的紫罗兰渐变 */
  --mk-panel-a: #8a5cc4;
  --mk-panel-b: #6257cf;
  --mk-panel-c: #4aa6c9;
  --mk-page: #eef1f6;
  --mk-ink: #ffffff;
  --mk-dim: rgba(255, 255, 255, .62);
  --mk-faint: rgba(255, 255, 255, .34);
  --mk-fill: rgba(255, 255, 255, .14);
  --mk-fill-2: rgba(255, 255, 255, .22);
  --mk-line: rgba(255, 255, 255, .18);
  --mk-accent: #2f6bff;
  --mk-card-bg: #1e1d22;
  --mk-radius: 12px;
  --mk-mono: var(--mono);
}
@media (prefers-color-scheme: dark) {
  :root { --mk-page: #0f1218; }
}

/* ---------------- 桌面底板 ---------------- */
.mk-desk {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 12% 8%, #f3b57a 0%, rgba(243,181,122,0) 45%),
    radial-gradient(100% 80% at 88% 12%, #8e57d8 0%, rgba(142,87,216,0) 55%),
    linear-gradient(155deg, #b9a6e8 0%, #7fa8e6 45%, #5fc6d8 100%);
}
.mk-desk::after {                       /* 菜单栏，一条就够，不画图标 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px;
  background: rgba(255, 255, 255, .16);
}

/* ---------------- 面板表面 ---------------- */
.mk-surface {
  background: linear-gradient(157deg, var(--mk-panel-a) 0%, var(--mk-panel-b) 58%, var(--mk-panel-c) 100%);
  border: 1px solid var(--mk-line);
  box-shadow: 0 18px 44px -14px rgba(12, 10, 30, .55);
}

/* 竖版面板 */
.mk-panel {
  position: absolute; width: 296px; border-radius: 16px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.mk-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; }
.mk-head b { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.mk-paw {
  width: 16px; height: 16px; border-radius: 5px; flex: none;
  background: linear-gradient(150deg, #ffd2e6, #ffa6c9);
}
.mk-head .mk-sp { flex: 1; }
.mk-chip {
  width: 20px; height: 16px; border-radius: 5px; background: var(--mk-fill);
  border: 1px solid var(--mk-line);
}

/* 搜索框 */
.mk-search {
  display: flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px; border-radius: 8px;
  background: var(--mk-fill); border: 1px solid var(--mk-line);
  color: var(--mk-dim); font-size: 11.5px;
}
.mk-search .mk-mag { width: 11px; height: 11px; flex: none; opacity: .8; }
.mk-search .mk-q { flex: 1; color: inherit; white-space: pre; }
/* Inherit, don't hardcode white: on the light skins a fixed white placeholder
   vanishes into the field. `currentColor` at low opacity works on both. */
.mk-search .mk-q:empty::before {
  content: "Search / ⌘F to filter…"; color: currentColor; opacity: .55;
}
.mk-search kbd {
  font: 10px var(--mk-mono); padding: 1px 4px; border-radius: 4px;
  background: var(--mk-fill); color: var(--mk-dim);
}
.mk-caret {
  width: 1.5px; height: 12px; background: #fff; display: inline-block;
  vertical-align: -2px; margin-left: 1px; opacity: 0;
}

/* 分组药丸 */
.mk-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--mk-fill); border: 1px solid var(--mk-line); color: var(--mk-dim);
  white-space: nowrap;
}
.mk-pill.on { background: var(--mk-accent); border-color: transparent; color: #fff; }
.mk-pill .mk-n { opacity: .6; margin-left: 3px; font-size: 8.5px; }

/* 竖版列表行 */
.mk-rows { display: flex; flex-direction: column; gap: 4px; align-content: start; }
.mk-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 7px; border-radius: 9px;
  background: var(--mk-fill); border: 1px solid transparent;
}
.mk-row.on { background: var(--mk-fill-2); border-color: rgba(255,255,255,.55); }
.mk-ico {
  width: 26px; height: 22px; border-radius: 5px; flex: none;
  background: rgba(255,255,255,.2);
  display: grid; place-items: center;
  font: 700 9px var(--font); color: rgba(255,255,255,.8);
}
.mk-ico.img { background: linear-gradient(140deg, #7ab8ff, #4d7ff0); }
.mk-ico.pic { background: linear-gradient(140deg, #ff9ad0, #f2585f); }
.mk-txt { min-width: 0; flex: 1; }
.mk-t1 { font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-t2 { font-size: 9.5px; color: var(--mk-dim); margin-top: 1px; }
.mk-foot {
  display: flex; gap: 10px; padding-top: 6px; margin-top: auto;
  border-top: 1px solid var(--mk-line);
  font-size: 9px; color: rgba(255,255,255,.52);
}
.mk-foot span b { font-weight: 600; color: var(--mk-dim); margin-right: 3px; }

/* ---------------- 横条 ---------------- */
.mk-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 14px 14px 0 0; padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.mk-bar { display: flex; align-items: center; gap: 6px; }
.mk-bar .mk-search { width: 150px; flex: none; }
.mk-bar .mk-sp { flex: 1; }
.mk-cards { display: flex; gap: 7px; }
.mk-card {
  width: 122px; flex: none; border-radius: 9px; overflow: hidden;
  background: var(--mk-card-bg); box-shadow: 0 6px 14px -6px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.mk-card-h {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px;
  font: 700 8px var(--mk-mono); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(0,0,0,.72);
}
.mk-card-h i { width: 6px; height: 6px; border-radius: 2px; background: rgba(0,0,0,.45); flex: none; }
.mk-card-b {
  padding: 6px; font: 9px/1.4 var(--mk-mono); color: #d7d5de;
  height: 74px; overflow: hidden;
}
.mk-card-b.pic { padding: 0; }
.mk-card-b.pic > i { display: block; width: 100%; height: 100%; }
.mk-card-f { padding: 4px 6px; font: 8.5px var(--mk-mono); color: #8d8a97; }
.mk-card.on { outline: 2px solid #fff; outline-offset: -2px; }

/* 卡片头的应用配色，取自真实截图 */
.h-chrome  { background: #ff3d9a; } .h-figma  { background: #6ee34a; }
.h-preview { background: #ff8a3d; } .h-term   { background: #ffd23d; }
.h-slack   { background: #ff2e63; } .h-code   { background: #3d8bff; }
.h-xcode   { background: #49dd7b; } .h-notion { background: #ff4d4d; }
.h-safari  { background: #ffe14d; } .h-msg    { background: #5fe37a; }

/* ---------------- 对话气泡（MCP 用）---------------- */
.mk-chat {
  position: absolute; border-radius: 14px; padding: 10px;
  background: rgba(255,255,255,.96); color: #17181c;
  border: 1px solid rgba(16,24,40,.1);
  box-shadow: 0 18px 44px -16px rgba(12,10,30,.45);
  display: flex; flex-direction: column; gap: 7px;
}
.mk-chat-h { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #6b7280; }
.mk-chat-h i { width: 13px; height: 13px; border-radius: 4px; background: #d97757; flex: none; }
.mk-msg { font-size: 11px; line-height: 1.45; }
.mk-msg.me {
  background: #f1f3f7; border-radius: 9px; padding: 6px 8px; align-self: flex-end;
  max-width: 88%;
}
.mk-tool {
  display: inline-flex; align-items: center; gap: 5px;
  font: 9.5px var(--mk-mono); color: #3d5bd9;
  background: #eef2ff; border: 1px solid #dbe2ff;
  padding: 3px 7px; border-radius: 6px;
}
.mk-tool .dot { width: 5px; height: 5px; border-radius: 50%; background: #3d5bd9; flex: none; }
.mk-tool.ok { color: #15803d; background: #eefaf1; border-color: #cdeed8; }
.mk-tool.ok .dot { background: #15803d; }

/* ---------------- 工具面板（Clip tools 用）---------------- */
.mk-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-tab {
  font: 9.5px var(--mk-mono); padding: 3px 7px; border-radius: 6px;
  background: var(--mk-fill); border: 1px solid var(--mk-line); color: var(--mk-dim);
}
.mk-tab.on { background: #fff; border-color: transparent; color: #24252b; font-weight: 600; }
.mk-code {
  background: rgba(10,8,20,.55); border-radius: 8px; padding: 9px 10px;
  font: 10px/1.55 var(--mk-mono); color: #e8e6ef; white-space: pre;
  overflow: hidden;
}

/* ---------------- 触控 ID（Secure 用）---------------- */
.mk-lock {
  position: absolute; border-radius: 14px; padding: 14px;
  background: rgba(255,255,255,.97); color: #17181c;
  box-shadow: 0 20px 50px -18px rgba(12,10,30,.5);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.mk-print {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid #d3d6de; display: grid; place-items: center;
}
.mk-print svg { width: 22px; height: 22px; stroke: #b9414f; fill: none; stroke-width: 1.6; }


/* 通用：淡入上浮、逐个出现 */
@keyframes mkBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.a-blink { animation: mkBlink 1s steps(1) infinite; }

/* ============================================================
   场景 1 · 搜索 —— 12 秒循环
   打字 → 不匹配的行淡出收起 → 停住 → 退格 → 列表还原
   ============================================================ */
.sc-search .mk-panel { left: 332px; top: 50px; height: 500px; }
/* 高亮只在过滤那一段亮起来，打字之前不该先亮 */
.sc-search .mk-t1 em {
  font-style: normal; border-radius: 3px; padding: 0 2px;
  background: transparent; animation: scMark 12s ease infinite;
}
@keyframes scMark {
  0%, 20%  { background: transparent; }
  30%, 76% { background: rgba(255,255,255,.32); }
  86%,100% { background: transparent; }
}
.mk-note {
  position: absolute; left: 62px; bottom: 10px; width: 296px;
  text-align: center; font: 10px var(--mk-mono); color: rgba(20,22,26,.5);
}
@media (prefers-color-scheme: dark) { .mk-note { color: rgba(255,255,255,.5); } }

/* 打字：用 steps 逐字显示 "check" */
/* 动画挂在元素本身而不是 ::before —— 伪元素不被 .mk [class*="a-"] 选中，
   那条 animation-play-state 规则管不到它，会不受控地自己跑。 */
.sc-search .a-type {
  display: inline-block; overflow: hidden; white-space: nowrap;
  vertical-align: bottom;
  animation: scType 12s steps(5, end) infinite;
}
@keyframes scType {
  0%,  6%  { width: 0ch; }
  22%      { width: 5ch; }
  72%      { width: 5ch; }
  84%,100% { width: 0ch; }
}
.sc-search .a-caret { animation: mkBlink 1s steps(1) infinite, scCaret 12s linear infinite; }
@keyframes scCaret { 0%,4% { opacity: 0; } 5%,86% { opacity: 1; } 87%,100% { opacity: 0; } }

/* 不匹配的行：收起 */
.sc-search .a-miss {
  animation: scMiss 12s cubic-bezier(.4,0,.2,1) infinite;
  overflow: hidden;
}
/* max-height alone does not collapse a row: padding and border sit outside the
   content box, so a "hidden" row still held 6+6px of padding and 1+1px of
   border. Two of those between two hits added ~28px — the filtered list ended
   up with visibly wider gaps than the unfiltered one. Collapse all three, and
   cancel the flex `gap` the empty row still earns with a -4px bottom margin. */
@keyframes scMiss {
  0%, 20%   { opacity: 1; max-height: 40px; padding-block: 6px; border-width: 1px;
              margin-bottom: 0; transform: none; }
  30%, 76%  { opacity: 0; max-height: 0;    padding-block: 0;   border-width: 0;
              margin-bottom: -4px; transform: translateX(-10px); }
  86%, 100% { opacity: 1; max-height: 40px; padding-block: 6px; border-width: 1px;
              margin-bottom: 0; transform: none; }
}
/* 命中的行：高亮一下 */
.sc-search .a-hit { animation: scHit 12s ease infinite; }
@keyframes scHit {
  0%, 20%  { background: var(--mk-fill); }
  30%, 76% { background: var(--mk-fill-2); }
  86%,100% { background: var(--mk-fill); }
}
.sc-search .a-note { animation: scNote 12s ease infinite; }
@keyframes scNote {
  0%, 24%  { opacity: 0; }
  32%, 74% { opacity: 1; }
  82%,100% { opacity: 0; }
}

/* ============================================================
   Scene 2 · MCP — 14s loop
   The agent is asked, calls two tools, and five stories land in a collection.
   ============================================================ */
.sc-mcp .mk-chat  { left: 34px; top: 54px; width: 356px; }
.sc-mcp .mk-panel { right: 40px; top: 64px; height: 452px; }

/* Everything in the transcript arrives in order; --d is each step's cue. */
.sc-mcp .a-s1 { --d:  2%; } .sc-mcp .a-s2 { --d: 12%; }
.sc-mcp .a-s3 { --d: 20%; } .sc-mcp .a-s4 { --d: 30%; }
.sc-mcp .a-s5 { --d: 66%; } .sc-mcp .a-s6 { --d: 74%; }
/* The count ticks up only once the rows are in. */
.sc-mcp .a-count { animation: mcpCount 14s steps(1) infinite; }
@keyframes mcpCount { 0%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }

.sc-themes .a-n1 { --d:  0%; } .sc-themes .a-n3 { --d: 50%; } /* The two light skins need dark chrome or the text vanishes. */

/* ============================================================
   Scene 4 · Clip tools — 15s loop, one clip through three tools
   ============================================================ */
.sc-tools .mk-panel { left: 258px; top: 96px; width: 444px; height: 400px; }
.sc-tools .mk-stack { position: relative; flex: 1; }
.sc-tools .mk-stack > .mk-code { position: absolute; inset: 0; }
/* The active tab is the one whose panel is showing. */

/* ============================================================
   Scene 5 · Secure collections — 14s loop, locked → Touch ID → relock
   ============================================================ */
.sc-secure .a-pulse { animation: secPulse 1.4s ease-in-out infinite; }
@keyframes secPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(185,65,79,.35); }
  50%     { box-shadow: 0 0 0 7px rgba(185,65,79,0); }
}

/* ============================================================
   Scene 6 · Multi-select — 15s loop, ⌘-click three, paste all three
   ============================================================ */
.sc-multi .mk-strip { left: 30px; right: 30px; bottom: 24px; border-radius: 14px; }
.sc-multi .mk-doc {
  position: absolute; left: 150px; top: 34px; width: 500px; height: 210px;
  border-radius: 10px; background: #fff; color: #1b1c20;
  box-shadow: 0 16px 40px -18px rgba(12,10,30,.45); overflow: hidden;
}
.sc-multi .mk-doc-h {
  display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  background: #f1f3f7; border-bottom: 1px solid #e5e8ee;
  font: 9.5px var(--font); color: #7a8290;
}
.sc-multi .mk-doc-h i { width: 7px; height: 7px; border-radius: 50%; background: #d7dbe3; }
.sc-multi .mk-doc-h span { margin-left: 4px; }
.sc-multi .mk-doc-b { padding: 9px 11px; font: 10.5px/1.7 var(--mk-mono); }
.sc-multi .mk-doc-b p { margin: 0; opacity: 0; }
.sc-multi .mk-doc-b .mk-caret { background: #1b1c20; height: 11px; }

.sc-multi .mk-num {
  position: absolute; top: -5px; left: -5px; z-index: 2;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--mk-accent); color: #fff;
  font: 700 9px/15px var(--font); text-align: center;
  opacity: 0;
}
.sc-multi .mk-card { position: relative; overflow: visible; }
.sc-multi .mk-card > .mk-card-h { border-radius: 9px 9px 0 0; }

.sc-multi .a-p1, .sc-multi .a-p2, .sc-multi .a-p3 { outline: 2px solid transparent; outline-offset: -2px; }
.sc-multi .a-badge { animation: msBadge 15s steps(1) infinite; }
@keyframes msBadge { 0%, 31% { opacity: 0; } 33%, 68% { opacity: 1; } 70%,100% { opacity: 0; } }

/* ---- staggered cues, expanded ---------------------------------- */
.sc-mcp .a-s1 { animation: mcpS1 14s ease infinite; }
@keyframes mcpS1 {
  0%, 2% { opacity: 0; transform: translateY(7px); }
  6%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .a-s2 { animation: mcpS2 14s ease infinite; }
@keyframes mcpS2 {
  0%, 12% { opacity: 0; transform: translateY(7px); }
  16%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .a-s3 { animation: mcpS3 14s ease infinite; }
@keyframes mcpS3 {
  0%, 20% { opacity: 0; transform: translateY(7px); }
  24%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .a-s4 { animation: mcpS4 14s ease infinite; }
@keyframes mcpS4 {
  0%, 30% { opacity: 0; transform: translateY(7px); }
  34%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .a-s5 { animation: mcpS5 14s ease infinite; }
@keyframes mcpS5 {
  0%, 66% { opacity: 0; transform: translateY(7px); }
  70%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .a-s6 { animation: mcpS6 14s ease infinite; }
@keyframes mcpS6 {
  0%, 74% { opacity: 0; transform: translateY(7px); }
  78%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .mk-rows .mk-row:nth-child(1) { animation: mcpR1 14s ease infinite; }
@keyframes mcpR1 {
  0%, 38% { opacity: 0; transform: translateY(7px); }
  42%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .mk-rows .mk-row:nth-child(2) { animation: mcpR2 14s ease infinite; }
@keyframes mcpR2 {
  0%, 44% { opacity: 0; transform: translateY(7px); }
  48%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .mk-rows .mk-row:nth-child(3) { animation: mcpR3 14s ease infinite; }
@keyframes mcpR3 {
  0%, 50% { opacity: 0; transform: translateY(7px); }
  54%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .mk-rows .mk-row:nth-child(4) { animation: mcpR4 14s ease infinite; }
@keyframes mcpR4 {
  0%, 56% { opacity: 0; transform: translateY(7px); }
  60%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-mcp .mk-rows .mk-row:nth-child(5) { animation: mcpR5 14s ease infinite; }
@keyframes mcpR5 {
  0%, 62% { opacity: 0; transform: translateY(7px); }
  66%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(7px); }
}
.sc-tools .a-c1 { animation: tlC1 15s ease infinite; }
@keyframes tlC1 {
  0%, 30% { opacity: 1; }
  33.3%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
.sc-tools .a-t1 { animation: tlT1 15s steps(1) infinite; }
@keyframes tlT1 {
  0%, 33.2% { background: #fff; color: #24252b; font-weight: 600; }
  33.3%, 100% { background: rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
}
.sc-tools .a-c2 { animation: tlC2 15s ease infinite; }
@keyframes tlC2 {
  0%, 33.3% { opacity: 0; }
  36.3%, 63.599999999999994% { opacity: 1; }
  66.6%, 100% { opacity: 0; }
}
.sc-tools .a-t2 { animation: tlT2 15s steps(1) infinite; }
@keyframes tlT2 {
  0%, 33.3% { background: rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
  33.4%, 66.5% { background: #fff; color: #24252b; font-weight: 600; }
  66.6%, 100% { background: rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
}
.sc-tools .a-c3 { animation: tlC3 15s ease infinite; }
@keyframes tlC3 {
  0%, 66.6% { opacity: 0; }
  69.6%, 96.89999999999999% { opacity: 1; }
  99.89999999999999%, 100% { opacity: 0; }
}
.sc-tools .a-t3 { animation: tlT3 15s steps(1) infinite; }
@keyframes tlT3 {
  0%, 66.6% { background: rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
  66.69999999999999%, 99.8% { background: #fff; color: #24252b; font-weight: 600; }
  99.89999999999999%, 100% { background: rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
}
.sc-multi .a-p1 { animation: msP1 15s ease infinite; }
@keyframes msP1 {
  0%, 8% { outline-color: transparent; transform: none; }
  12%, 64% { outline-color: #fff; transform: translateY(-4px); }
  70%, 100% { outline-color: transparent; transform: none; }
}
.sc-multi .a-p1 .mk-num { animation: msN1 15s steps(1) infinite; }
@keyframes msN1 {
  0%, 11% { opacity: 0; }
  12%, 68% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
.sc-multi .a-p2 { animation: msP2 15s ease infinite; }
@keyframes msP2 {
  0%, 18% { outline-color: transparent; transform: none; }
  22%, 64% { outline-color: #fff; transform: translateY(-4px); }
  70%, 100% { outline-color: transparent; transform: none; }
}
.sc-multi .a-p2 .mk-num { animation: msN2 15s steps(1) infinite; }
@keyframes msN2 {
  0%, 21% { opacity: 0; }
  22%, 68% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
.sc-multi .a-p3 { animation: msP3 15s ease infinite; }
@keyframes msP3 {
  0%, 28% { outline-color: transparent; transform: none; }
  32%, 64% { outline-color: #fff; transform: translateY(-4px); }
  70%, 100% { outline-color: transparent; transform: none; }
}
.sc-multi .a-p3 .mk-num { animation: msN3 15s steps(1) infinite; }
@keyframes msN3 {
  0%, 31% { opacity: 0; }
  32%, 68% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
.sc-multi .a-l1 { animation: msL1 15s ease infinite; }
@keyframes msL1 {
  0%, 40% { opacity: 0; }
  43%, 74% { opacity: 1; }
  78%, 100% { opacity: 0; }
}
.sc-multi .a-l2 { animation: msL2 15s ease infinite; }
@keyframes msL2 {
  0%, 46% { opacity: 0; }
  49%, 74% { opacity: 1; }
  78%, 100% { opacity: 0; }
}
.sc-multi .a-l3 { animation: msL3 15s ease infinite; }
@keyframes msL3 {
  0%, 52% { opacity: 0; }
  55%, 74% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

/* ============================================================
   Scene 5 · Secure collections — 14s loop
   Locked → Touch ID → unlocked → relocks on idle.

   Matches the real thing (SecureFolderLockPanel): the prompt is EMBEDDED,
   centred in the panel's own list area — not a system sheet floating outside
   it. macOS positions its own sheet, which lands on the wrong display in a
   multi-monitor setup; that is why the app embeds it.
   ============================================================ */
.sc-secure .mk-panel { left: 332px; top: 34px; height: 532px; }
.sc-secure .mk-body { position: relative; flex: 1; min-height: 0; }
.sc-secure .mk-rows { position: absolute; inset: 0; }
.sc-secure .mk-unlock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
}
.sc-secure .mk-fp { width: 46px; height: 46px; color: #ea6b78; }
.sc-secure .mk-unlock b { font-size: 12.5px; font-weight: 700; }
.sc-secure .mk-btn {
  font-size: 11px; padding: 3px 14px; border-radius: 7px;
  background: rgba(255,255,255,.13); color: rgba(255,255,255,.45);
}
.sc-secure .mk-link { font-size: 11px; color: #7fb0ff; }

.sc-secure .a-lock  { animation: secLock  14s ease infinite; }
.sc-secure .a-clips { animation: secClips 14s ease infinite; }
@keyframes secLock {
  0%, 40%  { opacity: 1; }
  46%, 78% { opacity: 0; }
  84%,100% { opacity: 1; }
}
@keyframes secClips {
  0%, 42%  { opacity: 0; transform: translateY(6px); }
  50%, 76% { opacity: 1; transform: none; }
  82%,100% { opacity: 0; transform: translateY(6px); }
}
/* The shortcut legend is dimmed while there is nothing to act on. */
.sc-secure .a-dim { animation: secDim 14s ease infinite; }
@keyframes secDim {
  0%, 42%  { opacity: .4; }
  50%, 76% { opacity: 1; }
  82%,100% { opacity: .4; }
}


/* ============================================================
   Scene 3 · Themes — 16s loop, four 4s phases
     0-4s   Default      · bottom strip
     4-8s   Cyberpunk    · side column
     8-12s  Wabi-sabi    · bottom strip
     12-16s Liquid Glass · side column
   ============================================================ */
.sc-themes .mk-strip { left: 34px; right: 34px; bottom: 56px; border-radius: 14px; }
.sc-themes .mk-panel { left: 38px; top: 26px; height: 512px; }
/* The label sits on the coloured desktop, not on the page, so it cannot borrow
   the page's ink colour — it would wash out against half the gradient. Give it
   its own dark plate and it reads on any skin. */
.sc-themes .mk-tag {
  position: absolute; left: 0; right: 0; bottom: 14px; height: 20px;
  text-align: center; font: 600 11px var(--font);
}
.sc-themes .mk-tag span {
  position: absolute; left: 50%; transform: translateX(-50%);
  opacity: 0; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(14, 12, 24, .5); color: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
}

/* The strip owns phases 1 and 3; it exits downward, past the bottom edge. */
.sc-themes .a-horiz { animation: thHoriz 16s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes thHoriz {
  0%, 22%      { opacity: 1; transform: none; }
  25%, 47%     { opacity: 0; transform: translateY(130px); }
  50%, 72%     { opacity: 1; transform: none; }
  75%, 97%     { opacity: 0; transform: translateY(130px); }
  100%         { opacity: 1; transform: none; }
}
/* The column owns phases 2 and 4; it exits sideways, past the left edge. */
.sc-themes .a-vert { animation: thVert 16s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes thVert {
  0%, 22%      { opacity: 0; transform: translateX(-340px); }
  25%, 47%     { opacity: 1; transform: none; }
  50%, 72%     { opacity: 0; transform: translateX(-340px); }
  75%, 97%     { opacity: 1; transform: none; }
  100%         { opacity: 0; transform: translateX(-340px); }
}

/* Skins snap rather than blend — the app snaps too, it is a click. */
.sc-themes .a-skin { animation-name: thHoriz, thSkin; animation-duration: 16s, 16s;
                     animation-timing-function: cubic-bezier(.4,0,.2,1), steps(1);
                     animation-iteration-count: infinite, infinite; }
.sc-themes .a-vert { animation-name: thVert, thSkin; }
@keyframes thSkin {
  0%,  24% { background: linear-gradient(157deg,#8a5cc4,#6257cf 58%,#4aa6c9); }
  25%, 49% { background: linear-gradient(157deg,#12021f,#2a0a4a 55%,#05323d); }
  50%, 74% { background: linear-gradient(157deg,#efe6d8,#e3d3bd 58%,#cdbaa0); }
  75%,100% { background: linear-gradient(157deg,#dbe6f5,#c3d4ee 58%,#aec6e8); }
}
/* The two light skins need dark chrome or their text disappears. */
.sc-themes .a-skin .mk-pill:not(.on),
.sc-themes .a-skin .mk-search,
.sc-themes .a-skin .mk-chip,
.sc-themes .a-skin .mk-row,
.sc-themes .a-skin .mk-head b,
.sc-themes .a-skin .mk-t1,
.sc-themes .a-skin .mk-t2,
.sc-themes .a-skin .mk-foot { animation: thChrome 16s steps(1) infinite; }
@keyframes thChrome {
  0%,  49% { color: rgba(255,255,255,.72); }
  50%,100% { color: rgba(24,20,32,.78); }
}
/* Same story for the fills: a 14%-white row is invisible on a cream panel. */
.sc-themes .a-skin .mk-row,
.sc-themes .a-skin .mk-search,
.sc-themes .a-skin .mk-pill:not(.on),
.sc-themes .a-skin .mk-chip { animation-name: thChrome, thFill; animation-duration: 16s, 16s;
  animation-timing-function: steps(1), steps(1); animation-iteration-count: infinite, infinite; }
@keyframes thFill {
  0%,  49% { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18); }
  50%,100% { background: rgba(24,20,32,.07);   border-color: rgba(24,20,32,.13); }
}
.sc-themes .a-skin .mk-foot { animation-name: thChrome; opacity: .85; }
.sc-themes .a-skin .mk-head b, .sc-themes .a-skin .mk-t1,
.sc-themes .a-skin .mk-t2 { animation-name: thChrome; }

.sc-themes .a-n1 { animation: thN1 16s steps(1) infinite; }
.sc-themes .a-n2 { animation: thN2 16s steps(1) infinite; }
.sc-themes .a-n3 { animation: thN3 16s steps(1) infinite; }
.sc-themes .a-n4 { animation: thN4 16s steps(1) infinite; }
@keyframes thN1 { 0%, 23.9% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes thN2 { 0%, 24.9% { opacity: 0; } 25%, 48.9% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes thN3 { 0%, 49.9% { opacity: 0; } 50%, 73.9% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes thN4 { 0%, 74.9% { opacity: 0; } 75%, 98.9% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* ============================================================
   Play control — MUST STAY LAST IN THIS FILE.

   Every scene rule above sets animation with the `animation` shorthand, and
   the shorthand resets animation-play-state to its initial value (running).
   So these rules have to come last AND carry !important, or scenes keep
   animating off screen whatever the observer says — measured: playState was
   "running" while the container had no .is-playing.

   The selectors cover ::before / ::after too: a pseudo-element is never
   matched by a class selector, and anything missed here runs unthrottled.

   app.js adds .is-playing while a scene is on screen; reduced motion holds
   every scene on its first frame.
   ============================================================ */
.mk *, .mk *::before, .mk *::after {
  animation-play-state: paused !important;
  animation-fill-mode: both;
}
.media.is-anim.is-playing .mk *,
.media.is-anim.is-playing .mk *::before,
.media.is-anim.is-playing .mk *::after {
  animation-play-state: running !important;
}
@media (prefers-reduced-motion: reduce) {
  .media.is-anim.is-playing .mk *,
  .media.is-anim.is-playing .mk *::before,
  .media.is-anim.is-playing .mk *::after {
    animation-play-state: paused !important;
  }
}