/* Hero mockup — same demo logic, original paper look */

.mockup-preview { --hero-cycle: 4.5s; }
.mockup-preview[data-fx="0"] { --hero-cycle: 3.5s; } /* 拆分 */
.mockup-preview[data-fx="1"] { --hero-cycle: 4.2s; } /* 合并 */
.mockup-preview[data-fx="2"] { --hero-cycle: 5.3s; } /* 旋转 */
.mockup-preview[data-fx="3"] { --hero-cycle: 4.8s; } /* 转换 */
.mockup-preview[data-fx="4"] { --hero-cycle: 4.4s; } /* 压缩 */
.mockup-preview[data-fx="5"] { --hero-cycle: 4.5s; } /* 水印 */

.mockup-fx-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.45s ease;
  padding: 4px;
  overflow: visible;
}

.mockup-preview[data-fx="0"] .mockup-fx-panel[data-fx-panel="0"],
.mockup-preview[data-fx="1"] .mockup-fx-panel[data-fx-panel="1"],
.mockup-preview[data-fx="2"] .mockup-fx-panel[data-fx-panel="2"],
.mockup-preview[data-fx="3"] .mockup-fx-panel[data-fx-panel="3"],
.mockup-preview[data-fx="4"] .mockup-fx-panel[data-fx-panel="4"],
.mockup-preview[data-fx="5"] .mockup-fx-panel[data-fx-panel="5"] {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Fill preview area — no nested fixed box */
.mockup-fx-canvas {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none;
  box-sizing: border-box;
}

/* Hide demo-section PDF chrome inside hero mockup */
.mockup-preview .fx-pdf::before,
.mockup-preview .fx-pdf::after {
  display: none !important;
}

/* Paper: keep original mockup-page look */
.mockup-preview .mockup-paper.fx-pdf,
.mockup-preview .fx-pdf.mockup-paper {
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

[data-theme="dark"] .mockup-preview .mockup-paper.fx-pdf,
[data-theme="dark"] .mockup-preview .fx-pdf.mockup-paper {
  background: #2c2c2e;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.mockup-preview .mockup-paper .fx-pdf-lines {
  padding: 22px 12px 14px;
}

.mockup-preview .mockup-paper .fx-pdf-lines span {
  height: 3px;
  background: var(--border);
}

/* Softer degree chips — no heavy boxes */
.mockup-preview .fx-deg {
  min-width: 32px;
  padding: 4px 6px;
  font-size: 0.62rem;
  border-radius: 6px;
  border: none;
  background: rgba(138, 92, 245, 0.08);
  color: var(--text-tertiary);
}

.mockup-preview[data-fx="2"] .fx-deg:nth-child(1),
.mockup-preview[data-fx="2"] .fx-deg:nth-child(2),
.mockup-preview[data-fx="2"] .fx-deg:nth-child(3),
.mockup-preview[data-fx="2"] .fx-deg:nth-child(4) {
  animation: none;
}

.mockup-preview[data-fx="2"] .fx-deg:nth-child(1) {
  animation: heroDegActive var(--hero-cycle) step-end infinite;
}
.mockup-preview[data-fx="2"] .fx-deg:nth-child(2) {
  animation: heroDegActive2 var(--hero-cycle) step-end infinite;
}
.mockup-preview[data-fx="2"] .fx-deg:nth-child(3) {
  animation: heroDegActive3 var(--hero-cycle) step-end infinite;
}
.mockup-preview[data-fx="2"] .fx-deg:nth-child(4) {
  animation: heroDegActive4 var(--hero-cycle) step-end infinite;
}

@keyframes heroDegActive {
  0%, 24% { color: var(--brand); background: rgba(138, 92, 245, 0.16); }
  25%, 100% { color: var(--text-tertiary); background: rgba(138, 92, 245, 0.08); }
}
@keyframes heroDegActive2 {
  0%, 24% { color: var(--text-tertiary); background: rgba(138, 92, 245, 0.08); }
  25%, 49% { color: var(--brand); background: rgba(138, 92, 245, 0.16); }
  50%, 100% { color: var(--text-tertiary); background: rgba(138, 92, 245, 0.08); }
}
@keyframes heroDegActive3 {
  0%, 49% { color: var(--text-tertiary); background: rgba(138, 92, 245, 0.08); }
  50%, 74% { color: var(--brand); background: rgba(138, 92, 245, 0.16); }
  75%, 100% { color: var(--text-tertiary); background: rgba(138, 92, 245, 0.08); }
}
@keyframes heroDegActive4 {
  0%, 74% { color: var(--text-tertiary); background: rgba(138, 92, 245, 0.08); }
  75%, 99% { color: var(--brand); background: rgba(138, 92, 245, 0.16); }
  100% { color: var(--text-tertiary); background: rgba(138, 92, 245, 0.08); }
}

/* Hero demo sizes — fit inside preview without clipping */
.mockup-preview .fx-split-single .fx-pdf,
.mockup-preview .fx-split-page {
  width: 72px;
  height: 96px;
  margin: -48px 0 0 -36px;
}

.mockup-preview .fx-split-page.p2 { transform: translate(4px, 4px); }
.mockup-preview .fx-split-page.p3 { transform: translate(8px, 8px); opacity: 0.88; }

.mockup-preview .fx-split-result { gap: 8px; }
.mockup-preview .fx-split-part {
  width: 44px;
  height: 58px;
  font-size: 0.62rem;
}

.mockup-preview .fx-merge-parts { gap: 10px; }
.mockup-preview .fx-merge-part {
  width: 44px;
  height: 58px;
  font-size: 0.72rem;
}
.mockup-preview .fx-merge-result .fx-pdf {
  width: 76px;
  height: 100px;
}

.mockup-preview .fx-rotate-wrap { gap: 12px; }
.mockup-preview .fx-rotate-doc {
  width: 58px;
  height: 76px;
}

.mockup-preview .fx-rotate-degs { gap: 4px; }

.mockup-preview .fx-fmt {
  width: 52px;
  height: 68px;
  font-size: 0.68rem;
  border-radius: 8px;
  gap: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.mockup-preview .fx-fmt small { font-size: 0.46rem; }
.mockup-preview .fx-convert-row { gap: 10px; }
.mockup-preview .fx-convert-arrow { width: 40px; }
.mockup-preview .fx-convert-track { height: 3px; }

.mockup-preview .fx-compress-wrap { gap: 12px; }
.mockup-preview .fx-compress-pdf {
  width: 96px;
  height: 76px;
}
.mockup-preview .fx-compress-sizes {
  gap: 8px;
  font-size: 0.76rem;
}
.mockup-preview .fx-compress-sizes .arrow { font-size: 0.72rem; }

.mockup-preview .fx-watermark-pdf {
  width: 76px;
  height: 100px;
}
.mockup-preview .fx-watermark-label {
  font-size: 0.44rem;
  letter-spacing: 0.08em;
}

/* ── Activate animations (mirror demo-fx) ── */
.mockup-preview[data-fx="0"] .fx-split-page.p1 {
  animation: splitFlip1 var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="0"] .fx-split-page.p2 {
  animation: splitFlip2 var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="0"] .fx-split-page.p3 {
  animation: splitFlip3 var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="0"] .fx-split-single {
  animation: splitHideStack var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="0"] .fx-split-result {
  animation: splitShowResult var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="0"] .fx-split-part:nth-child(1) {
  animation: splitPop var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="0"] .fx-split-part:nth-child(2) {
  animation: splitPop var(--hero-cycle) ease-in-out infinite 0.1s;
}
.mockup-preview[data-fx="0"] .fx-split-part:nth-child(3) {
  animation: splitPop var(--hero-cycle) ease-in-out infinite 0.2s;
}

.mockup-preview[data-fx="1"] .fx-merge-part {
  opacity: 0;
  transform: translateX(-32px) scale(0.9);
}
.mockup-preview[data-fx="1"] .fx-merge-part.a {
  animation: mergeMoveA var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="1"] .fx-merge-part.b {
  animation: mergeMoveB var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="1"] .fx-merge-part.c {
  animation: mergeMoveC var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="1"] .fx-merge-result {
  animation: mergeShow var(--hero-cycle) ease-in-out infinite;
}

.mockup-preview[data-fx="2"] .fx-rotate-doc {
  animation: rotateDoc var(--hero-cycle) ease-in-out infinite;
}

.mockup-preview[data-fx="3"] .fx-row-doc-pdf {
  animation: convertRowA var(--hero-cycle) linear infinite;
}
.mockup-preview[data-fx="3"] .fx-row-pdf-png {
  animation: convertRowB var(--hero-cycle) linear infinite;
}
.mockup-preview[data-fx="3"] .fx-row-doc-pdf .fx-convert-track span {
  animation: convertTrackA var(--hero-cycle) linear infinite;
}
.mockup-preview[data-fx="3"] .fx-row-pdf-png .fx-convert-track span {
  animation: convertTrackB var(--hero-cycle) linear infinite;
}

.mockup-preview[data-fx="4"] .fx-compress-pdf {
  animation: compressSlim var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="4"] .fx-compress-sizes .before {
  animation: compressBefore var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="4"] .fx-compress-sizes .after {
  animation: compressAfter var(--hero-cycle) ease-in-out infinite;
}

.mockup-preview[data-fx="5"] .fx-watermark-label {
  animation: wmReveal var(--hero-cycle) ease-in-out infinite;
}
.mockup-preview[data-fx="5"] .fx-watermark-shine {
  animation: wmShine var(--hero-cycle) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mockup-preview[data-fx] * {
    animation: none !important;
  }
  .mockup-preview[data-fx="0"] .fx-split-result { opacity: 1; }
  .mockup-preview[data-fx="1"] .fx-merge-result { opacity: 1; transform: scale(1); }
  .mockup-preview[data-fx="5"] .fx-watermark-label { clip-path: inset(0 0 0 0); }
}

@media (max-width: 768px) {
  .mockup-fx-panel {
    inset: 8px;
    padding: 0;
  }

  .mockup-fx-canvas {
    width: 100% !important;
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
    transform: scale(0.94);
    transform-origin: center center;
  }

  .mockup-preview .fx-split-single .fx-pdf,
  .mockup-preview .fx-split-page {
    width: 58px;
    height: 76px;
    margin: -38px 0 0 -29px;
  }
  .mockup-preview .fx-split-result { gap: 6px; }
  .mockup-preview .fx-split-part { width: 34px; height: 46px; font-size: 0.54rem; }
  .mockup-preview .fx-merge-parts { gap: 8px; }
  .mockup-preview .fx-merge-part { width: 34px; height: 46px; font-size: 0.64rem; }
  .mockup-preview .fx-merge-result .fx-pdf { width: 60px; height: 80px; }
  .mockup-preview .fx-rotate-wrap { gap: 8px; }
  .mockup-preview .fx-rotate-doc { width: 48px; height: 64px; }
  .mockup-preview .fx-deg { min-width: 24px; padding: 2px 4px; font-size: 0.52rem; }
  .mockup-preview .fx-fmt { width: 42px; height: 54px; font-size: 0.58rem; }
  .mockup-preview .fx-fmt small { font-size: 0.4rem; }
  .mockup-preview .fx-convert-row { gap: 8px; }
  .mockup-preview .fx-convert-arrow { width: 28px; }
  .mockup-preview .fx-compress-wrap { gap: 10px; }
  .mockup-preview .fx-compress-pdf { width: 76px; height: 60px; }
  .mockup-preview .fx-compress-sizes { font-size: 0.68rem; gap: 6px; }
  .mockup-preview .fx-watermark-pdf { width: 60px; height: 80px; }
  .mockup-preview .fx-watermark-label { font-size: 0.38rem; }

  /* Tighter merge motion so parts stay inside preview */
  .mockup-preview[data-fx="1"] .fx-merge-part {
    transform: translateX(-24px) scale(0.9);
  }
}

@media (max-width: 640px) {
  .mockup-fx-canvas {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    transform: scale(0.92);
  }
}

@media (max-width: 480px) {
  .mockup-fx-panel { inset: 6px; }

  .mockup-fx-canvas {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    transform: scale(0.9);
  }

  .mockup-preview .fx-split-single .fx-pdf,
  .mockup-preview .fx-split-page {
    width: 50px;
    height: 66px;
    margin: -33px 0 0 -25px;
  }
  .mockup-preview .fx-split-part { width: 30px; height: 40px; font-size: 0.5rem; }
  .mockup-preview .fx-merge-part { width: 30px; height: 40px; font-size: 0.6rem; }
  .mockup-preview .fx-merge-result .fx-pdf { width: 52px; height: 70px; }
  .mockup-preview .fx-rotate-doc { width: 42px; height: 56px; }
  .mockup-preview .fx-fmt { width: 36px; height: 48px; font-size: 0.54rem; }
  .mockup-preview .fx-convert-arrow { width: 24px; }
  .mockup-preview .fx-compress-pdf { width: 64px; height: 52px; }
  .mockup-preview .fx-watermark-pdf { width: 52px; height: 70px; }
}

@media (max-width: 380px) {
  .mockup-fx-canvas {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    transform: scale(0.86);
  }
}