/* ============================================================
   Digital10x Custom Widgets — consolidated stylesheet.
   Only the shared keyframes + a handful of utilities that several
   widgets reference live here; each widget renders its own inline
   styles per-instance to keep the editor preview accurate.
   ============================================================ */

/* Aa weight morph cycle (used by Flow Demo brand stage + Brand Morph widget) */
@keyframes d10x-aa-morph {
	0%, 100% { font-variation-settings: 'wght' 300, 'SOFT' 0, 'opsz' 72; }
	50%      { font-variation-settings: 'wght' 900, 'SOFT' 100, 'opsz' 144; }
}

/* Palette swatch cycle (used by Flow Demo brand stage + Brand Morph widget) */
@keyframes d10x-palette-cycle {
	0%   { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(360deg); }
}

/* Wire flow (used by Workflow Demo + Flow Demo pipeline) */
@keyframes d10x-wire-flow { to { stroke-dashoffset: -20; } }

/* CRM bar fill (used by Pipeline Stages + Flow Demo crm stage) */
@keyframes d10x-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pulse dot (used by FAB + accent indicators) */
@keyframes d10x-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Flow node firing pulse (used by Flow Demo pipeline) */
@keyframes d10x-firing-pulse {
	0%   { transform: translate(0, -50%) scale(0); opacity: 1; }
	60%  { transform: translate(14px, -50%) scale(1); opacity: 1; }
	100% { transform: translate(24px, -50%) scale(0.4); opacity: 0; }
}

/* Hub pulse (used by Systems Map) */
@keyframes d10x-hub-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes d10x-hub-glow  { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.32; transform: scale(1.1); } }

/* Ring rotation (Systems Map outer dashed ring + hub micro-ring) */
@keyframes d10x-sys-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.d10x-sys-ring-rotate { animation: d10x-sys-rotate 80s linear infinite; transform-origin: 200px 200px; }
.d10x-sys-hub-glow    { animation: d10x-hub-glow  4s ease-in-out infinite; transform-origin: 200px 200px; }
.d10x-sys-hub         { animation: d10x-hub-pulse 4s ease-in-out infinite; transform-origin: 200px 200px; }
.d10x-sys-hub-ring    { animation: d10x-sys-rotate 24s linear infinite reverse; transform-origin: 200px 200px; }

/* Concentric ripples emanating from hub */
@keyframes d10x-sys-ripple {
	0%   { r: 44; opacity: 0.5; stroke-width: 1.5; }
	100% { r: 160; opacity: 0; stroke-width: 0.5; }
}
.d10x-sys-ripple   { animation: d10x-sys-ripple 4s ease-out infinite; transform-origin: 200px 200px; }
.d10x-sys-ripple-2 { animation-delay: -2s; }
.d10x-sys-node, .d10x-sys-node-halo { transition: opacity 400ms ease, stroke 400ms ease; }

/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
	.d10x-sys-ring-rotate, .d10x-sys-hub-glow, .d10x-sys-hub, .d10x-sys-hub-ring,
	.d10x-sys-ripple, .d10x-sys-ripple-2 { animation: none !important; }
}

/* Drag gallery hover/border (slide states) */
.d10x-drag-gallery::-webkit-scrollbar { height: 6px; }
.d10x-drag-gallery::-webkit-scrollbar-track { background: transparent; }
.d10x-drag-gallery::-webkit-scrollbar-thumb { background: #2A2620; border-radius: 3px; }
.d10x-drag-gallery__slide:hover { border-color: rgba(0, 214, 143, 0.45) !important; }
.d10x-drag-gallery.is-dragging { cursor: grabbing; scroll-behavior: auto; }

/* Filter bar active state colors (matches inline styles) */
.d10x-filter-bar__pill.is-active { color: #00D68F !important; background: rgba(0, 214, 143, 0.08) !important; border-color: rgba(0, 214, 143, 0.3) !important; }

/* Flow demo node states */
.d10x-flow-node.is-active {
	background: rgba(255,255,255,0.055);
	border-color: #00D68F;
	box-shadow: 0 0 0 4px rgba(0,214,143,0.18), 0 20px 40px -12px rgba(0,214,143,0.38);
	transform: translateY(-6px) scale(1.015);
}

/* Flow demo tab hover */
.d10x-flow-tab:hover { color: rgba(245, 240, 232, 0.9) !important; }

/* Service subnav burger (mobile-only — handled by media query below) */
@media (max-width: 1100px) {
	.d10x-subnav__pills, .d10x-subnav__cta { display: none !important; }
}

/* Universal: hover lift on .d10x-card-accent (kept here for any non-widget cards) */
.d10x-card-accent { transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1); }