/* Authored duotone symbols. Each moving part has a purpose; the housing stays still.
   No SVG IDs or paint-server references: the same symbol can appear many times.
   motion.css owns visibility/tab pausing for the observed .ks-ambient wrappers. */
.ui-icon[data-symbol] {
  --icon-secondary-color: var(--visual-accent, #bba5ff);
  --icon-paper-color: var(--ks-bg, #181a1b);
  stroke-width: 1.45;
  overflow: visible;
}
.ui-icon[data-symbol] .icon-shadow {
  fill: currentColor;
  fill-opacity: .08;
  stroke: none;
}
.ui-icon[data-symbol] .icon-surface {
  fill: currentColor;
  fill-opacity: .17;
}
.ui-icon[data-symbol] .icon-secondary {
  color: var(--icon-secondary-color);
  fill: currentColor;
  fill-opacity: .28;
  stroke: currentColor;
}
.ui-icon[data-symbol] .icon-paper {
  fill: var(--icon-paper-color);
  fill-opacity: 1;
  stroke: currentColor;
}
.ui-icon[data-symbol] .icon-solid {
  fill: currentColor;
  fill-opacity: 1;
  stroke: none;
}
.ui-icon[data-symbol] .icon-knock {
  fill: none;
  stroke: var(--icon-paper-color);
  stroke-width: 1.35;
}
.ui-icon[data-symbol] .icon-detail { opacity: .5; }
.ui-icon[data-symbol="home"],
.ui-icon[data-symbol="focus"],
.ui-icon[data-symbol="privacy"],
.ui-icon[data-symbol="trust"],
.ui-icon[data-symbol="system"] { --icon-secondary-color: #bba5ff; }
.ui-icon[data-symbol="time"],
.ui-icon[data-symbol="speed"],
.ui-icon[data-symbol="problem"],
.ui-icon[data-symbol="spark"],
.ui-icon[data-symbol="other"] { --icon-secondary-color: #f2bf96; }
.ui-icon[data-symbol="apps"],
.ui-icon[data-symbol="contacts"],
.ui-icon[data-symbol="clarity"],
.ui-icon[data-symbol="gallery"],
.ui-icon[data-symbol="result"],
.ui-icon[data-symbol="about"],
.ui-icon[data-symbol="tools"] { --icon-secondary-color: #98c5ff; }
[data-theme="light"] .ui-icon[data-symbol] { --icon-secondary-color: #64529a; }
[data-theme="light"] .ui-icon[data-symbol="time"],
[data-theme="light"] .ui-icon[data-symbol="speed"],
[data-theme="light"] .ui-icon[data-symbol="spark"],
[data-theme="light"] .ui-icon[data-symbol="other"] { --icon-secondary-color: #94613a; }
[data-theme="light"] .ui-icon[data-symbol="apps"],
[data-theme="light"] .ui-icon[data-symbol="contacts"],
[data-theme="light"] .ui-icon[data-symbol="result"],
[data-theme="light"] .ui-icon[data-symbol="gallery"] { --icon-secondary-color: #326ca6; }

/* Small controls retain their crisp outline; larger badges expose the layered art. */
.site-nav .ui-icon[data-symbol] { stroke-width: 1.65; }
.section-symbol .ui-icon[data-symbol] { width: 24px; height: 24px; }
.principle-icon .ui-icon[data-symbol] { width: 33px; height: 33px; }
.page-emblem .ui-icon[data-symbol] { stroke-width: 1.25; }

.ui-icon[data-symbol] .icon-motion {
  --symbol-motion: ki-settle;
  --symbol-duration: 6.8s;
  --symbol-easing: cubic-bezier(.4, 0, .2, 1);
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: none;
}
.ui-icon[data-symbol] .icon-door { --symbol-motion: ki-door; transform-origin: 9.2px 16.5px; }
.ui-icon[data-symbol] .icon-tile { --symbol-motion: ki-tile; --symbol-duration: 7.6s; }
.ui-icon[data-symbol] .icon-letter { --symbol-motion: ki-letter; --symbol-duration: 8.4s; }
.ui-icon[data-symbol] .icon-scan { --symbol-motion: ki-scan; --symbol-duration: 7.8s; opacity: .38; }
.ui-icon[data-symbol] .icon-slider { --symbol-motion: ki-slider; }
.ui-icon[data-symbol] .icon-rays { --symbol-motion: ki-rays; }
.ui-icon[data-symbol] .icon-star { --symbol-motion: ki-star; transform-origin: 18px 6px; }
.ui-icon[data-symbol] .icon-search-glint { --symbol-motion: ki-glint; }
.ui-icon[data-symbol] .icon-aperture { --symbol-motion: ki-focus; --symbol-duration: 6.4s; }
.ui-icon[data-symbol] .icon-clock-hand { --symbol-motion: ki-tick; --symbol-duration: 12s; --symbol-easing: steps(12, end); transform-origin: 11.8px 13px; }
.ui-icon[data-symbol] .icon-sheet { --symbol-motion: ki-sheet; --symbol-duration: 8.2s; transform-origin: 4px 20px; }
.ui-icon[data-symbol] .icon-speed-trails { --symbol-motion: ki-trails; --symbol-duration: 6.2s; }
.ui-icon[data-symbol] .icon-bolt { --symbol-motion: ki-charge; --symbol-duration: 6.2s; }
.ui-icon[data-symbol] .icon-lock { --symbol-motion: ki-lock; --symbol-duration: 8.6s; }
.ui-icon[data-symbol] .icon-question { --symbol-motion: ki-question; --symbol-duration: 7.9s; transform-origin: 11.5px 12px; }
.ui-icon[data-symbol] .icon-check { --symbol-motion: ki-check; --symbol-duration: 7.2s; }
.ui-icon[data-symbol] .icon-bookmark { --symbol-motion: ki-bookmark; --symbol-duration: 8.8s; }
.ui-icon[data-symbol] .icon-sunrise { --symbol-motion: ki-sunrise; --symbol-duration: 9.4s; }
.ui-icon[data-symbol] .icon-spark-core { --symbol-motion: ki-star; --symbol-duration: 8.1s; transform-origin: 11px 12px; }
.ui-icon[data-symbol] .icon-download-arrow { --symbol-motion: ki-download; --symbol-duration: 8.2s; }
.ui-icon[data-symbol] .icon-play { --symbol-motion: ki-play; --symbol-duration: 8.8s; transform-origin: 12px 14px; }
.ui-icon[data-symbol] .icon-wave { --symbol-motion: ki-wave; --symbol-duration: 5.8s; transform-origin: 12px 13.5px; }
.ui-icon[data-symbol] .icon-growth { --symbol-motion: ki-growth; --symbol-duration: 8.6s; transform-origin: 18.5px 21px; }
.ui-icon[data-symbol] .icon-chip { --symbol-motion: ki-chip; --symbol-duration: 9.2s; }
.ui-icon[data-symbol] .icon-spanner { --symbol-motion: ki-turn; --symbol-duration: 8.5s; transform-origin: 12px 10px; }
.ui-icon[data-symbol] .icon-compass { --symbol-motion: ki-compass; --symbol-duration: 9.6s; }

/* Idle beats are restricted to section artwork; navigation reacts once to input.
   Most cycles spend their first half at rest. An unseen wrapper starts paused. */
html.ks-motion-on :is(.section-symbol, .principle-icon, .page-emblem).ks-ambient .ui-icon[data-symbol] .icon-motion {
  animation-name: var(--symbol-motion);
  animation-duration: var(--symbol-duration);
  animation-timing-function: var(--symbol-easing);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
  html.ks-motion-on .sidebar .nav a:hover .ui-icon[data-symbol] .icon-motion {
    animation: var(--symbol-motion) 950ms var(--symbol-easing) 1;
  }
}
html.ks-motion-on .sidebar .nav a:focus-visible .ui-icon[data-symbol] .icon-motion {
  animation: var(--symbol-motion) 950ms var(--symbol-easing) 1;
}

@keyframes ki-door { 0%,45%,100% { transform:scaleX(1); } 62%,77% { transform:scaleX(.68); } }
@keyframes ki-tile { 0%,46%,100% { transform:translate(0,0); } 61%,76% { transform:translate(-1.5px,1.5px); } }
@keyframes ki-letter { 0%,44%,100% { transform:translateY(0); } 60%,78% { transform:translateY(-1.5px); } }
@keyframes ki-scan { 0%,38%,100% { transform:translateY(0); opacity:.22; } 45% { opacity:.7; } 72% { transform:translateY(8px); opacity:.45; } 78% { transform:translateY(8px); opacity:0; } 82% { transform:translateY(0); opacity:0; } }
@keyframes ki-slider { 0%,45%,100% { transform:translateX(0); } 62%,78% { transform:translateX(-1.5px); } }
@keyframes ki-rays { 0%,45%,100% { transform:scale(1); } 65% { transform:scale(.9); } }
@keyframes ki-star { 0%,44%,100% { transform:scale(1); } 58% { transform:scale(.75); } 74% { transform:scale(1.12); } }
@keyframes ki-glint { 0%,42%,100% { opacity:1; } 60% { opacity:.28; } 76% { opacity:1; } }
@keyframes ki-focus { 0%,42%,100% { transform:rotate(0) scale(1); } 60%,72% { transform:rotate(15deg) scale(.78); } }
@keyframes ki-tick { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes ki-sheet { 0%,42%,100% { transform:translate(0,0) rotate(0); } 61%,77% { transform:translate(-.6px,-.3px) rotate(-4deg); } }
@keyframes ki-trails { 0%,43%,100% { transform:translateX(0); opacity:.85; } 60% { transform:translateX(-.8px); opacity:.3; } 75% { opacity:1; } }
@keyframes ki-charge { 0%,42%,100% { transform:translateY(0); } 56% { transform:translateY(-.65px); } 67% { transform:translateY(.45px); } 77% { transform:translateY(0); } }
@keyframes ki-lock { 0%,44%,100% { transform:translateY(0); } 58% { transform:translateY(-.8px); } 70%,80% { transform:translateY(.25px); } }
@keyframes ki-question { 0%,44%,100% { transform:rotate(0); } 60%,73% { transform:rotate(-9deg); } }
@keyframes ki-check { 0%,40%,100% { stroke-dasharray:40; stroke-dashoffset:0; } 48% { stroke-dashoffset:40; opacity:.3; } 66%,88% { stroke-dashoffset:0; opacity:1; } }
@keyframes ki-bookmark { 0%,46%,100% { transform:translateY(0); } 63%,78% { transform:translateY(1.4px); } }
@keyframes ki-sunrise { 0%,40%,100% { transform:translateY(0); } 59%,78% { transform:translateY(-1.2px); } }
@keyframes ki-download { 0%,43%,100% { transform:translateY(0); } 60% { transform:translateY(1.7px); } 75% { transform:translateY(0); } }
@keyframes ki-play { 0%,44%,100% { transform:translateX(0) scale(1); } 62% { transform:translateX(.7px) scale(1.08); } }
@keyframes ki-wave { 0%,40%,100% { transform:scaleY(1); } 51%,72% { transform:scaleY(.55); } 61%,82% { transform:scaleY(1.12); } }
@keyframes ki-growth { 0%,44%,100% { transform:scaleY(1); } 59% { transform:scaleY(.68); } 77% { transform:scaleY(1); } }
@keyframes ki-chip { 0%,42%,100% { opacity:1; } 58% { opacity:.45; } 67%,83% { opacity:1; } 75% { opacity:.65; } }
@keyframes ki-turn { 0%,44%,100% { transform:rotate(0); } 62%,77% { transform:rotate(-5deg); } }
@keyframes ki-compass { 0%,42%,100% { transform:rotate(0); } 59%,77% { transform:rotate(45deg); } }
@keyframes ki-settle { 0%,100% { transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .ui-icon[data-symbol] .icon-motion {
    animation: none !important;
    transform: none !important;
  }
}
@media print {
  .ui-icon[data-symbol] .icon-motion { animation:none !important; transform:none !important; }
}