/* Case-study drawer visuals: layered pair (browser + phone/detail) */
.cv{--f:#f3f3f0;--a:#141416;--a2:#141416;--k:#141416;--c:#fff;--l:#e6e6e1;position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--f);container-type:inline-size}
.cv[data-cv="esim"]{--f:#fbe3ef;--a:#e20074;--l:#f2d3e2}
.cv[data-cv="ids"]{--f:#fbe3ef;--a:#e20074;--l:#f2d3e2}
.cv[data-cv="advising"]{--f:#e3efe6;--a:#00843d;--l:#d6e6da}
.cv[data-cv="sonora"]{--f:#0a0f14;--a:#b8a8f0;--l:#1c1830;background:radial-gradient(130% 110% at 32% 0%,#141b22 0%,#0a0f14 55%,#05080b 100%)}
.cv[data-cv="lineara"]{--f:#0d1f1a;--a:#00c880;--l:#162e25;background:radial-gradient(130% 100% at 32% 0%,#143029 0%,#0a1612 64%)}
.cv[data-cv="email"]{--f:#e8f2ec;--a:#007a33;--l:#c8e0d0}
.cv span{display:block}
.cv .rf{position:absolute;display:flex;flex-direction:column;overflow:hidden;background:var(--c);box-shadow:0 .2cqw .6cqw rgba(0,0,0,.06),0 3cqw 6cqw -2cqw rgba(30,0,15,.4)}
.cv .ch{display:flex;align-items:center;gap:.5cqw;flex:none;height:2.2cqw;padding:0 1cqw;border-bottom:.12cqw solid var(--l)}
.cv .ch i{width:.7cqw;height:.7cqw;border-radius:50%;background:var(--l)}
.cv .pic{position:relative;flex:1;overflow:hidden;background:color-mix(in oklch,var(--a) 10%,var(--c))}
.cv .pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cv .pan img{height:auto;object-fit:initial;backface-visibility:hidden;transform:translate3d(0,0,0)}
.cv .pic iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.cv .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;pointer-events:none}
.cv .back{left:6cqw;top:3.4cqw;width:56cqw;height:40cqw;border-radius:1cqw 1cqw 0 0}
.cv .front{left:55cqw;top:7.5cqw;width:39cqw;height:22cqw;border-radius:1cqw}
/* one phone-shaped frame for every mobile preview: bigger than before, not tablet-wide */
.cv .phone{left:64cqw;top:3cqw;width:20cqw;height:43cqw;border-radius:2.4cqw;padding:.5cqw;background:#101012}
.cv .phone .pic{border-radius:2cqw}
/* bigger left frames, less field margin; sonora matches the demo video's aspect so it isn't cropped */
.cv[data-cv="sonora"] .back{left:3cqw;top:3cqw;width:57cqw;height:34.4cqw}
.cv[data-cv="lineara"] .back{left:3cqw;top:3cqw;width:53cqw;height:39cqw}
/* lineara's player-card modal sits to the right of the board (no overlap), portrait to match the crop (0.662) */
.cv[data-cv="lineara"] .front{left:58cqw;top:2cqw;width:26cqw;height:39.3cqw;border-radius:1.2cqw}
/* phone-frame live embeds render at a true mobile viewport, then scale to fit (set by JS) */
.cv .phone .pic iframe{inset:auto;top:0;left:0;width:390px;height:auto;transform-origin:top left}

/* motion runs only while the drawer is open (.play) */
.cv:not(.play) *{animation:none!important}
.cv.play .back{animation:cvUp 1s cubic-bezier(.2,.7,.2,1) .05s both}
.cv.play .fl{animation:cvIn .8s cubic-bezier(.2,.7,.2,1) .25s both,cvBob 7s ease-in-out 1.05s infinite}
.cv.play .pan img{will-change:transform;animation:cvPan 14s cubic-bezier(.45,0,.55,1) 1.4s infinite alternate}
.cv.play .phone .pan img{animation-duration:11s;animation-delay:2s}
@keyframes cvUp{from{opacity:0;translate:0 6cqw}to{opacity:1;translate:0 0}}
@keyframes cvIn{from{opacity:0;translate:0 2.4cqw}to{opacity:1;translate:0 0}}
@keyframes cvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.7cqw)}}
/* scrolls the screenshot from top to bottom; 26cqw ≈ visible height of the frame */
@keyframes cvPan{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,min(0px,calc(-100% + 26cqw)),0)}}
@media (prefers-reduced-motion:reduce){.cv *{animation:none!important}}

/* arcade theme: add class "arc" to .cv */
.cv.arc{--c:#07060f;--k:#f4f1ff;--l:#2c2552;background:#100d22}
.cv.arc[data-cv="esim"]{--a:#ff4fd8;--a2:#ffe14d}
.cv.arc[data-cv="ids"]{--a:#3ff0ff;--a2:#ff4fd8}
.cv.arc[data-cv="advising"]{--a:#5dff6a;--a2:#ffe14d}
.cv.arc::before{content:"";position:absolute;inset:0;opacity:.55;background:linear-gradient(var(--l) .12cqw,transparent .12cqw) 0 0/2.4cqw 2.4cqw,linear-gradient(90deg,var(--l) .12cqw,transparent .12cqw) 0 0/2.4cqw 2.4cqw}
.cv.arc::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.07) 3px 4px)}
.cv.arc .rf{border:.3cqw solid var(--k);border-radius:0;box-shadow:.9cqw .9cqw 0 var(--a)}
.cv.arc .front,.cv.arc .phone{box-shadow:.9cqw .9cqw 0 var(--a2)}
.cv.arc .phone{padding:.4cqw;background:var(--k)}.cv.arc .phone .pic{border-radius:0}
.cv.arc .ch{background:var(--c);border-bottom:.3cqw solid var(--k)}
.cv.arc .ch i{border-radius:0;background:var(--a)}.cv.arc .ch i:nth-child(2){background:var(--a2)}
.cv.arc.play .fl{animation-timing-function:cubic-bezier(.2,.7,.2,1),steps(4)}