/* =========================================================================
 * Motion: splash preloader, liquid-glass page transitions, tab pill, press feedback.
 * Everything is disabled or reduced under prefers-reduced-motion.
 * ========================================================================= */

/* ---------- Splash preloader (first page of a visit) ---------- */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 26px;
	background:
		radial-gradient(60% 45% at 50% 42%, rgba(242, 168, 29, 0.14), transparent 70%),
		radial-gradient(90% 70% at 50% 110%, rgba(22, 58, 95, 0.12), transparent 70%),
		var(--warm-white);
	transition: opacity 520ms var(--ease), visibility 0s linear 520ms;
	/* Failsafe: hides itself even if JavaScript never runs. */
	animation: preloader-failsafe 0s linear 4.5s forwards;
}
html.bsn-warm .preloader { display: none; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader.is-done .preloader__stage { transform: scale(1.05); }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.preloader__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 232px;
	height: 232px;
	transition: transform 360ms var(--ease);
	animation: stage-in 420ms var(--ease-spring) both;
}
@keyframes stage-in { from { opacity: 0; transform: scale(0.9); } }

.preloader__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.preloader__track { fill: none; stroke: rgba(22, 58, 95, 0.08); stroke-width: 2; }
.preloader__arc {
	fill: none;
	stroke: var(--gold);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 340;
	stroke-dashoffset: 340;
	animation: arc-draw 1.6s var(--ease) infinite;
	transform-origin: 60px 60px;
}
@keyframes arc-draw {
	0% { stroke-dashoffset: 340; transform: rotate(0deg); }
	55% { stroke-dashoffset: 90; }
	100% { stroke-dashoffset: 340; transform: rotate(360deg); }
}

.preloader__glass {
	position: relative;
	display: grid;
	place-items: center;
	width: 184px;
	height: 184px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: saturate(170%) blur(16px);
	backdrop-filter: saturate(170%) blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 -10px 30px rgba(22, 58, 95, 0.05),
		0 24px 60px -18px rgba(7, 24, 39, 0.35);
}
.preloader__glass img { width: 118px; height: auto; animation: logo-breathe 2.4s ease-in-out infinite; }
@keyframes logo-breathe { 50% { transform: scale(1.035); } }
.preloader__shine {
	position: absolute;
	inset: -40%;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
	transform: translateX(-60%);
	animation: shine 2.2s var(--ease) 0.3s infinite;
	pointer-events: none;
}
@keyframes shine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }

.preloader__tag {
	margin: 0;
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: 0.01em;
	color: var(--navy-700);
	animation: fade-up 420ms var(--ease) 80ms both;
}
.preloader__tag span { color: var(--gold); }
.preloader__bar { width: 132px; height: 3px; border-radius: 2px; background: rgba(22, 58, 95, 0.1); overflow: hidden; animation: fade-up 700ms var(--ease) 300ms both; }
.preloader__bar span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #ffd56b); transform-origin: left center; animation: bar-fill 2.1s cubic-bezier(0.45, 0, 0.2, 1) 0.15s both; }
@keyframes bar-fill { from { transform: scaleX(0); } 70% { transform: scaleX(0.82); } to { transform: scaleX(1); } }
@keyframes bar-run { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Navigation progress shimmer (only if the next page takes a moment) ---------- */
.nav-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 60;
	height: 3px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.nav-progress span { display: block; width: 35%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
html.is-navigating .nav-progress { animation: progress-show 0s linear 90ms forwards; }
html.is-navigating .nav-progress span { animation: bar-run 0.9s var(--ease) 90ms infinite; }
@keyframes progress-show { to { opacity: 1; } }

/* ---------- Press feedback ---------- */
.is-pressed { transform: scale(0.97) !important; transition: transform 60ms ease-out !important; }
/* Touch screens: no sticky hover lift after a tap. */
@media (hover: none) {
	.bcard:hover, .action-card:hover, .pcard:hover, .cat-tile:hover .cat-tile__icon, .bcard:hover .bcard__media img { transform: none; }
}

/* ---------- Liquid-glass page transitions (View Transitions API) ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
.app-header, .app-topbar { view-transition-name: bsn-header; }
.bottom-nav { view-transition-name: bsn-nav; }
.app-sidebar { view-transition-name: bsn-sidebar; }
.bn-pill { view-transition-name: bsn-pill; }
.tn-pill { view-transition-name: bsn-tpill; }

/* Chrome stays still: no cross-fade on the bars themselves. */
::view-transition-group(bsn-header),
::view-transition-group(bsn-nav),
::view-transition-group(bsn-sidebar) { animation: none; }
::view-transition-old(bsn-header), ::view-transition-old(bsn-nav), ::view-transition-old(bsn-sidebar) { animation: none; opacity: 0; }
::view-transition-new(bsn-header), ::view-transition-new(bsn-nav), ::view-transition-new(bsn-sidebar) { animation: none; }

/* The content glides in: short and GPU-only (opacity + transform, no blur), so taps feel instant. */
::view-transition-old(root) { animation: 110ms ease-out both vt-out; }
::view-transition-new(root) { animation: 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* The glass tab pill glides between tabs. */
::view-transition-group(bsn-pill), ::view-transition-group(bsn-tpill) { animation-duration: 260ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }

/* Business logo flies from its card into the business page. */
::view-transition-group(*.biz-logo) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }

@media (prefers-reduced-motion: reduce) {
	.preloader { display: none; }
}

.preloader__load { display: grid; justify-items: center; gap: 8px; animation: fade-up 420ms var(--ease) 120ms both; }
.preloader__load small { font-size: var(--fs-12); letter-spacing: 0.08em; color: var(--ink-500); }
.preloader__tag { text-align: center; line-height: 1.35; font-size: 19px; font-weight: 600; }
.preloader__art { position: absolute; left: -12%; right: -12%; bottom: -8px; width: 124%; max-width: none; opacity: 0.32; pointer-events: none; animation: fade-up 420ms var(--ease) 80ms both; }
@media (min-width: 1024px) { .preloader__art { left: 10%; right: 10%; width: 80%; } }