/* =====================================================================
   PLATFORM AUDIT LEDGER — scroll-driven pixel ledger + ambient orbs
   =====================================================================

   Sits inside the .blok-platform-section__visual box of the
   "Audit trails" deep-dive (replaces the old scroll-driven pixel
   vault + matrix rain, which was heavy on scroll perf).

   A pixel-art ledger book with six audit entry rows that stamp into
   place top-to-bottom as the user scrolls past the section. Once
   landed, the section is fully static — no infinite animations on
   the rows. Only the ambient orbs and a single HUD blink keep
   moving, both paused offscreen via .is-active (toggled by IO).

   Two CSS variables on the wrapper are the single source of truth,
   written by assets/js/platform-audit-ledger.js:

     --bpal-progress (0..1, scroll-driven row fall progress)
     --bpal-active   (0|1, onscreen flag — pauses ambient orbs
                      while the section is offscreen for perf)

   All visual change (row translate/rotate, check-icon pop) derives
   from these. No layout thrash — everything is transform / opacity,
   GPU-composited. No 3D, no blur filters on animated elements.
   ===================================================================== */

.blok-platform-section--audit .blok-platform-section__visual {
	background: linear-gradient(160deg, #060B1F 0%, #040814 60%, #02060E 100%);
	overflow: hidden;
	isolation: isolate;
}

.blok-platform-section__audit-ledger {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	--bpal-progress: 0;
	--bpal-active: 0;
}

/* =====================================================================
   AMBIENT ORBS — three drifting brand-colour blobs behind the book.
   Same vocabulary as sfg__orb / team-walk orbs. Paused offscreen.
   ===================================================================== */
.bpal__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

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

.blok-platform-section__audit-ledger:not(.is-active) .bpal__orb {
	animation-play-state: paused;
}

.bpal__orb--purple {
	width: 220px;
	height: 220px;
	left: 0%;
	top: 4%;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.50), transparent 70%);
}

.bpal__orb--pink {
	width: 200px;
	height: 200px;
	right: 2%;
	top: 0%;
	background: radial-gradient(circle, rgba(236, 72, 153, 0.40), transparent 70%);
	animation-delay: -4s;
}

.bpal__orb--orange {
	width: 180px;
	height: 180px;
	left: 40%;
	bottom: -10%;
	background: radial-gradient(circle, rgba(249, 115, 22, 0.35), transparent 70%);
	animation-delay: -8s;
}

@keyframes bpal-orb {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(16px, -12px, 0) scale(1.12); }
}

/* =====================================================================
   LEDGER BOOK — the pixel-art SVG book, centred, 86% × 86% of the
   visual so the orbs bleed around it.
   ===================================================================== */
.bpal__book {
	position: relative;
	width: 86%;
	height: 86%;
	z-index: 1;
	overflow: hidden;
}

.bpal__book-svg {
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

/* =====================================================================
   HUD PILL — top-right corner of the book, fades in once rows begin
   landing. Blinking status dot. Cheap single-element animation.
   ===================================================================== */
.bpal__hud {
	position: absolute;
	top: 5%;
	right: 5%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r-full, 999px);
	background: rgba(8, 17, 31, 0.85);
	border: 1px solid rgba(139, 92, 246, 0.45);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: #C4B5FD;
	z-index: 3;
	opacity: clamp((var(--bpal-progress, 0) - 0.10) / 0.20, 0, 1);
	transition: opacity 160ms linear;
}

.bpal__hud-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #A7F3D0;
	box-shadow: 0 0 6px rgba(167, 243, 208, 0.85);
	animation: bpal-hud-blink 2.4s ease-in-out infinite;
}

.blok-platform-section__audit-ledger:not(.is-active) .bpal__hud-dot {
	animation-play-state: paused;
}

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

/* =====================================================================
   AUDIT ENTRY ROWS — six horizontal entries that fall gently into
   place top-to-bottom as the user scrolls past. Each row sits in
   a landing band between two ruled lines on the book.
   ===================================================================== */
.bpal__rows {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	clip-path: inset(3px 0 0 0);
}

.bpal-row {
	position: absolute;
	left: 14%;
	right: 14%;
	height: 10.7%; /* 3 of 28 grid rows = one landing band */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 8px;
	box-sizing: border-box;
	will-change: transform;
	/* JS sets transform: translate3d(...) rotate(...); */
}

/* Per-row lead glow: a faint brand-gradient bar on the left edge
   that brightens into view as the row lands (driven by .is-landed,
   toggled per-row by JS when the row's eased t reaches 1). */
.bpal-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 2px;
	border-radius: 1px;
	background: linear-gradient(180deg, #8B5CF6, #EC4899, #F97316);
	opacity: 0;
	transition: opacity 280ms ease-out;
}

.bpal-row.is-landed::before {
	opacity: 0.85;
}

/* Row text elements — monospace timestamp, chip-style actor, sans
   action label. All sized small to fit the book interior. */
.bpal-row__time {
	flex: 0 0 auto;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	color: #A78BFA;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.bpal-row__actor {
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: var(--r-full, 999px);
	background: rgba(139, 92, 246, 0.18);
	border: 1px solid rgba(139, 92, 246, 0.35);
	font-size: 9px;
	font-weight: 600;
	color: #C4B5FD;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bpal-row__action {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 10px;
	font-weight: 500;
	color: #D4C5F9;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Check icon — pops in with a slight overshoot when the row lands.
   Driven by .is-landed (per-row, toggled by JS). */
.bpal-row__check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #34D399;
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 220ms ease-out,
	            transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.55));
}

.bpal-row.is-landed .bpal-row__check {
	opacity: 1;
	transform: scale(1);
}

/* =====================================================================
   OFFSCREEN — pause ambient animations when the section is scrolled
   out of view (toggled by IntersectionObserver in JS).
   ===================================================================== */
.blok-platform-section__audit-ledger:not(.is-active) .bpal__orb,
.blok-platform-section__audit-ledger:not(.is-active) .bpal__hud-dot {
	animation-play-state: paused;
}

/* =====================================================================
   RESPONSIVE — keep the ledger legible on small screens.
   ===================================================================== */
@media (max-width: 880px) {
	.bpal-row { left: 12%; right: 12%; gap: 6px; }
	.bpal-row__time    { font-size: 9px; }
	.bpal-row__actor   { font-size: 8px; padding: 1px 5px; }
	.bpal-row__action  { font-size: 9px; }
	.bpal__hud         { font-size: 8px; padding: 3px 8px; }
}

@media (max-width: 540px) {
	.bpal__book { width: 92%; height: 90%; }
	.bpal-row {
		left: 10%;
		right: 10%;
		gap: 4px;
		padding: 0 4px;
		height: 10.5%;
	}
	.bpal-row__time {
		font-size: 8px;
		letter-spacing: 0.02em;
	}
	.bpal-row__actor {
		font-size: 7px;
		padding: 1px 4px;
	}
	.bpal-row__action { font-size: 8px; }
	/* On very narrow screens, hide the actor chip so timestamp +
	   action fit comfortably. */
	.bpal-row__actor { display: none; }
	.bpal__hud { font-size: 7px; padding: 2px 6px; }
}

/* =====================================================================
   REDUCED MOTION — orbs freeze, HUD blink freezes, rows snap to
   landed. JS detects reduced-motion and sets every row to its final
   position + .is-landed without attaching scroll listeners. The
   static composition still reads as a stamped audit ledger.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.bpal__orb,
	.bpal__hud-dot { animation: none; }
	.bpal-row,
	.bpal-row__check,
	.bpal-row::before { transition: none; }
}