/* BBA page transition + back/forward chevrons */

/* White during transitions: the blank gap between pages shows the html
   background, so it must be pure white instead of the off-white default. */
html {
	background: #fff;
}

@keyframes bba-page-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
body {
	animation: bba-page-fade 0.35s cubic-bezier(0.33, 1, 0.68, 1) both;
}

/* Departure/arrival veil: pure white with a pulsing "…" so a transition
   never reads as a blank page. On arrival it lifts via the CSS boot
   animation (no JS needed); thumbs.js reuses it for departures. */
.bba-nav-veil {
	position: fixed;
	inset: 0;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.18s ease;
}
.bba-nav-veil.is-on {
	opacity: 1;
}
.bba-nav-veil.bba-veil-boot {
	animation: bba-veil-lift 0.45s ease-out 0.05s both;
}
@keyframes bba-veil-lift {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* Pulsing "…" */
.bba-nav-dots {
	display: flex;
	gap: 7px;
}
.bba-nav-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1D1D1B;
	opacity: 0.25;
	animation: bba-dot 0.9s ease-in-out infinite;
}
.bba-nav-dots i:nth-child(2) { animation-delay: 0.15s; }
.bba-nav-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bba-dot {
	0%, 100% { opacity: 0.25; }
	40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	body { animation: none; }
	.bba-nav-veil { display: none; }
}

/* Subtle back / forward chevrons, upper right */
.bba-nav-chev {
	position: fixed;
	top: 16px;
	right: 24px;
	z-index: 9000;
	display: flex;
	gap: 2px;
}
.bba-nav-chev button {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 8px;
	line-height: 0;
	cursor: pointer;
	color: #1D1D1B;
	opacity: 0.35;
	transition: opacity 0.2s ease;
}
.bba-nav-chev button:hover:not([disabled]) { opacity: 1; }
.bba-nav-chev button[disabled] {
	cursor: default;
	opacity: 0.12;
}
.bba-nav-chev svg { display: block; }