.airline-bg {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Height comes from an inline custom property the render sets. */
	min-height: var( --airline-bg-height, 60vh );
	height: var( --airline-bg-height, 60vh );
}

/* Transparent mode leaves the container's own background alone so whatever the
   theme puts behind the block shows through the canvas. */
.airline-bg--transparent {
	background-color: transparent;
}

.airline-bg__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Manual motion turns the canvas into something the visitor holds. touch-action
   is pan-y rather than none on purpose: a full-bleed background that swallows
   vertical swipes strands anybody trying to scroll past it on a phone. One
   finger turns the model horizontally, two fingers zoom, and the page keeps the
   gesture it needs most. */
.airline-bg--manual .airline-bg__canvas {
	touch-action: pan-y;
	cursor: grab;
}

.airline-bg--manual .airline-bg__canvas:active {
	cursor: grabbing;
}

.airline-bg--manual .airline-bg__canvas:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* Content laid over the background — a heading, a call to action — goes in the
   block's inner blocks and sits above the canvas. */
.airline-bg__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1;
	pointer-events: none;
}

.airline-bg__content > * {
	pointer-events: auto;
}

/* -------------------------------------------------------------- controls */

.airline-bg__controls {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* Five motion buttons do not fit on one line in a narrow block, and the
	   container clips rather than scrolls, so the rows have to be free to wrap
	   inside a width that leaves the 20px inset on both sides. */
	max-width: calc( 100% - 40px );
	gap: 8px;
	font: 500 11px/1 ui-sans-serif, system-ui, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	-webkit-user-select: none;
	user-select: none;
}

.airline-bg__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.airline-bg__label {
	color: rgba( 255, 255, 255, 0.45 );
	font-size: 10px;
}

/* The buttons keep their 999px pill; the frame around them does not. A wrapped
   999px border reads as two lozenges that have come apart, where a 16px one
   reads as a panel of two rows. */
.airline-bg__switch {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2px;
	padding: 2px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 16px;
	background: rgba( 255, 255, 255, 0.06 );
}

.airline-bg__switch button {
	padding: 7px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba( 255, 255, 255, 0.6 );
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.airline-bg__switch button:hover {
	color: #fff;
}

/* Five buttons at the full padding overflow a phone-width block before they get
   the chance to wrap tidily. */
@media ( max-width: 600px ) {
	.airline-bg__switch button {
		padding: 6px 10px;
	}
}

/* --airline-bg tracks the live hue in solid mode. In transparent mode nothing sets
   it, so the fallback keeps the pressed state legible against the page. */
.airline-bg__switch button[ aria-pressed='true' ] {
	background: #fff;
	color: var( --airline-bg, #111 );
}

/* Hue slider. The track carries the spectrum it scrubs through, which makes what
   the play button does obvious without a label. */
.airline-bg__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 120px;
	height: 14px;
	background: transparent;
	cursor: pointer;
}

.airline-bg__slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient( to right,
		#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100% );
}

.airline-bg__slider::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient( to right,
		#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100% );
}

.airline-bg__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border: 1px solid rgba( 0, 0, 0, 0.3 );
	border-radius: 50%;
	background: #fff;
}

.airline-bg__slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 1px solid rgba( 0, 0, 0, 0.3 );
	border-radius: 50%;
	background: #fff;
}