/* Korv Glanz case studies: real-footage compare, scroll-driven steps, hero and image motion */

/* ---------- before / after: what the camera records vs what Korv Glanz sees ---------- */
.cm-compare-wrap { margin-top: 48px; }
/* tall photos keep their shape but never outgrow the screen */
.cm-compare { position: relative; margin: 0 auto; width: min(100%, calc(78vh * var(--ar, 1.78))); border-radius: 26px; overflow: hidden; background: #050B1F; border: 1px solid rgba(141,182,255,.2); box-shadow: 0 60px 120px -60px rgba(47,123,255,.6); --pos: 55%; touch-action: pan-y; user-select: none; }
.cm-compare img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cm-compare-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cm-compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(111,227,255,.9); pointer-events: none; }
.cm-compare-line i { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); }
.cm-compare-line i::before, .cm-compare-line i::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid var(--navy, #07102A); border-width: 0 0 2px 2px; }
.cm-compare-line i::before { left: 11px; transform: rotate(45deg); }
.cm-compare-line i::after { right: 11px; transform: rotate(-135deg); }
.cm-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cm-compare input:focus-visible + .cm-compare-line i { outline: 3px solid var(--cyan, #33C3F0); outline-offset: 3px; }
.cm-tag { position: absolute; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #EAF2FF; background: rgba(7,16,42,.72); border: 1px solid rgba(141,182,255,.25); backdrop-filter: blur(8px); pointer-events: none; }
.cm-tag i { width: 7px; height: 7px; border-radius: 999px; background: #9FB3D9; }
.cm-tag.r i { background: var(--cyan, #33C3F0); box-shadow: 0 0 10px rgba(51,195,240,.9); }
.cm-tag.l { left: 16px; } .cm-tag.r { right: 16px; }
.cm-cap { margin: 14px auto 0; width: min(100%, calc(78vh * var(--ar, 1.78))); display: flex; align-items: center; gap: 10px; font: 500 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #8DB6FF; }
.cm-cap::before { content: ''; width: 18px; height: 1.5px; background: currentColor; }
@media (max-width: 640px) { .cm-tag { top: 10px; font-size: 9.5px; padding: 6px 9px; } .cm-tag.l { left: 10px; } .cm-tag.r { right: 10px; } }

/* ---------- how it works: footage stays in view while the steps scroll past ---------- */
.cm-story { display: grid; gap: 28px; }
@media (min-width: 1024px) { .cm-story { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; } }
.cm-stage { position: sticky; top: 84px; z-index: 2; border-radius: 26px; overflow: hidden; background: #050B1F; border: 1px solid rgba(141,182,255,.2); box-shadow: 0 50px 100px -50px rgba(47,123,255,.6); aspect-ratio: 16 / 10; }
@media (min-width: 1024px) { .cm-stage { top: calc(50vh - min(19vw, 300px)); } }
@media (max-width: 1023px) { .cm-stage { top: 72px; aspect-ratio: 16 / 9; } }
.cm-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
.cm-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.cm-frame.is-on { opacity: 1; }
.cm-frame.is-on img { transform: scale(1); }
.cm-frame figcaption { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .05em; color: #EAF2FF; background: rgba(7,16,42,.72); border: 1px solid rgba(141,182,255,.25); backdrop-filter: blur(8px); }
.cm-frame figcaption i { width: 7px; height: 7px; border-radius: 999px; background: #FF5C61; animation: cm-blink 1.6s ease-in-out infinite; }
@keyframes cm-blink { 50% { opacity: .3; } }
.cm-scan { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(111,227,255,.14) 85%, rgba(111,227,255,.6)); animation: cm-scan 4s cubic-bezier(.4,0,.2,1) infinite; pointer-events: none; }
@keyframes cm-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
.cm-hud { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(7,16,42,.78); border: 1px solid rgba(141,182,255,.22); backdrop-filter: blur(10px); }
.cm-hud b { font: 600 22px/1 'Space Grotesk', sans-serif; letter-spacing: -0.02em; color: #6FC3FF; min-width: 34px; }
.cm-hud span { flex: 1; font-weight: 600; color: #fff; font-size: 15px; }
.cm-hud em { flex: none; width: 110px; height: 3px; border-radius: 3px; background: rgba(141,182,255,.2); overflow: hidden; }
.cm-hud em::after { content: ''; display: block; height: 100%; width: var(--progress, 16%); background: linear-gradient(90deg, var(--blue, #1D5FE0), var(--cyan, #33C3F0)); transition: width .5s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 640px) { .cm-hud em { width: 60px; } .cm-hud span { font-size: 13.5px; } }

.cm-steps { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .cm-steps { gap: 0; padding: 4vh 0 22vh; } .cm-steps > .eo-card { margin-bottom: 16vh; } .cm-steps > .eo-card:last-child { margin-bottom: 0; } }
.cm-steps > .eo-card { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s, background .4s; }
@media (min-width: 1024px) {
  .cm-steps > .eo-card.in { opacity: .38; }
  .cm-steps > .eo-card.in.is-on { opacity: 1; transform: translateX(-10px); border-color: rgba(111,168,255,.5); background: linear-gradient(160deg, rgba(47,123,255,.18), rgba(255,255,255,.03)); box-shadow: 0 40px 80px -50px rgba(47,123,255,.8); }
}
.cm-steps .cs-no { transition: color .4s; }
.cm-steps > .eo-card.is-on .cs-no { color: #6FC3FF; }

/* ---------- hero: the illustration tilts with the pointer ---------- */
.cs-stage[data-cm-tilt] { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }

/* ---------- images open up as they arrive ---------- */
[data-cm-reveal] { clip-path: inset(10% 6% 10% 6% round 32px); }
[data-cm-reveal] img { transform: scale(1.14); transform-origin: 50% 50%; }

/* ---------- related case studies get a thumbnail ---------- */
.cm-thumb { display: block; margin: -10px -10px 18px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0B1638; }
.cm-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.85); }
.cs-card:hover .cm-thumb img { transform: scale(1.08); filter: saturate(1.05); }

@media (prefers-reduced-motion: reduce) {
  [data-cm-reveal] { clip-path: none; } [data-cm-reveal] img { transform: none; }
  .cm-scan, .cm-frame figcaption i { animation: none; }
  .cm-frame, .cm-frame img { transition: none; }
}