/* Plant Designer — animated equipment symbols + device tiles */

/* device tile (legibility + selection ring); the component itself is the symbol */
.node .plate { fill: rgba(20, 34, 60, .50); stroke: transparent; stroke-width: 2; transition: stroke .12s, fill .12s; }
.node:hover .plate { stroke: #36506f; }
.node.selected .plate { stroke: var(--accent); stroke-width: 2.4; fill: rgba(54, 179, 255, .09); }
.node { cursor: grab; }
.node.selected { cursor: grabbing; }
/* symbol is decorative — let pointer events fall through to the tile so drag works anywhere */
.cmp-sym { pointer-events: none; }

/* ---- animation keyframes ---- */
@keyframes cmpSpin { to { transform: rotate(360deg); } }
@keyframes cmpFlow { to { stroke-dashoffset: -24; } }
@keyframes cmpDrop {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(15px); opacity: 0; }
}
@keyframes cmpWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }
@keyframes cmpNeedle { 0%, 100% { transform: rotate(-34deg); } 50% { transform: rotate(40deg); } }
@keyframes cmpMerc { 0%, 100% { transform: scaleY(.62); } 50% { transform: scaleY(1); } }
@keyframes cmpPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.cmp-spin { animation: cmpSpin 2.4s linear infinite; }
.cmp-spin.fast { animation-duration: 1.1s; }
.cmp-spin.slow { animation-duration: 4.5s; }
.cmp-flow { stroke-dasharray: 6 6; animation: cmpFlow 1s linear infinite; }
.cmp-drop { animation: cmpDrop 1.5s ease-in infinite; }
.cmp-wave { animation: cmpWave 3.2s ease-in-out infinite; }
.cmp-needle { animation: cmpNeedle 3.4s ease-in-out infinite; }
.cmp-merc { animation: cmpMerc 3s ease-in-out infinite; }
.cmp-pulse { animation: cmpPulse 1.7s ease-in-out infinite; }

/* palette mini-icons sit still so the sidebar stays calm */
.pal-ico { vertical-align: middle; margin-right: 7px; flex: 0 0 auto; }
.pal-ico * { animation: none !important; }
.pal-item { display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .cmp-spin, .cmp-flow, .cmp-drop, .cmp-wave, .cmp-needle, .cmp-merc, .cmp-pulse { animation: none !important; }
}