/* =====================================================================
   PLATFORM ROLE-BASED CUBE — light-streams-into-cube visual
   =====================================================================

   One source → many roles → one view:
     - Six solid coloured beams start off-panel in the top-left
       corner area (negative X / Y) at different points along the
       top-left "L" and sweep into an isometric glass cube.
      - Strand paths extend past the cube's left silhouette edge and
        converge at the cube's front corner (240, 240). Opaque cube
        face backings hide the inner portion → illusion of entering
        in depth from the top-left.
      - A single straight unified cyan beam emerges from the cube's
        front corner and runs diagonally off-panel to the bottom-right
        corner. A flowing halo layer restores the sense of motion.

   Cube: isometric projection (3 rhombus faces — TOP, FRONT-LEFT,
   FRONT-RIGHT). Each face is two stacked polygons: an opaque dark
   backing + a translucent glass tint. All edges within the same
   axis are parallel → symmetric cube.

   Animation approach:
     - Flow (stroke-dashoffset) lives ONLY on the glow-halo layers.
     - Cores stay solid → solid light, not dotted lines.
      - Cube edges breathe via glow-layer opacity, staggered in a wave.
      - Particles (JS) travel along each strand toward the entry.

   Colour palette:
     Strands:  #8B5CF6 / #3B82F6 / #06B6D4 / #10B981 / #EAB308 / #F97316
     Cube:     #22D3EE / #06B6D4 / #3B82F6 (cyan-blue)
     Output:   #FFFFFF → #22D3EE → #06B6D4
     BG:       #060B1F → #0A0A12 → #040A14

   Accessibility:
     - SVG is aria-hidden.
     - prefers-reduced-motion: JS skips loop; CSS disables all animations.
     - No-JS: PHP-rendered static state is fully visible.
   ===================================================================== */

/* ============== PANEL ============== */
.blok-platform-section--role-based .blok-platform-section__visual {
	background: linear-gradient(135deg, #060B1F 0%, #0A0A12 60%, #040A14 100%);
	overflow: hidden;
	isolation: isolate;
}

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

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

/* ============== AMBIENT ORBS ============== */
.brc-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(56px);
	opacity: 0.40;
	pointer-events: none;
	z-index: 0;
}
.brc-orb--purple {
	width: 220px;
	height: 220px;
	top: 8%;
	left: 3%;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.42), transparent 70%);
	animation: brc-orb-drift 16s ease-in-out infinite alternate;
}
.brc-orb--cyan {
	width: 210px;
	height: 210px;
	bottom: 6%;
	right: 4%;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.32), transparent 70%);
	animation: brc-orb-drift 16s ease-in-out infinite alternate;
	animation-delay: -8s;
}
.brc-orb--orange {
	width: 180px;
	height: 180px;
	bottom: 18%;
	left: 12%;
	background: radial-gradient(circle, rgba(249, 115, 22, 0.26), transparent 70%);
	animation: brc-orb-drift 18s ease-in-out infinite alternate;
	animation-delay: -4s;
}

@keyframes brc-orb-drift {
	from { transform: translate3d(0, 0, 0) scale(1);    }
	to   { transform: translate3d(14px, -10px, 0) scale(1.10); }
}

/* ============== AMBIENT PARTICLES (sparse) ============== */
.brc-particle {
	fill: #06B6D4;
	opacity: 0.35;
	animation: brc-particle-drift 7s ease-in-out infinite;
}
.brc-particle:nth-child(3n)  { fill: #8B5CF6; animation-duration: 8s;   }
.brc-particle:nth-child(5n)  { fill: #F97316; animation-duration: 9s;   }
.brc-particle:nth-child(7n)  { animation-duration: 6s;   }

@keyframes brc-particle-drift {
	0%, 100% { opacity: 0.20; transform: translate(0, 0);        }
	25%      { opacity: 0.55; transform: translate(3px, -5px);    }
	50%      { opacity: 0.35; transform: translate(-2px, -8px);   }
	75%      { opacity: 0.60; transform: translate(5px, -3px);    }
}

/* ============== FAN STRANDS ==============
   Each strand = halo (flowing) + solid core. The halo has short,
   fast-flowing dashes for a visible trail; the core has long
   dashes that creep along so the bright line itself reads as
   moving light, not a static stroke. */
.brc-strand-glow {
	stroke-dasharray: 28 34;
	will-change: stroke-dashoffset;
	animation: brc-flow 1.8s linear infinite;
}
.brc-strand {
	stroke-dasharray: 60 6;
	will-change: stroke-dashoffset;
	animation: brc-core-flow 2.2s linear infinite;
}

@keyframes brc-flow {
	to { stroke-dashoffset: -52; }
}

@keyframes brc-core-flow {
	to { stroke-dashoffset: -66; }
}

/* ============== CUBE FACE OPAQUE BACKINGS ==============
   Solid dark polygons drawn after the strands to hide the strand
   portions inside the cube silhouette. Close to the bg colour but
   distinct enough to read as a cube surface. No animation. */
.brc-face-backing {
	fill: #080814;
}

/* ============== CUBE GLASS-TINT FACES ==============
   Translucent tints on top of the opaque backings → glass look.
   Gentle breathe so the cube reads as a luminous crystal. */
.brc-face--top {
	fill: url(#brc-face-top);
	animation: brc-face-breathe 7s ease-in-out infinite;
}
.brc-face--front-left {
	fill: url(#brc-face-front-left);
	animation: brc-face-breathe 7s ease-in-out infinite;
	animation-delay: -2.3s;
}
.brc-face--front-right {
	fill: url(#brc-face-front-right);
	animation: brc-face-breathe 7s ease-in-out infinite;
	animation-delay: -4.6s;
}

@keyframes brc-face-breathe {
	0%, 100% { opacity: 1;    }
	50%      { opacity: 0.65; }
}

/* ============== CUBE EDGES ==============
   Glow layers breathe (staggered wave around the cube);
   crisp cores stay solid. */
.brc-edge-glow {
	will-change: opacity;
	animation: brc-edge-breathe 4.5s ease-in-out infinite;
}
.brc-edge-glow:nth-child(3n)   { animation-delay: -1.5s; }
.brc-edge-glow:nth-child(5n)   { animation-delay: -3.0s; }

@keyframes brc-edge-breathe {
	0%, 100% { opacity: 1;    }
	50%      { opacity: 0.55; }
}

/* Crisp cores stay static (no animation) → solid neon edges. */
.brc-edge {
	will-change: opacity;
}

/* ============== SIDE-NEON VERTICALS ==============
   Dedicated bright neon lines on the left and right outer sides of the
   cube, connecting the top rhombus to the bottom V. The base `vert`
   edges are intentionally dim; these dedicated layers restore the
   top↔bottom connection with a clearly visible neon treatment.

   The mid + glow layers breathe (staggered phases) so the lines feel
   alive without competing with the cube edges or output beam. The
   crisp core stays solid for a clean neon stroke. */
.brc-side-neon-glow {
	will-change: opacity;
	animation: brc-edge-breathe 4.5s ease-in-out infinite;
	animation-delay: -0.7s;
}
.brc-side-neon-mid {
	will-change: opacity;
	animation: brc-edge-breathe 4.5s ease-in-out infinite;
	animation-delay: -2.2s;
}
.brc-side-neon-core {
	will-change: opacity;
}

/* ============== CUBE VERTICES — diamonds ============== */
.brc-vertex-halo {
	will-change: opacity, r;
	animation: brc-vertex-breathe 3s ease-in-out infinite;
}
.brc-vertex-halo:nth-child(odd) {
	animation-delay: -1.5s;
}

@keyframes brc-vertex-breathe {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1;    }
}

.brc-vertex-diamond {
	will-change: opacity;
	opacity: 0.95;
	/* Diamond stays bright; only the halo breathes. */
}

/* ============== OUTPUT BEAM (triple layer, straight, with flowing halo) ==============
   Outer halo (static shimmer) + medium glow layer (flowing) + crisp
   solid core. The flow lives on the medium layer so the beam reads
   as moving without the core looking dotted. */
.brc-output-halo {
	will-change: opacity;
	animation: brc-output-shimmer 3s ease-in-out infinite;
}

.brc-output-glow-layer {
	stroke-dasharray: 24 12;
	will-change: stroke-dashoffset, opacity;
	animation: brc-output-flow 2.6s linear infinite,
	           brc-output-shimmer 3s ease-in-out infinite;
}

.brc-output-core {
	will-change: opacity;
	/* Solid straight beam — no dasharray, no flow animation. */
}

@keyframes brc-output-shimmer {
	0%, 100% { opacity: 1;    }
	50%      { opacity: 0.70; }
}

@keyframes brc-output-flow {
	to { stroke-dashoffset: -36; }
}

.brc-exit-spot {
	will-change: opacity, r;
	animation: brc-exit-pulse 2s ease-in-out infinite;
}

@keyframes brc-exit-pulse {
	0%, 100% { opacity: 0.75; r: 5; }
	50%      { opacity: 1;    r: 7; }
}

/* ============== STREAM PARTICLES (JS-created) ============== */
.brc-pulse-dot {
	opacity: 0;
	will-change: cx, cy, opacity;
}

/* ============== HUD overlay ============== */
.brc-hud {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	pointer-events: none;
	max-width: calc(100% - 28px);
}

.brc-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(6, 182, 212, 0.35);
	border-radius: 999px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.10em;
	color: #22D3EE;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.brc-hud__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #06B6D4;
	box-shadow: 0 0 6px rgba(6, 182, 212, 0.8);
	animation: brc-hud-dot-blink 2s ease-in-out infinite;
}

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

/* ============== No-JS fallback ============== */
@media (scripting: none) {
	.brc-orb,
	.brc-particle,
	.brc-strand-glow,
	.brc-strand,
	.brc-face--top,
	.brc-face--front-left,
	.brc-face--front-right,
	.brc-edge-glow,
	.brc-vertex-halo,
	.brc-output-halo,
	.brc-output-glow-layer,
	.brc-exit-spot,
	.brc-hud__dot,
	.brc-side-neon-glow,
	.brc-side-neon-mid {
		animation: none;
	}
}

/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce) {
	.brc-orb,
	.brc-particle,
	.brc-strand-glow,
	.brc-strand,
	.brc-face--top,
	.brc-face--front-left,
	.brc-face--front-right,
	.brc-edge-glow,
	.brc-vertex-halo,
	.brc-output-halo,
	.brc-output-glow-layer,
	.brc-exit-spot,
	.brc-hud__dot,
	.brc-side-neon-glow,
	.brc-side-neon-mid {
		animation: none;
	}
}

/* ============== Mobile refinements ============== */
@media (max-width: 600px) {
	.brc-hud {
		top: 10px;
		right: 10px;
	}
	.brc-hud__pill {
		font-size: 8.5px;
		padding: 4px 10px 4px 8px;
		letter-spacing: 0.08em;
	}
}