/*
 * App shell (inc/app-shell.php, assets/js/app-shell.js): page
 * transitions, the persistent top bar + tab bar, the offline notice, pull
 * to refresh, and installed-app polish. Tokens only — no new colors.
 */

/* ---- Page transitions -------------------------------------------------
   Cross-document View Transitions: moving between pages (Home ↔ Live ↔
   My Team…) is a quick fade-and-rise of the content instead of a white
   flash. The top bar and tab bar are named separately and not animated,
   so they read as one persistent frame the content changes inside.
   Browsers without support (Firefox today) just navigate normally. */

@view-transition {
	navigation: auto;
}

.top-bar {
	view-transition-name: npl-top-bar;
}

.app-nav {
	view-transition-name: npl-app-nav;
}

::view-transition-group(npl-top-bar),
::view-transition-group(npl-app-nav),
::view-transition-old(npl-top-bar),
::view-transition-new(npl-top-bar),
::view-transition-old(npl-app-nav),
::view-transition-new(npl-app-nav) {
	animation: none;
}

::view-transition-old(root) {
	animation: 90ms ease-in both npl-page-out;
}

::view-transition-new(root) {
	animation: 170ms cubic-bezier(0.2, 0.8, 0.2, 1) both npl-page-in;
}

@keyframes npl-page-out {
	to {
		opacity: 0;
	}
}

@keyframes npl-page-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ---- Offline / connection notice ---------------------------------- */

.npl-net-banner {
	position: fixed;
	z-index: 40;
	left: 50%;
	top: calc(var(--wp--custom--topbar-height) + env(safe-area-inset-top) + var(--space-8));
	display: flex;
	align-items: center;
	gap: var(--space-16);
	width: max-content;
	max-width: calc(100vw - var(--space-32));
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-full);
	background-color: var(--color-text-primary);
	color: var(--color-background);
	box-shadow: var(--shadow-elevation);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-label);
	line-height: var(--line-height-dense);
	transform: translateX(-50%);
}

.npl-net-banner[hidden] {
	display: none;
}

.npl-net-banner--offline::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background-color: var(--color-accent);
}

.npl-net-banner__action {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 var(--space-8);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: var(--font-weight-heading);
	text-decoration: underline;
	cursor: pointer;
}

/* ---- Pull to refresh ----------------------------------------------- */

/* Our gesture replaces the browser's own (Chrome/Android) so there's
   exactly one refresh behaviour, in browser tabs and installed alike. */
html.npl-ptr-enabled,
html.npl-ptr-enabled body {
	overscroll-behavior-y: contain;
}

.npl-ptr {
	--npl-ptr-distance: 0px;
	--npl-ptr-progress: 0;
	position: fixed;
	z-index: 25;
	left: 50%;
	top: calc(var(--wp--custom--topbar-height) + env(safe-area-inset-top) - 44px);
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: 6px var(--space-16) 6px 6px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background-color: var(--color-background);
	color: var(--color-text-secondary);
	box-shadow: var(--shadow-elevation);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-label);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, var(--npl-ptr-distance));
	transition: transform 180ms ease-out, opacity 120ms ease-out;
}

.npl-ptr.is-pulling {
	opacity: calc(0.3 + var(--npl-ptr-progress) * 0.7);
	transition: none;
}

.npl-ptr.is-refreshing {
	opacity: 1;
	transform: translate(-50%, 72px);
}

.npl-ptr__icon {
	display: flex;
	width: 28px;
	height: 28px;
	padding: 4px;
	border-radius: 999px;
	background-color: var(--color-surface);
	transform: rotate(calc(var(--npl-ptr-progress) * 270deg));
}

.npl-ptr__icon svg {
	width: 100%;
	height: 100%;
}

.npl-ptr.is-armed,
.npl-ptr.is-refreshing {
	color: var(--crimson-text);
}

.npl-ptr.is-refreshing .npl-ptr__icon {
	animation: npl-spin 700ms linear infinite;
}

@keyframes npl-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.npl-ptr,
	.npl-ptr__icon {
		transition: none;
	}

	.npl-ptr.is-refreshing .npl-ptr__icon {
		animation: none;
	}
}

@media (min-width: 768px) {
	.npl-ptr {
		display: none;
	}
}

/* ---- Installed-app polish ------------------------------------------ */

/* No grey tap flash or long-press callouts on app controls — :active
   styles are the feedback (design-system.md). */
.app-nav a,
.top-bar__icon-btn,
.btn,
.tabs__tab,
.pitch__token {
	-webkit-tap-highlight-color: transparent;
}

@media (display-mode: standalone) {
	.app-nav,
	.top-bar {
		-webkit-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
	}
}