@import url("./case-ui.css");

/* index.html #cases — department entry, pain picker, four flagship cases */
.cases-v2 { background: var(--case-ground); border-top: 1px solid #bac9fa20; }
.cases-v2 .content-section { padding-block: clamp(5rem, 8vw, 8rem); }
.cases-v2 h3, .cases-v2 h4 { margin: 0; }

/* Heading + M5 rise (visible by default; .is-in replays the entrance once) */
.cases-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: end; }
.cases-head h2 { line-height: 1.3; }
.rise-line { display: block; overflow: clip; padding-bottom: .06em; }
.rise-line > span { display: inline-block; }
.rise-title.is-in .rise-line > span { animation: rise .62s var(--ease-expo) both; }
.rise-title.is-in .rise-line + .rise-line > span { animation-delay: .08s; }
@keyframes rise { from { transform: translateY(105%); } }
.cases-intro .section-intro { margin: 0; }
.cases-intro .promo-text-link { min-height: 44px; }

/* Pain picker — "你卡在哪 → 誰來接手" */
.pain-picker { margin-top: clamp(3.5rem, 6vw, 5rem); padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--case-line); border-radius: 18px; background: linear-gradient(160deg, #0f1b33, #0b1428 70%); }
.pain-picker h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: .02em; }
.pain-options { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.pain-option { position: relative; min-height: 44px; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--case-line-strong); background: transparent; color: #d7e2f2; font-size: .9375rem; line-height: 1.5; text-align: left; transition: border-color .2s, background-color .2s, color .2s; }
.pain-option:hover { border-color: #83e1f799; color: #fff; }
.pain-option[aria-pressed="true"] { border-color: var(--case-gold); color: #fff; background: #ffd6990f; padding-left: 1.75rem; }
.pain-option[aria-pressed="true"]::before { content: ""; position: absolute; left: .85rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--case-gold); }
.pain-option:focus-visible { outline: 2px solid var(--case-sky); outline-offset: 3px; }
.pain-result { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 1.25rem 2.5rem; align-items: start; margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--case-line); }
.pain-who { display: flex; gap: 1rem; align-items: flex-start; }
.pain-who img { flex: none; width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--case-line); object-fit: cover; }
.pain-handoff { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #e4ebf6; }
.pain-handoff a { color: var(--case-sky); text-underline-offset: 4px; }
.pain-pitch { margin: .35rem 0 0; color: var(--case-muted); font-size: .9375rem; line-height: 1.8; }
.pain-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pain-cases a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 64px; padding: .5rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s; }
.pain-cases a:hover { background: #a4beff0d; }
.pain-cases a:hover strong { color: var(--case-sky); }
.pain-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #16233d; }
.pain-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pain-cases strong { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.55; color: #eef3fa; }
.pain-cases small { display: block; margin-top: .15rem; color: var(--case-quiet); font-size: .8125rem; line-height: 1.6; }
.pain-more { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--case-sky); font-size: .9rem; text-decoration: none; }
.pain-more:hover { color: #fff; }

/* Department explorer */
.dept-explorer { margin-top: clamp(4rem, 7vw, 6rem); display: grid; grid-template-columns: 1fr; gap: 2rem; }
.dept-nav { position: relative; }
.cases-v2 .dept-nav-title { font-size: 1.375rem; font-weight: 500; letter-spacing: .02em; margin-bottom: 1rem; }
.dept-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.dept-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb name count" "thumb line line"; gap: .1rem 1rem; align-items: center; min-height: 56px; padding: .75rem .75rem .75rem .5rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s, color .2s; }
.dept-row:hover, .dept-row:focus-visible { background: #a4beff0d; }
.dept-row:hover .dept-name, .dept-row:focus-visible .dept-name { color: var(--case-sky); }
.dept-row:focus-visible { outline: 2px solid var(--case-sky); outline-offset: 2px; }
.dept-thumb { grid-area: thumb; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #16233d; border: 1px solid var(--case-line); }
.dept-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dept-name { grid-area: name; font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: #eef3fa; transition: color .2s; }
.dept-count { grid-area: count; color: #aebdd5; font-size: .9rem; white-space: nowrap; }
.dept-count .tnum { font-size: 1.05rem; color: #dbe5f3; }
.dept-line { grid-area: line; color: var(--case-quiet); font-size: .9rem; line-height: 1.6; }
.dept-dot { display: none; }

@media (min-width: 640px) and (max-width: 1023px) {
  .dept-list { grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
}

@media (min-width: 1024px) {
  .dept-explorer { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .dept-nav { position: sticky; top: 96px; z-index: var(--z-sticky); }
  .dept-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count"; padding: .7rem .9rem .7rem 1.75rem; }
  .dept-thumb, .dept-line { display: none; }
  .dept-row[aria-current="true"] .dept-name { color: #fff; }
  .dept-row[aria-current="true"] { background: #a4beff0a; }
  /* M1 gold dot: one dot travels between departments */
  .is-enhanced .dept-dot { display: block; position: absolute; left: .7rem; top: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--case-gold); box-shadow: 0 0 0 4px #ffd6991f; opacity: 0; transform: translateY(var(--y, 0)); transition: transform .32s var(--ease-quart), opacity .2s; pointer-events: none; }
  .is-enhanced .dept-dot.is-placed { opacity: 1; }
}

/* Stage (desktop only, JS) */
.dept-stage { min-width: 0; }
@media (max-width: 1023px) { .dept-stage { display: none !important; } }
.dept-stage { transition: opacity .14s ease-out, filter .14s ease-out; }
.dept-stage.is-swapping { opacity: 0; filter: blur(4px); }
@media (min-width: 1180px) {
  .stage-lead .case-card { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.75rem; align-items: end; }
}
.stage-lead .case-card { gap: 1.1rem; }
.stage-lead .case-title { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 600; }
.stage-lead .case-proof { font-size: 1rem; }
.stage-desc { margin: 1.5rem 0 0; color: var(--case-muted); font-size: .9375rem; line-height: 1.8; }
.stage-more { list-style: none; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--case-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.stage-more .case-title { font-size: .9375rem; }
.stage-more .case-proof { font-size: .8125rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stage-more .case-client { font-size: .8125rem; }
.stage-more .case-meta { display: none; }
.stage-more .browser-bar { height: 22px; }
.stage-more .browser-bar em { font-size: .65rem; }
.stage-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; color: var(--case-sky); text-decoration: none; font-size: .95rem; }
.stage-all:hover { color: #fff; }

/* Flagships */
.flagships { margin-top: clamp(5rem, 9vw, 7.5rem); }
.flagships-title { font-size: 1.375rem; font-weight: 500; letter-spacing: .02em; color: #d7e2f2; }
.flagship { padding-top: clamp(2.5rem, 5vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--case-line); }
.flagships-title + .flagship { border-top: 0; margin-top: 0; }
.flagship-head { max-width: 46rem; }
.flagship-client { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 .9rem; color: #92b4d1; font-size: .9375rem; }
.flagship h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.4; letter-spacing: .02em; text-wrap: balance; color: #fff; }
.flagship-meta { margin: .7rem 0 0; color: var(--case-quiet); font-size: .875rem; }
.flagship-lede { margin: 1rem 0 0; color: var(--case-muted); font-size: 1rem; line-height: 1.9; max-width: 40em; text-wrap: pretty; }
.flagship h4 { font-size: 1rem; font-weight: 600; color: #e6edf8; }
.flagship-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 2rem 0 0; }
.url-chip { display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; padding: .45rem 1rem; border-radius: 12px; border: 1px solid #83e1f74d; color: var(--case-sky); text-decoration: none; font-size: .9375rem; line-height: 1.45; transition: border-color .2s, background-color .2s; }
.url-chip:hover { border-color: var(--case-sky); background: #83e1f70f; color: #fff; }
.url-chip small { color: var(--case-quiet); font-size: .75rem; }
.case-more { display: inline-flex; align-items: center; min-height: 44px; color: #dbe6f4; font-size: .9375rem; text-decoration: none; }
.case-more:hover { color: var(--case-sky); }

/* Yuka scrollytelling */
.scrolly { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); margin-top: 2.5rem; }
.scrolly-stage { position: sticky; top: 14vh; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--case-line-strong); background: #0e182d; box-shadow: 0 30px 80px -40px #000c; }
.scrolly-shot { grid-area: 1 / 1; min-width: 0; opacity: 0; transform: scale(.985); transition: opacity .45s var(--ease-quart), transform .6s var(--ease-quart); visibility: hidden; }
.scrolly-shot.is-active { opacity: 1; transform: none; visibility: visible; }
.scrolly-shot .shot { margin: 0; position: relative; }
.scrolly-shot .shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.scrolly-shot .media-tag { bottom: 12px; left: 12px; }
.scrolly-steps { list-style: none; margin: 0; padding: 0; }
.scrolly-step { min-height: 46vh; padding: 2rem 0; display: flex; flex-direction: column; justify-content: center; opacity: .42; transition: opacity .35s ease-out; }
.scrolly-step:first-child { padding-top: 0; justify-content: flex-start; min-height: 40vh; }
.scrolly-step.is-active { opacity: 1; }
.step-label { margin: 0 0 .5rem; color: var(--case-gold); font-size: .875rem; }
.scrolly-step h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
.scrolly-step p:last-child { margin: .6rem 0 0; color: var(--case-muted); font-size: .9375rem; line-height: 1.85; text-wrap: pretty; }
.pipeline { margin-top: 1.5rem; border-block: 1px solid var(--case-line); }
.pipeline > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; cursor: pointer; list-style: none; color: #d5e2f3; font-size: .9375rem; }
.pipeline > summary::-webkit-details-marker { display: none; }
.pipeline > summary span { color: var(--case-sky); font-size: 1.3rem; transition: transform .2s; }
.pipeline[open] > summary span { transform: rotate(45deg); }
.pipeline > summary:focus-visible { outline: 2px solid var(--case-sky); outline-offset: 4px; }
.pipeline-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; padding: .5rem 0 1.75rem; }
.pipeline-body ol, .pipeline-body ul { margin: .75rem 0 0; padding-left: 1.3rem; color: var(--case-muted); font-size: .9375rem; line-height: 1.85; }

/* 挽心 film strip */
.film { margin-top: 2.25rem; }
.film-strip { display: grid; grid-template-columns: 2fr 1fr; gap: .9rem; align-items: start; }
.film-frame { margin: 0; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--case-line); }
.film-frame:first-child { grid-row: span 2; }
.film-frame img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .28s var(--ease-quart); }
.film-frame:hover img { transform: scale(1.02); }
.film-caption { margin: .9rem 0 0; color: var(--case-muted); font-size: .9375rem; line-height: 1.8; }

/* OPHIA file list + work wall (M4: tall previews pan slowly on hover) */
.ophia-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.25rem; align-items: start; }
.file-list ol { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--case-line); counter-reset: file; }
.file-list li { border-bottom: 1px solid var(--case-line); counter-increment: file; }
.file-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .75rem; align-items: baseline; min-height: 48px; padding: .6rem .25rem; transition: background-color .2s; }
.file-row::before { content: counter(file, decimal-leading-zero); color: var(--case-quiet); font-size: .75rem; font-variant-numeric: tabular-nums; }
.file-row:hover { background: #a4beff0a; }
.file-row:hover .file-name { color: var(--case-sky); }
.file-name { color: #dbe5f3; font-size: .8125rem; line-height: 1.6; overflow-wrap: anywhere; }
.file-date { color: var(--case-quiet); font-size: .75rem; white-space: nowrap; }
.file-toggle { display: none; }
@media (max-width: 639px) { .is-enhanced .file-toggle { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid #83e1f74d; background: none; color: var(--case-sky); font-size: .875rem; } }
.file-note { margin: 1rem 0 0; color: var(--case-quiet); font-size: .8125rem; line-height: 1.8; }
.work-wall { columns: 3 160px; column-gap: .8rem; }
.wall-item { break-inside: avoid; margin: 0 0 .8rem; position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--case-line); background: radial-gradient(ellipse at 50% 40%, #1b2a48, #0e182d 75%); }
.wall-item img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; object-position: top; transition: object-position 6s linear, transform .28s var(--ease-quart); }
.wall-item:hover img { object-position: bottom; }

/* Grok dispatch */
.grok-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.25rem; align-items: start; }
.dispatch-flow { list-style: none; margin: 0; padding: 0; position: relative; }
.dispatch-flow li { position: relative; display: grid; gap: .15rem; padding: 0 0 1.6rem 2rem; }
.dispatch-flow li::before { content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--case-sky); background: var(--case-ground); }
.dispatch-flow li:first-child::before { border-color: var(--case-gold); background: var(--case-gold); }
.dispatch-flow li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 1.35em; bottom: .1em; width: 1px; background: #83e1f766; transform-origin: top; }
.dispatch-flow li:nth-child(3), .dispatch-flow li:nth-child(4) { margin-left: 1.25rem; }
.dispatch-flow strong { font-weight: 600; color: #eef3fa; font-size: 1rem; }
.dispatch-flow span { color: var(--case-muted); font-size: .9rem; line-height: 1.7; }
.dispatch-flow.is-in li::after { animation: draw .7s var(--ease-quart) both; }
.dispatch-flow.is-in li:nth-child(2)::after { animation-delay: .15s; }
.dispatch-flow.is-in li:nth-child(3)::after { animation-delay: .3s; }
@keyframes draw { from { transform: scaleY(0); } }
.dispatch-log h4 { font-weight: 500; color: #dbe5f3; }
.bars { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.bars li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2rem; gap: .75rem; align-items: center; font-size: .875rem; }
.bar-who { color: #d7e2f2; }
.bar-track { height: 8px; border-radius: 4px; background: #a4beff14; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: calc(var(--share) * 100%); border-radius: 4px; background: var(--case-sky); transform-origin: left; }
.bars.is-in .bar-fill { animation: grow .8s var(--ease-quart) both; }
.bars.is-in li:nth-child(2) .bar-fill { animation-delay: .06s; }
.bars.is-in li:nth-child(3) .bar-fill { animation-delay: .12s; }
.bars.is-in li:nth-child(4) .bar-fill { animation-delay: .18s; }
@keyframes grow { from { transform: scaleX(0); } }
.bar-n { color: #aebdd5; text-align: right; }
.dispatch-shot { margin: 0; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--case-line); }
.dispatch-shot img { display: block; width: 100%; height: auto; }

/* Legend */
.case-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .5rem; margin: clamp(3.5rem, 6vw, 5rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--case-line); color: var(--case-quiet); font-size: .8125rem; line-height: 1.9; }
.case-legend .badge { margin-left: .5rem; }
.case-legend .badge:first-child { margin-left: 0; }

/* LINE bubble yields while the section is on screen */
body.in-cases .line-chat-bubble { width: 52px; height: 52px; padding: 0; justify-content: center; }
body.in-cases .line-chat-copy { display: none; }

@media (max-width: 1023px) {
  .cases-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .pain-result { grid-template-columns: 1fr; }
  .pain-more { grid-column: 1; }
  .scrolly { grid-template-columns: 1fr; gap: 0; }
  .scrolly-stage { top: 8px; z-index: var(--z-sticky); }
  .scrolly-step { min-height: 52vh; padding: 2rem 0; }
  .scrolly-step:first-child { padding-top: 2rem; }
  .pipeline-body, .ophia-grid, .grok-grid { grid-template-columns: 1fr; }
  .work-wall { columns: 2 140px; }
}
@media (max-width: 639px) {
  .pain-options { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -1.5rem; padding: 0 1.5rem .25rem; }
  .pain-options::-webkit-scrollbar { display: none; }
  .pain-option { flex: none; scroll-snap-align: start; font-size: .875rem; white-space: nowrap; }
  .pain-picker { overflow: hidden; }
  .is-enhanced .file-list:not(.is-open) li:nth-child(n+6) { display: none; }
  .scrolly-step { min-height: 38vh; }
  .pain-cases a { grid-template-columns: 80px minmax(0, 1fr); }
  .dept-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .dept-thumb { width: 64px; height: 64px; }
  .film-strip { grid-template-columns: 1fr 1fr; }
  .film-frame:first-child { grid-column: span 2; grid-row: auto; }
  .flagship h3 { font-size: 1.375rem; }
  .case-legend .badge { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rise-title.is-in .rise-line > span, .bars.is-in .bar-fill, .dispatch-flow.is-in li::after { animation: none; }
  .scrolly-shot, .scrolly-step, .dept-stage, .is-enhanced .dept-dot { transition: opacity .15s linear; transform: none; filter: none; }
  .is-enhanced .dept-dot { transform: translateY(var(--y, 0)); }
  .wall-item img, .film-frame img { transition: none; }
  .wall-item:hover img { object-position: top; }
  .film-frame:hover img { transform: none; }
}