/* /ai hero, "卡點掃描": five everyday chores lie on a board; a gold scan line sweeps them, settles on the slowest one,
   and that card opens into the finished tool. Driven by classes from ai-scan.js:
   .hero-ready (copy reveals) → .is-scanning (first sweep only) → loop: .is-focus + card .is-active + panel .is-on/.is-demo.
   Everything is CSS transitions; reduced motion shows one finished panel from the first frame, no loop. */

.scan-hero { position: relative; min-height: 100vh; min-height: 100svh; min-height: calc(var(--svh-lock, 1svh) * 100); display: grid; place-items: center; background: var(--ink); padding: 6.5rem 0 3.5rem; overflow: hidden; }
.scan-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.scan-label { margin-bottom: 1.6rem; }

/* ---- Board ---- */
.scan-board { position: relative; width: min(900px, 100%); height: 300px; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.scan-card {
    position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r));
    display: grid; gap: 0.25rem; text-align: left; padding: 0.95rem 1.15rem; border-radius: 14px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--line-dark-2); color: var(--on-dark);
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.scan-card b { font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.scan-card small { font-size: 0.74rem; color: var(--on-dark-2); letter-spacing: 0.06em; }
.scan-tag {
    position: absolute; left: 0; top: -1.75rem; font-size: 0.72rem; color: var(--gold); letter-spacing: 0.08em; white-space: nowrap;
    opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Scan line: a thin gold blade with a soft trailing glow */
.scan-line {
    position: absolute; top: -12px; bottom: -12px; left: 0; width: 2px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
    box-shadow: 0 0 18px 2px rgba(235,162,78,0.55); opacity: 0; transform: translateX(0);
}
.scan-line::before { content: ''; position: absolute; top: 0; bottom: 0; right: 2px; width: 90px; background: linear-gradient(to right, transparent, rgba(235,162,78,0.10)); }

.is-scanning .scan-line { opacity: 1; transform: translateX(var(--w, 0px)); transition: opacity 0.2s ease, transform 1.6s cubic-bezier(0.77, 0, 0.175, 1); }
.is-scanning .scan-card { animation: scan-hit 0.7s ease-out var(--hit, 0ms) both; }
@keyframes scan-hit {
    0%, 100% { border-color: var(--line-dark-2); background-color: rgba(255,255,255,0.03); }
    25% { border-color: rgba(235,162,78,0.75); background-color: rgba(235,162,78,0.10); }
}
/* ---- Loop: each card in turn opens into its finished tool, then closes back (ai-scan.js) ----
   .is-focus on the board while a card is active; the active card gets .is-active, its panel .is-on, then .is-demo
   for the panel's own micro-animation. Only opacity/transform animate. */
.is-focus .scan-line { opacity: 0; transition: opacity 0.3s ease; }
.is-focus .scan-card { animation: none; }
.is-focus .scan-card:not(.is-active) { opacity: 0.4; }
.scan-card.is-active { border-color: rgba(235,162,78,0.85); box-shadow: 0 0 0 1px rgba(235,162,78,0.35), 0 18px 50px -18px rgba(235,162,78,0.55); }
.scan-card.is-active .scan-tag { opacity: 1; transform: none; }
.scan-card { cursor: pointer; }
.is-paused .scan-panel * { animation-play-state: paused; } /* hover, hidden tab or off screen: demos freeze with the loop */

.scan-panel-pos { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.scan-panel {
    grid-area: 1 / 1; box-sizing: border-box;
    width: min(440px, 92%); text-align: left; padding: 1.1rem 1.25rem 1.1rem; border-radius: 18px;
    background: linear-gradient(160deg, #141B2E, #0E1424); border: 1px solid rgba(235,162,78,0.45);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(235,162,78,0.12);
    opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 0.3));
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.55, 0, 0.45, 1);
}
.scan-panel.is-on { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.23, 1, 0.32, 1); }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.sp-head b { font-size: 1rem; color: #fff; }
.sp-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--on-dark-2); white-space: nowrap; }
.sp-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.sp-tag { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--on-dark-2); border: 1px solid var(--line-dark-2); border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.sp-body { font-size: 0.8rem; color: var(--on-dark-2); }
.sp-body small { font-size: 0.68rem; color: var(--on-dark-2); letter-spacing: 0.04em; }
.sp-foot { margin: 0.85rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line-dark); font-size: 0.8rem; line-height: 1.5; color: var(--on-dark-2); }

/* Shared step-in: elements appear in sequence once the demo starts (--d = step) */
.sp-in { opacity: 0; transform: translateY(5px); }
.scan-panel.is-demo .sp-in { opacity: 1; transform: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(var(--d) * 0.16s); }

/* Report: bars grow from the bottom */
.sp-bars { --unit: 0.66px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; align-items: end; margin-top: 0.55rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line-dark); }
.sp-bars span { display: grid; gap: 0.35rem; justify-items: center; }
/* --h is 0–100; a fixed unit, because a % height has nothing definite to resolve against in an auto-height grid row */
.sp-bars i { display: block; width: 100%; height: calc(var(--h) * var(--unit)); border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, rgba(235,162,78,0.55), var(--gold)); transform-origin: bottom; transform: scaleY(0.06); }
.scan-panel.is-demo .sp-bars i { transform: none; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) calc(0.3s + var(--i) * 70ms); }

/* Orders: the order travels to the kitchen printer and a slip comes out */
.spo-order { display: inline-block; padding: 0.35rem 0.6rem; border-radius: 8px; background: rgba(255,255,255,0.05); color: var(--on-dark); }
.spo-route { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.spo-route span { white-space: nowrap; }
.spo-track { position: relative; flex: 1; height: 2px; background: var(--line-dark-2); border-radius: 2px; }
.spo-dot { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px rgba(235,162,78,0.6); opacity: 0; }
.scan-panel.is-demo .spo-dot { animation: spo-travel 0.6s cubic-bezier(0.55, 0, 0.45, 1) 0.35s both; }
@keyframes spo-travel { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.spo-slip { height: 2.4rem; overflow: hidden; margin: 0.5rem 0 0 auto; width: 7.5rem; border-top: 3px solid var(--line-dark-2); border-radius: 2px; }
.spo-paper { display: grid; gap: 0.3rem; padding: 0.45rem 0.55rem; background: #E9E4DA; border-radius: 0 0 4px 4px; transform: translateY(-100%); }
.spo-paper i { display: block; height: 3px; border-radius: 2px; background: #B8B0A0; }
.spo-paper i:nth-child(2) { width: 70%; } .spo-paper i:nth-child(3) { width: 45%; }
.scan-panel.is-demo .spo-paper { transform: none; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.9s; }
.spo-status { position: relative; margin-top: 0.45rem; text-align: right; height: 1.2rem; }
.spo-status span { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.spo-done { color: var(--ok); opacity: 0; }
.scan-panel.is-demo .spo-pending { opacity: 0; transition: opacity 0.25s ease 1.3s; }
.scan-panel.is-demo .spo-done { opacity: 1; transition: opacity 0.3s ease 1.4s; }

/* Images: a reference image, then similar designs appear and the best match is outlined */
.spi-row { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 0.9rem; align-items: start; }
.spi-ref, .spi-res { display: grid; gap: 0.35rem; }
.spi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.spi-img { display: block; aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent; }
.spi-img--a { background: radial-gradient(circle at 35% 40%, #F2B6A0 0 18%, transparent 19%), radial-gradient(circle at 65% 60%, #E89A7E 0 22%, transparent 23%), linear-gradient(150deg, #3A4A3A, #26332A); }
.spi-img--b { background: radial-gradient(circle at 40% 45%, #F2B6A0 0 20%, transparent 21%), radial-gradient(circle at 68% 62%, #E89A7E 0 18%, transparent 19%), linear-gradient(150deg, #3E4E3C, #28362C); }
.spi-img--c { background: radial-gradient(circle at 55% 40%, #EFC3A8 0 24%, transparent 25%), linear-gradient(150deg, #44523F, #2B382E); }
.spi-img--d { background: radial-gradient(circle at 35% 60%, #E7A88E 0 17%, transparent 18%), radial-gradient(circle at 70% 35%, #F0BCA2 0 15%, transparent 16%), linear-gradient(150deg, #39473A, #253129); }
.scan-panel.is-demo .spi-img--b { border-color: var(--gold); transition: opacity 0.35s ease 0.32s, transform 0.35s ease 0.32s, border-color 0.3s ease 1.1s; }
.spi-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.7rem; }
.spi-tag { color: var(--gold); }
.spi-store { font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--line-dark-2); white-space: nowrap; }

/* Help: two separate cases, each with its own label */
.sph-block { display: grid; gap: 0.3rem; }
.sph-block + .sph-block { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line-dark); }
.sph-block p { margin: 0; }
.sph-q { justify-self: end; padding: 0.3rem 0.6rem; border-radius: 10px 10px 2px 10px; background: rgba(255,255,255,0.06); color: var(--on-dark); }
.sph-a { justify-self: start; padding: 0.3rem 0.6rem; border-radius: 10px 10px 10px 2px; background: rgba(235,162,78,0.14); color: var(--on-dark); }
.sph-calc { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; color: var(--on-dark); }
.sph-calc b { color: var(--gold); }
.sph-form { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--on-dark-2); }

/* Votes: bars extend to their counts; the top one is marked */
.spv-row { display: grid; grid-template-columns: 4.5em 1fr auto; align-items: center; gap: 0.6rem; position: relative; }
.spv-row + .spv-row { margin-top: 0.5rem; }
.spv-row span { color: var(--on-dark); white-space: nowrap; }
.spv-row b { color: var(--on-dark); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spv-row b small { font-weight: 400; }
.spv-bar { display: block; height: 8px; border-radius: 4px; background: linear-gradient(to right, rgba(235,162,78,0.55), var(--gold)); transform-origin: left; transform: scaleX(0.04); width: calc(var(--v) * 100%); }
.scan-panel.is-demo .spv-bar { transform: none; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) calc(0.3s + var(--i) * 0.12s); }
.spv-top { position: absolute; right: 0; top: -1.15rem; font-style: normal; font-size: 0.64rem; letter-spacing: 0.06em; color: var(--gold); opacity: 0; }
.scan-panel.is-demo .spv-top { opacity: 1; transition: opacity 0.35s ease 1.15s; }

/* ---- Copy ---- */
.scan-copy h1 { font-size: clamp(2rem, 4.6vw, 4rem); margin: 0 0 1.1rem; }
.scan-copy h1 .ln > span { white-space: nowrap; }
.scan-copy h1 em { font-style: normal; color: var(--gold); }
.scan-copy p { color: var(--on-dark-2); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.8; margin: 0 auto 1.9rem; }
/* Hidden until the headline font is in, then revealed once (never shown, hidden, and replayed) */
.js-motion:not(.motion-fallback) .scan-hero:not(.hero-ready) .scan-copy,
.js-motion:not(.motion-fallback) .scan-hero:not(.hero-ready) .scan-label { visibility: hidden; }
.js-motion:not(.motion-fallback) .scan-hero.hero-ready .scan-copy .ln > span { animation: scan-ln 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js-motion:not(.motion-fallback) .scan-hero.hero-ready .scan-copy .ln:nth-child(2) > span { animation-delay: 0.12s; }
.js-motion:not(.motion-fallback) .scan-hero.hero-ready .scan-copy p,
.js-motion:not(.motion-fallback) .scan-hero.hero-ready .scan-copy .hero-cta,
.js-motion:not(.motion-fallback) .scan-hero.hero-ready .scan-label { animation: scan-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.js-motion:not(.motion-fallback) .scan-hero.hero-ready .scan-copy .hero-cta { animation-delay: 0.45s; }
@keyframes scan-ln { from { transform: translateY(110%); } }
@keyframes scan-up { from { opacity: 0; transform: translateY(16px); } }

/* ---- Phones: a narrower board, cards placed for two columns ---- */
@media (max-width: 640px) {
    .scan-hero { padding-top: 5.5rem; }
    .scan-board { height: 290px; }
    .scan-card { left: var(--mx); top: var(--my); padding: 0.7rem 0.85rem; border-radius: 12px; }
    .scan-card b { font-size: 0.88rem; }
    .scan-card small { font-size: 0.68rem; }
    .sp-bars { --unit: 0.5px; }
    /* the board is 290px tall here: compact panels so the tallest still fits inside it */
    .scan-panel { padding: 0.75rem 0.85rem 0.8rem; border-radius: 14px; }
    .sp-head { margin-bottom: 0.5rem; }
    .sp-head b { font-size: 0.88rem; line-height: 1.3; }
    .sp-tag { display: none; }
    .sp-body { font-size: 0.74rem; }
    .sp-foot { margin-top: 0.55rem; padding-top: 0.5rem; font-size: 0.72rem; line-height: 1.45; }
    .spi-row { grid-template-columns: 0.62fr 1.8fr; gap: 0.6rem; }
    .spi-meta { margin-top: 0.45rem; }
    .sph-block { gap: 0.2rem; }
    .sph-block + .sph-block { margin-top: 0.4rem; padding-top: 0.4rem; }
    .sph-form { display: none; }
    .spo-route { margin-top: 0.45rem; }
    .spo-slip { height: 1.9rem; margin-top: 0.35rem; }
}

/* ---- Reduced motion: the solved board from the first paint ---- */
@media (prefers-reduced-motion: reduce) {
    /* one finished panel (the report), still; cards behind it dimmed. Clicking a card still switches panels. */
    .scan-line, .scan-tag { display: none; }
    .scan-card { opacity: 0.4; }
    .scan-panel, .scan-panel * { transition: none !important; animation: none !important; }
}

/* ---- English: longer lines than the Chinese these sizes were set for; let them wrap so nothing is cut at phone widths ---- */
html[lang="en"] .scan-copy h1 .ln > span { white-space: normal; }
html[lang="en"] .scan-label { white-space: normal; }
html[lang="en"] .scan-copy, html[lang="en"] .scan-copy > * { min-width: 0; max-width: 100%; }