/* =====================================================================
   PLATFORM FLEXIBLE WORKFLOWS — looping animated workflow-DNA visual
   =====================================================================

   A double-helix structure made from business process components.
   Two sinusoidal strands rotate around each other in a smooth,
   continuous loop. Uniform rounded-square nodes sit at each rung
   position; semi-transparent rungs connect the strand pairs;
   ambient particles drift in the background.

   ALL rotation, depth, morphing and pulse motion is driven by
   assets/js/platform-workflows.js on a per-frame basis. The JS
   updates every node's transform (translate + scale), opacity,
   rebuilds the strand path d-attributes, and repositions rungs.

   This CSS file handles only:
     - Panel layout + gradient background
     - Ambient orbs (blurred brand-color blobs)
     - Ambient animations (particles, sheen, halos, grid, HUD)
     - Rung flow animation (stroke-dashoffset)
     - Static fallback states (no-JS, reduced-motion)

   Colour palette: brand purple → pink → orange
     #6D28D9 / #8B5CF6 / #A78BFA / #C4B5FD → #EC4899 → #F97316

   Accessibility:
     - SVG is aria-hidden.
     - prefers-reduced-motion: JS skips the loop; CSS disables
       ambient animations too.
     - No-JS: the PHP-rendered initial state (rot=0) is fully
       visible — all nodes at their starting positions.
   ===================================================================== */

/* ============== PANEL ==============
   Gradient background matching the other platform visuals
   (security, integrations, audit-ledger, permissions). */
.blok-platform-section--flexible-workflows .blok-platform-section__visual {
	background: linear-gradient(135deg, #060B1F 0%, #0A0A12 60%, #040A14 100%);
	overflow: hidden;
	isolation: isolate;
}

.blok-platform-workflows {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.bpw-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	position: relative;
	z-index: 1;
}

/* ============== AMBIENT ORBS ==============
   Blurred brand-color blobs matching the platform-audit-ledger
   and platform-permissions pattern. HTML divs behind the SVG. */
.bpw-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(56px);
	opacity: 0.45;
	pointer-events: none;
	z-index: 0;
}
.bpw-orb--purple {
	width: 240px;
	height: 240px;
	top: 8%;
	left: 4%;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.50), transparent 70%);
	animation: bpw-orb-drift 14s ease-in-out infinite alternate;
}
.bpw-orb--pink {
	width: 220px;
	height: 220px;
	bottom: 8%;
	right: 4%;
	background: radial-gradient(circle, rgba(236, 72, 153, 0.40), transparent 70%);
	animation: bpw-orb-drift 14s ease-in-out infinite alternate;
	animation-delay: -7s;
}

@keyframes bpw-orb-drift {
	from { transform: translate3d(0, 0, 0) scale(1);    }
	to   { transform: translate3d(16px, -12px, 0) scale(1.12); }
}

/* ============== BACK: Background + sheen ============== */
.bpw-sheen {
	animation: bpw-sheen-sweep 24s linear infinite;
	mix-blend-mode: screen;
}

@keyframes bpw-sheen-sweep {
	0%   { opacity: 0;    transform: translateX(-30%); }
	12%  { opacity: 0.5;  }
	50%  { opacity: 0;    transform: translateX(30%);  }
	100% { opacity: 0;    transform: translateX(30%);  }
}

/* ============== BACK: Ambient halos ============== */
.bpw-halo {
	animation: bpw-halo-pulse 8s ease-in-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}
.bpw-halo--b {
	animation-delay: -4s;
	animation-duration: 10s;
}

@keyframes bpw-halo-pulse {
	0%, 100% { opacity: 0.7; transform: scale(1);    }
	50%      { opacity: 1;   transform: scale(1.06); }
}

/* ============== DOTTED GRID SUBSTRATE ==============
   Sparse purple dots that read as a circuit-board substrate.
   Matches the platform-integrated visual pattern. */
.bpw-grid circle {
	animation: bpw-grid-blink 6s ease-in-out infinite;
}
.bpw-grid circle:nth-child(7n)  { animation-delay: -0.6s; }
.bpw-grid circle:nth-child(11n) { animation-delay: -2.1s; }
.bpw-grid circle:nth-child(13n) { animation-delay: -3.4s; }

@keyframes bpw-grid-blink {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 1;   }
}

/* ============== AMBIENT PARTICLES ============== */
.bpw-particle {
	fill: #A78BFA;
	opacity: 0.5;
	animation: bpw-particle-drift 6s ease-in-out infinite;
}
.bpw-particle:nth-child(3n)    { fill: #8B5CF6; animation-duration: 7s;   }
.bpw-particle:nth-child(5n)    { fill: #EC4899; animation-duration: 8s;   }
.bpw-particle:nth-child(7n)    { animation-duration: 5.5s; }
.bpw-particle:nth-child(11n)   { animation-duration: 9s;   }

@keyframes bpw-particle-drift {
	0%, 100% { opacity: 0.3; transform: translate(0, 0);        }
	25%      { opacity: 0.7; transform: translate(3px, -4px);   }
	50%      { opacity: 0.5; transform: translate(-2px, -7px);  }
	75%      { opacity: 0.8; transform: translate(4px, -3px);   }
}

/* ============== STRANDS ==============
   JS updates the d-attribute each frame. The back paths
   (bpw-strand-back) share the same d and provide a wide
   semi-transparent glow behind the crisp main stroke. */
.bpw-strand {
	will-change: d;
}
.bpw-strand-back {
	will-change: d;
}

/* ============== RUNGS ==============
   JS updates x1/x2 and opacity each frame. CSS drives a
   slow stroke-dashoffset animation so a small dash flows
   along each rung — matching the platform-permissions
   connection-line pattern. */
.bpw-rung {
	will-change: x1, x2, opacity, stroke-dashoffset;
	animation: bpw-rung-flow 3s linear infinite;
}

@keyframes bpw-rung-flow {
	to { stroke-dashoffset: -206; }
}

/* ============== NODES ==============
   JS updates transform (translate + scale) and opacity each
   frame. No CSS animation on nodes — CSS transform overrides
   SVG transform attributes, causing position conflicts. */
.bpw-node {
	will-change: transform, opacity;
}

/* ============== BRANCH RUNGS (JS-created temporary connections) ============== */
.bpw-branch-rung {
	stroke: #A78BFA;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-dasharray: 3 4;
	opacity: 0;
	will-change: opacity;
}

/* ============== DATA PULSES (JS-created dots) ============== */
.bpw-pulse-dot {
	opacity: 0;
	will-change: cx, cy, opacity;
}

/* ============== HUD overlay ============== */
.bpw-hud {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	pointer-events: none;
}

.bpw-hud__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 10px;
	background: rgba(8, 17, 31, 0.82);
	border: 1px solid rgba(139, 92, 246, 0.35);
	border-radius: 999px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #C4B5FD;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.bpw-hud__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #A78BFA;
	box-shadow: 0 0 6px rgba(167, 139, 250, 0.8);
	animation: bpw-hud-dot-blink 2s ease-in-out infinite;
}

@keyframes bpw-hud-dot-blink {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 1;   }
}

/* ============== No-JS fallback ==============
   The PHP template renders the rot=0 state with correct
   transforms and opacities. When scripting is disabled the
   visual stays in that state — just disable ambient motion. */
@media (scripting: none) {
	.bpw-sheen,
	.bpw-halo,
	.bpw-particle,
	.bpw-grid circle,
	.bpw-orb,
	.bpw-rung,
	.bpw-hud__dot {
		animation: none;
	}
}

/* ============== Reduced motion ==============
   JS skips the animation loop entirely. CSS disables ambient
   motion too. The initial PHP-rendered state is fully visible. */
@media (prefers-reduced-motion: reduce) {
	.bpw-sheen,
	.bpw-halo,
	.bpw-particle,
	.bpw-grid circle,
	.bpw-orb,
	.bpw-rung,
	.bpw-hud__dot {
		animation: none;
	}
}

/* ============== Mobile refinements ============== */
@media (max-width: 600px) {
	.bpw-hud {
		top: 10px;
		right: 10px;
	}
	.bpw-hud__pill {
		font-size: 9.5px;
		padding: 4px 10px 4px 8px;
	}
}