/* WME Neo — motion. Every rule gated by data-skin; all disabled under reduced motion. */
@keyframes neoFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes neoModalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes neoToastBar { from { width: 100%; } to { width: 0; } }
@keyframes neoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 60% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } }
@keyframes neoShimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* First paint: a short, quiet entrance for the primary content blocks (max 6 steps) */
html[data-skin="neo"] .neo-enter { animation: neoFadeUp .26s var(--neo-ease) both; animation-delay: calc(var(--neo-i, 0) * 35ms); }

html[data-skin="neo"] .stat-card, html[data-skin="neo"] .service-card, html[data-skin="neo"] .info-card,
html[data-skin="neo"] .data-card, html[data-skin="neo"] .device-card, html[data-skin="neo"] .health-card, html[data-skin="neo"] .section {
  transition: transform var(--neo-dur) var(--neo-ease), box-shadow var(--neo-dur) var(--neo-ease), border-color var(--neo-dur) var(--neo-ease);
}
html[data-skin="neo"] .device-card:hover, html[data-skin="neo"] .data-card:hover, html[data-skin="neo"] .info-card:hover { transform: translateY(-2px); box-shadow: var(--neo-shadow); }

/* Live state: a soft pulse on "up/ok" chips only */
html[data-skin="neo"] .status-badge.status-success::before, html[data-skin="neo"] .status-badge.status-online::before,
html[data-skin="neo"] .status-badge.status-up::before, html[data-skin="neo"] .solar-badge-ok::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--neo-success);
  animation: neoPulse 2.4s ease-out infinite;
}

/* Skeleton shimmer for loading placeholders (applied by neo.js) */
html[data-skin="neo"] .neo-skeleton {
  background: linear-gradient(90deg, var(--neo-surface-2) 25%, var(--neo-surface) 50%, var(--neo-surface-2) 75%);
  background-size: 200% 100%; animation: neoShimmer 1.4s linear infinite; color: transparent !important; border-radius: 8px;
}

/* Skin switch cross-fade */
html.neo-switching body, html.neo-switching body * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="neo"] *, html[data-skin="neo"] *::before, html[data-skin="neo"] *::after { animation: none !important; transition: none !important; }
  html[data-skin="neo"] .neo-enter { opacity: 1; transform: none; }
}