/* The icon artwork and click targets stay intact. Only its presentation moves. */
:is(#expanded-dock, #dock)[data-dock-motion="magnetic"] :is(.expanded-dock-app, .dock-item) .app-glyph {
  transform: perspective(500px) translate3d(var(--motion-x, 0px), var(--motion-y, 0px), 0) rotateX(var(--motion-rx, 0deg)) rotateY(var(--motion-ry, 0deg)) scale(var(--motion-scale, 1));
  transform-origin: center;
  animation: none;
  transition: transform .1s cubic-bezier(.18,.8,.2,1), filter .2s;
}
:is(#expanded-dock, #dock)[data-dock-motion="magnetic"] .motion-active .app-glyph {
  filter: drop-shadow(0 12px 9px #00152e55) drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 32%, transparent));
  will-change: transform;
}
:is(#expanded-dock, #dock)[data-dock-motion="wave"] :is(.expanded-dock-app, .dock-item) .app-glyph {
  transform: none;
  transform-origin: center;
  transition: transform .28s ease-out;
}
:is(#expanded-dock, #dock)[data-dock-motion="wave"] .motion-active .app-glyph {
  animation: dock-traveling-wave calc(var(--motion-duration, 1800ms) * .85) cubic-bezier(.4,0,.2,1) var(--motion-delay, 0ms) infinite both;
  filter: drop-shadow(0 12px 8px #001b3d50);
}
@keyframes dock-traveling-wave {
  0%, 76%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  34% { transform: translate3d(var(--motion-x, 0px), var(--motion-y, 0px), 0) scale(var(--motion-scale, 1)); }
}
:is(#expanded-dock, #dock)[data-dock-motion="magnetic"] :is(.expanded-dock-app, .dock-item) .app-glyph::before,
:is(#expanded-dock, #dock)[data-dock-motion="wave"] :is(.expanded-dock-app, .dock-item) .app-glyph::before {
  animation: none;
}
:is(#expanded-dock, #dock)[data-dock-motion="magnetic"] .motion-active .app-glyph::before {
  opacity: .85;
  background: radial-gradient(ellipse at 65% 35%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%);
}
:is(#expanded-dock, #dock)[data-motion-enabled="true"][data-dock-motion="none"] :is(.expanded-dock-app, .dock-item) .app-glyph {
  transform: none;
  animation: none;
  transition: none;
}
:is(#expanded-dock, #dock)[data-motion-enabled="true"][data-dock-motion="none"] .app-glyph::before { animation: none; }

/* Signature effects use the original SVG parts where available. Raster logos
   keep their original pixels, accompanied by small, themed paint/light traces. */
:is(#expanded-dock, #dock)[data-dock-motion="signature"] :is(.expanded-dock-app, .dock-item) .app-glyph {
  transform: none;
  transform-origin: center;
  transition: transform .25s ease, filter .25s ease;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] .motion-active .app-glyph {
  filter: drop-shadow(0 8px 7px #00152e4d);
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="talsa"].motion-active .app-glyph {
  animation: dock-brush-signature var(--motion-duration, 1700ms) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="talsa"].motion-active .app-glyph::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: -7%;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-bottom-color: #efb852;
  border-radius: 50%;
  transform: rotate(-30deg);
  animation: dock-paint-trace var(--motion-duration, 1700ms) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="asafu"].motion-active .motion-part-brush {
  transform-box: view-box;
  transform-origin: 68% 49%;
  animation: dock-brush-tip var(--motion-duration, 1700ms) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="tira"].motion-active .app-glyph {
  animation: dock-layer-signature var(--motion-duration, 1700ms) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="tira"].motion-active .app-glyph::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  left: 21%; right: 10%; top: 40%; height: 38%;
  border: 1px solid color-mix(in srgb, var(--accent) 75%, white);
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transform: rotate(-28deg) skewX(25deg);
  animation: dock-layer-trace var(--motion-duration, 1700ms) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="pdft"].motion-active .app-glyph {
  animation: dock-page-signature var(--motion-duration, 1700ms) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="selwali"].motion-active .app-glyph {
  animation: dock-selwali-signature var(--motion-duration, 1700ms) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="radio"].motion-active .motion-part-radio-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: dock-radio-signature calc(var(--motion-duration, 1700ms) * .55) ease-in-out infinite;
}
:is(#expanded-dock, #dock)[data-dock-motion="signature"] .motion-part-radio-bar:nth-child(2) { animation-delay: -.2s; }
:is(#expanded-dock, #dock)[data-dock-motion="signature"] .motion-part-radio-bar:nth-child(3) { animation-delay: -.45s; }
:is(#expanded-dock, #dock)[data-dock-motion="signature"] .motion-part-radio-bar:nth-child(4) { animation-delay: -.1s; }
:is(#expanded-dock, #dock)[data-dock-motion="signature"] [data-motion-app="dallet"].motion-active .app-glyph {
  animation: dock-book-signature var(--motion-duration, 1700ms) ease-in-out infinite;
}
@keyframes dock-brush-signature {
  0%,100% { transform: translateX(-3px) rotate(-8deg); }
  50% { transform: translateX(3px) rotate(8deg); }
}
@keyframes dock-paint-trace {
  0%,100% { opacity: .25; transform: rotate(-55deg) scale(.92, .8); }
  50% { opacity: .9; transform: rotate(35deg) scale(1.05, .95); }
}
@keyframes dock-brush-tip { 0%,100% { rotate: -14deg; } 50% { rotate: 17deg; } }
@keyframes dock-layer-signature { 0%,100% { transform: perspective(420px) rotateX(9deg) translateY(1px); } 50% { transform: perspective(420px) rotateX(-8deg) translateY(-12px) scale(1.04); } }
@keyframes dock-layer-trace { 0%,100% { opacity: .15; translate: 0 7px; } 50% { opacity: .9; translate: -7px -13px; } }
@keyframes dock-page-signature { 0%,100% { transform: perspective(350px) rotateY(-15deg) skewY(-2deg); } 50% { transform: perspective(350px) rotateY(16deg) skewY(2deg); } }
/* A soft, rhythmic beat follows the new sound mark without warping its artwork. */
@keyframes dock-selwali-signature {
  0%, 46%, 100% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1.02); }
  34% { transform: scale(1.05); }
}
@keyframes dock-radio-signature { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1.15); } }
@keyframes dock-book-signature { 0%,100% { transform: perspective(350px) rotateY(-19deg) scaleX(.96); } 50% { transform: perspective(350px) rotateY(19deg) scaleX(1.06); } }

body.dock-reordering #dock .app-glyph,
body.dock-hidden #dock .app-glyph,
body.dock-expanded-transition #expanded-dock .app-glyph {
  animation: none !important;
}
body.dock-reordering #dock .app-glyph::after,
body.dock-hidden #dock .app-glyph::after,
body.dock-reordering #dock :is(.motion-part-brush, .motion-part-radio-bar),
body.dock-hidden #dock :is(.motion-part-brush, .motion-part-radio-bar) {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :is(#expanded-dock, #dock) .app-glyph::before,
  :is(#expanded-dock, #dock) .app-glyph::after,
  :is(#expanded-dock, #dock) :is(.app-glyph, .motion-part-brush, .motion-part-radio-bar) {
    animation: none !important;
    transition: none !important;
  }
}