.mvc-story-motion{position:relative;width:100%;aspect-ratio:1080/727;overflow:hidden}

.mvc-story-canvas{position:absolute;left:0;top:0;width:1080px;height:727px;transform-origin:top left}

.mvc-story-desktop{position:absolute;left:50px;top:76px;width:680px;height:601px;overflow:hidden;border-radius:0 0 10px 10px;background:#f5fafc;box-shadow:0 2px 4px #0002}

.mvc-home-demo .mvc-story-desktop-page{width:680px;height:900.056px;border-radius:0;animation:mvcStoryDesktop 20s linear infinite}

.mvc-home-demo .mvc-story-nav{position:absolute;left:0;top:0;width:680px;height:42.5px;border-radius:0}

.mvc-home-demo .mvc-story-browser{position:absolute;left:50px;top:50px;width:680px;height:26px;border-radius:0}

.mvc-story-mobile{position:absolute;left:783px;top:135px;width:235px;height:480px;overflow:hidden;border-radius:0 0 21px 21px;background:#fff}

.mvc-home-demo .mvc-story-mobile-page{width:235px;height:814.04px;border-radius:0;animation:mvcStoryMobile 20s linear infinite}

.mvc-story-status{position:absolute;left:783px;top:110px;width:235px;height:25px;background:white;border-radius:21px 21px 0 0}

.mvc-home-demo .mvc-story-phone{position:absolute;left:770px;top:98px;width:260px;height:530px;border-radius:0;pointer-events:none}

.mvc-story-time{position:absolute;left:800px;top:118px;font:600 9.124px Arial;color:#000;letter-spacing:-.365px}

.mvc-home-demo .mvc-story-battery{position:absolute;left:985px;top:120px;width:15.0285px;height:7.51423px;border-radius:0}

.mvc-home-demo .mvc-story-notch{position:absolute;left:858px;top:110px;width:84px;height:16px;border-radius:0}

.mvc-home-demo .mvc-story-notch-left{position:absolute;left:851px;top:110px;width:7px;height:7px;border-radius:0}

.mvc-home-demo .mvc-story-notch-right{position:absolute;left:942px;top:110px;width:7px;height:7px;border-radius:0;transform:scaleX(-1)}

.mvc-story-controls{display:flex;justify-content:center;margin-top:16px}

.mvc-story-toggle{font:inherit;font-size:13px;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:30px;padding:8px 14px;cursor:pointer}

.mvc-home-demo .mvc-story-motion.is-paused img{animation-play-state:paused}
@keyframes mvcStoryDesktop{0%,10%,100%{transform:translateY(-56px)}75%,85%{transform:translateY(-299.056px)}}
@keyframes mvcStoryMobile{0%,10%,100%{transform:translateY(-37px)}75%,85%{transform:translateY(-334.04px)}}
.mvc-story-mobile-nav{position:absolute;left:0;top:0;width:235px;height:71px;overflow:hidden;background:#fff}
.mvc-home-demo .mvc-story-mobile-nav img{position:absolute;left:0;top:-37px;width:235px;height:814.04px;border-radius:0}
.mvc-home-demo{position:relative;margin:0;padding:0 0 16px;background:#8ed5f8;border-radius:4px;overflow:hidden;color:#1b4658}
.mvc-home-demo img{display:block;max-width:none;object-fit:fill;transition:none}
.mvc-home-demo-link{position:absolute;inset:0;z-index:2}
.mvc-home-demo .mvc-story-controls{position:relative;z-index:3;margin:0;display:flex;pointer-events:none}
.mvc-home-demo .mvc-story-toggle{pointer-events:auto;margin-top:0;color:#31596a;border-color:#7daabd;background:transparent;font-size:12px;padding:6px 12px}
.mvc-home-demo .mvc-story-desktop-page,.mvc-home-demo .mvc-story-mobile-page{animation-play-state:paused}
.mvc-home-demo.is-playing .mvc-story-desktop-page,.mvc-home-demo.is-playing .mvc-story-mobile-page{animation-play-state:running}
.mvc-home-demo-link:focus-visible{outline:3px solid #31596a;outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.mvc-home-demo .mvc-story-desktop-page,.mvc-home-demo .mvc-story-mobile-page{animation-play-state:paused}}

/* Homepage only: reduce devices 15% while preserving the thumbnail footprint. */
.mvc-home-demo{padding-bottom:0}
.mvc-home-demo .mvc-story-motion{aspect-ratio:1.45}

/* Logo introduction, followed by the scrolling desktop/mobile demo. */
.mvc-home-logo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;animation:mvcHomeLogo 26s ease-in-out infinite;animation-play-state:paused}
.mvc-home-demo .mvc-home-logo img{width:76%;height:auto}
.mvc-home-demo .mvc-story-motion{animation:mvcHomeReveal 26s ease-in-out infinite;animation-play-state:paused}
.mvc-home-demo .mvc-story-desktop-page{animation-name:mvcHomeDesktop;animation-duration:26s}
.mvc-home-demo .mvc-story-mobile-page{animation-name:mvcHomeMobile;animation-duration:26s}
.mvc-home-demo.is-playing .mvc-home-logo,.mvc-home-demo.is-playing .mvc-story-motion{animation-play-state:running}
@keyframes mvcHomeLogo{0%,10%,100%{opacity:1;transform:translateY(0)}14%,94%{opacity:0;transform:translateY(-10px)}}
@keyframes mvcHomeReveal{0%,10%,100%{opacity:0}15%,92%{opacity:1}96%{opacity:0}}
@keyframes mvcHomeDesktop{0%,20%{transform:translateY(-56px)}73.076923%,100%{transform:translateY(-299.056px)}}
@keyframes mvcHomeMobile{0%,20%{transform:translateY(-37px)}73.076923%,100%{transform:translateY(-334.04px)}}
@media(prefers-reduced-motion:reduce){.mvc-home-demo .mvc-home-logo{animation:none;opacity:1}.mvc-home-demo .mvc-story-motion{animation:none;opacity:0}}

/* Photographic logo frame from the supplied Figma composition. */
.mvc-home-demo .mvc-home-logo img{width:100%;height:100%;object-fit:cover}
@keyframes mvcHomeLogo{0%,10%,100%{opacity:1}14%,94%{opacity:0}}

.mvc-home-demo .mvc-home-logo img{position:absolute;inset:0;min-height:0}

/* Supplied leaf photography and crisp white SVG wordmark. */
.mvc-home-demo .mvc-home-logo .mvc-home-logo-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.mvc-home-demo .mvc-home-logo .mvc-home-logo-mark{position:absolute;inset:auto;left:14.25%;top:50%;width:71.5%;height:auto;object-fit:contain;transform:translateY(-50%)}

/* Match the case-study flower: cropped at the right and bottom, behind the devices. */
.mvc-home-demo::before{content:"";position:absolute;right:-15%;bottom:-12%;width:70%;height:85%;background:url("assets/mvc/flower.png.webp") no-repeat right bottom / contain;pointer-events:none}
.mvc-home-demo .mvc-story-canvas{z-index:1}

/* Keep the flower fixed; only its visibility follows the demo frame. */
.mvc-home-demo::before{animation:mvcHomeFlower 26s ease-in-out infinite;animation-play-state:paused}
.mvc-home-demo.is-playing::before{animation-play-state:running}
@keyframes mvcHomeFlower{0%,10%,100%{opacity:0}15%,92%{opacity:1}96%{opacity:0}}
@media(prefers-reduced-motion:reduce){.mvc-home-demo::before{animation:none;opacity:0}}

/* Preserve logo centering in both pointer states. */
.mvc-home-demo .mvc-home-logo .mvc-home-logo-mark,.project:hover .mvc-home-demo .mvc-home-logo .mvc-home-logo-mark{transform:translateY(-50%)}

/* Darken only the logo-frame photograph, keeping the white wordmark crisp. */
.mvc-home-logo::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:1;pointer-events:none}
.mvc-home-demo .mvc-home-logo .mvc-home-logo-mark{z-index:2}

/* Match the Apple Vision Pro card's hover zoom without disrupting the demo animation. */
.mvc-home-demo .mvc-home-logo,.mvc-home-demo .mvc-story-motion{scale:1;transition:scale .35s ease;transform-origin:center}
.mvc-home-project:hover .mvc-home-logo,.mvc-home-project:hover .mvc-story-motion{scale:1.025}
@media(prefers-reduced-motion:reduce){.mvc-home-demo .mvc-home-logo,.mvc-home-demo .mvc-story-motion{transition:none}.mvc-home-project:hover .mvc-home-logo,.mvc-home-project:hover .mvc-story-motion{scale:1}}