/* Motion is layered onto the existing site; its layout and content stay intact. */
html.opening-playing{overflow:hidden;scroll-behavior:auto}
.motion-opening[hidden]{display:none}
.motion-opening{position:fixed;inset:0;z-index:120;overflow:hidden;isolation:isolate;perspective:1400px;color:var(--ink)}
.opening-backdrop{position:absolute;inset:0;background:var(--paper);z-index:-3;overflow:hidden}
.opening-grid{position:absolute;inset:-30%;background-image:linear-gradient(#235ee809 1px,transparent 1px),linear-gradient(90deg,#235ee809 1px,transparent 1px);background-size:80px 80px;transform:perspective(1000px) rotateX(35deg) rotateZ(-18deg);mask-image:linear-gradient(transparent,#0009,transparent)}
.opening-ribbon{position:absolute;width:94vw;height:94vw;left:-36vw;top:-44vw;border:clamp(40px,11vw,170px) solid transparent;border-radius:28%;background:linear-gradient(145deg,#edf9fc,#9fbaf4 28%,#235ee8 55%,#133a98 72%,#a2e0e5) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;box-shadow:inset 12px 12px 40px #ffffff80;transform:rotate(-32deg)}
.opening-ribbon-secondary{left:auto;right:-43vw;top:35vh;width:80vw;height:80vw;opacity:.42;transform:rotate(24deg);border-width:6vw}
.opening-center-copy{position:absolute;left:0;right:0;top:calc(40% + clamp(35px,7vw,95px));text-align:center;font-size:clamp(12px,1.3vw,18px);letter-spacing:.16em;font-weight:500}
.opening-mark{position:absolute;left:4%;top:28px;font-size:11px;font-weight:600;letter-spacing:.09em;display:flex;align-items:center;gap:10px}
.opening-mark:before{content:'';width:6px;height:6px;background:var(--blue);border-radius:50%}
.opening-caption{position:absolute;left:4%;bottom:42px;font-size:12px;letter-spacing:.035em}
.opening-caption span{display:block;color:var(--muted);font:500 10px/1.5 Manrope,sans-serif;letter-spacing:.14em;margin-bottom:9px}
.opening-count{position:absolute;bottom:44px;right:4%;font:500 12px Manrope,sans-serif;letter-spacing:.1em;color:var(--muted)}
.opening-count b{font-weight:700;color:var(--blue)}
.opening-track{position:absolute;left:4%;right:4%;bottom:24px;height:1px;background:var(--line)}
.opening-track i{display:block;height:2px;width:100%;background:var(--blue);transform-origin:left}
.opening-logo{position:absolute;transform-origin:0 0;z-index:5;will-change:transform;white-space:nowrap;color:var(--ink);font-weight:800;letter-spacing:-.045em;line-height:1.2}
.opening-logo small{display:block;font-size:12px;font-weight:500;letter-spacing:.12em;margin-top:5px}
.opening-card{position:absolute;transform-origin:0 0;z-index:3;overflow:hidden;background:white;border:1px solid var(--line);box-shadow:0 35px 80px -25px #122d3b55;will-change:transform;pointer-events:none}
.opening-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-bottom:1px solid var(--line)}
.opening-card>span{display:block;padding:10px 13px;font-size:14px;font-weight:700;line-height:1.85}
.opening-card small{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:2px}
.opening-card.showcase-main>span{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 17px}
.opening-card.showcase-main strong{font-size:16px}.opening-card.showcase-main small{margin:0}
.opening-playing .site-header,.opening-playing main,.opening-playing .site-footer,.opening-playing .standard-cta-mobile{pointer-events:none}
.opening-playing .hero-copy>*{animation:none!important}
.motion-scroll-meter{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;z-index:55;pointer-events:none}
html.motion-off .motion-scroll-meter{display:none}
html.motion-off *,html.motion-off *:before,html.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.site-motion .project-card-image{overflow:hidden;perspective:900px}
html.site-motion .project-card-image img{transition:transform .75s var(--ease)}
html.site-motion .project-card-image:hover img{transform:scale(1.035)}
html.site-motion .home-system-links>a,html.site-motion .page-guide-grid>a{transition:border-color .25s,background .25s,transform .4s var(--ease)}
html.site-motion .home-system-links>a:hover,html.site-motion .page-guide-grid>a:hover{transform:translateY(-4px);border-color:var(--blue)}
html.site-motion .button{transition:background .25s,box-shadow .3s,transform .3s var(--ease)}
html.site-motion .button:hover{transform:translateY(-2px);box-shadow:0 8px 24px -12px #122d3b66}
@keyframes menu-enter{from{opacity:.2;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
html.site-motion #navigation.open{animation:menu-enter .35s var(--ease)}
.motion-preview-tools{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:4px;padding:6px;background:#fffffff2;backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 32px #122d3b15;color:var(--ink);font-size:11px;line-height:1.5}
.motion-preview-tools>span{padding:0 10px;color:var(--muted);font-size:10px}
.motion-preview-tools button,.motion-preview-tools a{display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:5px;color:var(--ink);min-height:40px;padding:8px 12px;font-weight:600;font-size:11px;text-decoration:none;white-space:nowrap}
.motion-preview-tools [data-opening-replay]{background:var(--ink);color:white}
.motion-preview-tools [data-motion-toggle][aria-pressed=true]{background:#e8eef5;color:var(--blue)}
.opening-playing .motion-preview-tools{visibility:hidden}
@media(max-width:640px){.opening-mark{top:25px;left:22px;font-size:9px}.opening-ribbon{width:155vw;height:155vw;top:-40vw;left:-94vw;border-width:20vw}.opening-ribbon-secondary{left:auto;right:-108vw;top:50vh;opacity:.3;border-width:11vw}.opening-center-copy{font-size:11px;top:calc(32% + 34px);letter-spacing:.05em}.opening-caption{left:22px;bottom:45px;font-size:11px;max-width:75%}.opening-count{right:22px;bottom:45px;font-size:10px}.opening-track{left:22px;right:22px}.opening-grid{background-size:48px 48px}.motion-preview-tools{left:12px;right:12px;bottom:calc(100px + env(safe-area-inset-bottom));justify-content:space-between;padding:5px;gap:0;font-size:10px}.motion-preview-tools>span{padding-inline:6px;font-size:9px}.motion-preview-tools button,.motion-preview-tools a{font-size:10px;padding-inline:8px;min-height:38px}.opening-logo small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.motion-opening,.motion-scroll-meter{display:none!important}}
/* Keep the wordmark and the short opening caption readable over the material. */
.opening-ribbon{opacity:.56}.opening-ribbon-secondary{opacity:.3}
.opening-center-copy{top:calc(40% + clamp(65px,11vw,145px))}
@media(max-width:640px){.opening-center-copy{top:calc(27% + 95px)}}
.opening-caption{z-index:6;transform:translateZ(0);isolation:isolate}
.opening-caption>span{white-space:nowrap}
.menu-open .motion-preview-tools{visibility:hidden}
.material-capture .site-header,.material-capture main,.material-capture .site-footer,.material-capture .standard-cta-mobile{visibility:hidden}
.motion-opening.is-material>*:not(.opening-backdrop){visibility:hidden}
.motion-opening{perspective:none}
.motion-frame-site .hero-copy>*,.motion-frame-site .hero-bottom{animation:none!important}