/* =====================================================================
   PLATFORM ROLE MORPH — single device transforming from a widescreen
   monitor into a smartphone and back, with six minimal icons that
   reflow from a 2×3 desktop grid into a 1×6 phone column.
   =====================================================================

   One platform · adaptive dashboards · responsive design:
     - A single silhouette whose top-of-cycle state is unmistakably a
       monitor (thin bezel + base foot and neck + webcam dot) and whose
       bottom-of-cycle state is unmistakably a phone (rounded corners +
       side button + camera dot + home indicator). The same SVG path
       interpolates between the two states via SMIL.
     - The stand, webcam dot, side button, camera dot and home indicator
       are separate elements that fade in or out at the right points.
     - SIX simple icons reflow from a 2×3 desktop grid at the top to a
       1×6 phone column at the bottom — same icons, new layout.

   Animation approach (continuous ping-pong loop, ~9s cycle):
     - Device body path morphs between monitor and phone shapes (SMIL).
     - Stand + webcam fade out as device morphs toward phone; reverse
       on the way back.
     - Phone chrome (home indicator, side button, camera dot) fades in
       as device morphs toward phone; reverse on the way back.
     - Six icons translate + scale from desktop grid positions to phone
       column positions (CSS keyframes).
     - Device edge breathes; glass shimmers; orbs drift; particles
       sparkle. JS adds a few ambient dust dots.

   Colour palette:
     Edges / glow : #22D3EE / #3B82F6 / #06B6D4 (cyan-blue)
     Icons        : white outlines (~0.82 opacity)
     BG           : #060B1F → #0A0A12 → #040A14

   Accessibility:
     - SVG is aria-hidden.
     - prefers-reduced-motion: JS removes SMIL animations; CSS pins
       the device to the desktop keyframe and disables all motion.
     - No-JS: PHP-rendered static state is the desktop.
   ===================================================================== */

/* ============== 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-morph {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

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

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

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

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

@keyframes brm-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);   }
}

/* ============== DEVICE EDGE ============== */
.brm-device-glow {
	will-change: opacity;
	animation: brm-edge-breathe 5s ease-in-out infinite;
}
.brm-device-edge {
	will-change: opacity;
	opacity: 1;
}

@keyframes brm-edge-breathe {
	0%, 100% { opacity: 0.22; }
	50%      { opacity: 0.14; }
}

/* Glass top highlight. */
.brm-glass {
	will-change: opacity;
	animation: brm-glass-shimmer 6s ease-in-out infinite;
}

@keyframes brm-glass-shimmer {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 0.35; }
}

/* ============== MONITOR STAND (visible only at desktop state) ============== */
.brm-stand {
	will-change: opacity;
	animation: brm-stand-fade 9s ease-in-out infinite;
}

.brm-stand-foot {
	stroke: rgba(34, 211, 238, 0.22);
	stroke-width: 1;
}
.brm-stand-neck {
	stroke: rgba(34, 211, 238, 0.22);
	stroke-width: 1;
}

@keyframes brm-stand-fade {
	0%, 20%   { opacity: 1; }
	50%, 70%  { opacity: 0; }
	100%      { opacity: 1; }
}

/* ============== WEBCAM DOT (visible only at desktop state) ============== */
.brm-webcam {
	will-change: opacity;
	animation: brm-webcam-fade 9s ease-in-out infinite;
}

@keyframes brm-webcam-fade {
	0%, 20%   { opacity: 1; }
	50%, 70%  { opacity: 0; }
	100%      { opacity: 1; }
}

/* ============== PHONE CHROME (visible only at phone state) ============== */
.brm-phone-chrome {
	will-change: opacity;
	animation: brm-phone-chrome-fade 9s ease-in-out infinite;
}

.brm-home {
	fill: rgba(255, 255, 255, 0.55);
	stroke: none;
	will-change: opacity;
	animation: brm-home-glow 3s ease-in-out infinite;
}

.brm-side-btn {
	fill: rgba(34, 211, 238, 0.55);
	stroke: none;
}

.brm-cam {
	fill: rgba(34, 211, 238, 0.55);
	stroke: rgba(255, 255, 255, 0.20);
	stroke-width: 0.5;
}

@keyframes brm-phone-chrome-fade {
	0%, 20%   { opacity: 0; }
	50%, 70%  { opacity: 1; }
	100%      { opacity: 0; }
}

@keyframes brm-home-glow {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 0.85; }
}

/* ============== WHITE LINE ICONS ============== */
.brm-ic {
	fill: none;
	stroke: rgba(255, 255, 255, 0.82);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============== ICONS (reflow from 2×3 desktop grid to 1×6 phone column) ============== */
.brm-icon-inner {
	transform-box: fill-box;
	transform-origin: center center;
	transform: translate(0, 0) scale(1);
	will-change: transform;
}

/* Icon 1: ring — (165,220) → (300,200) */
.brm-icon-inner--1 { animation: brm-icon-morph-1 9s ease-in-out infinite; }
@keyframes brm-icon-morph-1 {
	0%, 20%  { transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
	50%, 70% { transform: translate(135px, -20px) scale(0.73); animation-timing-function: ease-in-out; }
	100%     { transform: translate(0, 0) scale(1); }
}

/* Icon 2: bars — (300,220) → (300,228) */
.brm-icon-inner--2 { animation: brm-icon-morph-2 9s ease-in-out infinite; }
@keyframes brm-icon-morph-2 {
	0%, 20%  { transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
	50%, 70% { transform: translate(0, 8px) scale(0.73); animation-timing-function: ease-in-out; }
	100%     { transform: translate(0, 0) scale(1); }
}

/* Icon 3: chart — (435,220) → (300,256) */
.brm-icon-inner--3 { animation: brm-icon-morph-3 9s ease-in-out infinite; }
@keyframes brm-icon-morph-3 {
	0%, 20%  { transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
	50%, 70% { transform: translate(-135px, 36px) scale(0.73); animation-timing-function: ease-in-out; }
	100%     { transform: translate(0, 0) scale(1); }
}

/* Icon 4: grid — (165,320) → (300,284) */
.brm-icon-inner--4 { animation: brm-icon-morph-4 9s ease-in-out infinite; }
@keyframes brm-icon-morph-4 {
	0%, 20%  { transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
	50%, 70% { transform: translate(135px, -36px) scale(0.73); animation-timing-function: ease-in-out; }
	100%     { transform: translate(0, 0) scale(1); }
}

/* Icon 5: pulse — (300,320) → (300,312) */
.brm-icon-inner--5 { animation: brm-icon-morph-5 9s ease-in-out infinite; }
@keyframes brm-icon-morph-5 {
	0%, 20%  { transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
	50%, 70% { transform: translate(0, -8px) scale(0.73); animation-timing-function: ease-in-out; }
	100%     { transform: translate(0, 0) scale(1); }
}

/* Icon 6: dot — (435,320) → (300,340) */
.brm-icon-inner--6 { animation: brm-icon-morph-6 9s ease-in-out infinite; }
@keyframes brm-icon-morph-6 {
	0%, 20%  { transform: translate(0, 0) scale(1); animation-timing-function: ease-in-out; }
	50%, 70% { transform: translate(-135px, 20px) scale(0.73); animation-timing-function: ease-in-out; }
	100%     { transform: translate(0, 0) scale(1); }
}

/* ============== JS-CREATED AMBIENT DOTS ============== */
.brm-pulse-dot {
	opacity: 0;
	will-change: cx, cy, opacity;
}

/* ============== No-JS fallback ============== */
@media (scripting: none) {
	.brm-orb,
	.brm-particle,
	.brm-stand,
	.brm-webcam,
	.brm-device-glow,
	.brm-phone-chrome,
	.brm-icon-inner,
	.brm-home {
		animation: none;
	}
	.brm-stand,
	.brm-webcam {
		opacity: 1;
	}
	.brm-phone-chrome {
		opacity: 0;
	}
	.brm-icon-inner {
		transform: translate(0, 0) scale(1);
	}
}

/* ============== Reduced motion ==============
   Pin the device to the desktop keyframe and disable all motion. */
@media (prefers-reduced-motion: reduce) {
	.brm-orb,
	.brm-particle,
	.brm-stand,
	.brm-webcam,
	.brm-device-glow,
	.brm-phone-chrome,
	.brm-icon-inner,
	.brm-home {
		animation: none !important;
	}
	.brm-stand,
	.brm-webcam {
		opacity: 1 !important;
	}
	.brm-phone-chrome {
		opacity: 0 !important;
	}
	.brm-icon-inner {
		transform: translate(0, 0) scale(1) !important;
	}
}

/* ============== Mobile refinements ============== */
@media (max-width: 600px) {
	.brm-orb--purple { width: 160px; height: 160px; }
	.brm-orb--cyan   { width: 150px; height: 150px; }
}

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

.brm-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(34, 211, 238, 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);
}

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

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

@media (scripting: none) {
	.brm-hud__dot {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brm-hud__dot {
		animation: none;
	}
}

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