/* Owlsora Elements — Hero Section widget
 * Street scene (skyline, storefront, pole camera with a scanning cone) with the
 * camera-bot mascot standing on the pavement. Colors/sizes come from controls as CSS
 * variables on .sph.
 */

.sph {
	--sph-max: 1200px;
	--sph-copy: 62%;
	--sph-pad-top: 76px;
	--sph-pad-x: 16px;
	--sph-sky-top: #CFE5F7;
	--sph-sky-mid: #E6F1F8;
	--sph-sky-bottom: #F8F1E4;
	--sph-sun: #FFE49A;
	--sph-cloud: #FFFFFF;
	--sph-sea-top: #BCD5EE;
	--sph-sea-bottom: #F4F8FC;
	--sph-sand-top: #EFE2C8;
	--sph-sand-bottom: #E4D0A8;
	--sph-bridge: #0B1A3D;
	--sph-cables: #2D8CFF;
	--sph-birds: #0A3FCF;
	--sph-awning: #0B6BF0;
	--sph-window: #8CC1FF;
	--sph-plain: #EEF5FC;
	--sph-eyebrow: #0B6BF0;
	--sph-title: #0B1A3D;
	--sph-pop: #0B6BF0;
	--sph-stroke: #FFFFFF;
	--sph-stroke-w: 4px;
	--sph-shadow: 5px;
	--sph-shadow1: #2D8CFF;
	--sph-shadow2: #0A3FCF;
	--sph-desc: #2A3A66;
	--sph-btn-radius: 10px;
	--sph-btn-min: 240px;
	--sph-btn1-bg: #0B6BF0;
	--sph-btn1-bg-hover: #2F7FF5;
	--sph-btn1-color: #FFFFFF;
	--sph-btn1-edge: #0845B0;
	--sph-btn2-bg: #FFFFFF;
	--sph-btn2-bg-hover: #F7FAFD;
	--sph-btn2-color: #0B1A3D;
	--sph-btn2-border: #0B1A3D;
	--sph-trust-bg: rgba(255, 255, 255, .85);
	--sph-trust-line: rgba(6, 15, 36, .12);
	--sph-trust-title: #0B1A3D;
	--sph-trust-text: #56658A;
	--sph-trust-radius: 14px;
	--sph-m-left: 79%;
	--sph-m-bottom: 6.6vw;
	--sph-m-width: 290px;
	--sph-m-left-m: 60%;
	--sph-m-width-m: 240px;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, var(--sph-sky-top) 0%, var(--sph-sky-mid) 45%, var(--sph-sky-bottom) 85%);
	font-family: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
.sph--plain { background: var(--sph-plain); }
.sph *,
.sph *::before,
.sph *::after { box-sizing: border-box; }
.sph.owe-stretch { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }

/* scene: drawn to the full width and anchored to the bottom */
.sph__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sph__scene svg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }

/* mascot standing on the shore */
.sph__mascot {
	position: absolute;
	z-index: 1;
	left: var(--sph-m-left);
	bottom: var(--sph-m-bottom);
	width: min(var(--sph-m-width), 20vw);
	transform: translateX(-50%);
	pointer-events: none;
}
.sph__mascot .sph__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 14px rgba(11, 26, 61, .28)); transform-origin: 50% 100%; }
.sph--float .sph__mascot .sph__img { animation: sph-hop 2.8s ease-in-out infinite; }
.sph__shadow { position: absolute; left: 14%; right: 14%; bottom: -6px; height: 20px; border-radius: 50%; background: rgba(80, 70, 40, .28); filter: blur(6px); z-index: -1; }
.sph--float .sph__shadow { animation: sph-shad 2.8s ease-in-out infinite; }
.sph__spark { position: absolute; left: 50%; top: -8%; width: 34%; transform: translateX(-50%) scale(0); animation: sph-spark 2.8s ease-out infinite; }

@keyframes sph-hop { 0%, 100% { transform: translateY(0) rotate(0); } 18% { transform: translateY(-16px) rotate(-1.5deg); } 32% { transform: translateY(0) rotate(0); } 44% { transform: translateY(-7px) rotate(1deg); } 56% { transform: translateY(0); } }
@keyframes sph-shad { 0%, 100%, 32%, 56% { transform: scaleX(1); opacity: 1; } 18% { transform: scaleX(.82); opacity: .6; } 44% { transform: scaleX(.9); opacity: .8; } }
@keyframes sph-spark { 0%, 10% { transform: translateX(-50%) scale(0) rotate(0); opacity: 0; } 18% { transform: translateX(-50%) scale(1.15) rotate(8deg); opacity: 1; } 34% { transform: translateX(-50%) scale(.9) rotate(14deg); opacity: 0; } 100% { opacity: 0; } }
@keyframes sph-rise { from { transform: translateY(14px); } to { transform: none; } }

/* layout */
.sph__inner {
	position: relative;
	z-index: 2;
	max-width: var(--sph-max);
	margin: 0 auto;
	padding-top: var(--sph-pad-top);
	padding-bottom: calc(15vw + 40px);
	padding-left: max(var(--sph-pad-x), env(safe-area-inset-left, 0px));
	padding-right: max(var(--sph-pad-x), env(safe-area-inset-right, 0px));
}
.sph__copy { max-width: var(--sph-copy); min-width: 0; animation: sph-rise .6s ease both; }

/* text */
.sph__eyebrow { display: block; margin-bottom: 14px; color: var(--sph-eyebrow); font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.sph .sph__title {
	margin: 0;
	padding: 0;
	color: var(--sph-title);
	font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif;
	font-size: clamp(48px, 6.6vw, 96px);
	font-weight: 400;
	line-height: .98;
	letter-spacing: .005em;
	text-transform: uppercase;
	text-wrap: balance;
}
.sph__pop {
	display: block;
	color: var(--sph-pop);
	-webkit-text-stroke: var(--sph-stroke-w) var(--sph-stroke);
	paint-order: stroke fill;
	text-shadow: var(--sph-shadow) var(--sph-shadow) 0 var(--sph-shadow1), calc(var(--sph-shadow) + 3px) calc(var(--sph-shadow) + 3px) 0 var(--sph-shadow2);
}
.sph .sph__lede { margin: 26px 0 0; max-width: 34em; color: var(--sph-desc); font-size: 20px; font-weight: 500; line-height: 1.65; }

/* buttons */
.sph__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.sph .sph__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: var(--sph-btn-min);
	padding: 20px 28px;
	border: 2px solid transparent;
	border-radius: var(--sph-btn-radius);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sph .sph__btn--primary { background: var(--sph-btn1-bg); color: var(--sph-btn1-color); box-shadow: 0 4px 0 var(--sph-btn1-edge); }
.sph .sph__btn--primary:hover,
.sph .sph__btn--primary:focus-visible { background: var(--sph-btn1-bg-hover); color: var(--sph-btn1-color); transform: translateY(-2px); box-shadow: 0 6px 0 var(--sph-btn1-edge); }
.sph .sph__btn--secondary { background: var(--sph-btn2-bg); color: var(--sph-btn2-color); border-color: var(--sph-btn2-border); box-shadow: 0 4px 0 var(--sph-btn2-border); }
.sph .sph__btn--secondary:hover,
.sph .sph__btn--secondary:focus-visible { background: var(--sph-btn2-bg-hover); color: var(--sph-btn2-color); transform: translateY(-2px); box-shadow: 0 6px 0 var(--sph-btn2-border); }
.sph .sph__btn:focus-visible { outline: 3px solid #2D8CFF; outline-offset: 3px; }
.sph__btn-icon { display: inline-flex; font-size: .85em; }
.sph__btn-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* trust strip */
.sph .sph__trust {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	max-width: 100%;
	background: var(--sph-trust-bg);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid var(--sph-trust-line);
	border-radius: var(--sph-trust-radius);
}
.sph .sph__trust-item { margin: 0; padding: 14px 22px; min-width: 0; border-left: 1px solid var(--sph-trust-line); }
.sph .sph__trust-item:first-child { border-left: 0; }
.sph__trust-item b { display: block; color: var(--sph-trust-title); font-size: 15px; font-weight: 700; line-height: 1.4; }
.sph__trust-item span { display: block; color: var(--sph-trust-text); font-size: 14px; line-height: 1.4; }

@media (max-width: 900px) {
	.sph__inner { padding-top: 44px; padding-bottom: calc(min(var(--sph-m-width-m), 44vw) * 1.3 + 9vw + 70px); }
	.sph__copy { max-width: none; }
	.sph__mascot { left: var(--sph-m-left-m); bottom: 7vw; width: min(var(--sph-m-width-m), 44vw); }
	.sph .sph__btn { min-width: 0; flex: 1 1 220px; }
}
@media (max-width: 520px) {
	.sph .sph__trust-item { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--sph-trust-line); }
	.sph .sph__trust-item:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sph *,
	.sph__copy { animation: none !important; transition: none !important; }
	.sph__spark { display: none; }
}

/* Full width: drop the padding of a container that only holds this widget */
.e-con:has(> .elementor-widget-ow-hero:only-child .owe-stretch),
.e-con:has(> .e-con-inner > .elementor-widget-ow-hero:only-child .owe-stretch) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
	padding: 0;
}
.elementor-widget-wrap:has(> .elementor-widget-ow-hero:only-child .owe-stretch) { padding: 0 !important; }
.elementor-section:has(.elementor-widget-wrap > .elementor-widget-ow-hero:only-child .owe-stretch) { padding-top: 0; padding-bottom: 0; }
.elementor-widget-ow-hero:has(.owe-stretch) { margin-top: 0; margin-bottom: 0; --kit-widget-spacing: 0px; }

/* pole camera: scanning cone + blinking LED */
.sph__cone { transform-origin: 864px 316px; animation: sph-sweep 5s ease-in-out infinite; }
.sph__led { animation: sph-blink 1.6s infinite; }
@keyframes sph-sweep { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes sph-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sph__cone, .sph__led { animation: none; } }