/* On Duty — courier / delivery fleet scene (app-wide) */

body.onduty-app-page {
	--od-header-height: 88px;
	--od-footer-height: 0px;
	--od-fleet-float-opacity: 0.28;
	--od-fleet-pin-opacity: 0.55;
	--od-fleet-pin-color: #007aff;
	--od-fleet-pin-glow: rgba(0, 122, 255, 0.25);
	--od-fleet-orb-a: rgba(0, 122, 255, 0.1);
	--od-fleet-orb-b: rgba(0, 180, 120, 0.08);
}

/* Keep header above progress bar; footer above background animations */
body.onduty-app-page header#masthead {
	position: relative;
	z-index: 200;
}

.onduty-app-footer {
	position: relative;
	z-index: 20;
	isolation: isolate;
}

html.onduty-theme-light body.onduty-app-page {
	--od-fleet-float-opacity: 0.36;
	--od-fleet-pin-opacity: 0.6;
	--od-fleet-pin-color: #0066dd;
	--od-fleet-pin-glow: rgba(0, 102, 221, 0.28);
	--od-fleet-orb-a: rgba(0, 122, 255, 0.14);
	--od-fleet-orb-b: rgba(0, 160, 100, 0.1);
}

.onduty-fleet-scene {
	pointer-events: none;
	position: fixed;
	top: var(--od-header-height);
	right: 0;
	bottom: var(--od-footer-height);
	left: 0;
	z-index: 0;
	overflow: hidden;
}

body.onduty-app-page #page,
body.onduty-app-page #content,
body.onduty-app-page .wizard-section,
body.onduty-app-page .onduty-login-standalone,
body.onduty-app-page .onduty-register-standalone,
body.onduty-app-page .onduty-password-reset-standalone,
body.onduty-app-page .onduty-hr-standalone,
body.onduty-app-page .site-content {
	position: relative;
	z-index: 1;
}

/* Subtle: orbs + pins only (legacy) */
.onduty-fleet-scene--subtle .onduty-fleet-float {
	display: none;
}

.onduty-fleet-scene--subtle {
	--od-fleet-float-opacity: 0.22;
}

/* App-wide fleet (wizard, login, register, password reset, profile) */
.onduty-fleet-scene--app,
.onduty-fleet-scene--wizard {
	--od-fleet-float-opacity: 0.38;
	--od-fleet-pin-opacity: 0.5;
	--od-fleet-orb-a: rgba(0, 122, 255, 0.16);
	--od-fleet-orb-b: rgba(0, 180, 120, 0.12);
}

html.onduty-theme-light .onduty-fleet-scene--app,
html.onduty-theme-light .onduty-fleet-scene--wizard {
	--od-fleet-float-opacity: 0.44;
	--od-fleet-pin-opacity: 0.55;
	--od-fleet-orb-a: rgba(0, 122, 255, 0.2);
	--od-fleet-orb-b: rgba(0, 160, 100, 0.14);
}

/* Embedded shell: fleet behind content on every app page */
.onduty-app-shell {
	position: relative;
	overflow: hidden;
	min-height: 0;
}

.onduty-app-shell > .onduty-fleet-scene {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.onduty-app-shell > .onduty-wizard-progress,
.onduty-app-shell > .wizard-step,
.onduty-app-shell > .wizard-truck-bg,
.onduty-app-shell > .login-register-wrapper,
.onduty-app-shell > .password-reset-wrapper,
.onduty-app-shell > .welcome-wrapper,
.onduty-app-shell > .last-stap-wrapper,
.onduty-app-shell > .onduty-hr-dashboard,
.onduty-app-shell > p.password-reset-back {
	position: relative;
	z-index: 2;
}

.onduty-app-shell > .wizard-truck-bg {
	z-index: 1;
}

#onduty-wizard {
	min-height: 0;
}

/* Transparent layers so fleet animation is visible */
body.page-template-on-duty-php .wizard-step,
body.page-id-115 .onduty-login-standalone,
body.page-id-130 .onduty-register-standalone,
body.page-id-500 .onduty-password-reset-standalone,
body.page-id-1060 .onduty-hr-standalone,
body.page-template-profile-php .onduty-app-shell .wizard-step,
html.onduty-theme-dark body.page-template-on-duty-php .wizard-step,
html.onduty-theme-light body.page-template-on-duty-php .wizard-step,
html.onduty-theme-dark body.page-id-115 .onduty-login-standalone,
html.onduty-theme-light body.page-id-115 .onduty-login-standalone,
html.onduty-theme-dark body.page-id-130 .onduty-register-standalone,
html.onduty-theme-light body.page-id-130 .onduty-register-standalone,
html.onduty-theme-dark body.page-id-500 .onduty-password-reset-standalone,
html.onduty-theme-light body.page-id-500 .onduty-password-reset-standalone,
html.onduty-theme-dark body.page-id-1060 .onduty-hr-standalone,
html.onduty-theme-light body.page-id-1060 .onduty-hr-standalone {
	background-color: transparent !important;
	background-image: none !important;
}

body.page-id-115 #content,
body.page-id-115 .site-content,
body.page-id-130 #content,
body.page-id-130 .site-content,
body.page-id-500 #content,
body.page-id-500 .site-content,
body.page-id-1060 #content,
body.page-id-1060 .site-content,
body.page-id-1060 .entry-content,
body.page-template-profile-php #content,
body.page-template-profile-php .site-content {
	background: transparent !important;
}

body.page-id-115 .login-register-wrapper,
body.page-id-130 .login-register-wrapper,
body.page-id-500 .password-reset-wrapper,
body.page-template-profile-php .welcome-wrapper,
body.page-template-profile-php .last-stap-wrapper {
	background: transparent !important;
}

html.onduty-theme-light body.onduty-app-page.page-id-115 .entry-content,
html.onduty-theme-light body.onduty-app-page.page-id-115 .site-content,
html.onduty-theme-light body.onduty-app-page.page-id-115 #content,
html.onduty-theme-light body.onduty-app-page.page-id-115 .elementor-section,
html.onduty-theme-light body.onduty-app-page.page-id-115 .e-con,
html.onduty-theme-light body.onduty-app-page.page-id-130 .entry-content,
html.onduty-theme-light body.onduty-app-page.page-id-130 .site-content,
html.onduty-theme-light body.onduty-app-page.page-id-130 #content,
html.onduty-theme-light body.onduty-app-page.page-id-130 .elementor-section,
html.onduty-theme-light body.onduty-app-page.page-id-130 .e-con,
html.onduty-theme-light body.onduty-app-page.page-id-500 .entry-content,
html.onduty-theme-light body.onduty-app-page.page-id-500 .site-content,
html.onduty-theme-light body.onduty-app-page.page-id-500 #content,
html.onduty-theme-light body.onduty-app-page.page-id-1060 .entry-content,
html.onduty-theme-light body.onduty-app-page.page-id-1060 .site-content,
html.onduty-theme-light body.onduty-app-page.page-id-1060 #content {
	background: transparent !important;
}

body.page-id-115 .onduty-login-standalone.onduty-app-shell,
body.page-id-130 .onduty-register-standalone.onduty-app-shell,
body.page-id-500 .onduty-password-reset-standalone.onduty-app-shell,
body.page-id-1060 .onduty-hr-standalone.onduty-app-shell {
	min-height: 55vh;
	padding: 32px 20px 40px;
}

/* HR dashboard must fill viewport; 55vh clips the fleet scene. */
body.page-id-1060 .onduty-hr-standalone.onduty-app-shell {
	min-height: calc(100vh - var(--od-header-height, 88px) - var(--od-footer-height, 76px));
}

body.page-template-profile-php .onduty-app-shell {
	min-height: 50vh;
	padding-bottom: 24px;
}

.onduty-fleet-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(42px);
	animation: odFleetOrb 12s ease-in-out infinite;
}

.onduty-fleet-orb--1 {
	width: 240px;
	height: 240px;
	top: 6%;
	right: 4%;
	background: var(--od-fleet-orb-a);
}

.onduty-fleet-orb--2 {
	width: 190px;
	height: 190px;
	top: 62%;
	left: -2%;
	background: var(--od-fleet-orb-b);
	animation-delay: -4s;
	animation-duration: 14s;
}

.onduty-fleet-orb--3 {
	width: 150px;
	height: 150px;
	top: 42%;
	right: 26%;
	background: var(--od-fleet-orb-a);
	animation-delay: -8s;
	animation-duration: 16s;
	opacity: 0.65;
}

/* App / subtle: no route/packages (avoid footer overlap) */
.onduty-fleet-scene--subtle .onduty-fleet-route,
.onduty-fleet-scene--subtle .onduty-fleet-package,
.onduty-fleet-scene--app .onduty-fleet-route,
.onduty-fleet-scene--app .onduty-fleet-package,
.onduty-fleet-scene--wizard .onduty-fleet-route,
.onduty-fleet-scene--wizard .onduty-fleet-package {
	display: none !important;
}

/* Soft delivery route — mid viewport, not over footer */
.onduty-fleet-route {
	position: absolute;
	left: 0;
	right: 0;
	top: 42%;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 122, 255, 0.15) 15%,
		rgba(0, 122, 255, 0.35) 50%,
		rgba(0, 122, 255, 0.15) 85%,
		transparent 100%
	);
	mask-image: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 22px);
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 22px);
	animation: odFleetRoutePulse 4s ease-in-out infinite;
}

html.onduty-theme-light .onduty-fleet-route {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 102, 221, 0.12) 15%,
		rgba(0, 102, 221, 0.28) 50%,
		rgba(0, 102, 221, 0.12) 85%,
		transparent 100%
	);
}

.onduty-fleet-float {
	position: absolute;
	opacity: var(--od-fleet-float-opacity);
	filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.22));
	animation: odFleetFloat 9s ease-in-out infinite;
	will-change: transform;
}

html.onduty-theme-light .onduty-fleet-float {
	filter: drop-shadow(0 8px 20px rgba(0, 60, 140, 0.16));
}

.onduty-fleet-float--truck {
	top: 12%;
	right: 6%;
	width: 92px;
	height: auto;
	animation-duration: 11s;
}

.onduty-fleet-float--car {
	top: 40%;
	right: 14%;
	width: 76px;
	height: auto;
	animation-delay: -2s;
	animation-duration: 10s;
}

.onduty-fleet-float--scooter {
	top: 52%;
	left: 4%;
	width: 68px;
	height: auto;
	animation-delay: -4s;
	animation-duration: 8.5s;
}

.onduty-fleet-float--bicycle {
	top: 56%;
	left: 10%;
	width: 58px;
	height: auto;
	animation-delay: -6s;
	animation-duration: 9.5s;
}

/* App pages: pull vehicles slightly inward so they are visible beside content */
.onduty-fleet-scene--app .onduty-fleet-float--truck,
.onduty-fleet-scene--wizard .onduty-fleet-float--truck {
	top: 14%;
	right: 8%;
	width: 100px;
}

.onduty-fleet-scene--app .onduty-fleet-float--car,
.onduty-fleet-scene--wizard .onduty-fleet-float--car {
	top: 36%;
	right: 10%;
	width: 84px;
}

.onduty-fleet-scene--app .onduty-fleet-float--scooter,
.onduty-fleet-scene--wizard .onduty-fleet-float--scooter {
	top: 48%;
	left: 8%;
	width: 76px;
}

.onduty-fleet-scene--app .onduty-fleet-float--bicycle,
.onduty-fleet-scene--wizard .onduty-fleet-float--bicycle {
	top: 62%;
	left: 12%;
	width: 64px;
}

.onduty-fleet-scene--app .onduty-fleet-pin,
.onduty-fleet-scene--wizard .onduty-fleet-pin {
	width: 14px;
	height: 14px;
}

.onduty-fleet-pin {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--od-fleet-pin-color);
	box-shadow: 0 0 0 0 var(--od-fleet-pin-glow);
	opacity: var(--od-fleet-pin-opacity, 0.55);
	animation: odFleetPin 2.6s ease-in-out infinite;
}

.onduty-fleet-pin--1 { top: 26%; right: 18%; }
.onduty-fleet-pin--2 { top: 48%; right: 32%; animation-delay: 0.7s; }
.onduty-fleet-pin--3 { top: 68%; right: 12%; animation-delay: 1.4s; }

/* Moving packages along route */
.onduty-fleet-package {
	position: absolute;
	top: calc(42% - 6px);
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: linear-gradient(135deg, #ffb347 0%, #ff8c00 100%);
	box-shadow: 0 4px 12px rgba(255, 140, 0, 0.45);
	animation: odFleetPackage 14s linear infinite;
	opacity: 0.85;
}

.onduty-fleet-package--1 {
	left: -2%;
	animation-duration: 16s;
}

.onduty-fleet-package--2 {
	left: -2%;
	animation-duration: 20s;
	animation-delay: -7s;
	width: 8px;
	height: 8px;
}

@keyframes odFleetOrb {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-12px, 16px) scale(1.08); }
}

@keyframes odFleetFloat {
	0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
	33% { transform: translateY(-16px) translateX(10px) rotate(2deg); }
	66% { transform: translateY(-6px) translateX(-6px) rotate(-1deg); }
}

@keyframes odFleetPin {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 var(--od-fleet-pin-glow);
	}
	50% {
		transform: scale(1.2);
		box-shadow: 0 0 0 12px transparent;
	}
}

@keyframes odFleetRoutePulse {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}

@keyframes odFleetPackage {
	0% { transform: translateX(0) translateY(0); opacity: 0; }
	8% { opacity: 0.9; }
	92% { opacity: 0.9; }
	100% { transform: translateX(105vw) translateY(-4px); opacity: 0; }
}

/* ── Homepage wizard progress + trust badges ─────────────────── */

.onduty-wizard-progress {
	position: relative;
	z-index: 15;
	max-width: 520px;
	margin: 5px auto 28px;
	padding: 0 20px;
}

.onduty-wizard-progress__label {
	display: block;
	margin-bottom: 10px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8b93a3;
	text-align: center;
}

html.onduty-theme-light .onduty-wizard-progress__label {
	color: #5c6370;
}

.onduty-wizard-progress__track {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

html.onduty-theme-light .onduty-wizard-progress__track {
	background: rgba(0, 38, 188, 0.12);
}

.onduty-wizard-progress__fill {
	display: block;
	height: 100%;
	width: 16.66%;
	border-radius: 999px;
	background: linear-gradient(90deg, #007aff 0%, #0026bc 100%);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.onduty-trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 0 12px;
}

.onduty-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid rgba(0, 122, 255, 0.25);
	background: rgba(0, 122, 255, 0.08);
	font-family: "Josefin Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #e8eaed;
	backdrop-filter: blur(6px);
}

html.onduty-theme-light .onduty-trust-badge {
	color: #1a1d24;
	background: rgba(255, 255, 255, 0.85);
	border-color: rgba(0, 102, 221, 0.2);
}

.onduty-trust-badge__icon {
	font-size: 18px;
	line-height: 1;
}

.wizard-step-1 .welcome-wrapper > img {
	animation: odFleetFloat 8s ease-in-out infinite;
	opacity: 0.92;
}

.wizard-step-1 .onduty-warum-link {
	display: inline-block;
	margin-top: 20px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #007aff !important;
	text-decoration: underline;
}

.wizard-step-1 .onduty-warum-link:hover {
	color: #4da3ff !important;
}

html:not([data-onduty-lang="en"]) .wizard-step-1 .od-i18n[data-lang="de"],
html[data-onduty-lang="de"] .wizard-step-1 .od-i18n[data-lang="de"],
html:not([data-onduty-lang="en"]) .onduty-wizard-progress .od-i18n[data-lang="de"],
html[data-onduty-lang="de"] .onduty-wizard-progress .od-i18n[data-lang="de"] {
	display: inline !important;
}

html:not([data-onduty-lang="en"]) .wizard-step-1 .od-i18n[data-lang="en"],
html[data-onduty-lang="de"] .wizard-step-1 .od-i18n[data-lang="en"],
html:not([data-onduty-lang="en"]) .onduty-wizard-progress .od-i18n[data-lang="en"],
html[data-onduty-lang="de"] .onduty-wizard-progress .od-i18n[data-lang="en"] {
	display: none !important;
}

html[data-onduty-lang="en"] .wizard-step-1 .od-i18n[data-lang="en"],
html[data-onduty-lang="en"] .onduty-wizard-progress .od-i18n[data-lang="en"] {
	display: inline !important;
}

html[data-onduty-lang="en"] .wizard-step-1 .od-i18n[data-lang="de"],
html[data-onduty-lang="en"] .onduty-wizard-progress .od-i18n[data-lang="de"] {
	display: none !important;
}

.wizard-step-1 h1 .od-i18n,
.wizard-step-1 p .od-i18n {
	display: block !important;
}

@media (prefers-reduced-motion: reduce) {
	.onduty-fleet-orb,
	.onduty-fleet-float,
	.onduty-fleet-pin,
	.onduty-fleet-package,
	.onduty-fleet-route,
	.wizard-step-1 .welcome-wrapper > img {
		animation: none !important;
	}

	.onduty-wizard-progress__fill {
		transition: none;
	}
}

@media (max-width: 768px) {
	.onduty-fleet-scene {
		display: none !important;
	}

	/* Keep animation visible on HR portal even on mobile/tablet. */
	body.page-id-1060 .onduty-fleet-scene,
	body.page-id-1060 .onduty-fleet-scene--app {
		display: block !important;
	}

	.onduty-trust-badges {
		flex-direction: column;
		align-items: stretch;
	}

	.onduty-trust-badge {
		justify-content: center;
	}
}