/* motion.css: the shared motion kit's tokens and states (website/research/windows-study/BRIEF.md, section 3), plus the
few components /studio and /business share (demo controls, the comparison table, the FAQ, the carousel). build.py
loads it with motion.js on those two pages only. Every hidden start state is keyed on html.fx-ready (set by motion.js
after it has marked what is already on screen) or on .fx-armed (set on a mock only while its moment runs), so no
JavaScript, reduced motion and ?still always show the finished page. Only transform, opacity, clip-path and
stroke-dashoffset animate (plus colour on small elements, and grid rows for accordion bodies). Nothing here pins. */
/* ---------- tokens: Carbon motion, mapped from what Windows does ---------- */
:root{
/* durations (Carbon names) */
--fx-fast-01:70ms; /* micro: caret, tick colour */
--fx-fast-02:110ms; /* press, toggle (Windows: 100) */
--fx-moderate-01:150ms; /* small fades */
--fx-moderate-02:240ms; /* panel swap, selection, chip pop (Windows: 200 to 280) */
--fx-slow-01:400ms; /* reveals, sheets, cards landing (Windows fade-up: 450) */
--fx-slow-02:700ms; /* heading words, window moves (Windows word rise and slide swap: 700) */
/* easing (Carbon) */
--fx-std:cubic-bezier(.2,0,.38,.9); /* productive standard: UI changes inside the app mocks */
--fx-in:cubic-bezier(0,0,.38,.9); /* productive entrance */
--fx-out:cubic-bezier(.2,0,1,.9); /* productive exit */
--fx-x-std:cubic-bezier(.4,.14,.3,1); /* expressive standard: panel and window moves (replaces Windows .6,0,0,1) */
--fx-x-in:cubic-bezier(0,0,.3,1); /* expressive entrance: reveals, word rise, badges */
--fx-x-out:cubic-bezier(.4,.14,1,1); /* expressive exit */
/* distances and rhythm */
--fx-rise:16px; /* fade-up distance (Windows: 20) */
--fx-word-rise:.5em; /* heading words (Windows: 28px) */
--fx-stagger:40ms; /* siblings in a [data-stagger] group (Windows: 20 to 60) */
--fx-word-stagger:45ms; /* words in a heading (Windows: 40 to 50) */
--fx-tab:9000ms; /* default autoplay per switcher item (Windows: 10 s) */
}
/* ---------- reveals ---------- */
[data-reveal]{transition:opacity var(--fx-slow-01) var(--fx-x-in),transform var(--fx-slow-01) var(--fx-x-in),clip-path var(--fx-slow-02) var(--fx-x-std);
transition-delay:calc(var(--fx-delay,0ms) + var(--i,0) * var(--fx-stagger))}
html.fx-ready [data-reveal]:not(.is-in){opacity:0}
html.fx-ready [data-reveal="up"]:not(.is-in){transform:translate3d(0,var(--fx-rise),0)}
html.fx-ready [data-reveal="scale"]:not(.is-in){transform:scale(.96)}
html.fx-ready [data-reveal="wipe"]:not(.is-in){opacity:1;clip-path:inset(0 100% 0 0)}
/* words: build.py splits the heading into textword ... */
[data-reveal="words"] .w{display:inline-block;transition:opacity var(--fx-slow-02) var(--fx-x-in),transform var(--fx-slow-02) var(--fx-x-in);
transition-delay:calc(var(--fx-delay,0ms) + var(--w,0) * var(--fx-word-stagger))}
html.fx-ready [data-reveal="words"]:not(.is-in){opacity:1}
html.fx-ready [data-reveal="words"]:not(.is-in) .w{opacity:0;transform:translate3d(0,var(--fx-word-rise),0)}
/* ---------- moments ---------- */
.fx-paused *,.fx-paused *::before,.fx-paused *::after{animation-play-state:paused!important}
.fx-caret::after{content:"";display:inline-block;width:1px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:currentColor;animation:fx-blink 1s steps(1) infinite}
@keyframes fx-blink{50%{opacity:0}}
/* the demo control (pause, play, play again): bottom right of every mock frame, like Windows' video pause button */
.fx-ctl{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:rgba(5,6,8,.72);box-shadow:inset 0 0 0 1px var(--line-2);
transition:background var(--fx-fast-02) var(--fx-std)}
.fx-ctl:hover{background:rgba(5,6,8,.9)}
.fx-ctl .ph{font-size:13px}
.fx-ctl:not([data-state]){visibility:hidden}
html.fx-still .fx-ctl{display:none}
/* ---------- switchers (tabs and accordion) ---------- */
.fx-bar{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;background:var(--line)}
.fx-bar>i{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.is-cur .fx-bar>i{transform:scaleX(1)}
.fx-auto .is-cur .fx-bar>i{animation:fx-fill var(--fx-dur,var(--fx-tab)) linear both}
.fx-hold .fx-bar>i{animation-play-state:paused}
@keyframes fx-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fx-panels{display:grid}
.fx-panels>*{grid-area:1/1;min-width:0}
.fx-panels>[hidden]{display:none}
.fx-in{animation:fx-panel-in var(--fx-moderate-02) var(--fx-std) both}
.fx-leave{animation:fx-panel-out 160ms var(--fx-out) both;pointer-events:none}
@keyframes fx-panel-in{from{opacity:0;transform:translate3d(0,8px,0)}}
@keyframes fx-panel-out{to{opacity:0}}
/* accordion bodies open with grid rows (no height measuring); closed bodies leave the tab order */
.fx-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--fx-moderate-02) var(--fx-std)}
.fx-acc-body>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--fx-moderate-02)}
.is-open>.fx-acc-body{grid-template-rows:1fr}
.is-open>.fx-acc-body>div{visibility:visible;transition-delay:0s}
/* no JavaScript: every accordion body is open and every tab panel is shown, one under the other.
Authors put `hidden` on all but the first panel in the markup; motion.js manages it from there. */
html:not(.js) .fx-acc-body{grid-template-rows:1fr}
html:not(.js) .fx-acc-body>div{visibility:visible}
html:not(.js) .fx-panels{display:block}
html:not(.js) .fx-panels>[hidden]{display:block}
/* ---------- tilt (desktop, fine pointer only; motion.js writes --tx and --ty) ---------- */
[data-tilt]{transform:perspective(1800px) rotateX(calc(var(--ty,0) * -2.5deg)) rotateY(calc(var(--tilt-y,0deg) + var(--tx,0) * 4deg)) translate3d(calc(var(--tx,0) * 6px),calc(var(--ty,0) * 4px),0)}
/* ---------- dock (phones and tablets only: the nav call to action is hidden under 900 px) ---------- */
.fx-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:12px;
padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(5,6,8,.94);box-shadow:0 -1px 0 var(--line);
opacity:0;transform:translate3d(0,100%,0);transition:opacity var(--fx-moderate-02) var(--fx-std),transform var(--fx-moderate-02) var(--fx-std)}
.fx-dock.is-on{opacity:1;transform:none}
.fx-dock p{flex:1;min-width:0;font:500 12px/1.3 var(--mono);letter-spacing:.08em;color:var(--muted)}
@media (max-width:900px){.fx-dock{display:flex}}
html.fx-still .fx-dock{display:none}
/* It hides before the download section and the footer arrive, so it never covers the end of the page. */
/* ---------- reduced motion: nothing tweens (motion.js already leaves everything finished) ---------- */
@media (prefers-reduced-motion:reduce){
[data-reveal],[data-reveal] .w,.fx-acc-body,.fx-dock{transition:none}
.fx-in,.fx-leave{animation:none}
.fx-caret::after{animation:none}
}
/* ---------- shared components on the two motion pages ---------- */
/* the demo control: the icon follows the state (motion.js swaps the class) */
.fx-ctl[data-state="replay"]{background:rgba(5,6,8,.86)}
.fx-ctl:focus-visible{outline-offset:2px}
@media (max-width:640px){.fx-ctl{right:8px;bottom:8px;height:26px;padding:0 9px;font-size:10px}}
/* comparison table with one highlighted column (W10): the second column is the one we recommend */
.fx-cmp-wrap{position:relative;isolation:isolate}
.fx-cmp{width:100%;border-collapse:collapse;table-layout:fixed;position:relative}
.fx-cmp th,.fx-cmp td{text-align:left;vertical-align:top;padding:18px 24px;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--text)}
.fx-cmp tbody th{width:22%;padding-left:0;font:500 11px/1.9 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fx-cmp thead th,.fx-cmp thead td{padding-top:30px;padding-bottom:22px;vertical-align:bottom;border-bottom:1px solid var(--line-2)}
.fx-cmp thead th{font-weight:400}
.fx-cmp thead td{width:24%}
.fx-cmp td:nth-child(3){color:var(--muted)}
.fx-cmp td:nth-child(2),.fx-cmp thead th:nth-child(2){background:rgba(15,98,254,.12);box-shadow:inset 1px 0 0 rgba(69,137,255,.45),inset -1px 0 0 rgba(69,137,255,.45)}
.fx-cmp thead th:nth-child(2){box-shadow:inset 1px 0 0 rgba(69,137,255,.45),inset -1px 0 0 rgba(69,137,255,.45),inset 0 2px 0 var(--blue)}
.fx-cmp tbody tr:last-child td:nth-child(2){box-shadow:inset 1px 0 0 rgba(69,137,255,.45),inset -1px 0 0 rgba(69,137,255,.45),inset 0 -1px 0 rgba(69,137,255,.45)}
.fx-cmp-halo{position:absolute;z-index:-1;top:0;bottom:0;left:24%;width:38%;pointer-events:none;box-shadow:0 30px 80px -30px rgba(15,98,254,.5)}
.fx-cmp-k{display:inline-flex;align-items:center;height:2.4em;font:500 10.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.fx-cmp thead th:nth-child(2) .fx-cmp-k{color:var(--blue-2)}
.fx-cmp-n{display:block;margin-top:14px;font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;line-height:1.1;color:var(--paper)}
.fx-cmp-nav{display:none}
/* phones: two cards side by side in a scroll-snap row, the row labels repeated inside each card (no sticky column) */
@media (max-width:639px){
.fx-cmp-wrap{margin:0 calc(var(--gut) * -1)}
.fx-cmp-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gut);scroll-padding:0 var(--gut)}
.fx-cmp-scroll::-webkit-scrollbar{display:none}
.fx-cmp,.fx-cmp thead,.fx-cmp tbody{display:block}
.fx-cmp{width:max-content}
.fx-cmp tr{display:grid;grid-template-columns:repeat(2,calc(86vw - 16px));column-gap:12px}
.fx-cmp thead td,.fx-cmp tbody th{display:none}
.fx-cmp th,.fx-cmp td{padding:12px 16px 14px;font-size:14.5px;border-bottom:0;background:var(--panel);box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)}
.fx-cmp td::before{content:attr(data-label);display:block;margin-bottom:4px;font:500 10px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fx-cmp thead th{scroll-snap-align:start;padding-top:20px;box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 1px 0 var(--line)}
.fx-cmp thead th:nth-child(2){box-shadow:inset 1px 0 0 rgba(69,137,255,.45),inset -1px 0 0 rgba(69,137,255,.45),inset 0 2px 0 var(--blue)}
.fx-cmp tbody tr:last-child td{padding-bottom:20px;box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
.fx-cmp td:nth-child(2),.fx-cmp thead th:nth-child(2){background:#0B1530}
.fx-cmp tbody tr:last-child td:nth-child(2){box-shadow:inset 1px 0 0 rgba(69,137,255,.45),inset -1px 0 0 rgba(69,137,255,.45),inset 0 -1px 0 rgba(69,137,255,.45)}
.fx-cmp-halo{display:none}
.fx-cmp-n{font-size:21px;margin-top:10px}
.fx-cmp-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px var(--gut) 0}
}
/* carousel controls ([data-carousel]: a native scroll-snap row, prev and next scroll by one card) */
.fx-car-btns{display:flex;align-items:center;gap:8px}
.fx-car-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);transition:background var(--fx-fast-02) var(--fx-std),opacity var(--fx-fast-02) var(--fx-std)}
.fx-car-btn:hover{background:rgba(255,255,255,.06)}
.fx-car-btn[disabled]{opacity:.32;cursor:default;background:none}
.fx-car-btn .ph{font-size:16px}
.fx-car-count{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* FAQ (W11): the native animates where the browser supports it, with no JavaScript */
:root{interpolate-size:allow-keywords}
@supports selector(::details-content){
.faq details::details-content{block-size:0;overflow:clip;transition:block-size var(--fx-moderate-02) var(--fx-std),content-visibility var(--fx-moderate-02) allow-discrete}
.faq details[open]::details-content{block-size:auto}
}
.fx-faq summary::after{content:"";flex:none;width:8px;height:8px;margin:8px 4px 0 0;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform var(--fx-fast-02) var(--fx-std)}
.fx-faq details[open] summary::after{transform:translateY(4px) rotate(225deg)}
.fx-faq-all{display:block;margin-top:22px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:8px 0}
.fx-faq-all:hover{color:var(--paper)}
@media (prefers-reduced-motion:reduce){
.fx-faq summary::after{transition:none}
@supports selector(::details-content){.faq details::details-content{transition:none}}
}