/* Geometric duotone 24 px glyphs.
 * Shape clarity comes first: complete contours, no dashed stroke reveal,
 * no ornamental dots. Motion is brief, semantic and local to a control.
 */
.icon.motion-icon {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  shape-rendering: geometricPrecision;
}
.motion-icon .mi-duotone { fill: currentColor; fill-opacity: .18; }
.motion-icon .mi-fill { fill: currentColor; fill-opacity: .18; stroke: none; }
.motion-icon .mi-solid { fill: currentColor; fill-opacity: 1; stroke: none; }
.motion-icon .mi-muted { opacity: .56; }
.motion-icon .mi-fold { stroke-width: 1.5; }
.motion-icon.mi-check { stroke-width: 2.15; }
.motion-icon.mi-infinity { stroke-width: 2.05; }
.motion-icon :is(g, path, circle, ellipse, rect) { transform-box: view-box; transform-origin: 12px 12px; }
.motion-icon .mi-key-body { transform-origin: 7px 12px; }
.motion-icon .mi-tag-body { transform-origin: 7.5px 7.5px; }
.motion-icon .mi-menu-top { transform-origin: 12px 7px; }
.motion-icon .mi-menu-bottom { transform-origin: 12px 17px; }

.intro-topics .motion-icon { width: 16px; height: 16px; color: var(--accent); }
.scene-feature-list .motion-icon { width: 16px; height: 16px; color: #d4b299; }
.home-page .showcase-card .showcase-card-bottom .motion-icon { width: 17px; height: 17px; flex-basis: 17px; }

.menu-toggle .motion-icon :is(.mi-menu-top, .mi-menu-middle, .mi-menu-bottom) {
  transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.menu-toggle[aria-expanded="true"] .mi-menu-top { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .mi-menu-bottom { transform: translateY(-5px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .mi-menu-middle { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  :is(a, button, summary, .showcase-card, .intro-topics > span, .scene-feature-list > li, .scene-eyebrow):is(:hover, :focus-visible) .mi-arrow .mi-arrow-flight,
  .mi-arrow:hover .mi-arrow-flight { animation: mi-forward .38s ease; }
  :is(a, button, summary):is(:hover, :focus-visible) .mi-back .mi-arrow-flight { animation: mi-backward .38s ease; }
  :is(a, button, summary):is(:hover, :focus-visible) .mi-chevron .mi-arrow-flight,
  :is(a, button):is(:hover, :focus-visible) .mi-logout .mi-arrow-flight { animation: mi-forward .38s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-drop { animation: mi-drop .42s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-paper-flight { animation: mi-paper .42s ease; }
  .theme-toggle:is(:hover, :focus-visible) .mi-rays { animation: mi-sun .5s ease; }
  .theme-toggle:is(:hover, :focus-visible) .mi-moon-body { animation: mi-moon .45s ease; }
  :is(a, button, .showcase-card, .intro-topics > span, .scene-eyebrow):is(:hover, :focus-visible) .mi-spark-core { animation: mi-spark .42s ease; }
  :is(a, button, .showcase-card, .scene-feature-list > li):is(:hover, :focus-visible) .mi-layer-top { animation: mi-lift .4s ease; }
  :is(a, button, .showcase-card, .scene-feature-list > li):is(:hover, :focus-visible) .mi-layer-bottom { animation: mi-settle .4s ease; }
  :is(a, button, .showcase-card, .scene-feature-list > li):is(:hover, :focus-visible) .mi-person-back { animation: mi-person .4s ease; }
  :is(a, button, .showcase-card, .scene-feature-list > li):is(:hover, :focus-visible) .mi-music-notes { animation: mi-note .42s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-key-body { animation: mi-key .42s ease; }
  :is(a, button, .showcase-card, .scene-feature-list > li):is(:hover, :focus-visible) .mi-cloud-body { animation: mi-lift .42s ease; }
  :is(a, button, .showcase-card, .scene-feature-list > li):is(:hover, :focus-visible) .mi-iris { animation: mi-look .42s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-copy-back { animation: mi-copy .4s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-clock-hands { animation: mi-clock .42s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-mail-flap { animation: mi-lift .4s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-tag-body { animation: mi-key .42s ease; }
  :is(a, button, .showcase-card, .intro-topics > span, .scene-feature-list > li, .scene-eyebrow):is(:hover, :focus-visible) :is(.mi-slider-top, .mi-slider-bottom) { animation: mi-slide .42s ease; }
  :is(a, button, .showcase-card, .intro-topics > span, .scene-feature-list > li, .scene-eyebrow):is(:hover, :focus-visible) .mi-slider-middle { animation: mi-slide-reverse .42s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-code-left { animation: mi-backward .4s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-code-right { animation: mi-forward .4s ease; }
  :is(a, button, .plan):is(:hover, :focus-visible) .mi-infinity-loop { animation: mi-infinity .45s ease; }
  :is(a, button):is(:hover, :focus-visible) .mi-check { animation: mi-check .36s ease; }
  .motion-icon.mi-idle .mi-spark-core { animation: mi-breathe 5.5s ease-in-out infinite; }
}
@keyframes mi-forward { 0%,100% { transform: translateX(0); } 45% { transform: translateX(1.5px); } }
@keyframes mi-backward { 0%,100% { transform: translateX(0); } 45% { transform: translateX(-1.5px); } }
@keyframes mi-drop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(1.5px); } }
@keyframes mi-paper { 0%,100% { transform: translate(0,0); } 45% { transform: translate(1px,-1px); } }
@keyframes mi-sun { 0%,100% { transform: rotate(0); } 50% { transform: rotate(22.5deg); } }
@keyframes mi-moon { 0%,100% { transform: rotate(0); } 45% { transform: rotate(-8deg); } }
@keyframes mi-spark { 0%,100% { transform: rotate(0) scale(1); } 45% { transform: rotate(8deg) scale(1.04); } }
@keyframes mi-lift { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-1px); } }
@keyframes mi-settle { 0%,100% { transform: translateY(0); } 45% { transform: translateY(1px); } }
@keyframes mi-person { 0%,100% { transform: translateX(0); } 45% { transform: translateX(1px); } }
@keyframes mi-note { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-4deg); } 65% { transform: rotate(2deg); } }
@keyframes mi-key { 0%,100% { transform: rotate(0); } 45% { transform: rotate(-5deg); } }
@keyframes mi-look { 0%,100% { transform: translateX(0); } 45% { transform: translateX(.8px); } }
@keyframes mi-copy { 0%,100% { transform: translate(0,0); } 45% { transform: translate(-1px,-1px); } }
@keyframes mi-clock { 0%,100% { transform: rotate(0); } 45% { transform: rotate(10deg); } }
@keyframes mi-slide { 0%,100% { transform: translateY(0); } 45% { transform: translateY(1.25px); } }
@keyframes mi-slide-reverse { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-1.25px); } }
@keyframes mi-infinity { 0%,100% { transform: scaleX(1); } 45% { transform: scaleX(1.04); } }
@keyframes mi-check { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-.75px); } }
@keyframes mi-breathe { 0%,72%,100% { transform: scale(1); } 84% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) {
  .motion-icon, .motion-icon * { animation: none !important; transition: none !important; }
}