/* Axori home variant — "Orbit".
   The reference's animation — a point cloud of the portrait turning in space —
   in this site's own clothes: the theme background, the accent tokens, the
   display face for the headline and the mono face for every label.
   Loads after home.css, so loader, menu, dock and settings come free. */

body.axi-ob { --ob-gut: clamp(1.25rem, 3vw, 2.75rem); }

/* a slow wash behind the cloud, in the accent — no new colours */
.ob-sky {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(85% 70% at 56% 48%, rgb(var(--acc) / 0.09), transparent 68%);
	animation: ob-breathe 6s ease-in-out infinite;
}
@keyframes ob-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* the same faint column guides the other pages use */
.ob-grid { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.ob-grid span {
	position: absolute;
	top: 0;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg, transparent, rgb(var(--acc-l) / 0.055) 16%, rgb(var(--acc-l) / 0.055) 84%, transparent);
}
.ob-grid span:nth-child(1) { left: 18%; }
.ob-grid span:nth-child(2) { left: 39%; }
.ob-grid span:nth-child(3) { left: 61%; }
.ob-grid span:nth-child(4) { left: 82%; }

.ob-app { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.ob-app > * { pointer-events: auto; }

/* ---------- the cloud ---------- */
.ob-stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none !important;
}
@media (min-width: 1100px) { .ob-stage { left: 14%; } }
.ob-canvas {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2s var(--ease) 0.2s;
}
.ob-canvas.is-on { opacity: 1; }
.ob-canvas.is-off { display: none; }

/* ---------- shared chrome, placed for this layout ----------
   The wordmark, the hero lockup, the top-right cluster and the footer are the
   same components the other designs use (home.css owns their look); this only
   says where they sit on this page. */
.axi-ob .brand { top: var(--ob-gut); left: var(--ob-gut); z-index: 30; }
.axi-ob .axi-topright { z-index: 30; }

/* the lockup reads down the left edge instead of the bottom right */
.axi-ob .axi-hero {
	left: var(--ob-gut);
	right: auto;
	bottom: auto;
	top: 50%;
	z-index: 20;
	max-width: min(34rem, 44vw);
	text-align: left;
	transform: translateY(-50%);
}
.axi-ob .axi-hero .stats { justify-content: flex-start; }

/* email and local time, stacked at the bottom left */
.axi-ob .axi-foot {
	left: var(--ob-gut);
	right: auto;
	bottom: clamp(1rem, 2vw, 1.75rem);
	z-index: 20;
	align-items: flex-start;
	text-align: left;
}
/* ---------- readouts around the head ---------- */
.axi-ob .ob-mk {
	position: absolute;
	z-index: 20;
	display: none;
	margin: 0 !important;
	font-family: ui-monospace, Consolas, monospace;
}
@media (min-width: 1100px) { .axi-ob .ob-mk { display: block; } }
.ob-mk .v {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.9);
}
.ob-mk .d {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgb(var(--acc));
	box-shadow: 0 0 8px rgb(var(--acc));
}
.ob-mk .k {
	display: block;
	margin-top: 0.4rem;
	padding-left: 1.05rem;
	font-size: 8.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.3);
}
.ob-m1 { right: calc(var(--ob-gut) + 1rem); top: 30%; }
.ob-m2 { left: 34%; bottom: 20%; }
.ob-m3 { right: 16%; bottom: 30%; }

/* ---------- phones and tablets ----------
   The cloud is only pushed off-centre from 1100 up. Below that it sits in the
   middle of the screen, so the lockup drops to the foot of the page instead of
   landing across the face. */
@media (max-width: 1099px) {
	.axi-ob .axi-hero {
		top: auto;
		bottom: 9.5rem;
		right: var(--ob-gut);
		max-width: none;
		transform: none;
	}
	.axi-ob .axi-hero.rv,
	.axi-entered .axi-ob .axi-hero.rv { transform: none; }
}
@media (max-width: 767px) {
	.ob-grid span:nth-child(2), .ob-grid span:nth-child(3) { display: none; }
}