/* Automed 官网 — 一屏式小产品区（sections/minis.html 配套）
   类名一律 mn- 前缀；每屏自带 --cat / --cat-soft。
   动效启停：js/products/minis.js 用 IntersectionObserver 给 .page-mini
   加/摘 .mn-run；CSS 动画一律挂在 .mn-run 之下，离场即暂停。 */

/* ---------- 共享布局 ---------- */
.page-mini { min-height: 100svh; }
.mn-inner {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: 64px; align-items: center;
}
.mn-title {
  font-size: clamp(30px, 4vw, 46px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.18; margin-bottom: 14px;
}
.mn-tag { font-size: 17px; color: var(--text-2); margin-bottom: 22px; }
.mn-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-tags span {
  font-size: 12.5px; font-weight: 500; color: var(--cat);
  background: var(--cat-soft); border-radius: 980px; padding: 6px 13px;
}

.mn-stage { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.mn-stage::before { /* 氛围光（分类色光晕，不是承托盘） */
  content: ""; position: absolute; inset: -6%; pointer-events: none;
  background: radial-gradient(45% 45% at 55% 45%, var(--cat-soft), transparent 70%);
}
.mn-stage-center { justify-content: center; }
.mn-chip {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  color: var(--cat); background: #fff; border: 1px solid var(--line);
  border-radius: 980px; padding: 5px 12px; box-shadow: var(--shadow);
  white-space: nowrap;
}

/* 离场暂停全部 CSS 动画（JS 控制的 rAF/定时器另由 minis.js 启停） */
.page-mini:not(.mn-run) [class*="mn-"] { animation-play-state: paused !important; }

/* ================= ① 山水提交统计 ================= */
.mn-ss {
  position: relative; width: min(620px, 100%);
  filter: drop-shadow(0 18px 36px rgba(47,94,90,.14));
}
.mn-ss-svg { display: block; width: 100%; height: auto; }
.mn-ss-axis {
  display: flex; justify-content: space-between;
  padding: 4px 8px 0; font-size: 11px; color: var(--text-3);
}
.mn-ss .mn-chip { position: absolute; right: 0; top: -14px; }

/* ================= ② 至腹（iPhone X mock） ================= */
.mn-zf-phone {
  position: relative; width: 196px; height: 396px; /* 427×864 × scale(.46) */
  filter: drop-shadow(0 24px 48px rgba(224,94,18,.22));
}
.mn-zf-phone .marvel-device { transform: scale(.46); transform-origin: top left; }
.mn-zf-ui {
  position: absolute; inset: 0; background: #fff;
  padding: 54px 16px 16px; font-size: 13px;
  display: flex; flex-direction: column; gap: 10px;
}
.mn-zf-day { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.mn-zf-sub { font-size: 11px; color: var(--text-3); margin: -6px 0 6px; }
.mn-zf-ex {
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-items: center;
  background: #fafafa; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px;
}
.mn-zf-ex span { font-size: 13px; font-weight: 600; }
.mn-zf-ex i { grid-column: 2; font-style: normal; font-size: 11px; color: var(--text-3); }
.mn-zf-ex b { grid-row: 1 / 3; width: 24px; height: 24px; }
.mn-zf-ck {
  border-radius: 50%; border: 2px solid rgba(0,0,0,.15); position: relative;
}
.mn-zf-ck::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 8px; height: 10px;
  border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(42deg); opacity: 0;
}
.mn-zf-ring { position: relative; }
.mn-zf-ring svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.mn-zf-ring circle { fill: none; stroke-width: 3.4; }
.mn-zf-ring-bg { stroke: rgba(0,0,0,.1); }
.mn-zf-ring-fg {
  stroke: var(--cat); stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 97.4;
}
.mn-zf-done {
  margin-top: auto; text-align: center; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--cat); border-radius: 12px; padding: 10px;
  opacity: 0; transform: scale(.9);
}
/* 10s 循环：勾 1 → 平板计时环 → 勾 3 → 完成 → 复位 */
.mn-run .mn-zf-ck1 { animation: mn-zf-ck 10s linear infinite; }
.mn-run .mn-zf-ck3 { animation: mn-zf-ck 10s linear infinite; animation-name: mn-zf-ck3; }
.mn-run .mn-zf-ring-fg { animation: mn-zf-ring 10s linear infinite; }
.mn-run .mn-zf-done { animation: mn-zf-done 10s linear infinite; }
@keyframes mn-zf-ck { /* 第 1 项：8% 打勾，92% 复位 */
  0%, 6% { background: transparent; border-color: rgba(0,0,0,.15); }
  10%, 88% { background: var(--cat); border-color: var(--cat); }
  92%, 100% { background: transparent; border-color: rgba(0,0,0,.15); }
}
@keyframes mn-zf-ck3 { /* 第 3 项：62% 打勾 */
  0%, 58% { background: transparent; border-color: rgba(0,0,0,.15); }
  64%, 88% { background: var(--cat); border-color: var(--cat); }
  92%, 100% { background: transparent; border-color: rgba(0,0,0,.15); }
}
@keyframes mn-zf-ring { /* 平板计时 20%→52% 走完一圈 */
  0%, 20% { stroke-dashoffset: 97.4; }
  52%, 88% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 97.4; }
}
@keyframes mn-zf-done {
  0%, 68% { opacity: 0; transform: scale(.9); }
  74%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.9); }
}
.mn-run .mn-zf-ck1::after { animation: mn-zf-ckmark 10s linear infinite; }
.mn-run .mn-zf-ck3::after { animation: mn-zf-ckmark3 10s linear infinite; }
@keyframes mn-zf-ckmark { 0%, 8% { opacity: 0; } 12%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes mn-zf-ckmark3 { 0%, 62% { opacity: 0; } 66%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* ================= ③ 咖啡杯测（15s 三幕循环） ================= */
.mn-cf {
  position: relative; width: min(400px, 100%); height: 400px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-shot); overflow: hidden;
}
.mn-cf-scene {
  position: absolute; inset: 0; padding: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; opacity: 0;
}
.mn-run .mn-cf-s1 { animation: mn-cf-scene1 15s linear infinite; }
.mn-run .mn-cf-s2 { animation: mn-cf-scene2 15s linear infinite; }
.mn-run .mn-cf-s3 { animation: mn-cf-scene3 15s linear infinite; }
@keyframes mn-cf-scene1 { 0%, 2% { opacity: 0; } 6%, 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes mn-cf-scene2 { 0%, 32% { opacity: 0; } 37%, 61% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes mn-cf-scene3 { 0%, 65% { opacity: 0; } 70%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* 场 1：扫码入场 */
.mn-cf-qr {
  width: 148px; height: 148px; padding: 10px;
  background: #fff; border: 1.5px solid var(--cat); border-radius: 14px;
  display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr);
  gap: 1px;
}
.mn-cf-qr i { border-radius: 1px; background: var(--cat); }
.mn-cf-cap { font-size: 13px; font-weight: 600; color: var(--text-2); }
.mn-cf-people { display: flex; gap: 10px; }
.mn-cf-people i {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cat); border: 1.5px solid var(--cat);
  opacity: 0; transform: scale(.4);
}
.mn-run .mn-cf-people i { animation: mn-cf-pop 15s linear infinite; }
.mn-run .mn-cf-people i:nth-child(1) { animation-delay: .9s; }
.mn-run .mn-cf-people i:nth-child(2) { animation-delay: 1.4s; }
.mn-run .mn-cf-people i:nth-child(3) { animation-delay: 1.9s; }
.mn-run .mn-cf-people i:nth-child(4) { animation-delay: 2.4s; }
.mn-run .mn-cf-people i:nth-child(5) { animation-delay: 2.9s; }
.mn-run .mn-cf-people i:nth-child(6) { animation-delay: 3.4s; }
@keyframes mn-cf-pop {
  0% { opacity: 0; transform: scale(.4); }
  3%, 92% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.4); }
}

/* 场 2：分轮打分盘 */
.mn-cf-rounds { display: flex; gap: 8px; }
.mn-cf-rounds b {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 980px; padding: 5px 12px;
}
.mn-run .mn-cf-rounds b:nth-child(1) { animation: mn-cf-tab 15s linear infinite; }
.mn-run .mn-cf-rounds b:nth-child(2) { animation: mn-cf-tab2 15s linear infinite; }
.mn-run .mn-cf-rounds b:nth-child(3) { animation: mn-cf-tab3 15s linear infinite; }
.mn-run .mn-cf-rounds b:nth-child(4) { animation: mn-cf-tab4 15s linear infinite; }
/* 场2 窗口 37%–61%：四轮各约 6% */
@keyframes mn-cf-tab  { 0%, 36% { color: var(--text-3); border-color: var(--line); background: transparent; }
  39%, 43% { color: #fff; background: var(--cat); border-color: var(--cat); }
  46%, 100% { color: var(--text-3); border-color: var(--line); background: transparent; } }
@keyframes mn-cf-tab2 { 0%, 43% { color: var(--text-3); border-color: var(--line); background: transparent; }
  46%, 50% { color: #fff; background: var(--cat); border-color: var(--cat); }
  53%, 100% { color: var(--text-3); border-color: var(--line); background: transparent; } }
@keyframes mn-cf-tab3 { 0%, 50% { color: var(--text-3); border-color: var(--line); background: transparent; }
  53%, 57% { color: #fff; background: var(--cat); border-color: var(--cat); }
  60%, 100% { color: var(--text-3); border-color: var(--line); background: transparent; } }
@keyframes mn-cf-tab4 { 0%, 57% { color: var(--text-3); border-color: var(--line); background: transparent; }
  60%, 64% { color: #fff; background: var(--cat); border-color: var(--cat); }
  67%, 100% { color: var(--text-3); border-color: var(--line); background: transparent; } }
.mn-cf-dial { position: relative; width: 132px; height: 132px; }
.mn-cf-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mn-cf-dial circle { fill: none; stroke-width: 8; }
.mn-cf-dial-bg { stroke: rgba(0,0,0,.07); }
.mn-cf-dial-fg {
  stroke: var(--cat); stroke-linecap: round;
  stroke-dasharray: 314; stroke-dashoffset: 314;
}
.mn-run .mn-cf-dial-fg { animation: mn-cf-dial 15s linear infinite; }
@keyframes mn-cf-dial {
  0%, 37% { stroke-dashoffset: 314; }
  58%, 93% { stroke-dashoffset: 47; } /* ≈ 8.5 / 10 分 */
  97%, 100% { stroke-dashoffset: 314; }
}
.mn-cf-dial em {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 26px; font-weight: 700; color: var(--cat);
}
.mn-cf-flavors { display: flex; gap: 8px; }
.mn-cf-flavors span {
  font-size: 11.5px; color: var(--cat); background: var(--cat-soft);
  border-radius: 980px; padding: 4px 11px; opacity: 0; transform: translateY(8px);
}
.mn-run .mn-cf-flavors span { animation: mn-cf-flavor 15s linear infinite; }
.mn-run .mn-cf-flavors span:nth-child(2) { animation-delay: .3s; }
.mn-run .mn-cf-flavors span:nth-child(3) { animation-delay: .6s; }
@keyframes mn-cf-flavor {
  0%, 42% { opacity: 0; transform: translateY(8px); }
  46%, 93% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(8px); }
}

/* 场 3：Top3 揭榜 */
.mn-cf-s3 { justify-content: center; gap: 12px; }
.mn-cf-top {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #fafafa; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; opacity: 0; transform: translateY(14px);
}
.mn-cf-top b {
  flex: none; width: 24px; height: 24px; border-radius: 8px;
  background: var(--cat); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.mn-cf-top span { flex: 1; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-cf-top i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--cat); }
.mn-run .mn-cf-top { animation: mn-cf-top 15s linear infinite; }
.mn-run .mn-cf-top:nth-child(3) { animation-delay: .35s; }
.mn-run .mn-cf-top:nth-child(4) { animation-delay: .7s; }
@keyframes mn-cf-top {
  0%, 70% { opacity: 0; transform: translateY(14px); }
  75%, 93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(14px); }
}

/* ================= ④ 摩斯电码 ================= */
.mn-mo {
  position: relative; width: min(560px, 100%); height: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-shot);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; overflow: hidden;
}
.mn-mo .mn-chip { position: absolute; left: 18px; top: 16px; }
.mn-mo-signal { display: flex; align-items: center; gap: 7px; height: 56px; }
.mn-mo-pip {
  display: block; height: 34px; border-radius: 5px;
  background: var(--cat); opacity: .16;
  transition: opacity .12s, box-shadow .12s;
}
.mn-mo-pip.dit { width: 11px; }
.mn-mo-pip.dah { width: 34px; }
.mn-mo-pip.lit { opacity: 1; box-shadow: 0 0 14px var(--cat); }
.mn-mo-pip.gap { background: transparent; width: 8px; }
.mn-mo-text { display: flex; gap: 14px; height: 44px; font-size: 32px; font-weight: 700; letter-spacing: .04em; }
.mn-mo-text span { animation: mn-mo-ch .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes mn-mo-ch { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }

/* ================= ⑤ 架子鼓谱 ================= */
.mn-dr {
  position: relative; width: min(560px, 100%);
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-shot); padding: 20px 22px 16px;
}
.mn-dr-stage { position: relative; width: 100%; aspect-ratio: 5 / 2.6; }
.mn-dr-pad {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: 50%; transition: box-shadow .1s, filter .1s;
}
.mn-dr-pad.cymbal { background: radial-gradient(circle at 38% 34%, #f3d27a, #d9a83f 70%, #b8862e); }
.mn-dr-pad.drum {
  background: radial-gradient(circle at 40% 36%, #fdfdfd, #ececec 68%, #d8d8d8);
  border: 3px solid var(--cat);
}
.mn-dr-pad.pedal {
  border-radius: 8px; background: #3a3a3c;
}
.mn-dr-pad.hit { filter: brightness(1.18); box-shadow: 0 0 0 5px var(--cat-soft), 0 0 22px var(--cat); }
.mn-dr-grid {
  display: grid; gap: 5px; margin-top: 14px;
}
.mn-dr-row { display: grid; grid-template-columns: 40px repeat(16, 1fr); gap: 4px; align-items: center; }
.mn-dr-rl { font-size: 11px; color: var(--text-3); text-align: right; padding-right: 6px; }
.mn-dr-cell { height: 14px; border-radius: 4px; background: rgba(0,0,0,.06); }
.mn-dr-cell.on { background: var(--cat-soft); box-shadow: inset 0 0 0 1.5px var(--cat); }
.mn-dr-cell.now { background: var(--cat); }
.mn-dr-sound {
  position: absolute; right: 16px; top: 14px;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--cat);
  background: #fff; border: 1px solid var(--line); border-radius: 980px;
  padding: 6px 14px; cursor: pointer; box-shadow: var(--shadow);
  transition: background .2s, color .2s;
}
.mn-dr-sound[aria-pressed="true"] { background: var(--cat); color: #fff; border-color: var(--cat); }

/* ================= 移动端（≤900px）：上下堆叠长页 ================= */
@media (max-width: 900px) {
  .mn-inner { grid-template-columns: 1fr; gap: 36px; }
  .mn-stage { min-height: 0; }
  .mn-stage::before { inset: -12%; }
  .mn-zf-phone { margin: 0 auto; }
  .mn-cf { height: 360px; margin: 0 auto; }
  .mn-mo { height: 260px; margin: 0 auto; }
  .mn-mo-text { font-size: 26px; }
  .mn-dr { margin: 0 auto; }
  .mn-dr-row { grid-template-columns: 32px repeat(16, 1fr); gap: 3px; }
  .mn-dr-cell { height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-mini [class*="mn-"] { animation: none !important; }
}