/* Astro Motion Gallery — standalone preview styling, four existing theme tokens. */
.fx-page{width:min(calc(100% - 40px),1120px);margin:0 auto;padding:30px 0 100px;color:var(--text)}
.fx-kicker{font-size:11px;letter-spacing:.15em;color:var(--accent);font-weight:700;text-transform:uppercase}
.fx-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding:0 0 20px}
.fx-topline>a{font-size:13px;color:var(--muted)}.fx-topline a:hover{color:var(--accent)}
.fx-hero{padding:clamp(52px,9vw,104px) 0 38px;max-width:830px}
.fx-hero h1{font:600 clamp(45px,7vw,84px)/1.1 var(--heading);letter-spacing:-.04em;margin:16px 0 20px}
.fx-hero>p:last-child{max-width:660px;font-size:17px;line-height:1.85;color:var(--muted)}
.fx-controls{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:16px 0 28px}
.fx-control-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.fx-control-group>span{font-size:12px;color:var(--muted);margin-right:10px}
.fx-control-group button{font:500 12px var(--body);border:1px solid var(--line);border-radius:999px;min-height:38px;padding:8px 14px;background:var(--surface);color:var(--text);cursor:pointer}
.fx-control-group button[aria-pressed=true]{color:var(--bg);background:var(--text);border-color:var(--text)}
.fx-jump{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:40px}
.fx-jump a{font-size:13px;padding:8px 11px;border-bottom:1px solid var(--line);color:var(--muted)}
.fx-jump a:hover{color:var(--accent);border-color:var(--accent)}
.fx-section{scroll-margin-top:40px;padding:45px 0 64px;border-top:1px solid var(--line)}
.fx-section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px}
.fx-section-heading h2{font:600 clamp(28px,4vw,44px)/1.2 var(--heading);margin:10px 0 0}
.fx-section-heading p{font-size:14px;color:var(--muted);line-height:1.6;max-width:350px;margin:0}
.fx-stage{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:clamp(20px,4vw,40px);min-width:0;overflow:hidden}
.fx-stage--paper{background:var(--bg)}
.fx-mini-label{display:block;font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.055em;margin:0 0 10px}
.fx-stage h3{font:600 clamp(22px,3vw,32px)/1.25 var(--heading);margin:0 0 14px}
.fx-stage p{line-height:1.7;color:var(--muted)}
.fx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fx-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fx-demo-article{padding:24px 18px;border-top:2px solid var(--accent);background:var(--bg);min-width:0}
.fx-demo-article b{display:block;font:600 23px var(--heading);margin-bottom:8px}
.fx-demo-article small{font-size:12px;color:var(--muted)}
.fx-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}
.fx-replay{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);padding:9px 15px;min-height:44px;font:500 13px var(--body);cursor:pointer}
.fx-replay:hover{border-color:var(--accent);color:var(--accent)}
.fx-source{font-size:12px;color:var(--muted);margin-top:17px}
.fx-source code{font-size:12px;color:var(--accent)}
.fx-note{font-size:13px;line-height:1.8;color:var(--muted);margin-top:18px}
.motion-reveal{opacity:1;transform:none;filter:none;clip-path:none}
.motion-reveal.motion-is-pending:not(.motion-is-visible){opacity:0;will-change:opacity,transform}
.motion-reveal.motion-is-pending{transition:opacity var(--motion-duration,620ms) ease var(--motion-delay,0ms),transform var(--motion-duration,620ms) cubic-bezier(.22,1,.36,1) var(--motion-delay,0ms),filter var(--motion-duration,620ms) ease var(--motion-delay,0ms),clip-path var(--motion-duration,620ms) ease var(--motion-delay,0ms)}
.motion-reveal--fade-up.motion-is-pending:not(.motion-is-visible){transform:translateY(14px)}
.motion-reveal--slide-left.motion-is-pending:not(.motion-is-visible){transform:translateX(18px)}
.motion-reveal--slide-right.motion-is-pending:not(.motion-is-visible){transform:translateX(-18px)}
.motion-reveal--soft-zoom.motion-is-pending:not(.motion-is-visible){transform:scale(.96)}
.motion-reveal--blur-up.motion-is-pending:not(.motion-is-visible){transform:translateY(9px);filter:blur(7px)}
.motion-reveal--clip-up.motion-is-pending:not(.motion-is-visible){clip-path:inset(100% 0 0 0)}
.motion-reveal--fade.motion-is-pending:not(.motion-is-visible){opacity:0}
.motion-card-demo{position:relative;isolation:isolate;transform-style:preserve-3d;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;min-height:186px;transition:transform 440ms cubic-bezier(.22,1,.36,1),box-shadow 440ms}
.motion-card-demo[data-tilt=true].is-tilting{transform:perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg))}
.motion-card-demo[data-spotlight=true]:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(340px circle at var(--spot-x,50%) var(--spot-y,50%),color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%);opacity:0;pointer-events:none;transition:opacity 240ms}
.motion-card-demo[data-spotlight=true]:hover:before,.motion-card-demo[data-spotlight=true]:focus-within:before{opacity:1}
.motion-card-demo>*{position:relative;z-index:1}
.motion-card-demo h3{margin:14px 0 7px}
.motion-card-demo p{margin:0}
.motion-image{margin:0}
.motion-image__frame{overflow:hidden;aspect-ratio:3/2;border-radius:var(--radius);background:var(--surface)}
.motion-image img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);transition:transform 650ms cubic-bezier(.22,1,.36,1)}
.motion-image--zoom:hover img{transform:scale(1.09)}
.motion-image--pan:hover img{transform:translate3d(var(--pan-x,0),var(--pan-y,0),0) scale(1.065)}
.motion-image figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.motion-magnetic{--magnetic-x:0px;--magnetic-y:0px;display:inline-flex;align-items:center;gap:20px;justify-content:space-between;min-height:52px;padding:13px 23px;color:var(--bg);background:var(--text);border:1px solid var(--text);border-radius:var(--radius);font:600 15px var(--body);cursor:pointer;translate:var(--magnetic-x) var(--magnetic-y);transition:translate 280ms ease,transform 280ms}
.motion-magnetic:hover{transform:translateY(-2px)}
.motion-underline{position:relative;display:inline-block;color:var(--text);font-size:19px;font-weight:600;padding:3px 0;text-decoration:none}
.motion-underline--grow{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size 350ms}
.motion-underline--grow:hover,.motion-underline--grow:focus-visible{background-size:100% 1px}
.motion-underline--center:after{content:"";position:absolute;bottom:0;left:50%;right:50%;height:1px;background:currentColor;transition:left 350ms,right 350ms}
.motion-underline--center:hover:after,.motion-underline--center:focus-visible:after{left:0;right:0}
.motion-underline--marker{background:linear-gradient(transparent 72%,var(--accent-soft) 0) left bottom/100% 0 no-repeat;transition:background-size 340ms}
.motion-underline--marker:hover,.motion-underline--marker:focus-visible{background-size:100% 100%}
.motion-faq{border-top:1px solid var(--line)}
.motion-faq details{border-bottom:1px solid var(--line);padding:15px 0}
.motion-faq summary{cursor:pointer;display:flex;gap:12px;justify-content:space-between;align-items:center;font-weight:600;min-height:44px}
.motion-faq summary span{font-size:21px;font-weight:400;transition:rotate 300ms}
.motion-faq details[open] summary span{rotate:45deg}
.motion-faq__answer{color:var(--muted);padding:8px 0}
.motion-faq__answer p{margin:4px 0 8px}
.motion-faq--soft details{padding:15px;border-radius:var(--radius);margin:8px 0;background:var(--surface)}
.motion-faq--cards{border:0;display:grid;gap:10px}
.motion-faq--cards details{border:1px solid var(--line);border-radius:var(--radius);padding:13px 19px;background:var(--bg)}
@supports selector(details::details-content) and (interpolate-size:allow-keywords){.motion-faq details{interpolate-size:allow-keywords}.motion-faq details::details-content{block-size:0;overflow:clip;transition:block-size 300ms ease,content-visibility 300ms allow-discrete}.motion-faq details[open]::details-content{block-size:auto}}
.fx-page a:focus-visible,.fx-page button:focus-visible,.motion-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.fx-bottom{margin-top:54px;border-top:1px solid var(--line);padding-top:25px;font-size:14px;color:var(--muted)}
.fx-bottom a{color:var(--accent);text-decoration:underline}
@media(max-width:760px){.fx-grid,.fx-three{grid-template-columns:1fr}.fx-section-heading{display:block}.fx-section-heading p{max-width:none;margin-top:8px}.fx-controls{align-items:start}.fx-section{padding:32px 0 46px}.fx-stage{padding:20px}}
@media(hover:none),(pointer:coarse){.motion-card-demo[data-tilt=true].is-tilting{transform:none}.motion-magnetic{translate:0 0}.motion-image--pan:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.motion-reveal,.motion-reveal.motion-is-pending,.motion-reveal.motion-is-pending:not(.motion-is-visible){opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}.motion-card-demo,.motion-card-demo.is-tilting,.motion-magnetic,.motion-image img,.motion-faq summary span,.motion-underline{transform:none!important;translate:0 0!important;transition:none!important}.motion-image--zoom:hover img,.motion-image--pan:hover img{transform:none!important}.motion-faq details::details-content{transition:none!important}}
.fx-page[data-intensity=off] .motion-reveal,.fx-page[data-intensity=off] .motion-reveal.motion-is-pending,.fx-page[data-intensity=off] .motion-reveal.motion-is-pending:not(.motion-is-visible){opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
.fx-page[data-intensity=off] .motion-card-demo,.fx-page[data-intensity=off] .motion-magnetic,.fx-page[data-intensity=off] .motion-image img{transform:none!important;translate:0 0!important;transition:none!important}
.fx-page[data-intensity=off] .motion-card-demo:before{opacity:0!important}
.fx-page[data-intensity=off] .motion-image--zoom:hover img,.fx-page[data-intensity=off] .motion-image--pan:hover img{transform:none!important}
.fx-page[data-intensity=off] .motion-underline{transition:none!important}
.fx-page[data-intensity=expressive] .motion-card-demo[data-tilt=true].is-tilting{box-shadow:var(--shadow)}
.fx-page[data-intensity=expressive] .motion-magnetic:hover{box-shadow:var(--shadow)}


/* Replay is a real CSS animation; CSS transitions cannot be restarted reliably
   by toggling visibility and transition in the same rendering frame. */
.fx-motion-status{font-size:13px;line-height:1.65;color:var(--muted);padding:9px 14px;margin:0 0 22px;border-left:2px solid var(--accent);background:var(--surface)}
@keyframes fx-replay-fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fx-replay-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-replay-soft-zoom{from{opacity:0;transform:scale(.90)}to{opacity:1;transform:scale(1)}}
@keyframes fx-replay-blur-up{from{opacity:0;filter:blur(12px);transform:translateY(16px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes fx-replay-slide-left{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes fx-replay-slide-right{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}}
@keyframes fx-replay-clip-up{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0)}}
.motion-reveal.motion-replaying{animation-name:fx-replay-fade-up;animation-duration:var(--motion-duration,620ms);animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both;animation-delay:var(--motion-delay,0ms);transition:none!important}
.motion-reveal--fade.motion-replaying{animation-name:fx-replay-fade}
.motion-reveal--soft-zoom.motion-replaying{animation-name:fx-replay-soft-zoom}
.motion-reveal--blur-up.motion-replaying{animation-name:fx-replay-blur-up}
.motion-reveal--slide-left.motion-replaying{animation-name:fx-replay-slide-left}
.motion-reveal--slide-right.motion-replaying{animation-name:fx-replay-slide-right}
.motion-reveal--clip-up.motion-replaying{animation-name:fx-replay-clip-up}
.fx-page[data-intensity=expressive] .motion-reveal{--motion-duration:840ms}
@media(prefers-reduced-motion:reduce){.motion-reveal.motion-replaying{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}}
.fx-page[data-intensity=off] .motion-reveal.motion-replaying{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}


/* Make subtle interactions legible in a teaching/demo environment. */
.fx-hint{font-size:12px;line-height:1.6;color:var(--muted)}
.fx-underline-gallery{align-items:center;gap:24px}
.fx-underline-gallery>div{min-height:58px;display:flex;align-items:center}
.fx-underline-gallery .motion-underline{padding-bottom:8px}
.motion-underline--grow{transition-duration:1050ms;background-size:0 2px}
.motion-underline--grow:hover,.motion-underline--grow:focus-visible{background-size:100% 2px}
.motion-underline--center:after{height:2px;transition-duration:1050ms}
.motion-underline--marker{transition-duration:1050ms;background-image:linear-gradient(transparent 70%,color-mix(in srgb,var(--accent) 29%,transparent) 0)}
@keyframes fx-underline-grow{0%{background-size:0 2px}15%{background-size:0 2px}85%,100%{background-size:100% 2px}}
@keyframes fx-underline-center{0%,15%{left:50%;right:50%}85%,100%{left:0;right:0}}
@keyframes fx-underline-marker{0%,15%{background-size:100% 0}85%,100%{background-size:100% 100%}}
.fx-underline-playing .motion-underline--grow{animation:fx-underline-grow 1700ms ease-in-out both}
.fx-underline-playing .motion-underline--center:after{animation:fx-underline-center 1700ms ease-in-out both}
.fx-underline-playing .motion-underline--marker{animation:fx-underline-marker 1700ms ease-in-out both}
.fx-replay:disabled{cursor:wait;opacity:.7}
.motion-reveal.motion-replaying{animation-duration:1100ms;animation-delay:calc(var(--motion-delay,0ms) * 1.35)}
.fx-page[data-intensity=expressive] .motion-reveal.motion-replaying{animation-duration:1300ms}
@media(prefers-reduced-motion:reduce){.fx-underline-playing .motion-underline,.fx-underline-playing .motion-underline:after{animation:none!important}}
.fx-page[data-intensity=off] .fx-underline-playing .motion-underline,.fx-page[data-intensity=off] .fx-underline-playing .motion-underline:after{animation:none!important}


/* Runtime diagnostics for cases where accessibility preferences or CSS/JS loading hide effects. */
.fx-diagnostics{display:grid;gap:9px;padding:16px 18px;margin:0 0 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.fx-diagnostics .fx-motion-status{margin:0;padding:0;background:none;border:0;font-size:14px;color:var(--text)}
.fx-diagnostics__actions{display:flex;flex-wrap:wrap;gap:8px}
.fx-diagnostics__detail{font:12px/1.75 var(--body);margin:0;color:var(--muted);word-break:break-word}
.fx-diagnostics [hidden]{display:none!important}
/* On this demonstrator only, an explicit opt-in may preview motion even when
   the operating system prefers reduced motion. All normal site pages continue
   respecting that preference, and this opt-in is not saved. */
@media(prefers-reduced-motion:reduce){
 html[data-allow-motion-demo=true] .fx-page .motion-reveal.motion-replaying{animation-duration:1100ms!important;animation-name:fx-replay-fade-up!important;animation-timing-function:cubic-bezier(.22,1,.36,1)!important;animation-fill-mode:both!important}
 html[data-allow-motion-demo=true] .fx-page .motion-reveal--fade.motion-replaying{animation-name:fx-replay-fade!important}
 html[data-allow-motion-demo=true] .fx-page .motion-reveal--soft-zoom.motion-replaying{animation-name:fx-replay-soft-zoom!important}
 html[data-allow-motion-demo=true] .fx-page .motion-reveal--blur-up.motion-replaying{animation-name:fx-replay-blur-up!important}
 html[data-allow-motion-demo=true] .fx-page .motion-reveal--slide-left.motion-replaying{animation-name:fx-replay-slide-left!important}
 html[data-allow-motion-demo=true] .fx-page .motion-reveal--slide-right.motion-replaying{animation-name:fx-replay-slide-right!important}
 html[data-allow-motion-demo=true] .fx-page .motion-reveal--clip-up.motion-replaying{animation-name:fx-replay-clip-up!important}
 html[data-allow-motion-demo=true] .fx-page .fx-underline-playing .motion-underline--grow{animation:fx-underline-grow 1700ms ease-in-out both!important}
 html[data-allow-motion-demo=true] .fx-page .fx-underline-playing .motion-underline--center:after{animation:fx-underline-center 1700ms ease-in-out both!important}
 html[data-allow-motion-demo=true] .fx-page .fx-underline-playing .motion-underline--marker{animation:fx-underline-marker 1700ms ease-in-out both!important}
 html[data-allow-motion-demo=true] .fx-page .motion-underline--grow{transition:background-size 1050ms!important}
 html[data-allow-motion-demo=true] .fx-page .motion-underline--center:after{transition:left 1050ms,right 1050ms!important}
 html[data-allow-motion-demo=true] .fx-page .motion-underline--marker{transition:background-size 1050ms!important}
 html[data-allow-motion-demo=true] .fx-page .motion-image img{transition:transform 650ms cubic-bezier(.22,1,.36,1)!important;transform:scale(1.01)!important}
 html[data-allow-motion-demo=true] .fx-page .motion-image--zoom:hover img{transform:scale(1.09)!important}
 html[data-allow-motion-demo=true] .fx-page .motion-image--pan:hover img{transform:translate3d(var(--pan-x,0),var(--pan-y,0),0) scale(1.065)!important}
 html[data-allow-motion-demo=true] .fx-page .motion-card-demo[data-tilt=true].is-tilting{transform:perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg))!important}
 html[data-allow-motion-demo=true] .fx-page .motion-card-demo{transition:transform 440ms cubic-bezier(.22,1,.36,1)!important}
 html[data-allow-motion-demo=true] .fx-page .motion-magnetic{translate:var(--magnetic-x) var(--magnetic-y)!important;transition:translate 280ms ease,transform 280ms!important}
}


/* Always available troubleshooting guide for OS-wide motion preference. */
.fx-system-guide{margin:0 0 28px}
.fx-system-guide__details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.fx-system-guide__details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 22px;cursor:pointer;min-height:70px}
.fx-system-guide__details>summary::-webkit-details-marker{display:none}
.fx-system-guide__details>summary strong{display:block;font:600 17px/1.5 var(--heading);color:var(--text)}
.fx-system-guide__details>summary small{display:block;font:400 12px/1.7 var(--body);color:var(--muted);margin-top:3px}
.fx-system-guide__details>summary>span:last-child{font-size:23px;line-height:1;color:var(--accent);transition:transform 200ms}
.fx-system-guide__details[open]>summary>span:last-child{transform:rotate(45deg)}
.fx-system-guide__body{border-top:1px solid var(--line);padding:18px 22px 24px}
.fx-system-guide__body>p{font-size:14px;line-height:1.85;color:var(--muted);margin:0 0 20px}
.fx-system-guide__body code{font-size:.92em;color:var(--accent)}
.fx-system-guide__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.fx-system-guide__grid>div{border-top:1px solid var(--line);padding:14px 0 18px;min-width:0}
.fx-system-guide__grid h3{font:600 18px/1.5 var(--heading);margin:0 0 8px}
.fx-system-guide__grid p{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 8px}
.fx-system-guide__grid p strong{font-weight:600;color:var(--text)}
.fx-system-guide__grid a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.fx-system-guide__footer{margin-top:12px!important;margin-bottom:0!important;padding-top:12px;border-top:1px solid var(--line)}
.fx-system-guide summary:focus-visible,.fx-system-guide a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.fx-system-guide__grid{grid-template-columns:1fr}.fx-system-guide__details>summary,.fx-system-guide__body{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.fx-system-guide__details>summary>span:last-child{transition:none}}


/* Compact OS help accordion: only a single row while collapsed. Expanded guidance remains two columns. */
.fx-system-guide{margin:0 0 20px}
.fx-system-guide__details>summary{min-height:52px;padding:11px 18px}
.fx-system-guide__details>summary strong{font-size:15px}
.fx-system-guide__details>summary small{font-size:11px;margin-top:1px}
.fx-system-guide__body{padding:12px 18px 16px}
.fx-system-guide__body>p{margin-bottom:12px;font-size:13px}
.fx-system-guide__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.fx-system-guide__grid>div{padding:10px 0 12px}
.fx-system-guide__grid h3{font-size:16px;margin-bottom:4px}
.fx-system-guide__grid p{font-size:12px;line-height:1.65;margin-bottom:5px}
@media(max-width:650px){.fx-system-guide__grid{grid-template-columns:1fr}.fx-system-guide__details>summary{padding:11px 14px}.fx-system-guide__body{padding:12px 14px 16px}}

/* Compact motion-gallery links keep every showcase visible on desktop and mobile. */
.fx-library-links{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px 20px}
.fx-library-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-underline-offset:5px}
.fx-library-links a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-color:var(--accent)}
@media(max-width:760px){.fx-topline{align-items:flex-start;flex-wrap:wrap}.fx-library-links{justify-content:flex-start}}