/* Shared pieces for linden-kit.js: the orb canvas, sticky pins and the CSS 3D phone.
   Loaded by the homepage and every subpage. */

.lm-home,
.lm-page {
	--lm-bg: #061c15;
	--lm-surface: #0b2a20;
	--lm-surface-2: #0f3528;
	--lm-line: #ffffff1a;
	--lm-ink: #eef3e8;
	--lm-muted: #a3b8aa;
	--lm-mint: #b9ecbc;
	--lm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark chrome shared by the homepage and the subpages */

/* Header and sticky download bar */

:is(.lm-home, .lm-page) .site-header {
	background: #061c15b8;
	border-bottom-color: var(--lm-line);
	color: var(--lm-ink);
}

:is(.lm-home, .lm-page) .brand {
	color: var(--lm-ink);
}

:is(.lm-home, .lm-page) .brand-mark {
	background: var(--lm-mint);
	color: #062016;
}

:is(.lm-home, .lm-page) .brand-period {
	color: var(--lm-mint);
}

:is(.lm-home, .lm-page) .main-nav > a,
:is(.lm-home, .lm-page) .nav-dropdown summary {
	color: #c9d8ce;
}

:is(.lm-home, .lm-page) .main-nav > a:hover,
:is(.lm-home, .lm-page) .nav-dropdown summary:hover {
	color: var(--lm-mint);
}

:is(.lm-home, .lm-page) .nav-menu {
	background: var(--lm-surface);
	border: 1px solid var(--lm-line);
	box-shadow: 0 30px 60px #0008;
}

:is(.lm-home, .lm-page) .nav-menu a {
	color: #c9d8ce;
}

:is(.lm-home, .lm-page) .nav-menu a:hover {
	background: var(--lm-surface-2);
	color: var(--lm-mint);
}

:is(.lm-home, .lm-page) .lang-list {
	background: var(--lm-surface);
	border: 1px solid var(--lm-line);
	box-shadow: 0 30px 60px #0008;
	color: #c9d8ce;
}

:is(.lm-home, .lm-page) .lang-list a:hover,
:is(.lm-home, .lm-page) .lang-list a:focus-visible {
	background: var(--lm-surface-2);
	color: var(--lm-mint);
}

:is(.lm-home, .lm-page) .lang-list a[aria-current] {
	color: var(--lm-ink);
}

:is(.lm-home, .lm-page) .lang-select-wrap {
	color: #c9d8ce;
	border-color: var(--lm-line);
}

:is(.lm-home, .lm-page) .lang-select {
	color: inherit;
	background: transparent;
}

:is(.lm-home, .lm-page) .lang-select option {
	color: #1c4130;
}

:is(.lm-home, .lm-page) .nav-cta {
	background: var(--lm-mint);
	color: #062016;
}

:is(.lm-home, .lm-page) .nav-cta:hover {
	background: #dff9d9;
	color: #062016;
}

:is(.lm-home, .lm-page) .mobile-toggle span {
	background: var(--lm-ink);
}

:is(.lm-home, .lm-page) .v5-mobile-download {
	background: #061c15f0;
	border-top-color: var(--lm-line);
}

:is(.lm-home, .lm-page) .v5-mobile-download > span strong {
	color: var(--lm-ink);
}

:is(.lm-home, .lm-page) .v5-mobile-download > span small {
	color: var(--lm-muted);
}

:is(.lm-home, .lm-page) .v5-mobile-download > a {
	background: var(--lm-mint);
	color: #062016;
}

:is(.lm-home, .lm-page) .mobile-panel {
	background: #061c15f5;
	border-color: var(--lm-line);
	color: var(--lm-ink);
	box-shadow: 0 30px 60px #0008;
}

:is(.lm-home, .lm-page) .mobile-panel a {
	border-color: var(--lm-line);
}

/* Shared buttons and links */

:is(.lm-home, .lm-page) .v5-btn-dark {
	background: var(--lm-mint);
	color: #062016;
}

:is(.lm-home, .lm-page) .v5-btn-ghost {
	background: transparent;
	border-color: #ffffff3d;
	color: var(--lm-ink);
}

:is(.lm-home, .lm-page) .v5-round-play {
	background: var(--lm-mint);
	color: #062016;
}

:is(.lm-home, .lm-page) .v5-text-link {
	color: var(--lm-mint);
	border-bottom-color: #b9ecbc80;
}

:is(.lm-home, .lm-page) .v5-section-head p,
:is(.lm-home, .lm-page) .v5-compare .v5-section-head p {
	color: var(--lm-muted);
}

:is(.lm-home, .lm-page) .v5-section-head h2 {
	font-size: clamp(38px, 5vw, 80px);
	letter-spacing: -0.055em;
	line-height: 1.02;
}

:is(.lm-home, .lm-page) .v5-device {
	box-shadow: 0 40px 80px #0009, inset 0 0 0 1px #ffffff40;
}

.lm-orb,
.lm-orb-fallback {
	display: none;
}

html.lm-motion .lm-orb {
	display: block;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

html.lm-motion.lm-no-gl .lm-orb {
	display: none;
}

html.lm-motion.lm-no-gl .lm-orb-fallback {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 36% 30%, #f6f2e6 0%, #b9ecbc 14%, #2f8f5f 45%, #0b3a2a 75%);
	box-shadow: 0 0 120px #b9ecbc55;
	will-change: transform, opacity;
}

/* overflow-x: hidden on body would make it the scroll container and break position: sticky. */
html.lm-motion body {
	overflow-x: clip;
}

.lm-pin {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.lm-dev-face,
.lm-dev-back {
	position: absolute;
	inset: 0;
	border-radius: calc(var(--w) * 0.16);
	backface-visibility: hidden;
}

.lm-dev-face {
	padding: calc(var(--w) * 0.035);
	background: linear-gradient(145deg, #3c4a44, #11160f 40%, #2b3530 70%, #0d110e);
	box-shadow: inset 0 0 0 1.5px #ffffff2a, inset 0 0 0 4px #000;
	transform: translateZ(calc(var(--w) * 0.03));
}

.lm-dev-back {
	display: grid;
	place-items: center;
	background: linear-gradient(150deg, #1d5a41, #0b3024 55%, #08261d);
	box-shadow: inset 0 0 0 1.5px #ffffff22;
	transform: rotateY(180deg) translateZ(calc(var(--w) * 0.03));
	color: var(--lm-mint);
	font-family: Georgia, serif;
	font-size: calc(var(--w) * 0.22);
}

.lm-dev-side {
	position: absolute;
	top: calc(var(--w) * 0.12);
	bottom: calc(var(--w) * 0.12);
	right: calc(var(--w) * -0.03);
	width: calc(var(--w) * 0.06);
	background: linear-gradient(90deg, #0b0f0c, #4a5953 50%, #0b0f0c);
	transform: rotateY(90deg);
}

.lm-dev-screen {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: calc(var(--w) * 0.13);
	background: #f6f7f1;
}

.lm-dev-screen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	opacity: 0;
	will-change: opacity, transform;
}

.lm-dev-screen img:first-child {
	opacity: 1;
}

.lm-dev-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 38%, #b9ecbc 0%, #2f8f5f 30%, #06201700 70%), #061c15;
	will-change: opacity;
}

.lm-dev-island {
	position: absolute;
	left: 50%;
	top: calc(var(--w) * 0.06);
	width: calc(var(--w) * 0.3);
	height: calc(var(--w) * 0.085);
	border-radius: 999px;
	background: #000;
	transform: translateX(-50%) translateZ(1px);
}

.lm-dev-shadow {
	position: absolute;
	left: 50%;
	bottom: 8vh;
	width: min(320px, 28vw);
	height: 40px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, #000000aa, transparent);
	filter: blur(6px);
}