/* Realistic device mockups for project screens (real Figma frames) */
.case .device.mock{height:auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;padding:0;color:inherit;width:100%;min-width:0;display:grid;place-items:center}
/* Desktop monitor */
.mock-desktop{width:100%;max-width:760px;margin:0 auto;position:relative;--sh:900/1440}
.md-bezel{position:relative;padding:2.1% 2.1% 3.4%;border-radius:16px 16px 12px 12px;background:linear-gradient(160deg,#3b3b40 0%,#17171a 45%,#0c0c0e 100%);box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.22),0 28px 50px rgba(0,0,0,.55),0 8px 18px rgba(240,25,35,.16)}
.md-cam{position:absolute;top:1%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4a63,#06080c 70%);box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.md-screen{position:relative;overflow:hidden;border-radius:5px;background:#000;aspect-ratio:1440/900;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.md-img{display:block;width:100%;height:auto;transform:translateY(0);will-change:transform}
.md-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,rgba(255,255,255,0) 40%),linear-gradient(0deg,rgba(0,0,0,.12),rgba(0,0,0,0) 22%)}
.md-neck{width:17%;height:clamp(38px,6.5vw,66px);margin:-1px auto 0;background:linear-gradient(90deg,#6f6f75 0%,#d8d8de 38%,#f0f0f4 52%,#a2a2a9 100%);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%);box-shadow:inset 0 10px 14px rgba(0,0,0,.35)}
.md-base{width:34%;height:9px;margin:0 auto;border-radius:0 0 12px 12px/0 0 8px 8px;background:linear-gradient(180deg,#e6e6ec 0%,#9c9ca4 70%,#6d6d74 100%);box-shadow:0 14px 22px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.12) inset}
/* tall page: slow scroll preview inside the screen */
.md-scroll .md-img{transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}
.case:hover .md-scroll .md-img,.md-scroll:hover .md-img,.md-scroll:focus-within .md-img{transform:translateY(var(--scroll,-67.8%));transition:transform 9s linear}
/* Tablet (portrait) */
.mock-tablet{width:min(100%,330px);margin:0 auto}
.mt-frame{position:relative;padding:3.6%;border-radius:34px;background:linear-gradient(155deg,#4a4a50 0%,#1b1b1e 40%,#0d0d0f 100%);box-shadow:0 0 0 1.5px #000,inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.28),0 30px 54px rgba(0,0,0,.55),0 10px 22px rgba(240,25,35,.16)}
.mt-cam{position:absolute;top:1.4%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4a63,#06080c 70%)}
.mt-screen{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:1024/1366;background:#000}
.mt-screen img{display:block;width:100%;height:100%;object-fit:cover}
/* case page intro */
.mock-hero{margin:58px auto 20px;max-width:880px}
.case-hero{padding-bottom:120px}
@media(max-width:760px){.md-bezel{border-radius:10px}.mt-frame{border-radius:24px}.mt-screen{border-radius:14px}.mock-hero{margin-top:40px}.case-hero{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){.md-scroll .md-img,.md-scroll:hover .md-img,.case:hover .md-scroll .md-img{transition:none;transform:none}}

/* Photo-real scenes: Figma screens composited into the reference photos (matrix3d warp, stage scaled by script.js) */
.scene{position:relative;width:100%;max-width:760px;margin:0 auto;border-radius:18px;overflow:hidden;--s:.9;aspect-ratio:736/560;background:#e9e9ec;box-shadow:0 26px 60px rgba(0,0,0,.5),0 6px 22px rgba(240,25,35,.16)}
.scene.s-ipad{aspect-ratio:736/551;max-width:640px;background:#dcd9da}
.scene-stage{position:absolute;left:0;top:0;width:736px;height:560px;transform:scale(var(--s));transform-origin:0 0}
.s-ipad .scene-stage{height:551px}
.scene-bg,.scene-fg{position:absolute;left:0;top:0;width:736px;height:100%;display:block;max-width:none}
.scene-screen{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;overflow:hidden;background:#000;border-radius:16px}
.scene-screen-ipad{width:1024px;height:768px;border-radius:44px;background:#1a0c44;overflow:hidden}
.scene-shot{display:block;max-width:none;position:relative}
.s-mac .scene-shot{width:1440px;height:auto}
.scene-screen-ipad .scene-shot{height:768px;width:auto;margin:0 auto}
.scene-fill{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(26px) saturate(1.2);opacity:.9;max-width:none}
.scene-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 24%,rgba(255,255,255,0) 42%),linear-gradient(0deg,rgba(0,0,0,.12),rgba(0,0,0,0) 20%)}
.md-scroll .md-img{transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}
.case:hover .md-scroll .md-img,.md-scroll:hover .md-img{transform:translateY(var(--scroll,-67.8%));transition:transform 9s linear}
.mock-hero .scene{max-width:860px}
@media(prefers-reduced-motion:reduce){.s-mac.md-scroll .md-img,.case:hover .md-scroll .md-img,.md-scroll:hover .md-img{transition:none;transform:none}}

/* iPad in hands (portrait, QNL) */
.scene.s-hands{aspect-ratio:736/883;max-width:470px;background:#2a1650}
.s-hands .scene-stage{height:883px}
.scene-screen-hands{width:1024px;height:1626px;border-radius:0;background:#1a0c44}
.s-hands .scene-shot{width:1024px;height:auto}

/* WAVA court scene (MacBook on a volleyball court) */
.scene.s-court{aspect-ratio:1100/823;max-width:760px;background:#0f1b1d}
.s-court .scene-stage{width:1100px;height:823px}
.s-court .scene-bg,.s-court .scene-fg{width:1100px;height:823px}
.scene-screen-court{width:1440px;height:940px;border-radius:0;background:#000}
.s-court .scene-shot{width:1440px;height:auto}
.mock-hero .scene.s-court{max-width:860px}

/* WAVA court screen: looping opening sequence (opening 1 -> opening 2 -> homepage) */
.scene-screen-court .wslide{position:absolute;left:0;top:0;width:1440px;height:940px;object-fit:cover;max-width:none;opacity:0;transform-origin:50% 50%;animation:wFade 7.2s ease-in-out infinite both;will-change:opacity,transform}
.scene-screen-court .wslide:nth-child(2){animation-delay:2.4s}
.scene-screen-court .wslide:nth-child(3){animation-delay:4.8s}
@keyframes wFade{0%{opacity:0;transform:scale(1)}9%{opacity:1}30%{opacity:1}39%{opacity:0;transform:scale(1.07)}100%{opacity:0;transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.scene-screen-court .wslide{animation:none;opacity:0;transform:none}.scene-screen-court .wslide.is-main{opacity:1}}

/* Studio Display (BPS): flat front-on screen, plain rect */
.scene.s-studio{aspect-ratio:735/492;background:#5a626d}
.s-studio .scene-stage{width:735px;height:492px}
.s-studio .scene-bg{width:735px}
.scene-screen-studio{width:1440px;height:815px;border-radius:10px}
/* keep all four sticky project cards the same height so none peeks out from behind another */
@media(min-width:900px){.case{min-height:660px}}

/* Finished photo mockup shown as is (Bety MacBook): 4:3, gentle zoom on hover */
.scene.s-photo{aspect-ratio:4/3;background:#e9e9ec}
.s-photo .scene-stage{width:1600px;height:1200px}
.s-photo .scene-bg{width:1600px;transform-origin:50% 55%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.case:hover .s-photo .scene-bg,.s-photo:hover .scene-bg{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.s-photo .scene-bg{transition:none}.case:hover .s-photo .scene-bg,.s-photo:hover .scene-bg{transform:none}}