/* SkeletonLine / SkeletonCircle / SkeletonCard: existing brand palette, light by default. */
:root {
	--bb-skeleton-base: var(--wp--preset--color--brand-soft, #E8EFFA);
	--bb-skeleton-shine: var(--wp--preset--color--surface-alt, #F3F6FB);
	--bb-skeleton-surface: var(--wp--preset--color--surface, #fff);
	--bb-skeleton-duration: 1.6s;
	--bb-skeleton-line-height: 11px;
	--bb-skeleton-radius: 6px;
	--bb-tilt-duration: .2s;
	--bb-tilt-perspective: 600px;
	--bb-tilt-scale: 1.03;
	--bb-tilt-glare: rgba(255, 255, 255, .45);
	--bb-club-gradient-start: var(--wp--preset--color--brand-soft, #E8EFFA);
	--bb-club-gradient-middle: var(--wp--preset--color--surface, #fff);
	--bb-club-gradient-end: #FFF0E7;
	--bb-club-accent-start: var(--bb-brand, #0049B0);
	--bb-club-accent-end: var(--bb-flame, #F26522);
	--bb-club-open-duration: .65s;
	--bb-club-flip-duration: 850ms;
}
.bb-club-back { margin: 0 0 20px; }
.bb-club-back a { display: inline-flex; padding: 9px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.07); color: var(--bb-on-night, #EAF0FB); font-size: .9rem; font-weight: 700; text-decoration: none; }
.bb-club-back a:hover, .bb-club-back a:focus-visible { color: #fff; outline: 2px solid currentColor; outline-offset: 3px; }
/* A viewport-sized stage; only transforms and opacity animate. */
.bb-club-flight-stage { position: fixed; inset: 0; z-index: 1000000; perspective: 1600px; overflow: hidden; }
.bb-club-flight-backdrop { position: absolute; inset: 0; background: var(--bb-space, #0D0F33); }
.bb-club-flight { position: absolute; inset: 0; transform-origin: 0 0; }
.bb-club-flight-turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.bb-club-flight-front, .bb-club-flight-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.bb-club-flight-front > .bb-club { position: absolute; top: 0; left: 0; box-sizing: border-box; margin: 0; transform-origin: 0 0; pointer-events: none; }
.bb-club-flight-back { transform: rotateY(180deg); display: grid; place-content: center; gap: 14px; padding: clamp(24px, 6vw, 80px); text-align: center; color: #fff; background: linear-gradient(rgba(13,15,51,.64), rgba(13,15,51,.64)), linear-gradient(135deg, var(--bb-club-accent-start), var(--bb-club-accent-end)); }
.bb-club-flight-back strong { font: 400 clamp(28px, 5vw, 64px)/1.15 var(--bb-display, sans-serif); overflow-wrap: anywhere; }
.bb-club-flight-back span { font-size: clamp(14px, 2vw, 18px); }
:is(.bb-club-fullscreen-departure, .bb-club-fullscreen-arrival) :is(.bb-header, #wpadminbar, .bb-page-hero, .bb-page-hero__title, .bb-post-hero__title, .bb-cover__img) { view-transition-name: none !important; }
@media (prefers-reduced-motion: no-preference) {
	.bb-club-fullscreen-arrival::view-transition-old(root) { animation: bb-club-screen-out .35s ease both; }
	.bb-club-fullscreen-arrival::view-transition-new(root) { animation: bb-club-screen-in .4s ease-out both; }
}
@keyframes bb-club-screen-out { to { opacity: 0; } }
@keyframes bb-club-screen-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
/* Native page navigation keeps normal links/back/history; only snapshots animate. */
.bb-club-opening > :not(.bb-club__name) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.bb-club-navigation::view-transition-group(bb-vt-card),
	.bb-club-navigation::view-transition-group(bb-vt-title) {
		animation-duration: var(--bb-club-open-duration);
		animation-timing-function: cubic-bezier(.22, .75, .2, 1);
	}
	.bb-club-navigation::view-transition-old(bb-vt-card) {
		transform-origin: center;
		animation: bb-club-unfold-out var(--bb-club-open-duration) ease both;
	}
	.bb-club-navigation::view-transition-new(bb-vt-card) {
		transform-origin: center;
		animation: bb-club-unfold-in var(--bb-club-open-duration) cubic-bezier(.22, .75, .2, 1) both;
	}
}
@keyframes bb-club-unfold-out {
	to { opacity: 0; transform: perspective(1000px) rotateY(12deg) scale(.97); }
}
@keyframes bb-club-unfold-in {
	from { opacity: 0; transform: perspective(1000px) rotateY(-8deg) scale(.985); }
	to { opacity: 1; transform: perspective(1000px) rotateY(0) scale(1); }
}
[data-bb-skeleton-theme="dark"] {
	--bb-skeleton-base: var(--bb-space, #0D0F33);
	--bb-skeleton-shine: var(--bb-space-raised, #171A4A);
	--bb-skeleton-surface: var(--bb-space, #0D0F33);
}
.bb-skeleton-line, .bb-skeleton-circle, .bb-skeleton-media {
	position: relative; display: block; overflow: hidden;
	background: var(--bb-skeleton-base); border-radius: var(--bb-skeleton-radius);
}
.bb-skeleton-line { height: var(--bb-skeleton-line-height); width: var(--bb-skeleton-width, 100%); max-width: 100%; }
.bb-skeleton-circle { width: var(--bb-skeleton-size, 46px); height: var(--bb-skeleton-size, 46px); border-radius: 50%; flex: none; }
/* Move a fixed gradient with transform, never animate background-position or layout. */
:is(.bb-skeleton-line, .bb-skeleton-circle, .bb-skeleton-media)::before {
	content: ""; position: absolute; inset: 0; width: 300%;
	background: linear-gradient(90deg, var(--bb-skeleton-base) 0%, var(--bb-skeleton-shine) 40%, var(--bb-skeleton-base) 80%);
	animation: bb-skeleton-shimmer var(--bb-skeleton-duration) ease-in-out infinite;
}
@keyframes bb-skeleton-shimmer { from { transform: translateX(33.333%); } to { transform: translateX(-50%); } }
.bb-skeleton-card { display: flex; align-items: center; gap: 16px; min-width: 0; max-width: 100%; }
.bb-skeleton-card__lines { display: grid; gap: 12px; flex: 1; min-width: 0; }
.bb-skeleton-host { position: relative; }
.bb-skeleton-overlay {
	position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit;
	background: var(--bb-skeleton-surface); pointer-events: none;
}
.bb-skeleton-overlay > .bb-skeleton-card { position: absolute; inset: 20px; }
.bb-skeleton-overlay .bb-skeleton-media { position: absolute; border-radius: inherit; }
.bb-skeleton-overlay .bb-skeleton-media + .bb-skeleton-card { align-items: flex-start; }
.bb-skeleton-host > .bb-skeleton-status {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Staff keep their backgrounds, borders, padding, grid sizes and links. */
:is(.bb-person, .bb-club).bb-tilt-ready { position: relative; isolation: isolate; }
/* Quiet blue-to-white-to-warm flame tint, keeping the existing dark text. */
.bb-club.bb-tilt-ready {
	--bb-club-gradient-start: color-mix(in srgb, var(--bb-club-accent-start) 12%, white);
	--bb-club-gradient-end: color-mix(in srgb, var(--bb-club-accent-end) 16%, white);
	background: linear-gradient(135deg, var(--bb-club-gradient-start), var(--bb-club-gradient-middle) 55%, var(--bb-club-gradient-end));
}
.bb-club.bb-tilt-ready .bb-club__icon { color: color-mix(in srgb, var(--bb-club-accent-start) 70%, #0E1A33); background: color-mix(in srgb, var(--bb-club-accent-start) 12%, white); }
:is(.bb-person, .bb-club).bb-tilt-ready::after {
	content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
	width: auto; height: auto; transform: none;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--bb-tilt-glare), transparent 55%);
	opacity: 0; pointer-events: none; transition: opacity var(--bb-tilt-duration) ease-out;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	:is(.bb-person, .bb-club).bb-tilt-ready:not(.bb-reveal) {
		transition: transform var(--bb-tilt-duration) ease-out;
		transform: perspective(var(--bb-tilt-perspective)) rotateX(var(--bb-rx, 0deg)) rotateY(var(--bb-ry, 0deg)) scale(var(--bb-scale, 1));
	}
	:is(.bb-person, .bb-club).bb-tilt-active::after { opacity: 1; }
}
/* The accessibility view should remain flat and immediately readable. */
.bb-a11y :is(.bb-person, .bb-club).bb-tilt-ready { transform: none !important; }
.bb-a11y .bb-club.bb-tilt-ready { background: var(--a11y-bg, #fff) !important; }
.bb-a11y :is(.bb-person, .bb-club).bb-tilt-ready::after, .bb-a11y .bb-skeleton-overlay { display: none; }
@media (prefers-reduced-motion: reduce) {
	:is(.bb-skeleton-line, .bb-skeleton-circle, .bb-skeleton-media)::before { animation: none; transform: translateX(-50%); }
	:is(.bb-person, .bb-club).bb-tilt-ready::after { display: none; transition: none; }
	:is(.bb-person, .bb-club).bb-tilt-ready { transform: none !important; transition: none; }
}