/* Korv Glanz case studies (rich layout): hero legend and facts, the particle hero's callouts and
   viewfinder, the connected How it works timeline, and the illustrated story monitor */

/* ---------- hero legend ---------- */
.case-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 14px; font: 500 12px/1.3 'IBM Plex Mono', monospace; color: #CFE0FF; }
.case-legend span { display: inline-flex; align-items: center; gap: 8px; }
.case-legend i { width: 10px; height: 10px; border-radius: 3px; }
.case-legend .ok { background: #3DDC97; box-shadow: 0 0 10px rgba(61,220,151,.7); }
.case-legend .bad { background: #FF5C61; box-shadow: 0 0 10px rgba(255,92,97,.7); }
.case-legend .mute { border: 1.5px solid #6F8FCF; }
.case-fact { margin-top: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #fff; }

/* ---------- hero: callouts on the particle scene ---------- */
.ph-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; font-family: 'IBM Plex Mono', monospace; }
.ph-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-lines line { stroke: rgba(141,182,255,.55); stroke-width: 1; stroke-dasharray: 3 3; }
.ph-tag, .ph-status { position: absolute; left: 0; top: 0; padding: 7px 11px; border-radius: 10px; background: rgba(7,16,42,.78); border: 1px solid rgba(141,182,255,.28); backdrop-filter: blur(8px); transition: border-color .4s, box-shadow .4s; }
.ph-tag small, .ph-status small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9FB3D9; }
.ph-tag b, .ph-status b { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #3DDC97; transition: color .4s; }
.ph-tag[data-s="bad"] { border-color: rgba(255,92,97,.6); box-shadow: 0 0 24px -6px rgba(255,92,97,.7); }
.ph-tag[data-s="bad"] b, .ph-status b.bad { color: #FF8A8E; }
.ph-tag[data-s="mute"] b, .ph-status b.mute { color: #9FB3D9; }
.ph-status { left: 4px; top: 0; }
.ph-status b { font-family: 'Space Grotesk', sans-serif; font-size: 16px; }
@media (max-width: 640px) { .ph-tag { padding: 5px 8px; } .ph-tag small { font-size: 8.5px; } .ph-tag b { font-size: 11px; } .ph-status b { font-size: 14px; } }

/* ---------- how it works: the steps are one connected timeline ---------- */
.eo-how-steps.tl { position: relative; padding: 4vh 0 12vh 40px; }
.tl .eo-step-card { position: relative; margin-bottom: 14vh; }
.tl .eo-step-card:last-child { margin-bottom: 0; }
@media (max-width: 1023px) { .eo-how-steps.tl { padding: 8px 0 0 30px; } .tl .eo-step-card { margin-bottom: 12vh; } }
/* the line runs from the first step's dot to the last, and fills as you scroll */
.steps-rail { position: absolute; left: 13px; top: var(--rail-top, 0); height: var(--rail-h, 100%); width: 2px; border-radius: 2px; background: rgba(141,182,255,.16); }
.steps-rail i { position: absolute; left: 0; top: 0; width: 100%; height: var(--fill, 0%); border-radius: 2px; background: linear-gradient(180deg, var(--blue, #1D5FE0), var(--cyan, #33C3F0)); box-shadow: 0 0 12px rgba(51,195,240,.7); }
@media (max-width: 1023px) { .steps-rail { left: 9px; } }
.tl .eo-step-card::before { content: ''; position: absolute; left: -33px; top: 30px; width: 14px; height: 14px; border-radius: 999px; background: #0A1538; border: 2px solid rgba(141,182,255,.35); transition: background .4s, border-color .4s, box-shadow .4s; }
@media (max-width: 1023px) { .tl .eo-step-card::before { left: -27px; } }
.tl .eo-step-card.is-done::before { background: var(--blue, #1D5FE0); border-color: var(--blue, #1D5FE0); }
.tl .eo-step-card.is-on::before { background: var(--cyan, #33C3F0); border-color: #fff; box-shadow: 0 0 0 5px rgba(51,195,240,.2), 0 0 16px rgba(51,195,240,.9); }
.ph-tag[data-s="pend"] b, .ph-status b.pend { color: #CFE0FF; animation: ph-pend 1s ease-in-out infinite; }
.ph-tag[data-s="ok"] { border-color: rgba(61,220,151,.45); }
@keyframes ph-pend { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ph-tag[data-s="pend"] b, .ph-status b.pend { animation: none; } }
/* the viewfinder from the Korv Glanz logo frames the operator, in the colour of the result */
.ph-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-frame path { fill: none; stroke: #CFE0FF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(111,227,255,.6)); transition: stroke .4s; }
.ph-frame[data-s="ok"] path { stroke: #3DDC97; filter: drop-shadow(0 0 8px rgba(61,220,151,.7)); }
.ph-frame[data-s="bad"] path { stroke: #FF5C61; filter: drop-shadow(0 0 8px rgba(255,92,97,.8)); animation: ph-pend .9s ease-in-out infinite; }
.ph-frame[data-s="mute"] path { stroke: #8FA3C8; filter: none; }
.ph-frame[data-s="pend"] path { stroke-dasharray: 6 5; }
.ph-cam { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .05em; color: #CFE0FF; white-space: nowrap; padding: 5px 9px; border-radius: 999px; background: rgba(7,16,42,.8); border: 1px solid rgba(141,182,255,.25); backdrop-filter: blur(6px); }
.ph-cam i { width: 7px; height: 7px; border-radius: 999px; background: #FF5C61; box-shadow: 0 0 8px rgba(255,92,97,.9); animation: pv-blink 1.6s ease-in-out infinite; }
@media (max-width: 640px) { .ph-cam { font-size: 9px; } .ph-frame path { stroke-width: 2; } }
@media (prefers-reduced-motion: reduce) { .ph-frame[data-s="bad"] path, .ph-cam i { animation: none; } }

/* ---------- story monitor: one drawn view per step ---------- */
.case-monitor .mon-view svg { position: static; inset: auto; width: auto; height: auto; }
.case-monitor .mon-view svg.sm-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-monitor .mon-view .sm-file span svg { width: 16px; height: 16px; fill: #fff; }
.case-monitor .mon-view svg.sm-chart { display: block; width: 100%; height: 90px; }
[data-mon="status"].is-bad { color: #FF8A8E; }
.pl { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.pl.is-on { opacity: 1; transform: none; }
.sm-scene.dim { filter: saturate(.7) brightness(.55); }

/* the drawings: blue line art on navy */
.d-floor { fill: #0A1638; }
.d-rail, .d-roll { fill: #1B3474; }
.d-plate { fill: rgba(111,168,255,.1); stroke: #6FA8FF; stroke-width: 2; }
.d-pocket { fill: none; stroke: rgba(141,182,255,.45); stroke-width: 1.5; }
.d-tab { fill: #DCE9FF; }
.d-move { animation: d-move 6s linear infinite; }
@keyframes d-move { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.d-board { fill: #2A3F7A; stroke: #6FA8FF; stroke-width: 2; }
.d-grain { fill: none; stroke: rgba(141,190,255,.35); stroke-width: 1.4; }
.d-knot { fill: none; stroke: #8FC4FF; stroke-width: 2; }
.d-crack { fill: none; stroke: #CFE6FF; stroke-width: 2.4; stroke-linejoin: round; }
.d-dent { fill: rgba(207,230,255,.25); stroke: #CFE6FF; stroke-width: 1.5; }
.d-zoom { transform-origin: 385px 192px; transform: scale(2.2); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.d-zone { fill: rgba(111,168,255,.06); stroke: rgba(141,182,255,.4); stroke-width: 1.5; stroke-dasharray: 6 5; }
.d-label { font: 500 12px 'IBM Plex Mono', monospace; fill: #8DB6FF; }
.d-door { fill: #6FA8FF; }
.d-desk, .d-shelf { fill: #1F3B82; stroke: #6FA8FF; stroke-width: 1.5; }
.d-route { fill: none; stroke: rgba(141,182,255,.45); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.d-route.lit { stroke: #6FE3FF; animation: d-route 1.2s linear infinite; }
@keyframes d-route { to { stroke-dashoffset: -18; } }
.d-parcel { fill: #E9B872; } .d-tape { stroke: #8A5A24; stroke-width: 2; }
.d-person { fill: #DCE9FF; } .d-person.staff { fill: #FFC46B; }
.d-table { fill: #1F3B82; stroke: #6FA8FF; stroke-width: 2; }
.d-chair { fill: rgba(111,168,255,.15); stroke: rgba(141,182,255,.45); stroke-width: 1.5; }
.d-dish { fill: #fff; opacity: .85; }

/* boxes laid over the drawing, arriving one after another */
.sm-box { position: absolute; border: 2px solid #6FC3FF; border-radius: 5px; opacity: 0; transform: scale(1.25); }
.pl.is-on .sm-box { animation: sm-pop .45s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--n, 0) * .35s) forwards; }
@keyframes sm-pop { to { opacity: 1; transform: none; } }
.sm-box em { position: absolute; left: -2px; bottom: 100%; margin-bottom: 3px; padding: 2px 6px; border-radius: 4px; font: 600 10.5px/1.3 'IBM Plex Mono', monospace; font-style: normal; color: #fff; white-space: nowrap; background: #1D5FE0; }
.sm-box.info { border-style: dashed; }
.sm-box.ok { border-color: #3DDC97; } .sm-box.ok em { background: #1F9D6B; }
.sm-box.bad { border-color: #FF5C61; background: rgba(255,92,97,.12); box-shadow: 0 0 18px -4px rgba(255,92,97,.8); } .sm-box.bad em { background: #D93A40; }
.sm-box.mute { border-color: #8FA3C8; border-style: dashed; } .sm-box.mute em { background: #4A5F8F; text-decoration: line-through; }
.sm-box.tile { border: 1px dashed rgba(141,182,255,.5); border-radius: 0; }
.pl.is-on .sm-box.tile { animation: sm-tile 3s ease-in-out calc(var(--n, 0) * .5s) infinite; opacity: .3; transform: none; }
@keyframes sm-tile { 0%, 100% { background: transparent; opacity: .3; } 15% { background: rgba(111,227,255,.18); opacity: 1; } 40% { background: transparent; opacity: .5; } }
.sm-sweep { position: absolute; top: 12%; bottom: 12%; left: 12%; width: 3px; background: linear-gradient(transparent, #6FE3FF, transparent); box-shadow: 0 0 16px #6FE3FF; }
.pl.is-on .sm-sweep { animation: sm-sweep 3s ease-in-out infinite; }
@keyframes sm-sweep { 0% { left: 13%; } 50% { left: 87%; } 100% { left: 13%; } }
.sm-live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font: 500 11px/1 'IBM Plex Mono', monospace; color: #EAF2FF; background: rgba(7,16,42,.8); border: 1px solid rgba(141,182,255,.25); }
.sm-live i { width: 7px; height: 7px; border-radius: 999px; background: #FF5C61; animation: ph-pend 1.4s ease-in-out infinite; }

/* cards: dark blue glass over the drawing */
.sm-card { position: absolute; left: 50%; top: 50%; width: min(80%, 430px); transform: translate(-50%, -50%); padding: 16px 18px; border-radius: 16px; background: rgba(13,28,72,.88); border: 1px solid rgba(141,182,255,.3); backdrop-filter: blur(10px); color: #EAF2FF; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 40px -20px rgba(47,123,255,.6); }
.sm-card.c { display: flex; flex-direction: column; }
.sm-card:has(.sm-rack) { flex-direction: row; gap: 18px; align-items: center; }
.sm-t { font: 500 10.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6FC3FF; margin: 2px 0 10px; }
.sm-row, .sm-p, .sm-chips span, .sm-flow span { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; transition-delay: calc(.3s + var(--n, 0) * .35s); }
.pl.is-on .sm-row, .pl.is-on .sm-p, .pl.is-on .sm-chips span, .pl.is-on .sm-flow span { opacity: 1; transform: none; }
.sm-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(141,182,255,.14); margin-bottom: 7px; }
.sm-row i { width: 9px; height: 9px; flex: none; border-radius: 999px; background: #6FC3FF; }
.sm-row.ok i { background: #3DDC97; } .sm-row.bad i { background: #FF5C61; box-shadow: 0 0 10px rgba(255,92,97,.8); }
.sm-row b { display: block; font-size: 13.5px; color: #fff; } .sm-row.bad b { color: #FF8A8E; }
.sm-row small { font-size: 12px; color: #9FB3D9; }
.sm-p { font-size: 14px; line-height: 1.55; color: #DCE7FF; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chips span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(79,139,255,.2); color: #CFE0FF; font-weight: 500; }
.sm-file { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(141,182,255,.16); margin-bottom: 4px; }
.sm-file span { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--blue, #1D5FE0); }
.sm-file b { display: block; font-size: 14px; color: #fff; } .sm-file small { font-size: 12px; color: #9FB3D9; }
.sm-card .sm-t + .sm-chips { margin-bottom: 2px; }
.sm-card .sm-file + .sm-t { margin-top: 14px; }
.sm-btn { align-self: flex-start; margin-top: 14px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #2E6FEE, #1A56D1); }
.sm-rack { flex: none; width: 80px; display: grid; gap: 6px; }
.sm-rack i { position: relative; height: 24px; border-radius: 6px; background: #0A1538; border: 1px solid rgba(141,182,255,.25); }
.sm-rack i::before, .sm-rack i::after { content: ''; position: absolute; top: 8px; width: 6px; height: 6px; border-radius: 999px; background: #3DDC97; animation: ph-pend .9s ease-in-out infinite; }
.sm-rack i::before { left: 10px; } .sm-rack i::after { left: 22px; animation-delay: -.45s; background: #6FE3FF; }
.sm-info { flex: 1; min-width: 0; } .sm-info b { display: block; font-size: 15px; color: #fff; } .sm-info small { display: block; font-size: 12px; color: #9FB3D9; }
.sm-bar { display: block; margin: 10px 0 8px; height: 6px; border-radius: 6px; background: rgba(141,182,255,.2); overflow: hidden; }
.sm-bar em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue, #1D5FE0), var(--cyan, #33C3F0)); }
.pl.is-on .sm-bar em { animation: sm-run 2.4s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes sm-run { to { width: 100%; } }
.sm-toast { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 12px; max-width: 72%; padding: 12px 14px; border-radius: 14px; background: rgba(13,28,72,.9); border: 1px solid rgba(255,92,97,.55); box-shadow: 0 0 30px -8px rgba(255,92,97,.7); opacity: 0; transform: translateX(24px); transition: opacity .5s .3s, transform .6s cubic-bezier(.2,.7,.2,1) .3s; }
.pl.is-on .sm-toast { opacity: 1; transform: none; }
.sm-toast i { width: 10px; height: 10px; flex: none; border-radius: 999px; background: #FF5C61; animation: ph-pend 1s ease-in-out infinite; }
.sm-toast b { display: block; font-size: 14px; color: #fff; } .sm-toast small { font-size: 12px; color: #9FB3D9; }
.sm-verdict { position: absolute; right: 14px; bottom: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(13,28,72,.9); border: 1px solid rgba(255,92,97,.55); opacity: 0; transform: scale(.9); transition: opacity .5s 1s, transform .6s cubic-bezier(.2,.7,.2,1) 1s; }
.pl.is-on .sm-verdict { opacity: 1; transform: none; }
.sm-verdict b { display: block; font: 700 26px/1 'Space Grotesk', sans-serif; color: #FF8A8E; } .sm-verdict small { font-size: 12px; color: #9FB3D9; }
.sm-caption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(7,16,42,.88); font-size: 13px; color: #CFE0FF; }
.sm-caption span { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: #F26B3A; }
.sm-caption b { color: #fff; }
.sm-chart .raw { fill: none; stroke: rgba(255,138,142,.8); stroke-width: 2; }
.sm-chart .smooth { fill: none; stroke: #3DDC97; stroke-width: 3; stroke-dasharray: 400; stroke-dashoffset: 400; }
.pl.is-on .sm-chart .smooth { animation: sm-draw 1.6s ease .5s forwards; }
@keyframes sm-draw { to { stroke-dashoffset: 0; } }
.sm-key { display: flex; gap: 16px; margin-top: 8px; font: 500 11px/1 'IBM Plex Mono', monospace; color: #9FB3D9; }
.sm-key span::before { content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.sm-key .raw::before { background: #FF8A8E; } .sm-key .smooth::before { background: #3DDC97; }
.sm-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-flow span { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(141,182,255,.3); color: #CFE0FF; }
.pl.is-on .sm-flow span:nth-child(4) { background: #1F9D6B; border-color: #3DDC97; color: #fff; }
.is-still .pl, .is-still .sm-box, .is-still .sm-row, .is-still .sm-p { transition: none; animation: none; opacity: 1; transform: none; }
@media (max-width: 640px) {
  .sm-card { width: 90%; padding: 10px 12px; } .sm-row { padding: 6px 8px; margin-bottom: 5px; } .sm-row b { font-size: 12px; } .sm-row small { font-size: 10.5px; }
  .sm-p { font-size: 12px; } .sm-t { margin-bottom: 6px; } .sm-card .sm-chips:last-child, .sm-file small { display: none; } .sm-box em { font-size: 9px; padding: 1px 4px; }
  .sm-toast { max-width: 86%; padding: 8px 10px; } .sm-toast small { display: none; } .sm-verdict b { font-size: 20px; } .sm-caption { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .d-move, .d-route.lit, .sm-sweep, .sm-tile, .sm-live i, .sm-toast i, .sm-rack i::before, .sm-rack i::after { animation: none !important; } }