/* ==========================================================================
   app.css —— 前台站点公用样式（不经过 Tailwind 编译）
   Tailwind 编译产物见 tailwind.min.css；缩放器专用样式见 resizer.css。
   ========================================================================== */

/* 自定义滚动条（深色页头与工作区上更协调） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #64748b; background-clip: padding-box; border: 2px solid transparent; }

:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

/* 滚动出现动效（[data-reveal]，见 app.js） */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 透明棋盘格（预览舞台、首页示例共用）——中灰版，深色/浅色图片都看得清 */
.rp-checker {
    background-color: #2b3646;
    background-image:
        linear-gradient(45deg, #3d4a5e 25%, transparent 25%),
        linear-gradient(-45deg, #3d4a5e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3d4a5e 75%),
        linear-gradient(-45deg, transparent 75%, #3d4a5e 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* 首页 Hero 背景：网格 + 光晕 */
.hero-bg {
    background-color: #0b1220;
    background-image:
        radial-gradient(60% 50% at 50% 0%, rgba(59,130,246,.35) 0%, rgba(59,130,246,0) 70%),
        linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* 首页里“工作区截图”式的示意窗口 */
.mock-window { box-shadow: 0 30px 80px -30px rgba(59,130,246,.45), 0 20px 40px -20px rgba(0,0,0,.6); }

/* FAQ 手风琴箭头 */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .2s ease; }

/* 首页 hero 的示意“缩放前 → 缩放后”动画（纯 CSS，无图片） */
.demo-frame { position: relative; overflow: hidden; border-radius: 14px; }
.demo-photo {
    background:
        radial-gradient(circle at 78% 22%, #fde68a 0 9%, transparent 10%),
        linear-gradient(180deg, #38bdf8 0%, #7dd3fc 45%, #bae6fd 46%, #86efac 70%, #4ade80 100%);
}
.demo-photo::before, .demo-photo::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
}
.demo-photo::before { height: 58%; background: linear-gradient(160deg, transparent 40%, #16a34a 40.5%, #15803d 100%); clip-path: polygon(0 60%, 22% 30%, 40% 55%, 58% 25%, 78% 50%, 100% 35%, 100% 100%, 0 100%); }
.demo-photo::after  { height: 42%; background: linear-gradient(160deg, #22c55e, #166534); clip-path: polygon(0 70%, 18% 45%, 35% 62%, 52% 40%, 70% 60%, 88% 45%, 100% 55%, 100% 100%, 0 100%); }