/* =====================================================================
   PLATFORM SECURITY — animated padlock + circuit vault
   =====================================================================

   Single-source-of-truth variable: --lock-progress (0 = unlocked,
   1 = locked). It is written every scroll frame by
   assets/js/platform-security.js so the entire visual smoothly closes
   as the user scrolls in and re-opens as they scroll back up — no
   special reverse code. The HUD counter ticks 0 → 100 in lock with
   the user, and back to 0 on the way out.

   Pixel padlock vocabulary matches the existing site language used
   in scroll-fall-graph and team-walk (see blok_platform_security_pixels
   in template-parts/platform-security.php).
   ===================================================================== */

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

.blok-platform-section__security {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	--lp-x: 0;
	--lp-y: 0;
	--lock-progress: 0;
}

/* Pointer parallax — rAF-throttled by JS */
@media (hover: hover) {
	.blok-platform-section__security {
		transform: translate3d(calc(var(--lp-x) * 0px), calc(var(--lp-y) * 0px), 0);
	}
}

.bps-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	/* Pointer parallax applied here so child layers can multiply */
	transform: translate3d(calc(var(--lp-x) * 6px), calc(var(--lp-y) * 6px), 0);
	/* The whole padlock sits on top of an interactive circuit board,
	   so keep the SVG rendering crisp. Browsers apply image-rendering
	   to <svg> as a best-effort hint for the rasteriser. */
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

@media (hover: none) {
	.bps-svg,
	.blok-platform-section__security {
		transform: none;
	}
}

/* ============== BACK: Board + sheen + halo ============== */
.bps-board {
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}

.bps-sheen {
	animation: bps-sheen-sweep 24s linear infinite;
	mix-blend-mode: screen;
}

@keyframes bps-sheen-sweep {
	0%   { opacity: 0;   transform: translateX(-30%); }
	15%  { opacity: 0.35; }
	50%  { opacity: 0;   transform: translateX(30%); }
	100% { opacity: 0;   transform: translateX(30%); }
}

.bps-halo {
	animation: bps-halo-pulse 4.5s ease-in-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}

@keyframes bps-halo-pulse {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50%      { opacity: 0.85; transform: scale(1.08); }
}

/* ============== BACK: Security rings ============== */
.bps-ring-outer {
	transform-box: view-box;
	animation: bps-ring-spin 90s linear infinite;
}

.bps-ring-inner {
	transform-box: view-box;
	animation: bps-ring-spin-reverse 70s linear infinite;
}

@keyframes bps-ring-spin {
	to { transform: rotate(360deg); }
}

@keyframes bps-ring-spin-reverse {
	to { transform: rotate(-360deg); }
}

/* ============== BACK: Cert plaques ============== */
.bps-cert__dot {
	filter: drop-shadow(0 0 3px rgba(167, 243, 208, 0.85));
	animation: bps-cert-dot-blink 2.4s ease-in-out infinite;
}

.bps-cert:nth-child(2n) .bps-cert__dot { animation-delay: -0.8s; }
.bps-cert:nth-child(3n) .bps-cert__dot { animation-delay: -1.6s; }

@keyframes bps-cert-dot-blink {
	0%, 100% { opacity: 0.45; }
	50%      { opacity: 1; }
}

/* ============== MIDDLE: Circuit traces ============== */
.bps-trace {
	animation: bps-trace-flow 3.5s linear infinite;
}

@keyframes bps-trace-flow {
	to { stroke-dashoffset: -200; }
}

/* ============== MIDDLE: Chip nodes ============== */
.bps-chip__led {
	filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.8));
	animation: bps-led-pulse 2.4s ease-in-out infinite;
}

@keyframes bps-led-pulse {
	0%, 100% { opacity: 0.55; transform: scale(1); transform-box: fill-box; transform-origin: center; }
	50%      { opacity: 1;    transform: scale(1.25); transform-box: fill-box; transform-origin: center; }
}

.bps-chip:hover .bps-chip__body {
	stroke: rgba(236, 72, 153, 0.8);
}

@media (hover: hover) {
	.bps-chip {
		transform: translate3d(calc(var(--lp-x) * -3px), calc(var(--lp-y) * -3px), 0);
	}
}

/* ============== FRONT: Pixel padlock (driven by --lock-progress) ============== */

.bps-lock {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* Halo behind body — faints when unlocked, intensifies when locked */
.bps-lock__halo {
	opacity: calc(0.25 + var(--lock-progress, 0) * 0.7);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(calc(1 + var(--lock-progress, 0) * 0.18));
}

/* Body — STATIC. Sits at viewBox (184, 212) with centre (240, 252).
   No scale, no translate on scroll — the user reads the padlock as
   a fixed reference point. */
.bps-lock__body {
	transform: translate(184px, 212px);
}

/* Shackle group sits at viewBox (184, 148). The CSS-animated
   transform-origin pivots the shackle about the body top
   (240, 212 — the new hinge point after the recentre). */
.bps-lock__shackle {
	transform-origin: 240px 212px;
	transform: translate(184px, 148px) translateY(calc((1 - var(--lock-progress, 0)) * -26px)) rotate(calc((1 - var(--lock-progress, 0)) * -8deg));
}

/* Corner "armed" LEDs inside the body grid. Select by fill
   colour (no per-pixel class names), so we use a colour-mask
   trick: target the rects whose fill matches the LED hex.
   The two leftmost + rightmost chars on row 1 of the body grid
   (gbbbbbbbbbbbbg) are the LEDs. */
.bps-lock__body rect[fill="#10B981"] {
	opacity: calc(0.22 + var(--lock-progress, 0) * 0.78);
	filter: drop-shadow(0 0 calc(var(--lock-progress, 0) * 5px) rgba(16, 185, 129, 0.85));
}

/* ============== FRONT: Scanline ============== */
.bps-scanline {
	animation: bps-scanline-sweep 6s linear infinite;
	pointer-events: none;
}

@keyframes bps-scanline-sweep {
	0%   { transform: translateY(0);  opacity: 0; }
	10%  { opacity: 0.7; }
	90%  { opacity: 0.7; }
	100% { transform: translateY(440px); opacity: 0; }
}

/* ============== HUD overlay (driven by --lock-progress) ============== */
.bps-hud {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--sp-4, 16px);
	padding: 0 var(--sp-4, 16px);
	display: flex;
	justify-content: center;
	pointer-events: none;
	z-index: 2;
}

.bps-hud__row {
	display: inline-flex;
	gap: var(--sp-2, 8px);
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.bps-hud__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: rgba(8, 17, 31, 0.78);
	border: 1px solid rgba(139, 92, 246, 0.35);
	border-radius: var(--r-full, 9999px);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.10em;
	color: var(--color-text-primary, #F4F4F7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	text-transform: uppercase;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

/* Status pill border + colour cross-fade: amber (unlocked) → green (locked) */
.bps-hud__pill--status {
	background:
		linear-gradient(rgba(8, 47, 31, calc(var(--lock-progress, 0) * 0.85)), rgba(8, 47, 31, calc(var(--lock-progress, 0) * 0.85))),
		rgba(8, 17, 31, 0.78);
	border-color: rgba(
		calc(249 + (16 - 249) * var(--lock-progress, 0)),
		calc(115 + (185 - 115) * var(--lock-progress, 0)),
		calc(22 + (129 - 22) * var(--lock-progress, 0)),
		calc(0.35 + var(--lock-progress, 0) * 0.20)
	);
	color: #F4F4F7;
	transition: color 200ms linear;
}

.bps-hud__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgb(
		calc(249 + (16 - 249) * var(--lock-progress, 0)),
		calc(115 + (185 - 115) * var(--lock-progress, 0)),
		calc(22 + (129 - 22) * var(--lock-progress, 0))
	);
	box-shadow: 0 0 8px rgb(
		calc(249 + (16 - 249) * var(--lock-progress, 0)),
		calc(115 + (185 - 115) * var(--lock-progress, 0)),
		calc(22 + (129 - 22) * var(--lock-progress, 0))
	);
	animation: bps-hud-dot-pulse 1.1s ease-in-out infinite;
}

@keyframes bps-hud-dot-pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.4); opacity: 0.7; }
}

/* Status label cross-fade (both rendered, opacity tied to progress) */
.bps-hud__label--interim {
	opacity: calc(1 - var(--lock-progress, 0));
}

.bps-hud__label--final {
	opacity: var(--lock-progress, 0);
	color: #A7F3D0;
}

.bps-hud__pill--pct {
	color: rgb(
		calc(167 + (167 - 167) * var(--lock-progress, 0)),
		calc(139 + (243 - 139) * var(--lock-progress, 0)),
		calc(250 + (208 - 250) * var(--lock-progress, 0))
	);
	border-color: rgba(
		calc(167 + (167 - 167) * var(--lock-progress, 0)),
		calc(139 + (243 - 139) * var(--lock-progress, 0)),
		calc(250 + (208 - 250) * var(--lock-progress, 0)),
		calc(0.45 + var(--lock-progress, 0) * 0.10)
	);
	font-variant-numeric: tabular-nums;
}

.bps-hud__value {
	display: inline-block;
	min-width: 24px;
	text-align: right;
}

.bps-hud__pct-suffix {
	margin-left: 2px;
	opacity: 0.7;
}

/* ============== Responsive — tablet ============== */
@media (max-width: 880px) {
	.bps-hud {
		bottom: 12px;
		padding: 0 10px;
	}
	.bps-hud__pill {
		font-size: 10px;
		padding: 5px 10px;
		gap: 6px;
	}
}

/* ============== Responsive — small phone ============== */
@media (max-width: 520px) {
	.bps-hud {
		bottom: 10px;
		padding: 0 8px;
	}
	.bps-hud__pill {
		font-size: 9px;
		padding: 4px 8px;
		gap: 4px;
		letter-spacing: 0.08em;
	}
	.bps-hud__dot {
		width: 5px;
		height: 5px;
	}
	.bps-cert__label { font-size: 7.5px; }
	.bps-chip__label { font-size: 8px; }
}

/* ============== Very small — hide cert labels (decorative) ============== */
@media (max-width: 380px) {
	.bps-certs { display: none; }
	.bps-hud__pill--pct { display: none; }
}

/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce) {
	.bps-svg,
	.bps-hud__dot,
	.bps-hud__pill {
		transition: none;
		animation: none;
	}
	.bps-sheen,
	.bps-halo,
	.bps-ring-outer,
	.bps-ring-inner,
	.bps-cert__dot,
	.bps-trace,
	.bps-chip__led,
	.bps-scanline {
		animation: none;
	}
	/* Force the lock into the closed state — JS also pins
	   --lock-progress to 1; this is the CSS-side fallback. */
	.bps-lock__shackle {
		transform: translate(184px, 148px) translateY(0) rotate(0);
	}
	.bps-lock__body {
		transform: translate(184px, 212px);
	}
	.bps-lock__body rect[fill="#10B981"] {
		opacity: 1;
		filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.85));
	}
	.bps-hud__label--interim { opacity: 0; }
	.bps-hud__label--final   { opacity: 1; }
}

/* ============== Top-right corner HUD pill ==============
   Sits at top:24px / right:24px so it clears the visual's
   border-radius: 32px + overflow: hidden. A smaller offset
   puts the pill's top-right corner inside the rounded
   corner area and gets clipped. sqrt(24²+24²) ≈ 34px > 32px
   radius, so the pill sits outside the clipped corner. */
.bps-corner-hud {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 10;
	pointer-events: none;
	max-width: calc(100% - 48px);
}

.bps-corner-hud__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	background: rgba(8, 17, 31, 0.82);
	border: 1px solid rgba(16, 185, 129, 0.35);
	border-radius: 999px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #A7F3D0;
	white-space: nowrap;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.bps-corner-hud__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10B981;
	box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
	animation: bps-corner-hud-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes bps-corner-hud-dot-pulse {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 1;   }
}

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

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

@media (max-width: 600px) {
	.bps-corner-hud {
		top: 24px;
		right: 24px;
	}
	.bps-corner-hud__pill {
		font-size: 8.5px;
		padding: 3px 8px 3px 6px;
		gap: 5px;
	}
	.bps-corner-hud__dot {
		width: 5px;
		height: 5px;
	}
}
}