/* =====================================================================
   PLATFORM PERMISSIONS — animated hierarchy visual
   =====================================================================

   Sibling to platform-security / platform-integrated / platform-audit-ledger.
   Replaces the standard orb + icon-box for the permissions deep-dive with
   a 3-tier role hierarchy (1 Superuser, 2 Admins, 4 Staff) drawn as
   pixel-art characters connected by glowing lines.

   Background is the team-walk orb treatment (3 floating blurred colour
   orbs) — clearly distinct from the security padlock's circuit-board
   panel below it.

   Animations (all CSS-only, no scroll coupling, no JS animation loop):
     - 3 floating background orbs (14s alternate scale/translate)
     - 6 connection lines: subtle base + bright gradient "light pulse"
       whose stroke-dashoffset is animated so a glowing segment travels
       from each parent to its child. Staggered so light cascades
       superuser → admins → staff in a 3s cycle.
     - Character idle glow: subtle box-shadow pulse so the hierarchy
       feels alive
     - Tap-to-wave (via JS, see platform-permissions.js): on click,
       the character's right-arm layer swaps to a raised position and
       rotates via the bpp-wave keyframe; a speech bubble with the
       role label appears; auto-clears after 2.6s.
     - prefers-reduced-motion: reduce pins every loop to its final
       state; characters still respond to tap-to-wave (the keyframe
       is only 0.42s so it's not jarring).

   All visible strings are hardcoded in the PHP template (no
   Customizer control).
   ===================================================================== */

/* Override the default panel background to a softer dark that lets
   the floating orbs read clearly. Distinct from the security padlock
   panel (which uses a circuit-board gradient).

   container-type: inline-size turns this panel into a query container
   so the .bpp-stage below can scale itself to fit the panel — the
   480x440 design canvas is scaled to match the available width so
   every character always sits inside the box on any screen size. */
.blok-platform-section--permissions .blok-platform-section__visual {
	background: linear-gradient(135deg, #0A0F1F 0%, #0B0E1A 60%, #06080F 100%);
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	container-name: bpp-panel;
}

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

/* ============== BACK: Three floating orbs (team-walk pattern) ============== */

.bpp-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.bpp-bg__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(56px);
	opacity: 0.5;
	animation: bpp-orb-drift 14s ease-in-out infinite alternate;
}

.bpp-bg__orb--purple {
	width: 240px;
	height: 240px;
	left: 6%;
	top: 8%;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.55), transparent 70%);
}
.bpp-bg__orb--pink {
	width: 220px;
	height: 220px;
	right: 6%;
	top: 12%;
	background: radial-gradient(circle, rgba(236, 72, 153, 0.45), transparent 70%);
	animation-delay: -4s;
}
.bpp-bg__orb--orange {
	width: 200px;
	height: 200px;
	left: 38%;
	bottom: 4%;
	background: radial-gradient(circle, rgba(249, 115, 22, 0.40), transparent 70%);
	animation-delay: -8s;
}

@keyframes bpp-orb-drift {
	0%   { transform: translate3d(0, 0, 0)    scale(1);    }
	100% { transform: translate3d(18px, -14px, 0) scale(1.12); }
}

/* ============== STAGE: lines + characters ==============
   The stage is a fixed 480x440 design canvas (matches the SVG
   viewBox + the absolute pixel positions of the character
   buttons). To fill the parent .blok-platform-section__visual
   box (aspect 1.1/1) we scale the stage with transform: scale().

   --bpp-scale MUST be a unitless <number> (scale() rejects
   lengths). The panel is a container-query container, so we set
   --bpp-scale via @container rules keyed to the real panel width
   rather than the viewport width. Scales are derived from:
       stage_height(440) * scale <= panel_height = panel_width / 1.1
       ⇒ scale <= panel_width / 484
   with a ~5% safety margin so the staff labels (which sit just
   below the 80u character bodies at y≈405, inside the 440u stage)
   never kiss the rounded bottom corners. Capped at 1.15 so the
   hierarchy doesn't get enormous on ultra-wide panels. */

.bpp-stage {
	position: absolute;
	width: 480px;
	height: 440px;
	left: 50%;
	top: 50%;
	--bpp-scale: 1.15;
	transform: translate(-50%, -50%) scale(var(--bpp-scale));
	transform-origin: center center;
	z-index: 1;
}

/* Container-query breakpoints — respond to the actual panel size,
   not the viewport. Each step sets a unitless numeric scale that
   keeps the whole hierarchy (superuser hat → staff labels) inside
   the panel with bottom breathing room. */
@container bpp-panel (max-width: 620px) { .bpp-stage { --bpp-scale: 1.10; } }
@container bpp-panel (max-width: 560px) { .bpp-stage { --bpp-scale: 1.00; } }
@container bpp-panel (max-width: 500px) { .bpp-stage { --bpp-scale: 0.92; } }
@container bpp-panel (max-width: 440px) { .bpp-stage { --bpp-scale: 0.80; } }
@container bpp-panel (max-width: 380px) { .bpp-stage { --bpp-scale: 0.68; } }
@container bpp-panel (max-width: 320px) { .bpp-stage { --bpp-scale: 0.57; } }
@container bpp-panel (max-width: 260px) { .bpp-stage { --bpp-scale: 0.45; } }

.bpp-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.bpp-line {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bpp-line--base {
	stroke: rgba(167, 139, 250, 0.30);
	stroke-width: 1.5;
}

.bpp-line--light {
	stroke: url(#bpp-line-grad);
	stroke-width: 2.4;
	stroke-dasharray: 6 200;
	filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.45));
	animation: bpp-line-flow 3s linear infinite;
}

@keyframes bpp-line-flow {
	0%   { stroke-dashoffset: 0;    }
	100% { stroke-dashoffset: -206; }
}

/* ============== CHARACTERS ============== */

.bpp-character {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	/* subtle idle glow so the hierarchy feels alive */
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
	animation: bpp-character-idle 4s ease-in-out infinite;
}

.bpp-character--superuser {
	z-index: 3;
}
.bpp-character--admin {
	z-index: 2;
}
.bpp-character--staff {
	z-index: 1;
}

/* Stagger the idle pulse so the three tiers don't all pulse together */
.bpp-character--superuser { animation-delay: 0s; }
.bpp-character--admin     { animation-delay: -1.3s; }
.bpp-character--staff:nth-of-type(1) { animation-delay: -0.4s; }
.bpp-character--staff:nth-of-type(2) { animation-delay: -1.6s; }
.bpp-character--staff:nth-of-type(3) { animation-delay: -2.4s; }
.bpp-character--staff:nth-of-type(4) { animation-delay: -3.2s; }

@keyframes bpp-character-idle {
	0%, 100% { transform: translateY(0);    }
	50%      { transform: translateY(-3px); }
}

.bpp-character__svg {
	display: block;
	/* Width-based sizing (matches team-walk's .pw-svg): the SVG
	   sizes to the button width, height auto-determined by the
	   viewBox aspect ratio. This lets the label sit below the SVG
	   inside the button without overflowing the button's inline
	   height (which only nominally governs the SVG's hit area). */
	width: 100%;
	height: auto;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	shape-rendering: crispEdges;
}

/* ---- Arm layers: down by default, wave when .is-waving ---- */
.bpp-character__arm--wave { opacity: 0; }

.bpp-character.is-waving .bpp-character__arm--down { opacity: 0; }
.bpp-character.is-waving .bpp-character__arm--wave {
	opacity: 1;
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: bpp-wave 0.42s ease-in-out infinite alternate;
}

@keyframes bpp-wave {
	0%   { transform: rotate(-12deg); }
	100% { transform: rotate( 14deg); }
}

/* ---- Hover & focus: lift slightly + glow ---- */
@media (hover: hover) {
	.bpp-character:hover {
		transform: translateY(-6px) scale(1.04);
		filter: drop-shadow(0 10px 18px rgba(139, 92, 246, 0.45));
	}
}

.bpp-character:focus-visible {
	outline: 2px solid var(--color-purple-400, #A78BFA);
	outline-offset: 6px;
	border-radius: 8px;
}

/* ---- Label below character ---- */
.bpp-character__label {
	margin-top: 4px;
	display: inline-block;
	padding: 3px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #C4B5FD;
	background: rgba(8, 17, 31, 0.78);
	border: 1px solid rgba(139, 92, 246, 0.35);
	border-radius: 9999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	white-space: nowrap;
}

.bpp-character--superuser .bpp-character__label {
	color: #FBCFE8;
	border-color: rgba(236, 72, 153, 0.40);
}
.bpp-character--admin .bpp-character__label {
	color: #FDE68A;
	border-color: rgba(250, 204, 21, 0.35);
}
.bpp-character--staff .bpp-character__label {
	color: #C4B5FD;
}

/* ---- Speech bubble (tap to reveal) ---- */
.bpp-character__bubble {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, -6px) scale(0.6);
	min-width: 100px;
	padding: 7px 12px;
	background: rgba(15, 23, 42, 0.92);
	border: 1px solid rgba(167, 139, 250, 0.45);
	border-radius: 12px;
	color: #F4F4F7;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms var(--ease, ease), transform 200ms var(--ease, ease);
	z-index: 10;
}

.bpp-character__bubble::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(15, 23, 42, 0.92);
}

.bpp-character.is-waving .bpp-character__bubble {
	opacity: 1;
	transform: translate(-50%, -10px) scale(1);
}

/* ============== RESPONSIVE ==============

   The hierarchy's fit is handled entirely by the container-query
   --bpp-scale on .bpp-stage (see above). No width breakpoint is
   needed for sizing — the scale auto-adjusts to the actual panel
   width at every viewport. These blocks only tweak label/bubble
   typography and orb opacity for smaller screens. */

@media (max-width: 880px) {
	.bpp-bg__orb { opacity: 0.40; }
	.bpp-character__label { font-size: 9px; padding: 2px 8px; }
	.bpp-character__bubble { font-size: 10px; min-width: 90px; padding: 6px 10px; }
}

@media (max-width: 640px) {
	.bpp-bg__orb { opacity: 0.32; }
	.bpp-character__label { font-size: 8px; padding: 2px 6px; }
	.bpp-character__bubble { font-size: 9px; min-width: 70px; padding: 4px 6px; }
	.bpp-character { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
}

@media (max-width: 480px) {
	.bpp-character__label { font-size: 7px; padding: 2px 5px; }
	.bpp-character__bubble { font-size: 8px; min-width: 60px; }
}
/* ============== REDUCED MOTION ============== */

@media (prefers-reduced-motion: reduce) {
	.bpp-bg__orb,
	.bpp-character {
		animation: none;
	}
	.bpp-line--light {
		animation: none;
		stroke-dashoffset: -100; /* pin a visible segment mid-path */
	}
	/* Wave keyframe is only 0.42s; leave it on. */
}

/* ============== NO-JS / scripting: none fallback ============== */

@media (scripting: none) {
	.bpp-bg__orb,
	.bpp-character,
	.bpp-line--light {
		animation: none;
	}
	.bpp-line--light { stroke-dashoffset: -100; }
	/* Tap-to-wave is the only JS-driven interaction; without JS it
	   simply doesn't fire. The visual is still complete. */
}

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

.bpp-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;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

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

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

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

@media (max-width: 600px) {
	.bpp-hud {
		top: 10px;
		right: 10px;
	}
	.bpp-hud__pill {
		font-size: 9.5px;
		padding: 4px 10px 4px 8px;
	}
}